@veracity/vui 1.0.0 → 1.1.0

package/src/core/links.tsx

@@ -15,37 +15,37 @@ const LinksContext = createContext<LinksContextType | undefined>(undefined)
  * This is supposed to aid login flow when navigating between Veracity applications.
  */
 export function getLoggedInLink(link: string, isLoggedIn?: boolean) {
-	try {
-		const url = new URL(link)
-
-		if (isLoggedIn) {
-			url.searchParams.append('loggedin', '1')
-		} else {
-			url.searchParams.delete('loggedin')
-		}
-
-		return url.toString()
-	} catch {
-		return link
-	}
+  try {
+    const url = new URL(link)
+
+    if (isLoggedIn) {
+      url.searchParams.append('loggedin', '1')
+    } else {
+      url.searchParams.delete('loggedin')
+    }
+
+    return url.toString()
+  } catch {
+    return link
+  }
 }
 
 export function LinksProvider(props: { children: React.ReactNode }) {
-	const linksState = useState<LinksDict>({})
+  const linksState = useState<LinksDict>({})
 
-	return <LinksContext.Provider value={linksState} {...props} />
+  return <LinksContext.Provider value={linksState} {...props} />
 }
 
 /** Returns links and setLinks from LinksContext. */
 export function useLinks() {
-	const context = useContext(LinksContext)
+  const context = useContext(LinksContext)
 
-	if (context === undefined) {
-		console.error('useLinks must be used within a LinksContext.')
-		return [{}, noop] as LinksContextType
-	}
+  if (context === undefined) {
+    console.error('useLinks must be used within a LinksContext.')
+    return [{}, noop] as LinksContextType
+  }
 
-	return context
+  return context
 }
 
 /**
@@ -53,42 +53,42 @@ export function useLinks() {
  * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
  */
 export function useLoadLinks(env?: Environment, isLoggedIn?: boolean) {
-	const [, setLinks] = useLinks()
-
-	// Load links from the CDN for the given environment.
-	const loadLinks = async (env: Environment) => {
-		try {
-			const response = await fetch(`${cdnUrls[env]}/common/data/links/base.json`)
-			if (!response.ok) return
-
-			const data = await response.json()
-
-			if (isObject(data)) {
-				setLinks(updateLoggedInParam(data))
-			}
-		} catch {
-			console.error('Failed to retrieve links')
-		}
-	}
-
-	/**
-	 * Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
-	 * useCallbackRef is used here to prevent a stale closure in async loadLinks.
-	 */
-	const updateLoggedInParam = useCallbackRef((links: LinksDict) => {
-		return Object.keys(links).reduce((loggedInLinks: LinksDict, key) => {
-			loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn)
-			return loggedInLinks
-		}, {})
-	})
-
-	useEffect(() => {
-		if (!env) return
-
-		loadLinks(env)
-	}, [env])
-
-	useEffect(() => {
-		setLinks(updateLoggedInParam)
-	}, [isLoggedIn])
+  const [, setLinks] = useLinks()
+
+  // Load links from the CDN for the given environment.
+  const loadLinks = async (env: Environment) => {
+    try {
+      const response = await fetch(`${cdnUrls[env]}/common/data/links/base.json`)
+      if (!response.ok) return
+
+      const data = await response.json()
+
+      if (isObject(data)) {
+        setLinks(updateLoggedInParam(data))
+      }
+    } catch {
+      console.error('Failed to retrieve links')
+    }
+  }
+
+  /**
+   * Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
+   * useCallbackRef is used here to prevent a stale closure in async loadLinks.
+   */
+  const updateLoggedInParam = useCallbackRef((links: LinksDict) => {
+    return Object.keys(links).reduce((loggedInLinks: LinksDict, key) => {
+      loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn)
+      return loggedInLinks
+    }, {})
+  })
+
+  useEffect(() => {
+    if (!env) return
+
+    loadLinks(env)
+  }, [env])
+
+  useEffect(() => {
+    setLinks(updateLoggedInParam)
+  }, [isLoggedIn])
 }

package/src/core/media.tsx

