@sanity/ui 1.8.3 → 2.0.0-alpha.10

package/src/primitives/button/styles.ts

@@ -1,7 +1,9 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
+import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
 import {ButtonMode, ButtonTone} from '../../types'
 import {CSSObject} from '../../types/styled'
 
@@ -42,6 +44,11 @@ export function buttonBaseStyles(): ReturnType<typeof css> {
 }
 
 const buttonTheme = {border: {width: 1}}
+const defaultBoxShadow = '0px 2px 0px 0px rgba(112, 128, 155, 0.19);'
+
+function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
+  return boxShadows.filter(Boolean).join(',')
+}
 
 /**
  * @internal
@@ -49,33 +56,109 @@ const buttonTheme = {border: {width: 1}}
 export function buttonColorStyles(
   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
-  const {$mode, theme} = props
-  const {focusRing} = theme.sanity
-  const base = theme.sanity.color.base
-  const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default
-  const color = mode[props.$tone] || mode.default
-  const border = {width: buttonTheme.border.width, color: 'var(--card-border-color)'}
+  const {$mode, theme, $tone} = props
+  const {focusRing} = theme.sanity.button
+  const shadow = props.$mode !== 'bleed'
+  const border = {
+    width: buttonTheme.border.width,
+    color:
+      $mode === 'default'
+        ? cssVars[$tone]['bg-accent']
+        : $mode === 'ghost'
+        ? cssVars[$tone]['border-base']
+        : cssVars[$tone]['bg-base'],
+  }
 
   return [
-    _colorVarsStyle(base, color.enabled),
     {
-      backgroundColor: 'var(--card-bg-color)',
-      color: 'var(--card-fg-color)',
+      // This is going to be used by the text elements inside the button
+      [mutableCardVariables['fg-color']]:
+        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-primary'],
+      [mutableCardVariables['muted-fg-color']]:
+        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-secondary'],
+      [mutableCardVariables['icon-color']]:
+        $mode === 'default' ? cssVars[$tone]['icon-inverted'] : cssVars[$tone]['icon-default'],
+      [mutableCardVariables['bg-color']]:
+        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-base'],
+
+      // Override the default variables for elements used inside buttons
+      [getToneCssVar('default', 'bg-tint-code')]:
+        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-tint-code'],
+      ...($mode === 'default' && {
+        [getToneCssVar('default', 'text-code')]: cssVars[$tone]['base-text-color'],
+        [getToneCssVar('default', 'text-code')]: cssVars[$tone]['base-text-color'],
+        [getToneCssVar('default', 'text-link')]: cssVars[$tone]['base-text-color'],
+        [getToneCssVar('default', 'text-accent')]: cssVars[$tone]['base-text-color'],
+      }),
+
+      '&:disabled, &[data-disabled="true"]': {
+        /* Updates the variables for the */
+        [mutableCardVariables['fg-color']]: cssVars.primary['text-inactive'],
+        [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-inactive'],
+        [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
+        [mutableCardVariables['bg-color']]:
+          $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.default['bg-base'],
+      },
+    },
+    {
+      backgroundColor:
+        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-base'],
+      color:
+        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-primary'],
       boxShadow: focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
+      '&:disabled, &[data-disabled="true"]': {
+        backgroundColor:
+          $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.default['bg-base'],
+        color: cssVars.primary['text-inactive'],
+        boxShadow: focusRingBorderStyle({
+          ...border,
+          color: $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.primary['border-base'],
+        }),
+      },
       "&:not([data-disabled='true'])": {
+        boxShadow: combineBoxShadow(
+          focusRingBorderStyle(border),
+          shadow ? defaultBoxShadow : undefined,
+        ),
         '&:focus': {
-          boxShadow: focusRingStyle({base, border, focusRing}),
+          boxShadow: focusRingStyle({
+            base: {bg: cssVars.positive['border-accent']},
+            border: {width: 2, color: cssVars.default['bg-base']},
+            focusRing,
+          }),
         },
         '&:focus:not(:focus-visible)': {
-          boxShadow: focusRingBorderStyle(border),
+          boxShadow: combineBoxShadow(
+            focusRingBorderStyle(border),
+            shadow ? defaultBoxShadow : undefined,
+          ),
         },
         '@media (hover: hover)': {
-          '&:hover': _colorVarsStyle(base, color.hovered),
-          '&:active': _colorVarsStyle(base, color.pressed),
-          '&[data-hovered]': _colorVarsStyle(base, color.hovered),
+          '&:hover': {
+            backgroundColor:
+              $mode === 'default'
+                ? cssVars[$tone]['bg-accent-hover']
+                : cssVars[$tone]['bg-base-hover'],
+          },
+          '&:active': {
+            backgroundColor:
+              $mode === 'default'
+                ? cssVars[$tone]['bg-accent-active']
+                : cssVars[$tone]['bg-base-active'],
+          },
+          '&[data-hovered]': {
+            backgroundColor:
+              $mode === 'default'
+                ? cssVars[$tone]['bg-accent-hover']
+                : cssVars[$tone]['bg-base-hover'],
+          },
+        },
+        '&[data-selected]': {
+          backgroundColor:
+            $mode === 'default'
+              ? cssVars[$tone]['bg-accent-active']
+              : cssVars[$tone]['bg-base-active'],
         },
-        '&[data-selected]': _colorVarsStyle(base, color.pressed),
       },
     },
     theme.sanity.styles?.button?.root,

