@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

package/src/{primitives → core/primitives}/card/__workshop__/selected.tsx

@@ -1,16 +1,6 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Inline,
-  Stack,
-  Text,
-  Theme,
-  ThemeColorToneKey,
-  useRootTheme,
-} from '@sanity/ui'
+import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
+import {Theme, ThemeColorToneKey} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 

package/src/{primitives → core/primitives}/card/card.tsx

@@ -1,3 +1,4 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
@@ -10,7 +11,7 @@ import {
   responsiveShadowStyle,
   ResponsiveShadowStyleProps,
 } from '../../styles/internal'
-import {ThemeColorProvider, ThemeColorSchemeKey, useRootTheme} from '../../theme'
+import {ThemeColorProvider, useRootTheme} from '../../theme'
 import {CardTone} from '../../types'
 import {Box, BoxProps} from '../box'
 import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -48,6 +49,9 @@ const Root = styled(Box)<
 >(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
 
 /**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
  * @public
  */
 export const Card = forwardRef(function Card(
@@ -76,6 +80,7 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
+  // TODO: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>
       <Root

package/src/{primitives → core/primitives}/card/styles.ts

@@ -29,6 +29,8 @@ export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<ty
       font: inherit;
       text-align: inherit;
       border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
       width: stretch;
     }
 

package/src/{primitives → core/primitives}/card/types.ts

@@ -1,4 +1,4 @@
-import {ThemeColorToneKey} from '../../theme'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 
 /**
  * @internal

package/src/{primitives → core/primitives}/checkbox/__workshop__/example.tsx

@@ -15,7 +15,7 @@ export default function ExampleStory() {
           onChange={handleChange}
         />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/__workshop__/props.tsx

@@ -23,7 +23,7 @@ export default function PropsStory() {
           readOnly={readOnly}
         />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/__workshop__/readOnly.tsx

@@ -6,7 +6,7 @@ export default function ReadOnlyStory() {
       <Flex align="center" as="label">
         <Checkbox id="checkbox-example" readOnly />
         <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Toggle
           </Text>
         </Box>

package/src/{primitives → core/primitives}/checkbox/checkbox.tsx

@@ -16,6 +16,8 @@ const Root = styled.div(checkboxBaseStyles)
 const Input = styled.input(inputElementStyles)
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export const Checkbox = forwardRef(function Checkbox(

package/src/{primitives → core/primitives}/checkbox/styles.ts

@@ -50,14 +50,15 @@ export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
 
         & > path {
           vector-effect: non-scaling-stroke;
-          stroke-width: 1.2 !important;
+          stroke-width: 1.5px !important;
         }
       }
     }
+
     &:checked + span {
-      background: ${color.default.enabled.bg2};
+      background: ${color.default.enabled.fg};
       box-shadow: ${focusRingBorderStyle({
-        color: color.default.enabled.bg2,
+        color: color.default.enabled.fg,
         width: input.border.width,
       })};
       color: ${color.default.enabled.bg};

package/src/{primitives → core/primitives}/code/code.tsx

@@ -11,6 +11,7 @@ import {codeBaseStyle} from './styles'
  */
 export interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string

package/src/{primitives → core/primitives}/container/container.tsx

@@ -17,6 +17,8 @@ const Root = styled(Box)<ResponsiveWidthStyleProps>(
 )
 
 /**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export const Container = forwardRef(function Container(

package/src/{primitives → core/primitives}/container/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {

package/src/{primitives → core/primitives}/flex/flex.tsx

@@ -26,6 +26,8 @@ const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
 )
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export const Flex = forwardRef(function Flex(

package/src/{primitives → core/primitives}/grid/grid.tsx

@@ -13,6 +13,8 @@ export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProp
 const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export const Grid = forwardRef(function Grid(

package/src/{primitives → core/primitives}/heading/heading.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -7,7 +8,6 @@ import {
   responsiveTextAlignStyle,
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'
@@ -43,6 +43,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export const Heading = forwardRef(function Heading(

package/src/{primitives → core/primitives}/inline/inline.tsx

@@ -10,12 +10,15 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
  * @public
  */
 export interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
 const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export const Inline = forwardRef(function Inline(

package/src/{primitives → core/primitives}/inline/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {

package/src/{primitives → core/primitives}/kbd/kbd.tsx

@@ -30,6 +30,8 @@ function kbdStyle() {
 const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export const KBD = forwardRef(function KBD(

package/src/{primitives → core/primitives}/label/label.tsx

@@ -1,8 +1,8 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
 
@@ -40,6 +40,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export const Label = forwardRef(function Label(

package/src/{primitives → core/primitives}/popover/__workshop__/RecursiveStory.tsx

@@ -1,12 +1,5 @@
-import {
-  Button,
-  Flex,
-  LayerProvider,
-  Placement,
-  Popover,
-  ThemeColorToneKey,
-  useLayer,
-} from '@sanity/ui'
+import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@sanity/ui'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {

package/src/{primitives → core/primitives}/popover/__workshop__/TestStory.tsx

@@ -22,6 +22,7 @@ export default function TestStory(): ReactElement {
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Render in portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const referenceWide = useBoolean('Reference wide?', false)
@@ -31,7 +32,9 @@ export default function TestStory(): ReactElement {
 
   const updateRef = useRef<PopoverUpdateCallback>()
 
-  const button = <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+  const button = (
+    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
+  )
 
   return (
     <Card
@@ -67,7 +70,7 @@ export default function TestStory(): ReactElement {
               {mount && (
                 <Popover
                   arrow={arrow}
-                  content={<Text>{text}</Text>}
+                  content={<Text size={1}>{text}</Text>}
                   constrainSize={constrainSize}
                   fallbackPlacements={['left', 'bottom', 'right', 'top']}
                   matchReferenceWidth={matchReferenceWidth}
@@ -75,7 +78,7 @@ export default function TestStory(): ReactElement {
                   overflow="hidden"
                   padding={3}
                   placement={placement}
-                  portal
+                  portal={portal}
                   preventOverflow={preventOverflow}
                   radius={radius}
                   updateRef={updateRef}

package/src/{primitives → core/primitives}/popover/constants.ts

@@ -2,8 +2,9 @@ import {Placement, PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4
-export const DEFAULT_POPOVER_ARROW_WIDTH = 27
-export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
+export const DEFAULT_POPOVER_ARROW_WIDTH = 19
+export const DEFAULT_POPOVER_ARROW_HEIGHT = 8
+export const DEFAULT_POPOVER_ARROW_RADIUS = 2
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
   top: ['bottom', 'left', 'right'],

package/src/{primitives → core/primitives}/popover/helpers.ts

@@ -1,4 +1,4 @@
-import {Theme} from '../../theme'
+import {Theme} from '@sanity/ui/theme'
 import {DEFAULT_POPOVER_PADDING} from './constants'
 import {PopoverWidth} from './types'
 

package/src/{primitives → core/primitives}/popover/popover.tsx

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   MutableRefObject,
   RefCallback,
@@ -21,7 +22,7 @@ import {
   useRef,
 } from 'react'
 import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
@@ -59,6 +60,7 @@ export interface PopoverProps
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
@@ -72,7 +74,11 @@ export interface PopoverProps
   width?: PopoverWidth | PopoverWidth[]
 }
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export const Popover = memo(
   forwardRef(function Popover(
     props: PopoverProps &
@@ -84,7 +90,7 @@ export const Popover = memo(
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-      arrow: arrowProp = true,
+      arrow: arrowProp = false,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -94,6 +100,8 @@ export const Popover = memo(
         DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
       floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onActivate,
       open,
       overflow = 'hidden',
       padding: paddingProp,
@@ -184,11 +192,7 @@ export const Popover = memo(
       }
 
       // Define distance between reference and floating element
-      ret.push(
-        offset({
-          mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-        }),
-      )
+      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
 
       // Track sizes
       if (constrainSize || matchReferenceWidth) {

package/src/{primitives → core/primitives}/popover/popoverCard.tsx

@@ -1,14 +1,17 @@
 import {Strategy} from '@floating-ui/react-dom'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
-import {ThemeColorSchemeKey} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
-import {useLayer} from '../../utils'
+import {Arrow, useLayer} from '../../utils'
 import {Card} from '../card'
 import {Flex} from '../flex'
-import {DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_MARGINS} from './constants'
-import {PopoverArrow} from './popoverArrow'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
 
 const Root = styled(Card)({
   '&:not([hidden])': {
@@ -91,20 +94,15 @@ export const PopoverCard = memo(
       [strategy, style, width, x, y, zIndex],
     )
 
-    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
-
-    const arrowStyle: CSSProperties = useMemo(() => {
-      const style: CSSProperties = {
+    const arrowStyle: CSSProperties = useMemo(
+      () => ({
         left: arrowX !== null ? arrowX : undefined,
         top: arrowY !== null ? arrowY : undefined,
         right: undefined,
         bottom: undefined,
-      }
-
-      if (staticSide) style[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH
-
-      return style
-    }, [arrowX, arrowY, staticSide])
+      }),
+      [arrowX, arrowY],
+    )
 
     return (
       <Root
@@ -125,7 +123,15 @@ export const PopoverCard = memo(
           </Flex>
         </Flex>
 
-        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_POPOVER_ARROW_WIDTH}
+            height={DEFAULT_POPOVER_ARROW_HEIGHT}
+            radius={DEFAULT_POPOVER_ARROW_RADIUS}
+          />
+        )}
       </Root>
     )
   }),

package/src/{primitives → core/primitives}/radio/radio.tsx

@@ -14,6 +14,8 @@ const Root = styled.div(radioBaseStyle)
 const Input = styled.input(inputElementStyle)
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export const Radio = forwardRef(function Radio(

package/src/{primitives → core/primitives}/radio/styles.ts

@@ -59,7 +59,7 @@ export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
         height: ${rem(input.radio.markSize)};
         width: ${rem(input.radio.markSize)};
         border-radius: ${rem(input.radio.markSize / 2)};
-        background: ${color.default.enabled.bg2};
+        background: ${color.default.enabled.fg};
         opacity: 0;
       }
     }

package/src/{primitives → core/primitives}/select/select.tsx

@@ -1,4 +1,4 @@
-import {SelectIcon} from '@sanity/icons'
+import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
@@ -30,6 +30,8 @@ const Input = styled.select<{
 const IconBox = styled(Box)(selectStyle.iconBox)
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export const Select = forwardRef(function Select(
@@ -70,7 +72,7 @@ export const Select = forwardRef(function Select(
 
       <IconBox padding={padding}>
         <Text size={fontSize}>
-          <SelectIcon />
+          <ChevronDownIcon />
         </Text>
       </IconBox>
     </Root>

package/src/{primitives → core/primitives}/select/styles.ts

@@ -1,3 +1,5 @@
+import {ThemeFontSize} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {
@@ -7,12 +9,12 @@ import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
 } from '../../styles/internal'
-import {ThemeFontSize} from '../../theme'
-import {CSSObject} from '../../types/styled'
 
 function rootStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
+    width: -moz-available;
+    width: -webkit-fill-available;
     width: stretch;
 
     &:not([hidden]) {

package/src/{primitives → core/primitives}/spinner/spinner.tsx

@@ -28,6 +28,8 @@ const Root = styled(Text)`
 `
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export const Spinner = forwardRef(function Spinner(

package/src/{primitives → core/primitives}/stack/stack.tsx

@@ -15,6 +15,8 @@ export interface StackProps extends BoxProps {
 const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export const Stack = forwardRef(function Stack(

package/src/{primitives → core/primitives}/stack/styles.ts

@@ -1,5 +1,5 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {rem, _responsive, ThemeProps} from '../../styles'
-import {CSSObject} from '../../types/styled'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]

package/src/{primitives → core/primitives}/switch/__workshop__/example.tsx

@@ -13,7 +13,7 @@ export default function ExampleStory() {
       <Flex align="center" as="label">
         <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
         <Box marginLeft={3}>
-          <Text size={1} weight="semibold">
+          <Text size={1} weight="medium">
             Label
           </Text>
         </Box>

package/src/{primitives → core/primitives}/switch/styles.ts

@@ -79,7 +79,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: var(--card-focus-ring-color);
+      --switch-bg-color: ${color.default.enabled.fg};
       --switch-fg-color: ${color.default.enabled.bg};
     }
 
@@ -90,7 +90,7 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: var(--card-focus-ring-color);
+        --switch-bg-color: ${color.default.enabled.fg};
         --switch-fg-color: ${color.default.enabled.bg};
       }
     }

package/src/{primitives → core/primitives}/switch/switch.tsx

@@ -23,6 +23,10 @@ const Track = styled.span(switchTrackStyles)
 const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export const Switch = forwardRef(function Switch(

package/src/{primitives → core/primitives}/text/__workshop__/colored.tsx

@@ -1,4 +1,5 @@
-import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
+import {Flex, Text, useTheme} from '@sanity/ui'
+import {Theme, ThemeColorSpotKey} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'

package/src/{primitives → core/primitives}/text/text.tsx

@@ -1,3 +1,4 @@
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -6,7 +7,6 @@ import {
   responsiveTextAlignStyle,
   responsiveTextFont,
 } from '../../styles/internal'
-import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
 import {textBaseStyle} from './styles'
 
@@ -17,6 +17,7 @@ export interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -43,6 +44,8 @@ const SpanWithTextOverflow = styled.span`
 `
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 export const Text = forwardRef(function Text(

package/src/{primitives → core/primitives}/textArea/__workshop__/plain.tsx

@@ -26,7 +26,7 @@ export default function PlainStory() {
       <Container width={0}>
         <Card padding={3} tone={tone}>
           <Stack space={3}>
-            <Text as="label" htmlFor="text-area-example" size={1} weight="semibold">
+            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
               TextArea
             </Text>
             <TextArea