norma-library 0.6.986 → 0.6.988

package/.storybook/{preview.ts → preview.tsx}

@@ -1,6 +1,17 @@
 import type { Preview } from '@storybook/react';
+import { themes } from '../src/helpers';
+import { NormaProvider } from '../src/providers/NormaProvider';
 
 const preview: Preview = {
+  decorators: [
+    (Story) => {
+      return (
+        <NormaProvider theme={themes.light}>
+          <Story />
+        </NormaProvider>
+      );
+    }
+  ],
   parameters: {
     docs: {
       source: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.986",
+  "version": "0.6.988",
   "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/Card.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { ColorVariant } from '@/types';
 import { Card as MuiCard } from '@mui/material';
-import { CardBaseProps } from '../interfaces';
-import { palette } from '../helpers';
+import React from 'react';
 import styled from 'styled-components';
-import { ColorVariant } from '@/types';
+import { palette } from '../helpers';
+import { CardBaseProps } from '../interfaces';
 
 const colorMap: Record<ColorVariant, string> = {
   inherit: palette.inherit,

package/src/components/ChatMessage.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { ChatMessageProps } from '@/interfaces';
 import { Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { ChatMessageProps } from '@/interfaces';
+import React from 'react';
+import { olosPalette } from '../helpers';
 
 const Item = styled(Box)<{
   orient?: string;
 }>(({ orient }) => ({
-  borderColor: '#ccc',
   display: 'flex',
   position: 'relative',
   width: '100%',
@@ -15,28 +15,32 @@ const Item = styled(Box)<{
   alignItems: 'center',
 }));
 
-const ContainerStyled = styled(Box)({
+const ContainerStyled = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   minWidth: '640px',
-  backgroundColor: '#F0F0F0',
-  padding: '10px',
-});
+  backgroundColor: theme?.palette?.grey?.[100] || '#F0F0F0',
+  padding: theme?.spacing?.(1.25) || '10px',
+}));
 
 const BoxStyled = styled(Box)<{
   orient?: string;
-}>(({ orient }) => ({
+}>(({ theme, orient }) => ({
   width: '70%',
-  backgroundColor: orient === 'replay' ? '#E18B50' : '#FFF',
-  color: orient === 'replay' ? '#FFF' : '#4D4F5C',
+  backgroundColor: orient === 'replay'
+    ? theme?.palette?.primary?.main || olosPalette.primary.main
+    : theme?.palette?.background?.paper || '#FFF',
+  color: orient === 'replay'
+    ? theme?.palette?.primary?.contrastText || '#FFF'
+    : theme?.palette?.text?.primary || '#4D4F5C',
   borderTopLeftRadius: 30,
   borderTopRightRadius: 30,
   borderBottomLeftRadius: orient === 'me' ? 2 : 30,
   borderBottomRightRadius: orient === 'me' ? 30 : 2,
-  marginLeft: orient === 'replay' ? '10px' : 0,
-  marginRight: orient === 'me' ? '10px' : 0,
-  padding: 20,
+  marginLeft: orient === 'replay' ? theme?.spacing?.(1.25) || '10px' : 0,
+  marginRight: orient === 'me' ? theme?.spacing?.(1.25) || '10px' : 0,
+  padding: theme?.spacing?.(2.5) || 20,
 }));
 
 export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
@@ -48,31 +52,38 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
           <BoxStyled orient={item.send}>
             <Typography
               variant="subtitle2"
-              style={{
+              sx={{
                 marginBottom: '5px',
-                font: 'normal normal 600 16px/20px Source Sans Pro',
+                fontWeight: 600,
+                fontSize: '16px',
+                lineHeight: '20px',
+                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
               }}
             >
               {item.name}
             </Typography>
             <Typography
               variant="body1"
-              style={{
-                font: 'normal normal normal 16px/20px Source Sans Pro',
+              sx={{
+                fontSize: '16px',
+                lineHeight: '20px',
+                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
               }}
             >
               {item.message}
             </Typography>
             <Typography
               variant="caption"
-              style={{
+              sx={{
                 position: 'absolute',
                 bottom: '-18px',
                 left: item.send === 'me' ? 0 : 'auto',
                 right: item.send === 'me' ? 'auto' : 0,
-                font: 'normal normal normal 11px/13px Source Sans Pro',
+                fontSize: '11px',
+                lineHeight: '13px',
+                fontFamily: theme => theme?.typography?.fontFamily || 'Source Sans Pro',
                 opacity: 0.5,
-                color: '#4D4F5C',
+                color: theme => theme?.palette?.text?.secondary || '#4D4F5C',
               }}
             >
               {item.time}

package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts

@@ -17,7 +17,7 @@ export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string
 `;
 
 export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
-  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
+  background-color: ${props => (props.direction === 'I' ? props.theme.palette.background.paper : props.theme.palette.primary.main)};
   border: 2px solid transparent;
   border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
   box-sizing: border-box;
@@ -29,20 +29,20 @@ export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>
   transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 
   &.is-highlight {
-    border: 2px solid #8a8888;
+    border: 2px solid ${props => props.theme.palette.info.light};
   }
 
   &.is-interactive {
     cursor: pointer;
 
     &:hover {
-      border: 2px solid #8a8888;
+      border: 2px solid ${props => props.theme.palette.primary.light};
     }
   }
 `;
 
 export const ChatMessageDateStyle: any = styled(Typography)`
-  color: #43425d;
+  color: ${props => props.theme.palette.text.secondary};
   opacity: 0.5;
 `;
 

package/src/components/IconButton.tsx

@@ -1,34 +1,43 @@
-import React from 'react';
+import { ButtonVariant, ColorVariant } from '@/types';
 import { IconButton as MuiIconButton } from '@mui/material';
-import { IconButtonBaseProps } from '../interfaces';
-import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
-import { ButtonVariant, ColorVariant } from '@/types';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
+import React from 'react';
+import { IconButtonBaseProps } from '../interfaces';
 
 const IconButtonStyled = styled(MuiIconButton)<{
   circle: string;
   color: ColorVariant;
   variant: ButtonVariant;
   cursor: string;
-}>(({ circle, color, variant, cursor }) => ({
-  borderRadius: circle === 'true' ? 99 : 5,
-  border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
-  backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
-  cursor: cursor,
-}));
+}>(({ theme, circle, color, variant, cursor }) => {
+  const colorMap: Record<ColorVariant, string> = {
+    inherit: theme.palette.text.primary,
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    error: theme.palette.error.main,
+    warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
+    success: theme.palette.success.main,
+  };
+
+  return {
+    borderRadius: circle === 'true' ? 99 : 5,
+    border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
+    backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
+    cursor: cursor,
+
+    '&:hover': {
+      backgroundColor:
+        variant === 'contained'
+          ? theme.palette.action.hover
+          : variant === 'outlined'
+          ? theme.palette.action.hover
+          : 'none',
+    },
+  };
+});
 
 export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
-  
   return (
     <IconButtonStyled circle={`${circle}`} color="primary" variant="text" cursor="default" {...props}>
       {children}

package/src/components/Icons.tsx

@@ -1,10 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import styled from '@emotion/styled';
 import { SvgIconComponent } from '@mui/icons-material';
-import { iconsSVG } from './Svgs';
-import { IconColors, IconScale } from '../types';
+import { useTheme } from '@mui/material';
+import React, { FunctionComponent } from 'react';
 import { IconsProps, SvgProps } from '../interfaces/Icons';
-import styled from '@emotion/styled';
-import { palette } from '../helpers';
+import { IconScale } from '../types';
+import { iconsSVG } from './Svgs';
 
 export const Svg = styled.svg<SvgProps>(
   {
@@ -24,19 +24,6 @@ const scaleSize: Partial<Record<IconScale, number>> = {
   '3xlarge': 40,
 };
 
-const colors: Record<IconColors, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  info: palette.info,
-  success: palette.success,
-  warning: palette.warning,
-  white: palette.white,
-  black: palette.black,
-};
-
-
 export const Icons: FunctionComponent<IconsProps> = ({
   icon,
   scale,
@@ -44,6 +31,22 @@ export const Icons: FunctionComponent<IconsProps> = ({
   color = 'inherit',
   ...props
 }: IconsProps) => {
+
+  const theme = useTheme()
+
+  const colors: Record<string, string> = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    error: theme.palette.error.main,
+    info: theme.palette.info.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    action: theme.palette.action.disabled,
+    inherit: theme.palette.text.primary,
+    white: '#ffffff',
+    black: '#000000',
+  };
+
   let width = 24;
   let height = 24;
   if (scale) {
@@ -83,4 +86,4 @@ export const Icons: FunctionComponent<IconsProps> = ({
       )}
     </Svg>
   );
-};
+};

package/src/components/NormaChatMessageBalloon/styles.ts

@@ -10,16 +10,14 @@ export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string
   display: flex;
   margin-bottom: 8px;
   flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};
-  justify-content: flex-start;
-  align-items: flex-start;
-  vertical-align: middle;
+
   &:last-child {
     margin-bottom: 0px;
   }
 `;
 
 export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
-  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
+  background-color: ${props => (props.direction === 'I' ? props.theme.palette.background.paper : props.theme.palette.primary.main)};
   border: 2px solid transparent;
   border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
   box-sizing: border-box;
@@ -31,22 +29,21 @@ export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>
   transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 
   &.is-highlight {
-    border: 2px solid #8a8888;
+    border: 2px solid ${props => props.theme.palette.info.light};
   }
 
   &.is-interactive {
     cursor: pointer;
 
     &:hover {
-      border: 2px solid #8a8888;
+      border: 2px solid ${props => props.theme.palette.primary.light};
     }
   }
 `;
 
 export const ChatMessageDateStyle: any = styled(Typography)`
-  color: #43425d;
+  color: ${props => props.theme.palette.text.secondary};
   opacity: 0.5;
-  margin-top: 7px;
 `;
 
 export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
@@ -56,4 +53,4 @@ export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }
   flex: 1;
   justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
   padding: 8px;
-`;
+`;

package/src/components/RadioGroup.tsx

@@ -16,7 +16,7 @@ const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
 
 export const RadioGroup = ({ ...props }: RadioBaseProps) => {
   const { onChange } = props;
-  
+
   return (
     <FormControl disabled={props.disabled}>
       <FormLabel id={props.id}>{props.label}</FormLabel>

package/src/components/RangerSlider.tsx

@@ -1,23 +1,11 @@
 import React from 'react';
 import { Box, Slider as MuiSlider, Typography } from '@mui/material';
-import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
 import { RangerSliderBaseProps } from '@/interfaces/RangerSlider';
 
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
-const RangerSliderStyled = styled(MuiSlider)(() => ({
+const RangerSliderStyled = styled(MuiSlider)(({ theme }) => ({
   height: 8,
-  color: colorMap['primary'],
+    color: theme.palette.primary.main,
   '& .MuiSlider-track': {
     border: 'none',
   },
@@ -25,7 +13,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
     height: 18,
     width: 18,
     backgroundColor: '#FFF',
-    border: `2px solid ${colorMap['primary']}`,
+    border: `2px solid ${theme.palette.primary.main}`,
     '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
       boxShadow: 'inherit',
     },
@@ -34,7 +22,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
       height: '8px',
       position: 'absolute',
       display: 'block',
-      background: colorMap['primary'],
+      background: theme.palette.primary.main,
     },
   },
   '& .MuiSlider-valueLabel': {
@@ -43,7 +31,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
     top: 48,
     position: 'absolute',
     transition: 'none',
-    color: colorMap['primary'],
+    color: theme.palette.primary.main,
     '&:before': {
       bottom: 'inherit',
       top: '-8px',

package/src/components/Table/components/pagination/styles.tsx

@@ -1,6 +1,6 @@
-import styled from "styled-components";
+import { styled } from "@mui/material/styles";
 
-export const Pagination = styled.div`
+export const Pagination = styled('div')`
   width: 100%;
   margin: 24px 0 0 0;
   display: flex;
@@ -9,21 +9,21 @@ export const Pagination = styled.div`
     display: flex;
     gap: 8px;
     .button {
-      border: 1px solid #E8E9EC;
-      background: #fff;
+      border: 1px solid ${props => props.theme.palette.divider};
+      background: ${props => props.theme.palette.background.paper};
       border-radius: 4px;
-      color: #4D4F5C;
+      color: ${props => props.theme.palette.text.primary};
       cursor: pointer;
       &:disabled {
         opacity: 0.4;
       }
     }
     .button-active {
-      border: 1px solid #FFDB9F;
-      background: #FFDB9F;
-      color: #B74616;
+      border: 1px solid ${props => props.theme.palette.primary.light};
+      background: ${props => props.theme.palette.primary.main};
+      color: ${props => props.theme.palette.primary.contrastText};
       border-radius: 4px;
       cursor: pointer;
     }
   }
-`
+`

package/src/components/Tabs.tsx

@@ -1,29 +1,17 @@
-import React from 'react';
 import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
+import { styled, ThemeOptions, useTheme } from '@mui/material/styles';
+import React from 'react';
 import { TabPanelProps, TabsBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
 
 const TabsStyled = styled(MuiTabs)<{
-  color: ColorVariant;
-}>(({ color }) => ({
+  theme: ThemeOptions;
+}>(({ theme }) => ({
   borderBottom: '1px solid #e8e8e8',
   '& .Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '& .MuiTabs-indicator': {
-    backgroundColor: colorMap[color],
+    backgroundColor: theme.palette.primary.main,
   },
   '& .MuiButtonBase-root': {
     textTransform: 'none',
@@ -32,20 +20,19 @@ const TabsStyled = styled(MuiTabs)<{
 
 interface StyledTabProps {
   label: string;
-  color: ColorVariant;
 }
 
-const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme, color }) => ({
+const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme }) => ({
   textTransform: 'none',
   fontWeight: theme.typography.fontWeightRegular,
   fontSize: theme.typography.pxToRem(15),
   marginRight: theme.spacing(1),
-  color: '#666666',
+  color: theme.palette.text.secondary,
   padding: '5px 15px',
   top: '5px',
   minWidth: '60px',
   '&.Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '&.Mui-focusVisible': {
     backgroundColor: 'rgba(100, 95, 228, 0.32)',
@@ -80,6 +67,7 @@ function a11yProps(index: number) {
 }
 
 export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsBaseProps) => {
+  const muiTheme = useTheme()
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -90,8 +78,8 @@ export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsB
   return (
     <Box sx={{ width: '100%' }}>
       <Box>
-        <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
-          {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
+        <TabsStyled value={value} onChange={handleChange} aria-label="basic tabs example" {...props} theme={muiTheme}>
+          {data && data.map((item, key) => <TabStyled label={item.label} {...a11yProps(key)} />)}
         </TabsStyled>
       </Box>
       {data &&

package/src/components/Tag.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
 import { Chip as MuiTag } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
+import React from 'react';
 import { TagBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
 
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
 
-const TagStyled = styled(MuiTag)({});
+const TagStyled = styled(MuiTag)({
+  color: '#FFFF',
+});
 
 export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
-  
+  const theme = useTheme()
+
+  const colorMap: Record<string, string> = {
+  primary: theme.palette.primary.main,
+  secondary: theme.palette.secondary.main,
+  error: theme.palette.error.main,
+  warning: theme.palette.warning.main,
+  info: theme.palette.info.main,
+  success: theme.palette.success.main,
+};
   return (
     <TagStyled
       label={label}

package/src/components/TimeLine/TimeLine.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 
-import { Typography } from '@mui/material';
 import {
   Timeline,
-  TimelineItem,
-  TimelineSeparator,
   TimelineConnector,
   TimelineContent,
   TimelineDot,
+  TimelineItem,
   timelineItemClasses,
+  TimelineSeparator,
 } from '@mui/lab';
+import { Typography } from '@mui/material';
 
-import { palette } from '../../helpers';
-import { ColorVariant } from '@/types';
+import { ThemeOptions, useTheme } from '@mui/material/styles';
 import styled from 'styled-components';
 
 export interface TimeLineData {
@@ -23,23 +22,12 @@ export interface TimeLineData {
 
 interface TimeLineProps {
   data: TimeLineData[];
-  theme?: ColorVariant;
-  color?: string;
+  theme?: ThemeOptions;
 }
 
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  // primary: '#DB6619',
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
+  export const TimeLine: React.FC<TimeLineProps> = ({ data }) => {
 
-export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', color }) => {
-  const _mainColor = color || colorMap[theme];
+  const muiTheme = useTheme();
 
   const NormaTimeLine = styled(Timeline)`
     .${timelineItemClasses.root} {
@@ -56,7 +44,7 @@ export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', col
           content: '';
           width: 70%;
           height: 70%;
-          background: ${_mainColor};
+          background: ${muiTheme.palette.primary.main};
           position: absolute;
           border-radius: 50%;
           top: 50%;
@@ -73,7 +61,7 @@ export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', col
       boxShadow: 'none',
       padding: '6px',
       margin: '0',
-      border: `3px solid ${_mainColor}`,
+      border: `3px solid ${muiTheme.palette.primary.main}`,
     };
 
     const lastStyle = {
@@ -93,7 +81,7 @@ export const TimeLine: React.FC<TimeLineProps> = ({ data, theme = 'primary', col
           <TimelineItem key={key} sx={{ minHeight: 'auto' }}>
             <TimelineSeparator>
               <TimelineDot sx={_getDotStyle(!last)} />
-              {last && <TimelineConnector sx={{ bgcolor: _mainColor, width: '5px' }} />}
+              {last && <TimelineConnector sx={{ bgcolor: muiTheme.palette.primary.main, width: '5px' }} />}
             </TimelineSeparator>
             <TimelineContent sx={{ py: 0, pl: 2, pb: '35px' }}>
               <Typography sx={{ m: 'auto 0' }} className="TimelineContent__Date" variant="body1">

package/src/components/UncontrolledTable/components/pagination/pagination.styles.tsx

@@ -1,29 +1,30 @@
-import styled from "styled-components";
+import { styled } from "@mui/material/styles";
+import { olosPalette } from "../../../../helpers";
 
-export const Pagination = styled.div`
-  width: 100%;
-  margin: 24px 0 0 0;
-  display: flex;
-  justify-content: center;
-  .content {
-    display: flex;
-    gap: 8px;
-    .button {
-      border: 1px solid #E8E9EC;
-      background: #fff;
-      border-radius: 4px;
-      color: #4D4F5C;
-      cursor: pointer;
-      &:disabled {
-        opacity: 0.4;
-      }
-    }
-    .button-active {
-      border: 1px solid #FFDB9F;
-      background: #FFDB9F;
-      color: #B74616;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-  }
-`
+export const Pagination = styled('div')(({ theme }) => ({
+  width: '100%',
+  margin: '24px 0 0 0',
+  display: 'flex',
+  justifyContent: 'center',
+  '& .content': {
+    display: 'flex',
+    gap: '8px',
+    '& .button': {
+      border: `1px solid ${theme?.palette?.divider || '#E8E9EC'}`,
+      background: theme?.palette?.background?.paper || '#fff',
+      borderRadius: '4px',
+      color: theme?.palette?.text?.secondary || '#4D4F5C',
+      cursor: 'pointer',
+      '&:disabled': {
+        opacity: 0.4,
+      },
+    },
+    '& .button-active': {
+      border: `1px solid ${theme?.palette?.primary?.light || olosPalette.primary.main}`,
+      background: theme?.palette?.primary?.light || '#FFDB9F',
+      color: theme?.palette?.primary?.dark || '#B74616',
+      borderRadius: '4px',
+      cursor: 'pointer',
+    },
+  },
+}));

package/src/components/UncontrolledTable/components/pagination/pagination.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
+import React from 'react';
 import * as S from './pagination.styles';
 
 interface PaginationProps {

package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx

@@ -1,35 +1,19 @@
-import React from 'react';
 import { styled } from '@mui/material/styles';
-import { TabsProps } from '@mui/material/Tabs';
+import React from 'react';
 
 import { Tab, Tabs } from '@mui/material';
-import { ColorVariant } from '@/types';
-import { palette } from '../../helpers';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
 
 interface StyledTabProps {
   label: string;
-  color: ColorVariant;
 }
 
-export const NormaTabs: React.ComponentType<TabsProps & { color: ColorVariant }> = styled(Tabs)<{
-  color: ColorVariant;
-}>(({ color }) => ({
-  borderBottom: '1px solid #e8e8e8',
+export const NormaTabs = styled(Tabs)(({ theme }) => ({
+  borderBottom: `1px solid ${theme.palette.background.paper}`,
   '& .Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '& .MuiTabs-indicator': {
-    backgroundColor: colorMap[color],
+    backgroundColor: theme.palette.primary.main,
   },
   '& .MuiButtonBase-root': {
     textTransform: 'none',
@@ -38,20 +22,20 @@ export const NormaTabs: React.ComponentType<TabsProps & { color: ColorVariant }>
 
 export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: StyledTabProps) => (
   <Tab disableRipple {...props} />
-))(({ theme, color }) => ({
+))(({ theme }) => ({
   textTransform: 'none',
   fontWeight: theme.typography.fontWeightRegular,
   fontSize: theme.typography.pxToRem(15),
   marginRight: theme.spacing(1),
-  color: '#666666',
+  color: theme.palette.text.secondary,
   padding: '5px 15px',
   top: '5px',
   minWidth: '60px',
   '&.Mui-selected': {
-    color: colorMap[color],
+    color: theme.palette.primary.main,
   },
   '&.Mui-focusVisible': {
-    backgroundColor: 'rgba(100, 95, 228, 0.32)',
+    backgroundColor: theme.palette.background.default,
   },
 }));
 

package/src/helpers/colors.ts

@@ -225,6 +225,27 @@ export const newOlosPalette: PaletteOptions = {
   }
 };
 
+export const mockPalette: PaletteOptions = {
+  primary: {
+   main: '#fc92ee',
+  },
+  secondary: {
+    main: '#43bbf2',
+  },
+  error: {
+    main: '#d63643',
+  },
+  warning: {
+    main: '#ffc300',
+  },
+  info: {
+    main: '#71d5f7',
+  },
+  success: {
+    main: '#6bc235',
+  },
+};
+
 export const lightTheme = createTheme({
   palette: {
     mode: 'light',
@@ -250,6 +271,13 @@ export const darkTheme = createTheme({
   },
 });
 
+export const mockTheme = createTheme({
+  palette: {
+    mode: 'light',
+    ...mockPalette,
+  },
+});
+
 export const themes = {
   light: lightTheme,
   dark: darkTheme,

package/src/providers/NormaProvider.tsx

@@ -1,12 +1,22 @@
-import React from 'react';
-import { ThemeProvider } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material';
 import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+import React from 'react';
+import { newOlosPalette } from '../helpers';
 
-export const NormaProvider = (props:ThemeProviderProps) => {
+export const NormaProvider = (props: ThemeProviderProps) => {
   const { theme, children } = props;
-  
+
+  const getTheme = () => {
+    if (theme) return theme;
+    return createTheme({
+      palette: newOlosPalette,
+    });
+  };
+
+  const appTheme = getTheme();
+
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={appTheme}>
       {children}
     </ThemeProvider>
   );

package/src/stories/IconButton.stories.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
-import { IconButton, Icons } from '../components'
 import type { Meta, StoryObj } from '@storybook/react'
-import { ButtonVariant, SizeVariant, ColorVariant } from '../types'
+import { IconButton, Icons } from '../components'
+import { ButtonVariant, ColorVariant, SizeVariant } from '../types'
 
 const sizes: SizeVariant[] = ['small', 'medium', 'large']
 const variants: ButtonVariant[] = ['text', 'outlined', 'contained']
@@ -39,6 +38,7 @@ export const Playground: Story = {
     size: 'medium',
     color: 'primary',
     variant: 'text',
+    circle: true,
   },
 }
 

package/src/stories/RadioGroup.stories.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
-import { RadioGroup } from '../components/RadioGroup'
 import type { Meta, StoryObj } from '@storybook/react'
-import { SizeVariant } from '../types'
+import { RadioGroup } from '../components/RadioGroup'
 
 const meta = {
   title: 'Form/RadioGroup',

package/src/stories/RangerSlider.stories.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
 import { RangerSlider } from '../components'
 import { ColorVariant, TextFieldSizeVariant } from '../types'
-import { TextField } from '@mui/material'
 
 const colors: ColorVariant[] = [
   'inherit',

package/src/stories/NormaProvider.stories.tsx

@@ -1,331 +0,0 @@
-import { Box, Grid, Stack, Typography } from '@mui/material'
-import { createTheme } from '@mui/material/styles'
-import type { Meta } from '@storybook/react'
-import { Accordion, Button, Card, Paper, ProgressBar, Tag } from '../components'
-import { themes } from '../helpers'
-import { NormaProvider } from '../providers/NormaProvider'
-
-const meta = {
-  title: 'Providers/NormaProvider',
-  component: NormaProvider,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ['light', 'dark', 'newLight'],
-    },
-  },
-} satisfies Meta<typeof NormaProvider>
-
-export default meta
-
-const ComponentShowcase = () => (
-  <Stack spacing={3} sx={{ width: '100%', maxWidth: 800, padding: 3 }}>
-    <Typography variant="h4" gutterBottom>
-      Norma Design System Components
-    </Typography>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Buttons
-      </Typography>
-      <Stack direction="row" spacing={2} flexWrap="wrap">
-        <Button variant="contained" color="primary">
-          Primary
-        </Button>
-        <Button variant="contained" color="secondary">
-          Secondary
-        </Button>
-        <Button variant="contained" color="error">
-          Error
-        </Button>
-        <Button variant="contained" color="success">
-          Success
-        </Button>
-        <Button variant="outlined" color="warning">
-          Warning
-        </Button>
-      </Stack>
-    </Paper>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Progress Bars
-      </Typography>
-      <Stack spacing={2}>
-        <ProgressBar value={25} />
-        <ProgressBar value={50} color="secondary" />
-        <ProgressBar value={75} color="success" />
-        <ProgressBar value={90} color="warning" />
-      </Stack>
-    </Paper>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Cards & Tags
-      </Typography>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
-          <Card sx={{ p: 2 }}>
-            <Typography variant="h6" gutterBottom>
-              Sample Card
-            </Typography>
-            <Typography variant="body2">
-              Card content goes here with the current theme colors.
-            </Typography>
-          </Card>
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <Stack spacing={2}>
-            <Tag label="Primary Tag" color="primary" />
-            <Tag label="Secondary Tag" color="secondary" />
-            <Tag label="Success Tag" color="success" />
-            <Tag label="Error Tag" color="error" />
-          </Stack>
-        </Grid>
-      </Grid>
-    </Paper>
-
-    <Paper elevation={2} sx={{ p: 3 }}>
-      <Typography variant="h6" gutterBottom>
-        Accordion
-      </Typography>
-      <Accordion
-        label="Theme Configuration"
-        data={[
-          {
-            label: 'Theme Colors',
-            id: 'theme-colors',
-            children: <Typography>These components adapt to the current theme configuration.</Typography>,
-          },
-          {
-            label: 'Customization',
-            id: 'customization',
-            children: <Typography>You can customize colors by passing custom theme options to NormaProvider.</Typography>,
-          },
-        ]}
-      />
-    </Paper>
-  </Stack>
-)
-
-export const DefaultTheme = () => (
-  <NormaProvider theme={themes.light}>
-    <ComponentShowcase />
-  </NormaProvider>
-)
-
-DefaultTheme.storyName = 'Default Theme'
-
-export const DarkTheme = () => (
-  <NormaProvider theme={themes.dark}>
-    <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', p: 2 }}>
-      <ComponentShowcase />
-    </Box>
-  </NormaProvider>
-)
-
-DarkTheme.storyName = 'Dark Theme'
-
-export const CustomBlueTheme = () => {
-  const customTheme = createTheme({
-    palette: {
-      mode: 'light',
-      primary: {
-        main: '#1976d2',
-        light: '#42a5f5',
-        dark: '#1565c0',
-      },
-      secondary: {
-        main: '#dc004e',
-        light: '#ff5983',
-        dark: '#9a0036',
-      },
-      success: {
-        main: '#2e7d32',
-      },
-      warning: {
-        main: '#ed6c02',
-      },
-      error: {
-        main: '#d32f2f',
-      },
-    },
-  })
-
-  return (
-    <NormaProvider theme={customTheme}>
-      <ComponentShowcase />
-    </NormaProvider>
-  )
-}
-
-CustomBlueTheme.storyName = 'Custom Blue Theme'
-
-export const CustomGreenTheme = () => {
-  const customTheme = createTheme({
-    palette: {
-      mode: 'light',
-      primary: {
-        main: '#388e3c',
-        light: '#6abf69',
-        dark: '#00600f',
-      },
-      secondary: {
-        main: '#7b1fa2',
-        light: '#ae52d4',
-        dark: '#4a0072',
-      },
-      success: {
-        main: '#4caf50',
-      },
-      warning: {
-        main: '#ff9800',
-      },
-      error: {
-        main: '#f44336',
-      },
-    },
-  })
-
-  return (
-    <NormaProvider theme={customTheme}>
-      <ComponentShowcase />
-    </NormaProvider>
-  )
-}
-
-CustomGreenTheme.storyName = 'Custom Green Theme'
-
-export const CustomPurpleDarkTheme = () => {
-  const customTheme = createTheme({
-    palette: {
-      mode: 'dark',
-      primary: {
-        main: '#9c27b0',
-        light: '#d05ce3',
-        dark: '#6a0080',
-      },
-      secondary: {
-        main: '#ff6f00',
-        light: '#ffa040',
-        dark: '#c43e00',
-      },
-      background: {
-        default: '#121212',
-        paper: '#1e1e1e',
-      },
-      success: {
-        main: '#66bb6a',
-      },
-      warning: {
-        main: '#ffa726',
-      },
-      error: {
-        main: '#ef5350',
-      },
-    },
-  })
-
-  return (
-    <NormaProvider theme={customTheme}>
-      <Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', p: 2 }}>
-        <ComponentShowcase />
-      </Box>
-    </NormaProvider>
-  )
-}
-
-CustomPurpleDarkTheme.storyName = 'Custom Purple Dark Theme'
-
-export const MinimalExample = () => (
-  <NormaProvider theme={themes.light}>
-    <Stack spacing={2} alignItems="center" sx={{ p: 4 }}>
-      <Typography variant="h5" color="primary">
-        Welcome to Norma Design System
-      </Typography>
-      <Button variant="contained" color="primary">
-        Get Started
-      </Button>
-      <Tag label="v1.0.0" color="secondary" />
-    </Stack>
-  </NormaProvider>
-)
-
-MinimalExample.storyName = 'Minimal Example'
-
-export const ThemeComparison = () => (
-  <Grid container spacing={4} sx={{ p: 2 }}>
-    <Grid item xs={12} md={4}>
-      <Typography variant="h6" gutterBottom align="center">
-        Default Light Theme
-      </Typography>
-      <NormaProvider theme={themes.light}>
-        <Paper sx={{ p: 2 }}>
-          <Stack spacing={2}>
-            <Button variant="contained" color="primary" fullWidth>
-              Primary Button
-            </Button>
-            <Button variant="contained" color="secondary" fullWidth>
-              Secondary Button
-            </Button>
-            <ProgressBar value={60} />
-            <Tag label="Sample Tag" color="primary" />
-          </Stack>
-        </Paper>
-      </NormaProvider>
-    </Grid>
-
-    <Grid item xs={12} md={4}>
-      <Typography variant="h6" gutterBottom align="center">
-        Dark Theme
-      </Typography>
-      <NormaProvider theme={themes.dark}>
-        <Paper sx={{ p: 2, backgroundColor: 'background.paper' }}>
-          <Stack spacing={2}>
-            <Button variant="contained" color="primary" fullWidth>
-              Primary Button
-            </Button>
-            <Button variant="contained" color="secondary" fullWidth>
-              Secondary Button
-            </Button>
-            <ProgressBar value={60} />
-            <Tag label="Sample Tag" color="primary" />
-          </Stack>
-        </Paper>
-      </NormaProvider>
-    </Grid>
-
-    <Grid item xs={12} md={4}>
-      <Typography variant="h6" gutterBottom align="center">
-        Custom Theme
-      </Typography>
-      <NormaProvider
-        theme={createTheme({
-          palette: {
-            primary: { main: '#e91e63' },
-            secondary: { main: '#00bcd4' },
-          }
-        })}
-      >
-        <Paper sx={{ p: 2 }}>
-          <Stack spacing={2}>
-            <Button variant="contained" color="primary" fullWidth>
-              Primary Button
-            </Button>
-            <Button variant="contained" color="secondary" fullWidth>
-              Secondary Button
-            </Button>
-            <ProgressBar value={60} />
-            <Tag label="Sample Tag" color="primary" />
-          </Stack>
-        </Paper>
-      </NormaProvider>
-    </Grid>
-  </Grid>
-)
-
-ThemeComparison.storyName = 'Theme Comparison'