package/src/primitives/card/__workshop__/selected.tsx

@@ -7,31 +7,30 @@ import {
   Inline,
   Stack,
   Text,
-  Theme,
   ThemeColorToneKey,
   useRootTheme,
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
+import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../../theme/lib/theme/color/cssVariables/createCssVars'
 
 const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
   $tone,
-  theme,
 }: {
   $tone: ThemeColorToneKey
-  theme: Theme
 }) => {
-  const tone = theme.sanity.color.solid[$tone]
-
   return css`
     &:not([data-selected]) {
-      --card-fg-color: ${tone ? tone.enabled.bg : undefined};
-      --card-muted-fg-color: ${tone ? tone.enabled.bg : undefined};
+      ${mutableCardVariables['fg-color']}: ${$tone ? cssVars[$tone]['text-secondary'] : undefined};
+      ${mutableCardVariables['muted-fg-color']} ${$tone
+        ? cssVars[$tone]['text-secondary']
+        : undefined};
     }
 
     [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
+      ${mutableCardVariables['fg-color']}: inherit;
+      ${mutableCardVariables['muted-fg-color']} inherit;
     }
   `
 })

package/src/primitives/card/card.tsx

@@ -10,7 +10,9 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme'
+import {ThemeColorName, ThemeColorSchemeKey} from '../../theme'
+import {ToneProvider} from '../../theme/toneContext/toneProvider'
+import {useToneContext} from '../../theme/toneContext/useToneContext'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -38,6 +40,12 @@ export interface CardProps
   pressed?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
+  /**
+   * @internal
+   * Used by the popover, as it creates a new html element that it's ouside of the previous scope of the card.
+   * So if it's inheriting styles from the parent, it needs to create a new cars context
+   */
+  updateCssVars?: boolean
 }
 
 const Root = styled(Box)<
@@ -47,6 +55,29 @@ const Root = styled(Box)<
     ResponsiveShadowStyleProps
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
+const Wrapper = ({
+  shouldAddContext,
+  scheme,
+  tone,
+  children,
+}: {
+  shouldAddContext: boolean
+  scheme: ThemeColorSchemeKey
+  tone: ThemeColorName
+  children: React.ReactElement
+}): React.ReactElement => {
+  // Avoid creating a new react context if the card is just inheriting styles from the parent.
+  if (shouldAddContext) {
+    return (
+      <ToneProvider scheme={scheme} tone={tone}>
+        {children}
+      </ToneProvider>
+    )
+  }
+
+  return children
+}
+
 /**
  * @public
  */
