@digigov/react-core 2.0.0-6452adf3 → 2.0.0-66d7c5e2

package/src/{AutoCompleteInput → AutoCompleteInputBase}/index.test.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
+import AutoCompleteInputBase from '@digigov/react-core/AutoCompleteInputBase';
 
 it('renders the AutoCompleteInput with no props', () => {
-  expect(render(<AutoCompleteInput />).baseElement).toMatchSnapshot();
+  expect(render(<AutoCompleteInputBase />).baseElement).toMatchSnapshot();
 });
 
 it('renders the AutoCompleteInput with isFocused', () => {
   expect(
-    render(<AutoCompleteInput isFocused />).baseElement
+    render(<AutoCompleteInputBase isFocused />).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the AutoCompleteInput with isFocused and name props', () => {
   expect(
-    render(<AutoCompleteInput name="some-name" isFocused />).baseElement
+    render(<AutoCompleteInputBase name="some-name" isFocused />).baseElement
   ).toMatchSnapshot();
 });

package/src/{AutoCompleteInput → AutoCompleteInputBase}/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface AutoCompleteInputProps extends BaseProps<'input'> {
+export interface AutoCompleteInputBaseProps extends BaseProps<'input'> {
   /**
    * isFocused is optional. The default value is false.
    * isFocused prop is used to focus the list element.
@@ -9,16 +9,15 @@ export interface AutoCompleteInputProps extends BaseProps<'input'> {
    * @value false
    */
   isFocused?: boolean;
-
 }
 /**
- * AutoCompleteInput component is used to display the value that the user is typing.
+ * AutoCompleteInputBase component is used to display the value that the user is typing.
  *
  */
-export const AutoCompleteInput = React.forwardRef<
+export const AutoCompleteInputBase = React.forwardRef<
   HTMLInputElement,
-  AutoCompleteInputProps
->(function AutoCompleteInput(
+  AutoCompleteInputBaseProps
+>(function AutoCompleteInputBase(
   { name, isFocused, className, ...props },
   ref
 ) {
@@ -37,4 +36,4 @@ export const AutoCompleteInput = React.forwardRef<
   );
 });
 
-export default AutoCompleteInput;
+export default AutoCompleteInputBase;

package/src/AutoCompleteMultipleInputContainer/index.tsx

@@ -6,7 +6,7 @@ export interface AutoCompleteMultipleInputContainerProps
   extends BaseProps<'div'> {
   open?: boolean;
   isFocused?: boolean;
-  numberOfSelected?: 1 | 2 | 3 | 'all';  
+  numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 /**
  * Use AutoCompleteMultipleInputContainer to accept multiple values input.
@@ -15,7 +15,7 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
   HTMLDivElement,
   AutoCompleteMultipleInputContainerProps
 >(function AutoCompleteMultipleInputContainer(
-  { numberOfSelected = 'all', open, children, isFocused, className, ...props },
+  { numberOfSelected = 'all', children, isFocused, className, ...props },
   ref
 ) {
   return (
@@ -25,8 +25,8 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
       className={clsx(className, {
         'ds-autocomplete__multi-input-container': true,
         'ds-autocomplete__multi-input-container--focused': isFocused,
-        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]: typeof(numberOfSelected) === 'number' 
-        
+        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]:
+          typeof numberOfSelected === 'number',
       })}
       {...props}
     >

package/src/AutoCompleteResultList/index.test.tsx

@@ -11,6 +11,7 @@ it('renders the AutoCompleteResultList with no props', () => {
 
 it('renders the AutoCompleteResultList with isVisible props', () => {
   expect(
-    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>).baseElement
+    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/AutoCompleteResultList/index.tsx

@@ -21,10 +21,7 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
 export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
->(function List(
-  { isVisible = false, className, children, ...props },
-  ref
-) {
+>(function List({ isVisible = false, className, children, ...props }, ref) {
   return (
     <Base
       as="ul"

package/src/AutoCompleteResultListItem/index.test.tsx

@@ -5,7 +5,8 @@ import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultLi
 
 it('renders the AutoCompleteResultList with no props', () => {
   expect(
-    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>).baseElement
+    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/AutoCompleteStatus/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
+export interface AutoCompleteStatusProps extends BaseProps<'div'> {}
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
  * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.

package/src/AutoCompleteStatusContainer/index.test.tsx

@@ -5,6 +5,7 @@ import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusC
 
 it('renders the AdminContainer with no props', () => {
   expect(
-    render(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>).baseElement
+    render(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/{BackLink → BackLinkBase}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BackLink with href="#" 1`] = `
+exports[`renders the BackLinkBase with href="#" 1`] = `
 <body>
   <div>
     <a
@@ -27,7 +27,7 @@ exports[`renders the BackLink with href="#" 1`] = `
 </body>
 `;
 
-exports[`renders the BackLink with no props 1`] = `
+exports[`renders the BackLinkBase with no props 1`] = `
 <body>
   <div>
     <a

package/src/BackLinkBase/index.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import BackLinkBase from '@digigov/react-core/BackLinkBase';
+
+it('renders the BackLinkBase with no props', () => {
+  expect(
+    render(<BackLinkBase>hello</BackLinkBase>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the BackLinkBase with href="#"', () => {
+  expect(
+    render(<BackLinkBase href="#">hello</BackLinkBase>).baseElement
+  ).toMatchSnapshot();
+});

package/src/BackLinkBase/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
+import { CaretIcon } from '@digigov/react-icons';
+
+export interface BackLinkBaseProps extends LinkBaseProps {}
+/**
+ * Use BackLinkBase component to help users go back to the previous page in a multi-page transaction.
+ */
+export const BackLinkBase = React.forwardRef<
+  HTMLAnchorElement,
+  BackLinkBaseProps
+>(function BackLinkBase(
+  { href, printHidden = true, className, children, ...props },
+  ref
+) {
+  return (
+    <LinkBase
+      href={href}
+      printHidden={printHidden}
+      defaultStyle={false}
+      onClick={() => !href && window.history.back()}
+      ref={ref}
+      className={clsx(className, {
+        'ds-back-link': true,
+      })}
+      tabIndex={0}
+      {...props}
+    >
+      <CaretIcon direction={'left'} />
+      {children}
+    </LinkBase>
+  );
+});
+
+export default BackLinkBase;

package/src/BackToTopLink/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import { ArrowIcon } from '@digigov/react-icons';
 
-export interface BackToTopLinkProps extends BaseProps<'a'> { }
+export interface BackToTopLinkProps extends BaseProps<'a'> {}
 /**
  * Use BackToTopLink component to help users go to the top of the page.
  */

package/src/BannerContainer/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the BannerContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-cookie-banner"
+      class="ds-banner-container"
     >
       hello
     </div>

package/src/BannerContainer/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BannerContainer from '@digigov/react-core/BannerContainer';
 
 it('renders the BannerContainer with no props', () => {
-  expect(render(<BannerContainer>hello</BannerContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BannerContainer>hello</BannerContainer>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BannerContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Base, BaseProps } from '@digigov/react-core/Base';
 
-export interface BannerContainerProps extends BaseProps<'div'> { }
+export interface BannerContainerProps extends BaseProps<'div'> {}
 
 export const BannerContainer = React.forwardRef<
   HTMLDivElement,
@@ -13,7 +13,7 @@ export const BannerContainer = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-cookie-banner': true,
+        'ds-banner-container': true,
       })}
       {...props}
     >

package/src/Base/compat/Input/CheckboxInput.native.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  LegacyRef,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type CheckboxInputProps = Omit<
@@ -28,7 +24,7 @@ export const CheckboxInput = React.forwardRef<
   return (
     // @ts-ignore
     <TouchableOpacity
-      ref={ref as LegacyRef<TouchableOpacity>}
+      ref={ref as Ref<TouchableOpacity>}
       onPress={handlePress}
       {...props}
     >

package/src/Base/compat/Input/RadioInput.native.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  LegacyRef,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type RadioInputProps = Omit<
@@ -26,7 +22,7 @@ export const RadioInput = React.forwardRef<HTMLInputElement, RadioInputProps>(
 
     return (
       <TouchableOpacity
-        ref={ref as LegacyRef<typeof TouchableOpacity>}
+        ref={ref as Ref<typeof TouchableOpacity>}
         onPress={handlePress}
         {...(props as any)}
       >

package/src/Base/compat/button.native.tsx

@@ -21,7 +21,7 @@ export const FormButton = React.forwardRef<unknown, ButtonProps>(
         ref={ref}
         {...props}
         onClick={() => {
-          onClick && onClick({} as React.MouseEvent<HTMLButtonElement>);
+          if (onClick) onClick({} as React.MouseEvent<HTMLButtonElement>);
           if (props.type) formContext?.[props.type]();
         }}
       />

package/src/Base/compat/details.native.tsx

@@ -16,6 +16,7 @@ type HTMLElementProps = Omit<
 > & {
   closeIcon?: string;
   openIcon?: string;
+  iconClassName?: string;
   placement?: 'before' | 'after';
 };
 
@@ -25,6 +26,7 @@ const CompatDetails = ({
   placement,
   closeIcon,
   openIcon,
+  iconClassName,
   ...props
 }: HTMLElementProps) => {
   const [isExpanded, setIsExpanded] = useState(open);
@@ -41,7 +43,7 @@ const CompatDetails = ({
 
   const toggleIcon =
     closeIcon && openIcon ? (
-      <Text>{isExpanded ? openIcon : closeIcon}</Text>
+      <Text className={iconClassName}>{isExpanded ? openIcon : closeIcon}</Text>
     ) : null;
 
   return (

package/src/Base/compat/li.native.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 // TODO: Fix `props` type
-interface LiProps {
-  [key: string]: any;
-}
+type LiProps = Record<string, any>;
 
 export const Li = (props: LiProps) => {
   return <View {...props} />;

package/src/Base/index.native.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, type JSX } from 'react';
 import { Text, View, ViewProps } from 'react-native';
 import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
 import { mapping } from '@digigov/react-core/Base/mapping.native';
@@ -22,7 +22,7 @@ const BooleanMapper = {
 const textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,
@@ -72,7 +72,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   ref: React.ComponentPropsWithRef<C>['ref']
 ) {
   const classNames = className?.split(' ') || [];
-  let applyBasePropsToWrapper: boolean = true;
+  let applyBasePropsToWrapper = true;
 
   const basePropToClassName = basePropGenerator({
     display,

package/src/Base/index.web.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
-type AsProp<C extends React.ElementType> = {
-  as?: C;
-};
+interface AsProp<C extends React.ElementType> {
+  as?: C | React.ElementType<any>;
+}
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
@@ -146,13 +146,13 @@ export type SpacingValues =
   | 80
   | 96;
 
-export type SpacingMediaValues = {
+export interface SpacingMediaValues {
   xs?: SpacingValues;
   sm?: SpacingValues;
   md?: SpacingValues;
   lg?: SpacingValues;
   xl?: SpacingValues;
-};
+}
 
 /**
  * This is the type used in the type annotation for the component
@@ -162,7 +162,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactNode | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,

package/src/Base/mapping.native.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Link } from 'expo-router';
+import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';
 import Svg, { Path, Circle, Rect, G, Polygon } from 'react-native-svg';
 import { Button } from '@digigov/react-core/Base/compat/button.native';
 import CompatDetails from '@digigov/react-core/Base/compat/details.native';
 import BaseInput from '@digigov/react-core/Base/compat/Input/index.native';
 import { Ol } from '@digigov/react-core/Base/compat/ol.native';
-import { cssInterop } from 'nativewind'
 export type MapProps<T extends keyof JSX.IntrinsicElements> =
   React.ComponentPropsWithoutRef<T>;
 
@@ -19,7 +19,11 @@ export type MappingType = {
 };
 
 export const mapping: MappingType = {
-  a: ({ children, ...props }) => <Link {...props} asChild ><View>{children}</View></Link>,
+  a: ({ children, ...props }) => (
+    <Link {...props} asChild>
+      <View>{children}</View>
+    </Link>
+  ),
   img: (props) => <Image {...props} />,
   button: Button,
   input: BaseInput,
@@ -30,8 +34,8 @@ export const mapping: MappingType = {
   // @ts-ignore
   svg: cssInterop(Svg, {
     className: {
-      target: "style",
-      nativeStyleToProp: { width: true, height: true }
+      target: 'style',
+      nativeStyleToProp: { width: true, height: true },
     },
   }),
   rect: (props) => <Rect {...props} />,

package/src/Base/wrap.native.tsx

@@ -1,9 +1,7 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { View } from 'react-native';
 
-interface WrapperContextType {
-  (cls: string): void;
-}
+type WrapperContextType = (cls: string) => void;
 
 const WrapperContext = React.createContext<WrapperContextType>(
   (cls: string) => {
@@ -11,7 +9,11 @@ const WrapperContext = React.createContext<WrapperContextType>(
   }
 );
 
-const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
+const Wrapper = React.memo(function Wrapper({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const [className, setClassName] = useState('');
   return (
     <WrapperContext.Provider value={setClassName}>
@@ -21,6 +23,7 @@ const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
     </WrapperContext.Provider>
   );
 });
+Wrapper.displayName = 'Wrapper';
 
 interface WrappedComponentProps {
   className?: string;
@@ -67,11 +70,11 @@ export const wrap = (Component: React.ElementType) => {
           ref={ref}
           onFocus={(e: unknown) => {
             setClassName(focusedWrapperClassNames.join(' '));
-            onFocus && onFocus(e);
+            if (onFocus) onFocus(e);
           }}
           onBlur={(e: unknown) => {
             setClassName(wrapperClassNames.join(' '));
-            onBlur && onBlur(e);
+            if (onBlur) onBlur(e);
           }}
           className={classNames.join(' ')}
           {...props}

package/src/Blockquote/index.test.tsx

@@ -8,5 +8,7 @@ it('renders the Blockquote with no props', () => {
 });
 
 it('renders the Blockquote with dense props', () => {
-  expect(render(<Blockquote dense>hello</Blockquote>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Blockquote dense>hello</Blockquote>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Bottom/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BottomProps extends BaseProps<'div'> { }
+export interface BottomProps extends BaseProps<'div'> {}
 /**
  * Bottom is used inside the Layout component and it must be the last component in order.
  */

package/src/BottomInfo/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the BottomInfo with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info ds-container ds-grid ds-gap-sm-12"
+      class="ds-bottom-info ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoProps extends ContainerProps { }
+export interface BottomInfoProps extends ContainerProps {}
 /**
  * Bottom BottomInfo is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContainer/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the BottomInfoContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__container ds-container ds-grid ds-gap-sm-12"
+      class="ds-bottom-info__container ds-container ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface BottomInfoContainerProps extends ContainerProps { }
+export interface BottomInfoContainerProps extends ContainerProps {}
 /**
  * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
  */

package/src/BottomInfoContent/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the BottomInfoContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__content xs:ds-grid__col-span-12"
+      class="ds-bottom-info__content ds-grid-item xs:ds-grid__col-span-12"
     >
       hello
     </div>

package/src/BottomInfoContent/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BottomInfoContent from '@digigov/react-core/BottomInfoContent';
 
 it('renders the BottomInfoContent with no props', () => {
-  expect(render(<BottomInfoContent>hello</BottomInfoContent>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BottomInfoContent>hello</BottomInfoContent>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BottomInfoContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface BottomInfoContentProps extends GridProps { }
+export interface BottomInfoContentProps extends GridProps {}
 /**
  * BottomInfoContent is used inside the BottomInfoContainer component.
  */

package/src/Breadcrumbs/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
 it('renders the Breadcrumbs with no props', () => {
-  expect(render(<Breadcrumbs>hello</Breadcrumbs>).baseElement).toMatchSnapshot();
+  expect(
+    render(<Breadcrumbs>hello</Breadcrumbs>).baseElement
+  ).toMatchSnapshot();
 });

package/src/Breadcrumbs/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsProps extends BaseProps<'div'> { }
+export interface BreadcrumbsProps extends BaseProps<'div'> {}
 /**
  * Use Breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
  * The breadcrumb should start with your ‘home’ page and end with the parent section of the current page.

package/src/BreadcrumbsList/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import BreadcrumbsList from '@digigov/react-core/BreadcrumbsList';
 
 it('renders the BreadcrumbsList with no props', () => {
-  expect(render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement).toMatchSnapshot();
+  expect(
+    render(<BreadcrumbsList>hello</BreadcrumbsList>).baseElement
+  ).toMatchSnapshot();
 });

package/src/BreadcrumbsList/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsListProps extends BaseProps<'ol'> { }
+export interface BreadcrumbsListProps extends BaseProps<'ol'> {}
 /**
  * BreadcrumbsList is used for providing the items inside Breadcrumbs.
  */