@@ -9,24 +9,24 @@ import { th, useTheme } from './theme'
 type ScreenWidth = Screen | AnyNumber | AnyString
 
 export type RenderOnScreenProps = {
-	/** Changes direction to below the breakpoint. */
-	isDown?: boolean
-	/** Breakpoint to compare viewport width against. */
-	screen?: Screen
+  /** Changes direction to below the breakpoint. */
+  isDown?: boolean
+  /** Breakpoint to compare viewport width against. */
+  screen?: Screen
 }
 
 /** Returns CSS media string with appropriate min-width and max-width values. */
 export const mediaBetween = (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) =>
-	`@media (min-width: ${th.screen(minWidth)(props)}) and (max-width: ${th.screen(maxWidth)(props)})`
+  `@media (min-width: ${th.screen(minWidth)(props)}) and (max-width: ${th.screen(maxWidth)(props)})`
 
 /** Returns CSS media string with appropriate max-width value */
 export const mediaDown = (width: ScreenWidth) => (props: StyledProps<unknown>) => {
-	return `@media (max-width: ${th.screen(width)(props)})`
+  return `@media (max-width: ${th.screen(width)(props)})`
 }
 
 /** Returns CSS media string with appropriate min-width value. */
 export const mediaUp = (width: ScreenWidth) => (props: StyledProps<unknown>) =>
-	`@media (min-width: ${th.screen(width)(props)})`
+  `@media (min-width: ${th.screen(width)(props)})`
 
 /** Renders its content when viewport width is at or above 'md' breakpoint (default: 960px and more). */
 export const RenderOnDesktop: FC<RenderOnScreenProps> = props => <RenderOnScreen {...props} />
@@ -39,38 +39,38 @@ export const RenderOnMobile: FC<RenderOnScreenProps> = props => <RenderOnScreen
  * Optionally, direction can be set to down, or below, the breakpoint.
  */
 export const RenderOnScreen: FC<RenderOnScreenProps> = ({ children, isDown, screen = 'md' }) => {
-	const mediaFn = isDown ? useDown : useUp
-	return mediaFn(screen) ? <>{children}</> : null
+  const mediaFn = isDown ? useDown : useUp
+  return mediaFn(screen) ? <>{children}</> : null
 }
 
 /** Returns true if current viewport width is between provided min and max widths. */
 export function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth) {
-	const isDown = useDown(maxWidth)
-	const isUp = useUp(minWidth)
+  const isDown = useDown(maxWidth)
+  const isUp = useUp(minWidth)
 
-	return isDown && isUp
+  return isDown && isUp
 }
 
 /** Returns true if current viewport width is smaller than provided width. */
 export function useDown(width: ScreenWidth) {
-	const { value, viewportWidth } = useMedia(width)
+  const { value, viewportWidth } = useMedia(width)
 
-	return viewportWidth !== null && value !== null && viewportWidth < value
+  return viewportWidth !== null && value !== null && viewportWidth < value
 }
 
 /** Returns viewport width and provided screen width as a number. */
 export function useMedia(width: ScreenWidth) {
-	const theme = useTheme()
-	const viewportWidth = useViewportWidth()
-	const valueString = th.screen(width)({ theme }) as string
-	const value = Number(valueString.replace('px', ''))
+  const theme = useTheme()
+  const viewportWidth = useViewportWidth()
+  const valueString = th.screen(width)({ theme }) as string
+  const value = Number(valueString.replace('px', ''))
 
-	return { value, viewportWidth }
+  return { value, viewportWidth }
 }
 
 /** Returns true if current viewport width is larger than or equal to provided width. */
 export function useUp(width: ScreenWidth) {
-	const { value, viewportWidth } = useMedia(width)
+  const { value, viewportWidth } = useMedia(width)
 
-	return viewportWidth !== null && value !== null && viewportWidth >= value
+  return viewportWidth !== null && value !== null && viewportWidth >= value
 }

package/src/core/styled.ts

@@ -4,14 +4,14 @@ import { createX, StyleGenerator } from '@xstyled/styled-components'
 import { BoxElements } from '@xstyled/styled-components/dist/BoxElements'
 import { flattenStrings } from '@xstyled/util'
 import scStyled, {
-	createGlobalStyle as scCreateGlobalStyle,
-	css as scCss,
-	DefaultTheme,
-	FlattenSimpleInterpolation,
-	StyledConfig,
-	ThemedCssFunction,
-	ThemedStyledFunction,
-	ThemedStyledInterface
+  createGlobalStyle as scCreateGlobalStyle,
+  css as scCss,
+  DefaultTheme,
+  FlattenSimpleInterpolation,
+  StyledConfig,
+  ThemedCssFunction,
+  ThemedStyledFunction,
+  ThemedStyledInterface
 } from 'styled-components'
 
 import { system, SystemProps } from '../system'
