feat(components): include globalStyles on styles provider context

Author: hectoruch

.DS_Store

@@ -28,7 +28,14 @@ const mockUseCarousel = vi.mocked(useCarousel);
 
 describe('Carousel component', () => {
   it('Should render carousel component', async () => {
-    const { container } = render(<Carousel {...mockProps} ref={() => {}} />);
+    const { container } = render(
+      <Carousel
+        {...mockProps}
+        ref={() => {
+          // empty
+        }}
+      />,
+    );
 
     const results = await axe(container);
     expect(container).toHTMLValidate({
@@ -43,7 +50,9 @@ describe('Carousel component', () => {
     render(
       <Carousel
         {...mockProps}
-        ref={() => {}}
+        ref={() => {
+          // empty
+        }}
         numElementsPerPage={mockProps.elements.length + 2}
       />,
     );
@@ -59,7 +68,9 @@ describe('Carousel component', () => {
     render(
       <Carousel
         {...mockProps}
-        ref={() => {}}
+        ref={() => {
+          // empty
+        }}
         allowModifySliceWidth={true}
         numElementsPerPage={0}
       />,
@@ -76,7 +87,9 @@ describe('Carousel component', () => {
     render(
       <Carousel
         {...mockProps}
-        ref={() => {}}
+        ref={() => {
+          // empty
+        }}
         allowModifySliceWidth={true}
         autoFitContainer={true}
         numElementsPerPage={5}

packages/components/src/components/carousel/__tests__/carousel.test.tsx

@@ -201,6 +201,7 @@ export const StylesProvider: FC<StylesProviderProps> = ({
       classes: [],
       currentTheme,
       getComponentStyles,
+      globalStyles: provider.globalStyles,
       icons,
       illustrations,
       mediaQueries,
@@ -217,6 +218,7 @@ export const StylesProvider: FC<StylesProviderProps> = ({
       provider.classNames,
       provider.allThemes,
       provider.variables,
+      provider.globalStyles,
     ],
   );
 

packages/components/src/lib/provider/stylesProvider/stylesProvider.tsx

@@ -5,17 +5,14 @@
  * This file re-exports it to maintain backward compatibility
  * with existing code that uses JSX.Element
  */
-import type React from 'react';
+import type { JSX } from 'react';
 
 declare global {
   namespace JSX {
-    type Element = React.JSX.Element;
-    type ElementType = React.JSX.ElementType;
-    type IntrinsicElements = React.JSX.IntrinsicElements;
-    type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<
-      C,
-      P
-    >;
+    type Element = JSX.Element;
+    type ElementType = JSX.ElementType;
+    type IntrinsicElements = JSX.IntrinsicElements;
+    type LibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>;
   }
 }