@@ -65,24 +96,28 @@ export const Card = forwardRef(function Card(
     borderLeft,
     pressed,
     radius = 0,
-    scheme,
+    scheme: schemeProp,
     selected,
     shadow,
     tone: toneProp = 'default',
+    updateCssVars = false,
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
-  const rootTheme = useRootTheme()
-  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
+  const toneContext = useToneContext()
+  const tone = toneProp === 'inherit' ? toneContext.tone : toneProp
+  const scheme = schemeProp ?? toneContext.scheme
+  const shouldAddContext = scheme !== toneContext.scheme || tone !== toneContext.tone
 
   return (
-    <ThemeColorProvider scheme={scheme} tone={tone}>
+    <Wrapper shouldAddContext={shouldAddContext} scheme={scheme} tone={tone}>
       <Root
         data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={rootTheme.scheme}
+        data-scheme={scheme}
         data-ui="Card"
         data-tone={tone}
+        $scheme={scheme ?? toneContext.scheme}
         {...restProps}
         $border={useArrayProp(border)}
         $borderTop={useArrayProp(borderTop)}
@@ -94,6 +129,7 @@ export const Card = forwardRef(function Card(
         $radius={useArrayProp(radius)}
         $shadow={useArrayProp(shadow)}
         $tone={tone}
+        $updateCssVars={updateCssVars || shouldAddContext}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}
         data-selected={selected ? '' : undefined}
@@ -101,6 +137,6 @@ export const Card = forwardRef(function Card(
         ref={ref}
         selected={selected}
       />
-    </ThemeColorProvider>
+    </Wrapper>
   )
 })

package/src/primitives/card/styles.ts

@@ -1,7 +1,13 @@
 import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
+import {
+  _colorVarStyleActive,
+  _colorVarStyleDisabled,
+  _colorVarStyleHover,
+  _colorVarStyleSelected,
+} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
+import {createCssVars, cssVars} from '../../theme/lib/theme/color/cssVariables'
 import {CardStyleProps} from './types'
 
 export function cardStyle(
@@ -19,7 +25,7 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
     css`
       background-size: ${space[3]}px ${space[3]}px;
       background-position: 50% 50%;
-      background-image: var(--card-bg-image);
+      background-image: ${cssVars.mutable['bg-image']};
     `}
 
     &[data-as='button'] {
@@ -29,7 +35,6 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
       font: inherit;
       text-align: inherit;
       border: 0;
-      width: -webkit-fill-available;
       width: stretch;
     }
 
@@ -47,18 +52,20 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
 }
 
 export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, theme} = props
-  const {focusRing} = theme.sanity
-  const {base, card, dark} = theme.sanity.color
-  const border = {width: 0, color: 'var(--card-border-color)'}
+  const {$checkered, $focusRing, theme, $tone, $scheme, $updateCssVars} = props
+  const {focusRing} = theme.sanity.card
 
-  return css`
-    color-scheme: ${dark ? 'dark' : 'light'};
+  const border = {width: 0, color: cssVars.positive['border-accent']}
 
-    ${_colorVarsStyle(base, card.enabled, $checkered)}
+  return css`
+    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */
+    ${$updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone)}
+    color-scheme: ${$scheme === 'dark' ? 'dark' : 'light'};
+    ${$checkered &&
+    `--card-bg-image: repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`}
 
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
+    background-color: ${cssVars.mutable['bg-color']};
+    color: ${cssVars.default['text-primary']};
 
     /* &:is(button) */
     &[data-as='button'] {
@@ -68,34 +75,34 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &:disabled {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
+        ${_colorVarStyleDisabled($checkered)}
       }
 
       &:not(:disabled) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
+          ${_colorVarStyleActive()}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
+          ${_colorVarStyleSelected()}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
+              ${_colorVarStyleHover()}
             }
 
             &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
+              ${_colorVarStyleActive()}
             }
           }
         }
 
         &:focus {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
+            ? focusRingStyle({border, focusRing})
             : undefined};
         }
 
@@ -111,34 +118,34 @@ export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<t
       box-shadow: var(--card-focus-ring-box-shadow);
 
       &[data-disabled] {
-        ${_colorVarsStyle(base, card.disabled, $checkered)}
+        ${_colorVarStyleDisabled($checkered)}
       }
 
       &:not([data-disabled]) {
         &[data-pressed] {
-          ${_colorVarsStyle(base, card.pressed, $checkered)}
+          ${_colorVarStyleActive()}
         }
 
         &[data-selected] {
-          ${_colorVarsStyle(base, card.selected, $checkered)}
+          ${_colorVarStyleSelected()}
         }
 
         @media (hover: hover) {
           &:not([data-pressed]):not([data-selected]) {
             &[data-hovered],
             &:hover {
-              ${_colorVarsStyle(base, card.hovered, $checkered)}
+              ${_colorVarStyleHover()}
             }
 
             &:active {
-              ${_colorVarsStyle(base, card.pressed, $checkered)}
+              ${_colorVarStyleActive()}
             }
           }
         }
 
         &:focus {
           --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base, border, focusRing})
+            ? focusRingStyle({border, focusRing})
             : undefined};
         }
 

package/src/primitives/card/types.ts