@@ -23,37 +23,37 @@ export type CreateGlobalStyle = typeof scCreateGlobalStyle
 
 /** Type of the custom 'styled' function. */
 export type VStyled = ThemedStyledInterface<DefaultTheme> & {
-	[Key in keyof BoxElements]: ThemedStyledFunction<BoxElements[Key], DefaultTheme, SystemProps>
+  [Key in keyof BoxElements]: ThemedStyledFunction<BoxElements[Key], DefaultTheme, SystemProps>
 }
 
 /** Creates enhanced 'styled' function with optional style generators and prop-forwarding safeguard. */
 function createBaseStyled(css: CSSFunction, generator?: StyleGenerator) {
-	const config = generator ? forwardPropConfig(generator) : {}
+  const config = generator ? forwardPropConfig(generator) : {}
 
-	return ((component: Parameters<typeof scStyled>[0]) => {
-		const baseStyled = config ? scStyled(component).withConfig(config) : scStyled(component)
+  return ((component: Parameters<typeof scStyled>[0]) => {
+    const baseStyled = config ? scStyled(component).withConfig(config) : scStyled(component)
 
-		return getCreateStyle(baseStyled, css, generator)
-	}) as VStyled
+    return getCreateStyle(baseStyled, css, generator)
+  }) as VStyled
 }
 
 /** Enhances createGlobalStyle function with custom 'css' helper. */
 function createCreateGlobalStyle(): CreateGlobalStyle {
-	const css = createCssFunction()
-	return ((...args: Parameters<CreateGlobalStyle>): ReturnType<CreateGlobalStyle> =>
-		scCreateGlobalStyle([
-			// @ts-ignore
-			css(...args)
-		])) as CreateGlobalStyle
+  const css = createCssFunction()
+  return ((...args: Parameters<CreateGlobalStyle>): ReturnType<CreateGlobalStyle> =>
+    scCreateGlobalStyle([
+      // @ts-ignore
+      css(...args)
+    ])) as CreateGlobalStyle
 }
 
 /** Enhances styled-components' 'css' function with automatic theming. */
 function createCssFunction() {
-	return ((...args: Parameters<CSSFunction>) => {
-		const scCssArgs = scCss(...args)
-		const flattenedArgs = flattenStrings(scCssArgs as any[])
-		return flattenedArgs.map(transform) as FlattenSimpleInterpolation
-	}) as CSSFunction
+  return ((...args: Parameters<CSSFunction>) => {
+    const scCssArgs = scCss(...args)
+    const flattenedArgs = flattenStrings(scCssArgs as any[])
+    return flattenedArgs.map(transform) as FlattenSimpleInterpolation
+  }) as CSSFunction
 }
 
 /**
@@ -61,41 +61,41 @@ function createCssFunction() {
  * Includes base version and system version using 'Box' postfix.
  */
 function createStyled(generator: StyleGenerator): VStyled {
-	const css = createCssFunction()
-	const styled = createBaseStyled(css)
-	const vstyled = createBaseStyled(css, generator)
-
-	Object.keys(scStyled).forEach(key => {
-		// @ts-ignore
-		styled[key] = styled(key)
-		// @ts-ignore
-		styled[`${key}Box`] = vstyled(key)
-	})
-
-	return styled
+  const css = createCssFunction()
+  const styled = createBaseStyled(css)
+  const vstyled = createBaseStyled(css, generator)
+
+  Object.keys(scStyled).forEach(key => {
+    // @ts-ignore
+    styled[key] = styled(key)
+    // @ts-ignore
+    styled[`${key}Box`] = vstyled(key)
+  })
+
+  return styled
 }
 
 /** Provides configuration to the 'styled' function, which filters out xstyled system props. */
 function forwardPropConfig(generator: StyleGenerator) {
-	return {
-		shouldForwardProp: (prop: any, defaultValidatorFn: (prop: any) => boolean) => {
-			if (typeof prop === 'string' && generator.meta.props.includes(prop)) return false
-			return defaultValidatorFn(prop)
-		}
-	}
+  return {
+    shouldForwardProp: (prop: any, defaultValidatorFn: (prop: any) => boolean) => {
+      if (typeof prop === 'string' && generator.meta.props.includes(prop)) return false
+      return defaultValidatorFn(prop)
+    }
+  }
 }
 
 /** Extends styled component with a given styles generator (system). */
 function getCreateStyle(baseCreateStyle: ThemedStyledFunction<any, any>, css: CSSFunction, generator?: StyleGenerator) {
-	const createStyle = (...args: Parameters<typeof css>) => baseCreateStyle`${css(...args)}${generator}`
+  const createStyle = (...args: Parameters<typeof css>) => baseCreateStyle`${css(...args)}${generator}`
 
-	createStyle.attrs = (attrs: Parameters<typeof baseCreateStyle.attrs>[0]) =>
-		getCreateStyle(baseCreateStyle.attrs(attrs), css, generator)
+  createStyle.attrs = (attrs: Parameters<typeof baseCreateStyle.attrs>[0]) =>
+    getCreateStyle(baseCreateStyle.attrs(attrs), css, generator)
 
-	createStyle.withConfig = (config: StyledConfig<any>) =>
-		getCreateStyle(baseCreateStyle.withConfig(config), css, generator)
+  createStyle.withConfig = (config: StyledConfig<any>) =>
+    getCreateStyle(baseCreateStyle.withConfig(config), css, generator)
 
-	return createStyle
+  return createStyle
 }
 
 export const createGlobalStyle = createCreateGlobalStyle()

