@xylabs/sdk-react 2.11.10 → 2.11.13

package/src/components/Experiments/ExperimentsDebugger.tsx

@@ -3,13 +3,7 @@ import React from 'react'
 
 import { useLocalStorage } from '../../hooks'
 import { FlexCol, FlexRow } from '../FlexBox'
-import {
-  ExperimentsData,
-  ExperimentsLocalStorageKey,
-  OutcomesData,
-  OutcomesLocalStorageKey,
-  VariantData,
-} from './models'
+import { ExperimentsData, ExperimentsLocalStorageKey, OutcomesData, OutcomesLocalStorageKey, VariantData } from './models'
 
 const ExperimentsDebugger: React.FC = ({ ...props }) => {
   const [experiments] = useLocalStorage<ExperimentsData>(ExperimentsLocalStorageKey, {})
@@ -36,8 +30,7 @@ const ExperimentsDebugger: React.FC = ({ ...props }) => {
         const marks = [
           { label: `${experiment.variants[0].name} | ${experiment.variants[0].weight}`, value: 0 },
           ...experiment.variants.map(({ weight }, index) => ({
-            label:
-              index === experiment.variants.length - 1 ? 'End' : `${experiment.variants[index + 1].name} | ${weight}`,
+            label: index === experiment.variants.length - 1 ? 'End' : `${experiment.variants[index + 1].name} | ${weight}`,
             value: index === 0 ? weight : sumUpVariants(experiment.variants.slice(0, index + 1)),
           })),
         ]

package/src/components/Experiments/index.tsx

@@ -1,5 +1,4 @@
-import { Experiment } from './Experiment'
-import { Experiments } from './Experiments'
-import { ExperimentsDebugger } from './ExperimentsDebugger'
-
-export { Experiment, Experiments, ExperimentsDebugger }
+export * from './Experiment'
+export * from './Experiments'
+export * from './ExperimentsDebugger'
+export * from './ExperimentsProps'

package/src/components/FlexBox/BusyBox.tsx

@@ -42,12 +42,8 @@ export const BusyBox: React.FC<BusyBoxProps> = ({
       {...props}
     >
       {children}
-      {busy && busyVariant === 'linear' ? (
-        <BusyLinearProgress color={busyColor} opacity={busyOpacity} {...busyLinearProps} />
-      ) : null}
-      {busy && busyVariant === 'circular' ? (
-        <BusyCircularProgress color={busyColor} opacity={busyOpacity} size={busySize} {...busyCircularProps} />
-      ) : null}
+      {busy && busyVariant === 'linear' ? <BusyLinearProgress color={busyColor} opacity={busyOpacity} {...busyLinearProps} /> : null}
+      {busy && busyVariant === 'circular' ? <BusyCircularProgress color={busyColor} opacity={busyOpacity} size={busySize} {...busyCircularProps} /> : null}
     </Box>
   )
 }

package/src/components/FlexBox/FlexRow.stories.tsx

@@ -68,13 +68,7 @@ FlexEndJustifiedContent.args = {
   title: 'FlexEndJustifiedContent',
 }
 
-export {
-  FlexEndJustifiedContent,
-  FlexStartJustifiedContent,
-  SpaceAroundJustifiedContent,
-  SpaceBetweenJustifiedContent,
-  SpaceEvenlyJustifiedContent,
-}
+export { FlexEndJustifiedContent, FlexStartJustifiedContent, SpaceAroundJustifiedContent, SpaceBetweenJustifiedContent, SpaceEvenlyJustifiedContent }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/HoverScale.tsx

@@ -4,11 +4,11 @@ import React, { PropsWithChildren } from 'react'
 
 import { FlexRow } from './FlexBox'
 
-type Props = PropsWithChildren<{
+export type HoverScaleProps = PropsWithChildren<{
   scale?: number
 }>
 
-const HoverScale: React.FC<Props> = (props) => {
+export const HoverScale: React.FC<HoverScaleProps> = (props) => {
   const { children, scale = 1.1 } = props
 
   const useStyles = makeStyles(() =>
@@ -31,5 +31,3 @@ const HoverScale: React.FC<Props> = (props) => {
     </FlexRow>
   )
 }
-
-export { HoverScale }

package/src/components/Identicon.tsx

@@ -7,7 +7,7 @@ const range = (n: number, in_min: number, in_max: number, out_min: number, out_m
   return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
 }
 
-interface IdenticonProps extends FlexBoxProps {
+export interface IdenticonProps extends FlexBoxProps {
   bg?: string
   className?: string
   count?: number
@@ -72,17 +72,7 @@ const updateCanvas = (canvas: React.RefObject<HTMLCanvasElement>, props: Identic
   }
 }
 
-const Identicon: React.FC<IdenticonProps> = ({
-  size = 400,
-  className = 'identicon',
-  bg,
-  count,
-  fg,
-  iconPadding,
-  palette,
-  value,
-  ...props
-}) => {
+export const Identicon: React.FC<IdenticonProps> = ({ size = 400, className = 'identicon', bg, count, fg, iconPadding, palette, value, ...props }) => {
   const canvas = useRef<HTMLCanvasElement>(null)
 
   useEffect(() => {
@@ -95,5 +85,3 @@ const Identicon: React.FC<IdenticonProps> = ({
     </FlexRow>
   )
 }
-
-export { Identicon }

package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx

@@ -14,9 +14,7 @@ const StorybookEntry = {
   title: 'Components/InvertableThemeProvider',
 } as ComponentMeta<typeof InvertableThemeProvider>
 
-const Template: ComponentStory<typeof InvertableThemeProvider> = (args) => (
-  <InvertableThemeProvider {...args}></InvertableThemeProvider>
-)
+const Template: ComponentStory<typeof InvertableThemeProvider> = (args) => <InvertableThemeProvider {...args}></InvertableThemeProvider>
 
 const ThemeEnabledComponent = () => {
   const theme = useTheme()

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -59,9 +59,7 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
 
   const Provider: React.FC = () => {
     return (
-      <InvertableThemeContext.Provider
-        value={{ darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions }}
-      >
+      <InvertableThemeContext.Provider value={{ darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions }}>
         <ThemeProvider theme={theme}>{children}</ThemeProvider>
       </InvertableThemeContext.Provider>
     )

package/src/components/LinkEx/{LinkToEx.tsx → LinkEx.tsx}

@@ -2,11 +2,11 @@ import { Link, LinkProps } from '@mui/material'
 import React from 'react'
 import { Link as RouterLink, To } from 'react-router-dom'
 
-interface Props extends LinkProps {
+export interface LinkExProps extends LinkProps {
   to?: To
 }
 
-const LinkEx: React.FC<Props> = ({ to, ...props }) => {
+export const LinkEx: React.FC<LinkExProps> = ({ to, ...props }) => {
   if (to) {
     return <Link rel="noopener noreferrer" component={RouterLink} to={to} {...props} />
   } else {
@@ -15,7 +15,4 @@ const LinkEx: React.FC<Props> = ({ to, ...props }) => {
 }
 
 /** @deprecated use LinkEx instead */
-const LinkToEx = LinkEx
-
-// eslint-disable-next-line deprecation/deprecation
-export { LinkEx, LinkToEx }
+export const LinkToEx = LinkEx

package/src/components/LinkEx/index.ts

@@ -1 +1 @@
-export * from './LinkToEx'
+export * from './LinkEx'

package/src/components/NumberStatus/NumberStatus.stories.tsx

@@ -75,17 +75,7 @@ Large10Digits.args = {
   value: 334455667788,
 }
 
-export {
-  Default,
-  Default6Digits,
-  Default10Digits,
-  Large,
-  Large6Digits,
-  Large10Digits,
-  Small,
-  Small6Digits,
-  Small10Digits,
-}
+export { Default, Default6Digits, Default10Digits, Large, Large6Digits, Large10Digits, Small, Small6Digits, Small10Digits }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/NumberStatus/NumberStatus.tsx

@@ -40,12 +40,7 @@ const NumberStatus: React.FC<NumberStatusProps> = ({
       }}
       {...props}
     >
-      <FlexCol
-        alignItems="stretch"
-        height={sizePixels}
-        width={autoWidth ? '100%' : sizePixels}
-        busy={value === undefined && !error}
-      >
+      <FlexCol alignItems="stretch" height={sizePixels} width={autoWidth ? '100%' : sizePixels} busy={value === undefined && !error}>
         <FlexGrowRow
           bgcolor={bgColorTop}
           color={theme.palette.getContrastText(bgColorTop)}

package/src/components/NumberStatus/index.ts

@@ -1,3 +1,2 @@
-import { NumberStatus } from './NumberStatus'
-
-export { NumberStatus }
+export * from './NumberStatus'
+export * from './NumberStatusProps'

package/src/components/Pixel/PixelDebugger.tsx

@@ -44,12 +44,7 @@ export const PixelDebugger: React.FC = () => {
                 </ButtonEx>
               </FlexCol>
               {displayEvents && !!events.length && (
-                <FlexCol
-                  alignItems="stretch"
-                  alignContent="start"
-                  padding={2}
-                  sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}
-                >
+                <FlexCol alignItems="stretch" alignContent="start" padding={2} sx={{ cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' }}>
                   {events.map((e, index) => (
                     <PixelEventDetails key={`${e.event}-${index}`} events={events} index={index} {...e} />
                   ))}
@@ -64,12 +59,7 @@ export const PixelDebugger: React.FC = () => {
   )
 }
 
-const PixelEventDetails: React.FC<PixelEvent & { index: number; events: PixelEvent[] }> = ({
-  event,
-  fields,
-  index,
-  events,
-}) => {
+const PixelEventDetails: React.FC<PixelEvent & { index: number; events: PixelEvent[] }> = ({ event, fields, index, events }) => {
   const [isOpen, setIsOpen] = useState(false)
   return (
     <FlexCol alignItems="stretch" marginBottom={0.5} onClick={() => setIsOpen(!isOpen)}>

package/src/components/Pixel/PixelDebuggerProvider.tsx

@@ -4,9 +4,5 @@ import { WithChildren } from '../../WithChildren'
 
 export const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {
   const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
-  return (
-    <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>
-      {children}
-    </DebugUserEventsContext.Provider>
-  )
+  return <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>{children}</DebugUserEventsContext.Provider>
 }

package/src/components/QuickTipButton/QuickTipButton.tsx

@@ -12,13 +12,7 @@ const QuickTipButton: React.FC<IconButtonProps> = ({ title, children, ...props }
       <IconButton onClick={() => setMessageOpen(true)} size="small" {...props}>
         <AiOutlineQuestionCircle size={16} />
       </IconButton>
-      <MessageDialog
-        onOk={() => setMessageOpen(false)}
-        onCancel={() => setMessageOpen(false)}
-        onClose={() => setMessageOpen(false)}
-        open={messageOpen}
-        title={title ?? ''}
-      >
+      <MessageDialog onOk={() => setMessageOpen(false)} onCancel={() => setMessageOpen(false)} onClose={() => setMessageOpen(false)} open={messageOpen} title={title ?? ''}>
         {children}
       </MessageDialog>
     </>

package/src/components/RedirectWithQuery.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react'
 import { NavigateOptions, To, useLocation, useNavigate } from 'react-router-dom'
 
-interface RedirectProps {
+export interface RedirectWithQueryProps {
   to?: To
   toOptions?: NavigateOptions
   href?: string
 }
 
-const RedirectWithQuery: React.ComponentType<RedirectProps> = ({ href, to, toOptions }) => {
+export const RedirectWithQuery: React.ComponentType<RedirectWithQueryProps> = ({ href, to, toOptions }) => {
   const newPath = `${to}${document.location.search}`
   const navigate = useNavigate()
   const { pathname } = useLocation()
@@ -24,5 +24,3 @@ const RedirectWithQuery: React.ComponentType<RedirectProps> = ({ href, to, toOpt
 
   return <div />
 }
-
-export { RedirectWithQuery }

package/src/components/RichResult/RichResult.tsx

@@ -6,15 +6,13 @@ type WithContext<T extends Base> = T & {
   '@context': 'https://schema.org'
 }
 
-interface Props {
+export interface RichResultProps {
   thing: Thing
 }
 
-const RichResult: React.FC<Props> = (props) => {
+export const RichResult: React.FC<RichResultProps> = (props) => {
   const { thing } = props
   const thingWithContext = thing as WithContext<Thing>
   thingWithContext['@context'] = 'https://schema.org'
   return <script type="application/ld+json">{JSON.stringify(thingWithContext)}</script>
 }
-
-export { RichResult }

package/src/components/RichResult/index.ts

@@ -1,4 +1,2 @@
-import { RichResult } from './RichResult'
-
 export * from './jsonld'
-export { RichResult }
+export * from './RichResult'

package/src/components/RichResult/jsonld/Brand.ts

@@ -4,11 +4,9 @@ import { ImageObject } from './ImageObject'
 import { Intangible } from './Intangible'
 import { Review } from './Review'
 
-interface Brand extends Intangible {
+export interface Brand extends Intangible {
   aggregateRating?: AggregateRating
   logo?: ImageObject | URL
   review?: Review
   slogan?: Text
 }
-
-export type { Brand }

package/src/components/RichResult/jsonld/index.ts

@@ -1,92 +1,47 @@
-import { Action } from './Action'
-import { ActionStatusType } from './ActionStatusType'
-import { AdministrativeArea } from './AdministrativeArea'
-import { AggregateRating } from './AggrigateRating'
-import { Article } from './Article'
-import { Base } from './Base'
-import { Class } from './Class'
-import { ContactPoint } from './ContactPoint'
-import { ContactPointOption } from './ContactPointOption'
-import { Country } from './Country'
-import { CreativeWork } from './CreativeWork'
-import { DateTime } from './DateTime'
-import { EntryPoint } from './EntryPoint'
-import { Enumeration } from './Enumeration'
-import { GeoShape } from './GeoShape'
-import { GeospatialGeometry } from './GeospatialGeometry'
-import { ImageObject } from './ImageObject'
-import { Intangible } from './Intangible'
-import { Integer } from './Integer'
-import { ItemAvailability } from './ItemAvailability'
-import { Language } from './Language'
-import { Map } from './Map'
-import { MapCategoryType } from './MapCategoryType'
-import { MediaObject } from './MediaObject'
-import { MobileApplication } from './MobileApplication'
-import { Offer } from './Offer'
-import { Organization } from './Organization'
-import { Person } from './Person'
-import { Photograph } from './Photograph'
-import { Place } from './Place'
-import { PostalAddress } from './PostalAddress'
-import { Product } from './Product'
-import { Property } from './Property'
-import { PropertyValue } from './PropertyValue'
-import { QualitativeValue } from './QualitativeValue'
-import { QuantitativeValue } from './QuantitativeValue'
-import { Rating } from './Rating'
-import { Review } from './Review'
-import { Service } from './Service'
-import { SoftwareApplication } from './SoftwareApplication'
-import { StructuredValue } from './StructuredValue'
-import { Text } from './Text'
-import { Thing } from './Thing'
-import { Time } from './Time'
-import { URL } from './URL'
-import { VirtualLocation } from './VirtualLocation'
-
-export { ActionStatusType, ContactPointOption, ItemAvailability, MapCategoryType }
-export type {
-  Action,
-  AdministrativeArea,
-  AggregateRating,
-  Article,
-  Base,
-  Class,
-  ContactPoint,
-  Country,
-  CreativeWork,
-  DateTime,
-  EntryPoint,
-  Enumeration,
-  GeoShape,
-  GeospatialGeometry,
-  ImageObject,
-  Intangible,
-  Integer,
-  Language,
-  Map,
-  MediaObject,
-  MobileApplication,
-  Offer,
-  Organization,
-  Person,
-  Photograph,
-  Place,
-  PostalAddress,
-  Product,
-  Property,
-  PropertyValue,
-  QualitativeValue,
-  QuantitativeValue,
-  Rating,
-  Review,
-  Service,
-  SoftwareApplication,
-  StructuredValue,
-  Text,
-  Thing,
-  Time,
-  URL,
-  VirtualLocation,
-}
+export * from './Action'
+export * from './ActionStatusType'
+export * from './AdministrativeArea'
+export * from './AggrigateRating'
+export * from './Article'
+export * from './Base'
+export * from './Brand'
+export * from './Class'
+export * from './ContactPoint'
+export * from './ContactPointOption'
+export * from './Country'
+export * from './CreativeWork'
+export * from './DateTime'
+export * from './EntryPoint'
+export * from './Enumeration'
+export * from './GeoShape'
+export * from './GeospatialGeometry'
+export * from './ImageObject'
+export * from './Intangible'
+export * from './Integer'
+export * from './ItemAvailability'
+export * from './Language'
+export * from './Map'
+export * from './MapCategoryType'
+export * from './MediaObject'
+export * from './MobileApplication'
+export * from './Offer'
+export * from './Organization'
+export * from './Person'
+export * from './Photograph'
+export * from './Place'
+export * from './PostalAddress'
+export * from './Product'
+export * from './Property'
+export * from './PropertyValue'
+export * from './QualitativeValue'
+export * from './QuantitativeValue'
+export * from './Rating'
+export * from './Review'
+export * from './Service'
+export * from './SoftwareApplication'
+export * from './StructuredValue'
+export * from './Text'
+export * from './Thing'
+export * from './Time'
+export * from './URL'
+export * from './VirtualLocation'

package/src/components/ScrollToTopButton.tsx

@@ -1,11 +1,11 @@
 import { Box, useScrollTrigger, useTheme, Zoom, ZoomProps } from '@mui/material'
 import React from 'react'
 
-interface ScrollToTopButtonProps extends ZoomProps {
+export interface ScrollToTopButtonProps extends ZoomProps {
   anchorId: string
 }
 
-const ScrollToTopButton: React.FC<ScrollToTopButtonProps> = ({ children, anchorId, ...props }) => {
+export const ScrollToTopButton: React.FC<ScrollToTopButtonProps> = ({ children, anchorId, ...props }) => {
   const trigger = useScrollTrigger({
     disableHysteresis: true,
     threshold: 100,
@@ -23,18 +23,9 @@ const ScrollToTopButton: React.FC<ScrollToTopButtonProps> = ({ children, anchorI
 
   return (
     <Zoom in={trigger} {...props}>
-      <Box
-        zIndex={10}
-        position="fixed"
-        right={theme.spacing(2)}
-        bottom={theme.spacing(2)}
-        onClick={handleClick}
-        role="presentation"
-      >
+      <Box zIndex={10} position="fixed" right={theme.spacing(2)} bottom={theme.spacing(2)} onClick={handleClick} role="presentation">
         {children}
       </Box>
     </Zoom>
   )
 }
-
-export { ScrollToTopButton }

package/src/components/SelectEx.tsx

@@ -6,16 +6,9 @@ export interface SelectExProps<T> extends SelectProps<T> {
   mode?: PaletteMode
 }
 
-export const SelectEx: <T>(props: SelectExProps<T>) => JSX.Element = ({
-  MenuProps,
-  mode = 'light',
-  colorize,
-  ...props
-}) => {
+export const SelectEx: <T>(props: SelectExProps<T>) => JSX.Element = ({ MenuProps, mode = 'light', colorize, ...props }) => {
   const theme = useTheme()
-  const colorizeMenuProps = colorize
-    ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
-    : {}
+  const colorizeMenuProps = colorize ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } } : {}
 
   return <Select MenuProps={merge(MenuProps, colorizeMenuProps)} {...props} />
 }

package/src/components/TokenAmount/TokenAmount.tsx

@@ -37,24 +37,12 @@ const TokenAmount: React.FC<TokenAmountProps> = ({
         <FlexRow>
           {logo ? <img src={xyoLogo} height={24} /> : null}
           {label ? (
-            <Typography
-              marginRight={1}
-              marginLeft={logo ? 1 : 0}
-              noWrap={true}
-              fontFamily={textFontFamily}
-              variant="caption"
-            >
+            <Typography marginRight={1} marginLeft={logo ? 1 : 0} noWrap={true} fontFamily={textFontFamily} variant="caption">
               {label}
             </Typography>
           ) : null}
         </FlexRow>
-        <Typography
-          color={textColor}
-          noWrap={true}
-          fontFamily={textFontFamily}
-          variant="body1"
-          style={{ textTransform: 'none' }}
-        >
+        <Typography color={textColor} noWrap={true} fontFamily={textFontFamily} variant="body1" style={{ textTransform: 'none' }}>
           {amountString}
         </Typography>
       </FlexRow>

package/src/components/dialogs/ErrorDialog.tsx

@@ -14,12 +14,7 @@ const toAxiosError = (error: Error) => {
   return (error as AxiosError).isAxiosError ? (error as AxiosError) : undefined
 }
 
-const ErrorDialogOpen: React.FC<ErrorDialogProps> = ({
-  onAction,
-  title = 'Oops. Something went wrong.',
-  error = Error('Unknown Error'),
-  ...props
-}) => {
+const ErrorDialogOpen: React.FC<ErrorDialogProps> = ({ onAction, title = 'Oops. Something went wrong.', error = Error('Unknown Error'), ...props }) => {
   const onCloseClicked = () => {
     onAction?.(false)
   }
@@ -36,9 +31,7 @@ const ErrorDialogOpen: React.FC<ErrorDialogProps> = ({
       <DialogTitle>{title}</DialogTitle>
       <DialogContent>
         <FlexRow>
-          <Typography color="error">
-            {axiosError ? `${message} [${axiosError?.code ?? 'Connection Failure'}]` : `${message}`}
-          </Typography>
+          <Typography color="error">{axiosError ? `${message} [${axiosError?.code ?? 'Connection Failure'}]` : `${message}`}</Typography>
         </FlexRow>
       </DialogContent>
       <DialogActions>

package/src/components/dialogs/index.ts

@@ -1,4 +1,2 @@
-import { ErrorDialog } from './ErrorDialog'
-import { MessageDialog } from './MessageDialog'
-
-export { ErrorDialog, MessageDialog }
+export * from './ErrorDialog'
+export * from './MessageDialog'

package/src/components/index.ts

@@ -1,19 +1,16 @@
-import { Background } from './Background'
-import { CoverProgress } from './CoverProgress'
-import { HoverScale } from './HoverScale'
-import { Identicon } from './Identicon'
-import { RedirectWithQuery } from './RedirectWithQuery'
-import { ScrollToTopButton } from './ScrollToTopButton'
-
 export * from './AppBarEx'
+export * from './Background'
 export * from './BasePage'
 export * from './Breadcrumbs'
 export * from './ButtonEx'
 export * from './CookieConsent'
+export * from './CoverProgress'
 export * from './dialogs'
 export * from './EthAccount'
 export * from './Experiments'
 export * from './FlexBox'
+export * from './HoverScale'
+export * from './Identicon'
 export * from './InvertableThemeProvider'
 export * from './LinkEx'
 export * from './MenuEx'
@@ -21,10 +18,9 @@ export * from './NumberStatus'
 export * from './Pixel'
 export * from './Portal'
 export * from './QuickTipButton'
+export * from './RedirectWithQuery'
 export * from './RichResult'
 export * from './ScrollToTop'
+export * from './ScrollToTopButton'
 export * from './SelectEx'
 export * from './TokenAmount'
-
-// eslint-disable-next-line deprecation/deprecation
-export { Background, CoverProgress, HoverScale, Identicon, RedirectWithQuery, ScrollToTopButton }

package/src/contexts/CookieConsent/Loader.tsx

@@ -24,9 +24,7 @@ const CookieConsentLoader: React.FC<WithChildren> = ({ children }) => {
   }
 
   return (
-    <CookieConsentContext.Provider
-      value={{ accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName }}
-    >
+    <CookieConsentContext.Provider value={{ accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName }}>
       {children}
     </CookieConsentContext.Provider>
   )