@digigov/react-core 0.25.4 → 0.26.0

package/src/NormalText/index.tsx

@@ -1,27 +1,27 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NormalTextProps extends BaseProps<'span'> {
+  /**
+   * variant is optional.
+   * Use 'lead' when a lead text is an introductory paragraph that you can use at the top of a page to summarise the content.
+   * The majority of your body should use the standard 'normal' variant. This is the default value.
+   * You can use the 'small' sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
+   */
+  variant?: 'lead' | 'normal' | 'small';
+
   /**
    * fontSize is optional.
    * Add this fontSize override prop in order to change the font size.
 
    */
   fontSize?: '14' | '16' | '19' | '24' | '30' | '36' | '48' | '72';
-
   /**
    * fontWeight is optional.
    * You can add a fontWeight override prop to change the font weight to regular or bold.
    */
   fontWeight?: 'regular' | 'bold';
-  /**
-   * variant is optional.
-   * Use 'lead' when a lead text is an introductory paragraph that you can use at the top of a page to summarise the content.
-   * The majority of your body should use the standard 'normal' variant. This is the default value.
-   * You can use the 'small' sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lead' | 'normal' | 'small';
 }
 /**
  * NormalText component is used for text formatting.
@@ -29,12 +29,13 @@ export interface NormalTextProps extends BaseProps<'span'> {
  */
 export const NormalText = React.forwardRef<HTMLSpanElement, NormalTextProps>(
   function NormalText(
-    { children, className, fontSize, fontWeight, variant = 'normal', ...props },
+    { variant = 'normal', fontSize, fontWeight, className, children, ...props },
     ref
   ) {
     return (
       <Base
         as="span"
+        ref={ref}
         className={clsx(className, {
           'govgr-body': true,
           'govgr-body-l': variant === 'lead',
@@ -50,7 +51,6 @@ export const NormalText = React.forwardRef<HTMLSpanElement, NormalTextProps>(
           'govgr-!-font-weight-regular': fontWeight == 'regular',
           'govgr-!-font-weight-bold': fontWeight == 'bold',
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/NotificationBannerContainer/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NotificationBannerContainerProps extends BaseProps<'div'> {
   /**
@@ -19,20 +19,20 @@ export const NotificationBannerContainer = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContainerProps
 >(function NotificationBannerContainer(
-  { children, className, success, ...props },
+  { success, className, children, ...props },
   ref
 ) {
   return (
     <Base
-      aria-labelledby="govgr-notification-banner-title"
       as="div"
+      role="region"
+      aria-labelledby="govgr-notification-banner-title"
+      data-module="govgr-notification-banner"
+      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner': true,
         'govgr-notification-banner--success': success === true,
       })}
-      data-module="govgr-notification-banner"
-      ref={ref}
-      role="region"
       {...props}
     >
       {children}

package/src/NotificationBannerContent/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NotificationBannerContentProps extends BaseProps<'div'> {}
 /**
@@ -12,14 +12,14 @@ export interface NotificationBannerContentProps extends BaseProps<'div'> {}
 export const NotificationBannerContent = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContentProps
->(function NotificationBannerContent({ children, className, ...props }, ref) {
+>(function NotificationBannerContent({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__content': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NotificationBannerHeader/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NotificationBannerHeaderProps extends BaseProps<'div'> {}
 /**
@@ -11,14 +11,14 @@ export interface NotificationBannerHeaderProps extends BaseProps<'div'> {}
 export const NotificationBannerHeader = React.forwardRef<
   HTMLDivElement,
   NotificationBannerHeaderProps
->(function NotificationBannerHeader({ children, className, ...props }, ref) {
+>(function NotificationBannerHeader({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
+      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__header': true,
       })}
-      ref={ref}
       {...props}
     >
       <h2

package/src/NotificationBannerHeading/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NotificationBannerHeadingProps extends BaseProps<'h3'> {}
 /**
@@ -11,14 +11,14 @@ export interface NotificationBannerHeadingProps extends BaseProps<'h3'> {}
 export const NotificationBannerHeading = React.forwardRef<
   HTMLHeadingElement,
   NotificationBannerHeadingProps
->(function NotificationBannerHeading({ children, className, ...props }, ref) {
+>(function NotificationBannerHeading({ className, children, ...props }, ref) {
   return (
     <Base
       as="h3"
+      ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__heading': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/NotificationBannerLink/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface NotificationBannerLinkProps extends BaseProps<'a'> {}
 /**
@@ -12,17 +12,17 @@ export const NotificationBannerLink = React.forwardRef<
   HTMLAnchorElement,
   NotificationBannerLinkProps
 >(function NotificationBannerLink(
-  { children, className, href = '#', ...props },
+  { className, href = '#', children, ...props },
   ref
 ) {
   return (
     <Base
       as="a"
+      ref={ref}
+      href={href}
       className={clsx(className, {
         'govgr-notification-banner__link': true,
       })}
-      href={href}
-      ref={ref}
       {...props}
     >
       {children}

package/src/PageTitle/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PageTitleProps extends BaseProps<'div'> {}
 /**
  * Details for the PageTitle.
  */
 export const PageTitle = React.forwardRef<HTMLDivElement, PageTitleProps>(
-  function PageTitle({ children, className, ...props }, ref) {
+  function PageTitle({ className, children, ...props }, ref) {
     return (
-      <Base as="div" className={clsx(className, {})} ref={ref} {...props}>
+      <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
         {children}
       </Base>
     );

package/src/PageTitleCaption/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PageTitleCaptionProps extends BaseProps<'span'> {
   /**
@@ -16,18 +16,18 @@ export const PageTitleCaption = React.forwardRef<
   HTMLSpanElement,
   PageTitleCaptionProps
 >(function PageTitleCaption(
-  { children, className, size = 'l', ...props },
+  { size = 'l', className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="span"
+      ref={ref}
       className={clsx(className, {
         'govgr-caption-xl': size === 'xl',
         'govgr-caption-l': size === 'l',
         'govgr-caption-m': size === 'm',
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/PageTitleHeading/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PageTitleHeadingProps extends BaseProps<'h1'> {
   /**
@@ -15,19 +15,19 @@ export const PageTitleHeading = React.forwardRef<
   HTMLHeadingElement,
   PageTitleHeadingProps
 >(function PageTitleHeading(
-  { children, className, size = 'xl', ...props },
+  { size = 'xl', className, children, ...props },
   ref
 ) {
   return (
     <Base
       as="h1"
+      ref={ref}
       className={clsx(className, {
         'govgr-heading-xl': size === 'xl',
         'govgr-heading-l': size === 'l',
         'govgr-heading-m': size === 'm',
         'govgr-heading-s': size === 's',
       })}
-      ref={ref}
       {...props}
     >
       {children}

package/src/PageTitleSection/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PageTitleSectionProps extends BaseProps<'div'> {}
 /**
@@ -10,9 +10,9 @@ export interface PageTitleSectionProps extends BaseProps<'div'> {}
 export const PageTitleSection = React.forwardRef<
   HTMLDivElement,
   PageTitleSectionProps
->(function PageTitleSection({ children, className, ...props }, ref) {
+>(function PageTitleSection({ className, children, ...props }, ref) {
   return (
-    <Base as="div" className={clsx(className, {})} ref={ref} {...props}>
+    <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
       {children}
     </Base>
   );

package/src/Paragraph/index.test.tsx

@@ -75,7 +75,7 @@ it('renders the Paragraph with fontWeight=bold', () => {
 it('renders the Paragraph with variant=lead and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph fontSize={'14'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'14'}>
         hello
       </Paragraph>
     )
@@ -85,7 +85,7 @@ it('renders the Paragraph with variant=lead and fontSize=14', () => {
 it('renders the Paragraph with variant=lead and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph fontSize={'16'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'16'}>
         hello
       </Paragraph>
     )
@@ -95,7 +95,7 @@ it('renders the Paragraph with variant=lead and fontSize=16', () => {
 it('renders the Paragraph with variant=lead and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph fontSize={'19'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'19'}>
         hello
       </Paragraph>
     )
@@ -105,7 +105,7 @@ it('renders the Paragraph with variant=lead and fontSize=19', () => {
 it('renders the Paragraph with variant=lead and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph fontSize={'14'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'14'}>
         hello
       </Paragraph>
     )
@@ -115,7 +115,7 @@ it('renders the Paragraph with variant=lead and fontSize=24', () => {
 it('renders the Paragraph with variant=lead and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph fontSize={'30'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'30'}>
         hello
       </Paragraph>
     )
@@ -125,7 +125,7 @@ it('renders the Paragraph with variant=lead and fontSize=30', () => {
 it('renders the Paragraph with variant=lead and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph fontSize={'36'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'36'}>
         hello
       </Paragraph>
     )
@@ -135,7 +135,7 @@ it('renders the Paragraph with variant=lead and fontSize=36', () => {
 it('renders the Paragraph with variant=lead and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph fontSize={'48'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'48'}>
         hello
       </Paragraph>
     )
@@ -145,7 +145,7 @@ it('renders the Paragraph with variant=lead and fontSize=48', () => {
 it('renders the Paragraph with variant=lead and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph fontSize={'72'} variant={'lead'}>
+      <Paragraph variant={'lead'} fontSize={'72'}>
         hello
       </Paragraph>
     )
@@ -155,7 +155,7 @@ it('renders the Paragraph with variant=lead and fontSize=72', () => {
 it('renders the Paragraph with variant=small and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph fontSize={'14'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'14'}>
         hello
       </Paragraph>
     )
@@ -165,7 +165,7 @@ it('renders the Paragraph with variant=small and fontSize=14', () => {
 it('renders the Paragraph with variant=small and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph fontSize={'16'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'16'}>
         hello
       </Paragraph>
     )
@@ -175,7 +175,7 @@ it('renders the Paragraph with variant=small and fontSize=16', () => {
 it('renders the Paragraph with variant=small and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph fontSize={'19'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'19'}>
         hello
       </Paragraph>
     )
@@ -185,7 +185,7 @@ it('renders the Paragraph with variant=small and fontSize=19', () => {
 it('renders the Paragraph with variant=small and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph fontSize={'14'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'14'}>
         hello
       </Paragraph>
     )
@@ -195,7 +195,7 @@ it('renders the Paragraph with variant=small and fontSize=24', () => {
 it('renders the Paragraph with variant=small and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph fontSize={'30'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'30'}>
         hello
       </Paragraph>
     )
@@ -205,7 +205,7 @@ it('renders the Paragraph with variant=small and fontSize=30', () => {
 it('renders the Paragraph with variant=small and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph fontSize={'36'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'36'}>
         hello
       </Paragraph>
     )
@@ -215,7 +215,7 @@ it('renders the Paragraph with variant=small and fontSize=36', () => {
 it('renders the Paragraph with variant=small and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph fontSize={'48'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'48'}>
         hello
       </Paragraph>
     )
@@ -225,7 +225,7 @@ it('renders the Paragraph with variant=small and fontSize=48', () => {
 it('renders the Paragraph with variant=small and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph fontSize={'72'} variant={'small'}>
+      <Paragraph variant={'small'} fontSize={'72'}>
         hello
       </Paragraph>
     )
@@ -235,7 +235,7 @@ it('renders the Paragraph with variant=small and fontSize=72', () => {
 it('renders the Paragraph with variant=normal and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph fontSize={'14'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'14'}>
         hello
       </Paragraph>
     )
@@ -245,7 +245,7 @@ it('renders the Paragraph with variant=normal and fontSize=14', () => {
 it('renders the Paragraph with variant=normal and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph fontSize={'16'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'16'}>
         hello
       </Paragraph>
     )
@@ -255,7 +255,7 @@ it('renders the Paragraph with variant=normal and fontSize=16', () => {
 it('renders the Paragraph with variant=normal and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph fontSize={'19'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'19'}>
         hello
       </Paragraph>
     )
@@ -265,7 +265,7 @@ it('renders the Paragraph with variant=normal and fontSize=19', () => {
 it('renders the Paragraph with variant=normal and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph fontSize={'14'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'14'}>
         hello
       </Paragraph>
     )
@@ -275,7 +275,7 @@ it('renders the Paragraph with variant=normal and fontSize=24', () => {
 it('renders the Paragraph with variant=normal and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph fontSize={'30'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'30'}>
         hello
       </Paragraph>
     )
@@ -285,7 +285,7 @@ it('renders the Paragraph with variant=normal and fontSize=30', () => {
 it('renders the Paragraph with variant=normal and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph fontSize={'36'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'36'}>
         hello
       </Paragraph>
     )
@@ -295,7 +295,7 @@ it('renders the Paragraph with variant=normal and fontSize=36', () => {
 it('renders the Paragraph with variant=normal and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph fontSize={'48'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'48'}>
         hello
       </Paragraph>
     )
@@ -305,7 +305,7 @@ it('renders the Paragraph with variant=normal and fontSize=48', () => {
 it('renders the Paragraph with variant=normal and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph fontSize={'72'} variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'72'}>
         hello
       </Paragraph>
     )
@@ -314,7 +314,7 @@ it('renders the Paragraph with variant=normal and fontSize=72', () => {
 it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regular', () => {
   expect(
     mount(
-      <Paragraph fontSize={'72'} fontWeight="regular" variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'72'} fontWeight="regular">
         hello
       </Paragraph>
     )
@@ -323,7 +323,7 @@ it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regul
 it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="bold', () => {
   expect(
     mount(
-      <Paragraph fontSize={'72'} fontWeight="bold" variant={'normal'}>
+      <Paragraph variant={'normal'} fontSize={'72'} fontWeight="bold">
         hello
       </Paragraph>
     )

package/src/Paragraph/index.tsx

@@ -1,8 +1,16 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface ParagraphProps extends BaseProps<'p'> {
+  /**
+   * variant is optional.
+   * Use 'lead' when a lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content.
+   * The majority of your body should use the standard 'normal' variant. This is the default value.
+   * You can use the 'small' sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
+   */
+  variant?: 'lead' | 'normal' | 'small';
+
   /**
    * fontSize is optional.
    * You can add this fontSize override prop in order to change the font size.
@@ -14,26 +22,19 @@ export interface ParagraphProps extends BaseProps<'p'> {
    * You can add a fontWeight override prop to change the font weight to regular or bold.
    */
   fontWeight?: 'regular' | 'bold';
-
-  /**
-   * variant is optional.
-   * Use 'lead' when a lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content.
-   * The majority of your body should use the standard 'normal' variant. This is the default value.
-   * You can use the 'small' sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lead' | 'normal' | 'small';
 }
 /**
  * Paragraph component is used for text formatting.
  */
 export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
   function Paragraph(
-    { children, className, fontSize, fontWeight, variant = 'normal', ...props },
+    { variant = 'normal', fontSize, fontWeight, className, children, ...props },
     ref
   ) {
     return (
       <Base
         as="p"
+        ref={ref}
         className={clsx(className, {
           'govgr-body': true,
           'govgr-body-l': variant === 'lead',
@@ -49,7 +50,6 @@ export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
           'govgr-!-font-weight-regular': fontWeight == 'regular',
           'govgr-!-font-weight-bold': fontWeight == 'bold',
         })}
-        ref={ref}
         {...props}
       >
         {children}

package/src/PhaseBanner/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PhaseBannerProps extends BaseProps<'div'> {
   /**
@@ -15,17 +15,17 @@ export interface PhaseBannerProps extends BaseProps<'div'> {
  */
 export const PhaseBanner = React.forwardRef<HTMLDivElement, PhaseBannerProps>(
   function PhaseBanner(
-    { children, className, underline = false, ...props },
+    { className, underline = false, children, ...props },
     ref
   ) {
     return (
       <Base
         as="div"
+        ref={ref}
         className={clsx(className, {
           'govgr-phase-banner': true,
           'govgr-phase-banner__underline': underline,
         })}
-        ref={ref}
         {...props}
       >
         <p

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PhaseBannerHeaderContainerProps extends BaseProps<'div'> {}
 
@@ -11,11 +11,12 @@ export const PhaseBannerHeaderContainer = React.forwardRef<
   return (
     <Base
       as="div"
+      ref={ref}
+      {...props}
       className={clsx({
         'govgr-phase-banner_header': true,
       })}
-      ref={ref}
-      {...props}>
+    >
       {children}
     </Base>
   );

package/src/PhaseBannerTag/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
 
 export interface PhaseBannerTagProps extends BaseProps<'strong'> {}
 /**
@@ -9,15 +9,15 @@ export interface PhaseBannerTagProps extends BaseProps<'strong'> {}
 export const PhaseBannerTag = React.forwardRef<
   HTMLElement,
   PhaseBannerTagProps
->(function PhaseBannerTag({ children, className, ...props }, ref) {
+>(function PhaseBannerTag({ className, children, ...props }, ref) {
   return (
     <Base
       as="strong"
+      ref={ref}
       className={clsx(className, {
         'govgr-tag': true,
         'govgr-phase-banner__content__tag': true,
       })}
-      ref={ref}
       {...props}
     >
       {children}