package/src/core/theme.ts

@@ -9,43 +9,43 @@ type VuiThemeGetter<ThemeKey extends keyof VuiTheme> = ThemeGetter<keyof VuiThem
 
 /** Type of the 'th' theme getter function. */
 export type ThemeGet = {
-	(path: string, defaultValue?: any): (props: IProps) => any
-	animation: VuiThemeGetter<'animations'>
-	borders: VuiThemeGetter<'borders'>
-	color: VuiThemeGetter<'colors'>
-	duration: VuiThemeGetter<'durations'>
-	font: VuiThemeGetter<'fonts'>
-	fontSize: VuiThemeGetter<'fontSizes'>
-	fontWeight: VuiThemeGetter<'fontWeights'>
-	radius: VuiThemeGetter<'radii'>
-	ringWidth: VuiThemeGetter<'ringWidths'>
-	screen: VuiThemeGetter<'screens'>
-	shadow: VuiThemeGetter<'shadows'>
-	size: VuiThemeGetter<'sizes'>
-	space: VuiThemeGetter<'spaces'>
-	transform: VuiThemeGetter<'transforms'>
-	transition: VuiThemeGetter<'transitions'>
-	zIndex: VuiThemeGetter<'zIndices'>
+  (path: string, defaultValue?: any): (props: IProps) => any
+  animation: VuiThemeGetter<'animations'>
+  borders: VuiThemeGetter<'borders'>
+  color: VuiThemeGetter<'colors'>
+  duration: VuiThemeGetter<'durations'>
+  font: VuiThemeGetter<'fonts'>
+  fontSize: VuiThemeGetter<'fontSizes'>
+  fontWeight: VuiThemeGetter<'fontWeights'>
+  radius: VuiThemeGetter<'radii'>
+  ringWidth: VuiThemeGetter<'ringWidths'>
+  screen: VuiThemeGetter<'screens'>
+  shadow: VuiThemeGetter<'shadows'>
+  size: VuiThemeGetter<'sizes'>
+  space: VuiThemeGetter<'spaces'>
+  transform: VuiThemeGetter<'transforms'>
+  transition: VuiThemeGetter<'transitions'>
+  zIndex: VuiThemeGetter<'zIndices'>
 }
 
 /** Merges provided theme extensions and overrides with default VUI theme. */
 export function extendTheme(extensions: VuiThemeExtensions): VuiTheme {
-	return merge(defaultTheme, extensions)
+  return merge(defaultTheme, extensions)
 }
 
 /** Removes specific theming keys from the given props. */
 export function omitThemingProps<T extends ThemingProps>(props: T) {
-	const { size, variant, ...rest } = props // eslint-disable-line @typescript-eslint/no-unused-vars
+  const { size, variant, ...rest } = props // eslint-disable-line @typescript-eslint/no-unused-vars
 
-	return rest
+  return rest
 }
 
 /** Re-export of xstyled 'th' with custom typing and screen getter. */
 const th = xth as unknown as ThemeGet
 th.screen = themeGetter({
-	name: 'screen',
-	key: 'screens',
-	compose: getPx
+  name: 'screen',
+  key: 'screens',
+  compose: getPx
 })
 export { th }
 