@@ -1,4 +1,4 @@
-import {ThemeColorToneKey} from '../../theme'
+import {ThemeColorSchemeKey, ThemeColorToneKey} from '../../theme'
 
 /**
  * @internal
@@ -7,4 +7,6 @@ export interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $tone: ThemeColorToneKey
+  $scheme: ThemeColorSchemeKey
+  $updateCssVars: boolean
 }

package/src/primitives/checkbox/checkbox.tsx

@@ -47,6 +47,7 @@ export const Checkbox = forwardRef(function Checkbox(
     <Root className={className} data-ui="Checkbox" style={style}>
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
         {...restProps}
         checked={checked}
         disabled={disabled || readOnly}

package/src/primitives/checkbox/styles.ts

@@ -1,6 +1,7 @@
 import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 
 export function checkboxBaseStyles(): ReturnType<typeof css> {
   return css`
@@ -11,8 +12,8 @@ export function checkboxBaseStyles(): ReturnType<typeof css> {
 
 export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
-  const color = theme.sanity.color.input
-  const {focusRing, input, radius} = theme.sanity
+  const {input, radius} = theme.sanity
+  const {focusRing} = input.checkbox
 
   return css`
     position: absolute;
@@ -33,12 +34,12 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
       width: ${rem(input.checkbox.size)};
       box-sizing: border-box;
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
+        color: cssVars.default['border-base'],
         width: input.border.width,
       })};
       border-radius: ${rem(radius[2])};
       line-height: 1;
-      background-color: ${color.default.enabled.bg};
+      background-color: ${cssVars.default['bg-base']};
 
       & > svg {
         display: block;
@@ -49,47 +50,76 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
 
         & > path {
           vector-effect: non-scaling-stroke;
-          stroke-width: 2 !important;
+          stroke-width: 1.2 !important;
         }
       }
     }
-
-    &:not(:disabled):focus + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.default.enabled.border},
-        focusRing,
+    &:checked + span {
+      background: ${cssVars.default['text-secondary']};
+      box-shadow: ${focusRingBorderStyle({
+        color: cssVars.default['text-secondary'],
+        width: input.border.width,
       })};
+      color: ${cssVars.default['bg-base']};
+    }
+
+    /* focus */
+    &:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({focusRing})};
     }
 
-    &:not(:disabled):focus:not(:focus-visible) + span {
+    /* focus when checked - uses a different offset */
+    &:not(:disabled):focus:focus-visible&:checked + span {
+      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
+    }
+
+    &[data-error] + span {
+      background-color: ${cssVars.critical['border-base']};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.border,
         width: input.border.width,
+        color: cssVars.critical['text-secondary'],
       })};
+      color: ${cssVars.default['text-secondary']};
     }
-
-    &:checked + span > svg:first-child {
-      opacity: 1;
+    &[data-error]&:checked + span {
+      background-color: ${cssVars.critical['text-secondary']};
+      color: ${cssVars.default['bg-base']};
+    }
+    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
+      box-shadow: ${focusRingStyle({
+        border: {width: input.border.width, color: cssVars.critical['text-secondary']},
+        focusRing: {width: 1, offset: 1},
+      })};
     }
 
-    &[data-read-only] + span {
-      background-color: ${color.default.readOnly.bg};
+    &:disabled + span {
+      background-color: ${cssVars.default['bg-tint']};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.default.readOnly.border,
+        color: cssVars.default['border-base'],
       })};
-      color: ${color.default.readOnly.fg};
+      color: ${cssVars.default['text-secondary']};
+    }
+    &:disabled&:checked + span {
+      background-color: ${cssVars.default['border-base']};
     }
 
-    &:not([data-read-only]):disabled + span {
-      background-color: ${color.default.disabled.bg};
+    &[data-read-only] + span {
+      background-color: ${cssVars.default['bg-tint']};
       box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
-        color: color.default.disabled.border,
+        color: cssVars.default['border-base'],
       })};
-      color: ${color.default.disabled.fg};
+      color: ${cssVars.default['text-secondary']};
     }
 
+    &[data-read-only]&:checked + span {
+      background-color: ${cssVars.default['border-base']};
+    }
+
+    &:checked + span > svg:first-child {
+      opacity: 1;
+    }
     &:indeterminate + span > svg:last-child {
       opacity: 1;
     }

package/src/primitives/code/code.tsx

@@ -4,7 +4,8 @@ import Refractor from 'react-refractor'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
-import {codeBaseStyle} from './styles'
+import {useToneContext} from '../../theme/toneContext/useToneContext'
+import {codeBaseStyle, CodeBaseStyleProps} from './styles'
 
 /**
  * @public
@@ -16,7 +17,10 @@ export interface CodeProps {
   weight?: string
 }
 
-const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+const Root = styled.pre<CodeBaseStyleProps & ResponsiveFontStyleProps>(
+  codeBaseStyle,
+  responsiveCodeFontStyle,
+)
 
 /**
  * @public
@@ -28,9 +32,17 @@ export const Code = forwardRef(function Code(
   const {children, language: languageProp, size = 2, weight, ...restProps} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
   const registered = language ? Refractor.hasLanguage(language as any) : false
+  const {scheme} = useToneContext()
 
   return (
-    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <Root
+      data-ui="Code"
+      {...restProps}
+      $size={useArrayProp(size)}
+      $weight={weight}
+      ref={ref}
+      $scheme={scheme}
+    >
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>