@@ -55,42 +55,42 @@ export { th }
  * @param props - props object of the given component
  */
 export function useStyleConfig(component: keyof VuiTheme['components'], props: any = {}) {
-	const theme = useTheme()
-	const { baseStyle, defaultProps, parts = [], sizes, variants } = (theme?.components[component] as Dict) ?? {}
-	const mergedProps = {
-		...props,
-		colorScheme: props?.colorScheme ?? defaultProps?.colorScheme,
-		size: props?.size ?? defaultProps?.size,
-		variant: props?.variant ?? defaultProps?.variant
-	}
-	const { colorScheme, size, variant } = mergedProps
+  const theme = useTheme()
+  const { baseStyle, defaultProps, parts = [], sizes, variants } = (theme?.components[component] as Dict) ?? {}
+  const mergedProps = {
+    ...props,
+    colorScheme: props?.colorScheme ?? defaultProps?.colorScheme,
+    size: props?.size ?? defaultProps?.size,
+    variant: props?.variant ?? defaultProps?.variant
+  }
+  const { colorScheme, size, variant } = mergedProps
 
-	return useMemo(() => {
-		const baseStyles = runIfFn(baseStyle, mergedProps) ?? {}
-		const sizeStyles = runIfFn(sizes?.[size], mergedProps) ?? {}
-		const variantStyles = runIfFn(variants?.[variant], mergedProps) ?? {}
+  return useMemo(() => {
+    const baseStyles = runIfFn(baseStyle, mergedProps) ?? {}
+    const sizeStyles = runIfFn(sizes?.[size], mergedProps) ?? {}
+    const variantStyles = runIfFn(variants?.[variant], mergedProps) ?? {}
 
-		let styles: Dict = {}
+    let styles: Dict = {}
 
-		if (parts.length > 0) {
-			parts.forEach((part: string) => {
-				styles[part] = merge(baseStyles[part] ?? {}, sizeStyles[part] ?? {}, variantStyles[part] ?? {})
-			})
-		} else {
-			styles = merge(baseStyles, sizeStyles, variantStyles)
-		}
+    if (parts.length > 0) {
+      parts.forEach((part: string) => {
+        styles[part] = merge(baseStyles[part] ?? {}, sizeStyles[part] ?? {}, variantStyles[part] ?? {})
+      })
+    } else {
+      styles = merge(baseStyles, sizeStyles, variantStyles)
+    }
 
-		return styles
-	}, [colorScheme, size, variant])
+    return styles
+  }, [colorScheme, size, variant])
 }
 
 /** Returns theme value at the given path. */
 export function useTh(path: keyof VuiTheme | AnyString, defaultValue?: any) {
-	const theme = useTheme()
-	return th(path, defaultValue)({ theme })
+  const theme = useTheme()
+  return th(path, defaultValue)({ theme })
 }
 
 /** Returns the theme object with extensions. */
 export function useTheme(): VuiTheme {
-	return useStyledTheme()
+  return useStyledTheme()
 }

package/src/core/vui.ts

@@ -7,40 +7,40 @@ import { PropsOf, RefPropsOf } from '../utils'
  * Config object allows toggling memoization and providing custom 'areEqual' function.
  */
 export function vui<C extends React.ElementType, Props = {}>(
-	component: React.ForwardRefRenderFunction<any, PropsOf<C, Props>>,
-	config?: VuiComponentConfig<C, Props>
+  component: React.ForwardRefRenderFunction<any, PropsOf<C, Props>>,
+  config?: VuiComponentConfig<C, Props>
 ) {
-	const { memoCompare, isMemo = true } = config ?? {}
+  const { memoCompare, isMemo = true } = config ?? {}
 
-	if (isMemo) {
-		return React.memo(React.forwardRef(component), memoCompare) as unknown as VuiComponent<C, Props>
-	}
+  if (isMemo) {
+    return React.memo(React.forwardRef(component), memoCompare) as unknown as VuiComponent<C, Props>
+  }
 
-	return React.forwardRef(component) as unknown as VuiComponent<C, Props>
+  return React.forwardRef(component) as unknown as VuiComponent<C, Props>
 }
 
 /** VUI component type, which allows element props inference and extension, 'as' and 'ref'. */
 export type VuiComponent<C extends ElementType, Props = {}> = {
-	// 'as' component call signature
-	<AsC extends ElementType>(
-		props: PropsWithChildren<RefPropsOf<AsC, Props>> & {
-			as: AsC
-		}
-	): ReactElement<any, any> | null
-	// Regular call signature should be last, so that 'styled' can infer props correctly
-	(props: RefPropsOf<C, Props>): ReactElement<any, any> | null
-
-	defaultProps?: Partial<PropsOf<C, Props>>
-	displayName?: string
+  // 'as' component call signature
+  <AsC extends ElementType>(
+    props: PropsWithChildren<RefPropsOf<AsC, Props>> & {
+      as: AsC
+    }
+  ): ReactElement<any, any> | null
+  // Regular call signature should be last, so that 'styled' can infer props correctly
+  (props: RefPropsOf<C, Props>): ReactElement<any, any> | null
+
+  defaultProps?: Partial<PropsOf<C, Props>>
+  displayName?: string
 }
 
 /** Config for VUI component creator helper, which allows toggling memoization and 'areEqual' function. */
 export type VuiComponentConfig<C extends ElementType, Props = {}> = {
-	isMemo?: boolean
-	memoCompare?: (
-		prevProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>,
-		nextProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>
-	) => boolean
+  isMemo?: boolean
+  memoCompare?: (
+    prevProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>,
+    nextProps: Readonly<PropsWithChildren<PropsWithoutRef<PropsOf<C, Props>>>>
+  ) => boolean
 }
 
 /**
@@ -48,10 +48,10 @@ export type VuiComponentConfig<C extends ElementType, Props = {}> = {
  * use PropsOf type, like: type MyBoxProps = PropsOf<'div', MyProps>
  */
 export type VC<C extends ElementType, Props = {}> = {
-	(props: PropsOf<C, Props>): ReactElement<any, any> | null
+  (props: PropsOf<C, Props>): ReactElement<any, any> | null
 
-	defaultProps?: Partial<PropsOf<C, Props>>
-	displayName?: string
+  defaultProps?: Partial<PropsOf<C, Props>>
+  displayName?: string
 }
 
 export default vui

package/src/core/vuiProvider/globalStyle.tsx

@@ -5,7 +5,7 @@ import { bounce, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, pulse,
 import fontFaces from './fontFaces'
 
 type GlobalStyleProps = {
-	globalStyle?: boolean
+  globalStyle?: boolean
 }
 
 /**
@@ -29,14 +29,14 @@ export default createGlobalStyle<GlobalStyleProps>`
 	}
 
 	${p =>
-		p.globalStyle &&
-		css`
-			body {
-				color: prussian.80;
-				font-family: avenir;
-				font-size: md;
-			}
-		`}
+    p.globalStyle &&
+    css`
+      body {
+        color: prussian.80;
+        font-family: avenir;
+        font-size: md;
+      }
+    `}
 
 	@keyframes vui-bounce {
 		${bounce}
@@ -77,15 +77,15 @@ export default createGlobalStyle<GlobalStyleProps>`
 
 /** Recursively maps through all theme styles and generates a set of CSS properties. */
 function generateCSSVariables() {
-	function computeStyle(name: string, value: any): string {
-		if (!isObject(value)) return `${name}: ${typeof value === 'string' ? value : `${value}px`};\n`
+  function computeStyle(name: string, value: any): string {
+    if (!isObject(value)) return `${name}: ${typeof value === 'string' ? value : `${value}px`};\n`
 
-		return Object.entries(value).reduce((str, [key, value]) => {
-			return (str += computeStyle(`${name}-${key}`, value))
-		}, '')
-	}
+    return Object.entries(value).reduce((str, [key, value]) => {
+      return (str += computeStyle(`${name}-${key}`, value))
+    }, '')
+  }
 
-	const { animations, transformers, ...styles } = foundations
+  const { animations, transformers, ...styles } = foundations
 
-	return computeStyle('--vui', styles)
+  return computeStyle('--vui', styles)
 }