@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/Rows.tsx

@@ -1,529 +0,0 @@
-import { useRender } from '@base-ui/react/use-render'
-import type { ComponentPropsWithRef, ReactNode } from 'react'
-import { use } from 'react'
-import type * as zyzz from 'zyzz'
-import { keyframes } from 'zyzz/web'
-import { ChevronDown } from '../icons/ChevronDown.js'
-import { ChevronRight } from '../icons/ChevronRight.js'
-import { style, variants } from '../zyzz.config.js'
-import * as RowsSize from './internal/RowsSize.js'
-
-/**
- * A stack of divided rows for settings, details and navigation lists. `Rows` renders `Rows.Root`.
- * A row is a `button` when it has an `action` or `onClick`, any element passed to `render` (such as
- * a link), and a plain `div` otherwise.
- *
- * - Write row text that names the destination or action, since chevrons are hidden from assistive
- *   technology.
- * - Set `aria-expanded` on expandable rows and mount a `Rows.Panel` right after the row while open.
- * - Avoid nesting buttons or links inside a pressable row.
- *
- * @example
- * <Rows>
- *   <Rows.Row action="navigation" render={<a href="/activity" />}>
- *     Activity
- *   </Rows.Row>
- * </Rows>
- *
- * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role | MDN list role}
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ | WAI-ARIA APG Disclosure pattern}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html | WCAG 2.2 Target Size (Minimum)}
- */
-export function Rows(props: Rows.Props) {
-  return <Rows.Root {...props} />
-}
-
-export namespace Rows {
-  export type Props = Root.Props
-
-  /** Secondary text under a `Rows.Title`, usually inside `Rows.Info`. */
-  export function Description(props: Description.Props) {
-    const { className, vars, ...attributes } = props
-
-    return <span {...attributes} {...styles.description({ className, style: props.style, vars })} />
-  }
-
-  export namespace Description {
-    export type Props = ComponentPropsWithRef<'span'> &
-      zyzz.Props.Variants<typeof styles.description>
-  }
-
-  /** A block wrapper for a run of rows. `RowGroupLoader` renders the same wrapper while loading. */
-  export function Group(props: Group.Props) {
-    const { className, vars, ...attributes } = props
-
-    return <div {...attributes} {...styles.group({ className, style: props.style, vars })} />
-  }
-
-  export namespace Group {
-    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.group>
-  }
-
-  /** Groups a `Rows.Title` and `Rows.Description` beside a control. */
-  export function Info(props: Info.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <span
-        {...attributes}
-        data-info=""
-        {...styles.info({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Info {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.info>
-  }
-
-  /** The key of a key-value row. It keeps its width and pushes the content after it to the end. */
-  export function Label(props: Label.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <span
-        {...attributes}
-        data-label=""
-        {...styles.label({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Label {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.label>
-  }
-
-  /**
-   * Content revealed by an expandable row. Mount it directly after the row while open. It eases in
-   * on mount, and the divider between it and an `aria-expanded="true"` row is hidden.
-   */
-  export function Panel(props: Panel.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <div
-        {...attributes}
-        data-divider=""
-        data-panel=""
-        {...styles.panel({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Panel {
-    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.panel>
-  }
-
-  /**
-   * Stands in for a `Rows.Panel` while its content loads. It renders `role="status"` labelled
-   * `Loading` (override with `aria-label`) and three pulsing bars that hold still under reduced
-   * motion.
-   */
-  export function PanelLoader(props: PanelLoader.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <div
-        aria-label="Loading"
-        role="status"
-        {...attributes}
-        data-divider=""
-        data-panel=""
-        {...styles.panelLoader({ className, style: props.style, vars })}
-      >
-        <span {...styles.bar({ style: { width: '60%' } })} />
-        <span {...styles.bar({ style: { width: '90%' } })} />
-        <span {...styles.bar({ style: { width: '40%' } })} />
-      </div>
-    )
-  }
-
-  export namespace PanelLoader {
-    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
-      zyzz.Props.Variants<typeof styles.panelLoader>
-  }
-
-  /**
-   * `size` sets one row height for every row. A 32px control fits `small` and `medium` rows, and a
-   * 40px control fits `large` rows, without changing that height. `inset` dividers start where the
-   * row text does.
-   * Inside a `Surface`, rows reach its edges. Variants default to `dividers="inset"`,
-   * `size="medium"`.
-   */
-  export function Root(props: Root.Props) {
-    const { className, dividers, size, vars, ...attributes } = props
-
-    return (
-      <RowsSize.Context value={size ?? 'medium'}>
-        <div
-          {...attributes}
-          data-rows=""
-          {...styles.root({ className, dividers, size, style: props.style, vars })}
-        />
-      </RowsSize.Context>
-    )
-  }
-
-  export namespace Root {
-    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.root>
-  }
-
-  /**
-   * Renders a button when pressable, or a link or other element through `render`. `ref` and
-   * attributes reach that element. `spacing` picks which sides keep padding and defaults to `both`.
-   *
-   * @example
-   * <Rows>
-   *   <Rows.Row action="expand" aria-expanded={open} onClick={() => setOpen(!open)}>
-   *     Details
-   *   </Rows.Row>
-   *   {open && <Rows.Panel>Chain ID 4217</Rows.Panel>}
-   * </Rows>
-   */
-  export function Row(props: Row.Props) {
-    const {
-      action = 'none',
-      children,
-      className,
-      disabled,
-      ref,
-      render,
-      spacing,
-      vars,
-      ...attributes
-    } = props
-    const size = use(RowsSize.Context) ?? 'medium'
-    const button = (action !== 'none' || attributes.onClick !== undefined) && render === undefined
-
-    return useRender({
-      defaultTagName: button ? 'button' : 'div',
-      props: {
-        ...attributes,
-        ...(button && { type: 'button' }),
-        ...(disabled && (button ? { disabled: true } : { 'aria-disabled': true })),
-        ...styles.row({ className, size, spacing, style: props.style, vars }),
-        'data-action': action === 'none' ? undefined : action,
-        'data-divider': '',
-        children: (
-          <>
-            <span {...styles.content()}>{children}</span>
-            {action === 'expand' && <ChevronDown data-indicator="" {...styles.indicator()} />}
-            {action === 'navigation' && <ChevronRight {...styles.indicator()} />}
-          </>
-        ),
-      },
-      ref,
-      render,
-    })
-  }
-
-  export namespace Row {
-    export type Props = Omit<useRender.ComponentProps<'div'>, 'children'> &
-      Omit<zyzz.Props.Variants<typeof styles.row>, 'size'> & {
-        /**
-         * `expand` shows a chevron that turns with `aria-expanded`. `navigation` shows a trailing
-         * chevron. Either makes the row a button unless `render` is set.
-         * @default 'none'
-         */
-        action?: 'expand' | 'navigation' | 'none' | undefined
-        children?: ReactNode | undefined
-
-        /**
-         * Sets native `disabled` on a button row and `aria-disabled` otherwise. With `render`, only
-         * `aria-disabled` is set, so block activation of the rendered element yourself.
-         */
-        disabled?: boolean | undefined
-      }
-  }
-
-  /** Primary text of a row, usually inside `Rows.Info` above a `Rows.Description`. */
-  export function Title(props: Title.Props) {
-    const { className, vars, ...attributes } = props
-
-    return <span {...attributes} {...styles.title({ className, style: props.style, vars })} />
-  }
-
-  export namespace Title {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>
-  }
-
-  /**
-   * Stands in for a `Rows.Group` while its rows load. It renders `role="status"` labelled `Loading`
-   * (override with `aria-label`) and two placeholder rows at the `Rows.Root` size.
-   */
-  export function RowGroupLoader(props: RowGroupLoader.Props) {
-    const { className, vars, ...attributes } = props
-    const size = use(RowsSize.Context) ?? 'medium'
-
-    return (
-      <div
-        aria-label="Loading"
-        role="status"
-        {...attributes}
-        {...styles.group({ className, style: props.style, vars })}
-      >
-        {['30%', '45%'].map((width) => (
-          <div key={width} data-divider="" {...styles.row({ size })}>
-            <span {...styles.content()}>
-              <span {...styles.bar({ style: { width } })} />
-            </span>
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  export namespace RowGroupLoader {
-    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
-      zyzz.Props.Variants<typeof styles.group>
-  }
-}
-
-const pulse = keyframes(
-  { '0%, 100%': { opacity: 1 }, '50%': { opacity: 0.4 } },
-  { id: 'tds/web/rows/pulse' },
-)
-
-namespace styles {
-  export const bar = style(
-    {
-      animation: `${pulse} 1.4s ease-in-out infinite !custom`,
-      backgroundColor: 'grayAlpha.200',
-      borderRadius: 'full',
-      display: 'block',
-      height: '12',
-      '@media (prefers-reduced-motion: reduce)': { animation: 'none !custom' },
-    },
-    { id: 'tds/web/rows/bar' },
-  )
-
-  export const content = style(
-    {
-      alignItems: 'center',
-      columnGap: '12',
-      display: 'flex',
-      flexGrow: '1 !custom',
-      minWidth: '0',
-      textAlign: 'start',
-    },
-    { id: 'tds/web/rows/content' },
-  )
-
-  export const description = variants(
-    { base: { color: 'gray.900', display: 'block', typography: 'copy.13' } },
-    { id: 'tds/web/rows/description' },
-  )
-
-  export const info = variants(
-    {
-      base: {
-        display: 'flex',
-        flexDirection: 'column',
-        flexGrow: '1 !custom',
-        minWidth: '0',
-        rowGap: '4',
-      },
-    },
-    { id: 'tds/web/rows/info' },
-  )
-
-  export const group = variants({ base: { display: 'block' } }, { id: 'tds/web/rows/group' })
-
-  export const indicator = style(
-    {
-      color: 'gray.700',
-      flexShrink: '0 !custom',
-      transitionDuration: '240',
-      transitionProperty: 'transform',
-      transitionTimingFunction: 'spring',
-      '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
-    },
-    { id: 'tds/web/rows/indicator' },
-  )
-
-  export const title = variants(
-    { base: { color: 'foreground', display: 'block', typography: 'copy.14.strong' } },
-    { id: 'tds/web/rows/title' },
-  )
-
-  export const label = variants(
-    {
-      base: {
-        color: 'gray.900',
-        flexShrink: '0 !custom',
-        marginInlineEnd: 'auto !custom',
-      },
-    },
-    { id: 'tds/web/rows/label' },
-  )
-
-  export const panel = variants(
-    {
-      base: {
-        boxSizing: 'border-box',
-        color: 'gray.900',
-        padding: '16',
-        transitionDuration: '200',
-        transitionProperty: 'opacity, transform',
-        transitionTimingFunction: 'snappy',
-        typography: 'copy.14',
-        // Consumers mount the panel when a row expands, so it eases in from its starting style.
-        '@starting-style': { opacity: '0 !custom', transform: 'translateY(-4px) !custom' },
-        '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity' },
-      },
-    },
-    { id: 'tds/web/rows/panel' },
-  )
-
-  export const panelLoader = variants(
-    {
-      base: {
-        boxSizing: 'border-box',
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '16',
-        rowGap: '12',
-      },
-    },
-    { id: 'tds/web/rows/panel-loader' },
-  )
-
-  export const root = variants(
-    {
-      base: {
-        boxSizing: 'border-box',
-        color: 'foreground',
-        display: 'block',
-        typography: 'label.14.strong',
-        selectors: {
-          '& [data-divider]': { position: 'relative' },
-          // The faintest gray keeps dividers quiet on filled surfaces as well as on the page.
-          '& [data-divider]::before': {
-            backgroundColor: 'grayAlpha.100',
-            content: '"" !custom',
-            height: '1',
-            insetBlockStart: '0',
-            pointerEvents: 'none',
-            position: 'absolute',
-          },
-          '& > [data-divider]:first-child::before': { display: 'none' },
-          // A hovered row's fill would otherwise sit between two visible separators.
-          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"])::before':
-            { display: 'none' },
-          '& :is(button, a[href], [role="button"])[data-divider]:hover:not(:disabled, [aria-disabled="true"]) + [data-divider]::before':
-            { display: 'none' },
-          // An expanded row and its panel read as one item.
-          '& [aria-expanded="true"] + [data-divider]::before': { display: 'none' },
-        },
-      },
-      // Inset dividers start where the row text does: 16, 20 or 24px in.
-      compoundVariants: [
-        {
-          when: { dividers: 'inset', size: 'large' },
-          style: { selectors: { '& [data-divider]::before': { insetInline: '24' } } },
-        },
-        {
-          when: { dividers: 'inset', size: 'medium' },
-          style: { selectors: { '& [data-divider]::before': { insetInline: '20' } } },
-        },
-      ],
-      defaultVariants: { dividers: 'inset', size: 'medium' },
-      variants: {
-        dividers: {
-          full: { selectors: { '& [data-divider]::before': { insetInline: '0' } } },
-          inset: { selectors: { '& [data-divider]::before': { insetInline: '16' } } },
-          none: { selectors: { '& [data-divider]::before': { display: 'none' } } },
-        },
-        // Panels share the rows' side padding so their text lines up. Info takes back the block
-        // padding that small and medium rows trim for controls, so two-line text keeps its room.
-        size: {
-          large: { selectors: { '& [data-panel]': { paddingInline: '24' } } },
-          medium: {
-            selectors: {
-              '& [data-info]': { paddingBlock: '4' },
-              '& [data-panel]': { paddingInline: '20' },
-            },
-          },
-          small: {
-            typography: 'label.13.strong',
-            selectors: { '& [data-info]': { paddingBlock: '2' } },
-          },
-        },
-      },
-    },
-    { id: 'tds/web/rows/root' },
-  )
-
-  export const row = variants(
-    {
-      base: {
-        alignItems: 'center',
-        backgroundColor: 'transparent !custom',
-        border: 'none !custom',
-        boxSizing: 'border-box',
-        color: 'inherit !custom',
-        columnGap: '12',
-        display: 'flex',
-        font: 'inherit !custom',
-        outlineColor: 'transparent !custom',
-        outlineOffset: '0',
-        outlineStyle: 'solid !custom',
-        outlineWidth: '2',
-        paddingBlock: '8',
-        textAlign: 'start',
-        textDecoration: 'none !custom',
-        transitionDuration: '160',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset',
-        transitionTimingFunction: 'snappy',
-        width: '100% !custom',
-        selectors: {
-          '&:is(button, a[href], [role="button"])': { cursor: 'pointer' },
-          '&:is(button, a[href], [role="button"]):hover:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'grayAlpha.100',
-          },
-          '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'grayAlpha.200',
-          },
-          '&:is(button, a[href], [role="button"]):focus-visible': {
-            outlineColor: 'blue.700',
-            outlineOffset: '-2',
-          },
-          '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
-          '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(180deg) !custom' },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color, opacity, outline-color',
-        },
-      },
-      // Side padding grows with the row: 16, 20 and 24px.
-      compoundVariants: [
-        { when: { size: 'large', spacing: 'both' }, style: { paddingInline: '24' } },
-        { when: { size: 'large', spacing: 'end' }, style: { paddingInlineEnd: '24' } },
-        { when: { size: 'large', spacing: 'start' }, style: { paddingInlineStart: '24' } },
-        { when: { size: 'medium', spacing: 'both' }, style: { paddingInline: '20' } },
-        { when: { size: 'medium', spacing: 'end' }, style: { paddingInlineEnd: '20' } },
-        { when: { size: 'medium', spacing: 'start' }, style: { paddingInlineStart: '20' } },
-      ],
-      defaultVariants: { size: 'medium', spacing: 'both' },
-      variants: {
-        // 36, 40 and 56px. Block padding leaves room for a 32px control in small and medium rows and a
-        // 40px control in large rows, so a row with a control matches the text rows beside it.
-        size: {
-          large: { minHeight: '56' },
-          medium: { minHeight: '40', paddingBlock: '4' },
-          small: { minHeight: '36', paddingBlock: '2' },
-        },
-        spacing: {
-          both: { paddingInline: '16' },
-          end: { paddingInlineEnd: '16' },
-          none: {},
-          start: { paddingInlineStart: '16' },
-        },
-      },
-    },
-    { id: 'tds/web/rows/row' },
-  )
-}

package/src/web/components/Tag.tsx

@@ -1,149 +0,0 @@
-import { useRender } from '@base-ui/react/use-render'
-import type { ComponentPropsWithRef } from 'react'
-import type * as zyzz from 'zyzz'
-import { style, variants } from '../zyzz.config.js'
-
-/**
- * A compact status or metadata label, rendered as a `span`. Pass `render`, such as
- * `<button type="button" />` or an `a` element, to make it interactive. Those tags keep the badge
- * look and add pointer, focus-visible and press feedback.
- *
- * - Keep the text to a word or two that names a status or attribute.
- * - Do not rely on `intent` color alone. The text or a leading icon must carry the meaning.
- * - Render a static tag for display. Reach for `render` only when the tag performs an action.
- *
- * @example
- * <Tag intent="positive">
- *   <Tag.Dot />
- *   Active
- * </Tag>
- *
- * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
- */
-export function Tag(props: Tag.Props) {
-  const { className, intent, ref, render, shape, size, variant, vars, ...attributes } = props
-
-  return useRender({
-    defaultTagName: 'span',
-    props: {
-      ...attributes,
-      ...styles.tag({ className, intent, shape, size, style: props.style, variant, vars }),
-    },
-    ref,
-    render,
-  })
-}
-
-export namespace Tag {
-  export type Props = ComponentPropsWithRef<'span'> &
-    zyzz.Props.Variants<typeof styles.tag> & { render?: useRender.RenderProp | undefined }
-
-  /** A 6px dot in the tag's text color, hidden from assistive technology. Place it before text. */
-  export function Dot(props: Dot.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <span
-        aria-hidden="true"
-        {...attributes}
-        {...styles.dot({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Dot {
-    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.dot>
-  }
-}
-
-namespace styles {
-  export const dot = style(
-    {
-      backgroundColor: 'currentColor !custom',
-      borderRadius: 'full',
-      flexShrink: '0 !custom',
-      height: '6',
-      width: '6',
-    },
-    { id: 'tds/web/tag/dot' },
-  )
-
-  export const tag = variants(
-    {
-      base: {
-        alignItems: 'center',
-        border: '1px solid !custom',
-        borderColor: 'transparent !custom',
-        boxSizing: 'border-box',
-        columnGap: '6',
-        display: 'inline-flex',
-        height: '24',
-        paddingInline: '8',
-        typography: 'label.12',
-        whiteSpace: 'nowrap',
-        selectors: {
-          '& > svg': { flexShrink: '0 !custom', height: '12', width: '12' },
-          // Button and link tags keep the badge look and add only pointer, focus and press feedback.
-          '&:is(button, a)': {
-            cursor: 'pointer',
-            outlineColor: 'transparent !custom',
-            outlineOffset: '0',
-            outlineStyle: 'solid !custom',
-            outlineWidth: '2',
-            textDecoration: 'none !custom',
-            transitionDuration: '160',
-            transitionProperty: 'opacity, outline-color, outline-offset, scale',
-            transitionTimingFunction: 'snappy',
-          },
-          '&:is(button, a):active': { scale: 'press' },
-          '&:is(button, a):focus-visible': {
-            outlineColor: 'blue.700',
-            outlineOffset: '2',
-          },
-          '&:is(button, a):hover': { opacity: '0.8 !custom' },
-          '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          selectors: {
-            '&:is(button, a)': { transitionProperty: 'opacity, outline-color' },
-            '&:is(button, a):active': { scale: 'none !custom' },
-          },
-        },
-      },
-      compoundVariants: [
-        {
-          when: { variant: 'outlined' },
-          // The outline takes the text color of each intent.
-          style: { backgroundColor: 'transparent !custom', borderColor: 'currentColor !custom' },
-        },
-        {
-          when: { variant: 'plain' },
-          style: { backgroundColor: 'transparent !custom', paddingInline: '0' },
-        },
-      ],
-      defaultVariants: { intent: 'neutral', shape: 'pill', size: 'medium', variant: 'soft' },
-      variants: {
-        intent: {
-          accent: { backgroundColor: 'purple.100', color: 'purple.900' },
-          info: { backgroundColor: 'blue.100', color: 'blue.900' },
-          negative: { backgroundColor: 'red.100', color: 'red.900' },
-          neutral: { backgroundColor: 'grayAlpha.100', color: 'gray.900' },
-          positive: { backgroundColor: 'green.100', color: 'green.900' },
-          warning: { backgroundColor: 'amber.100', color: 'amber.900' },
-        },
-        shape: { pill: { borderRadius: 'full' }, rounded: { borderRadius: '8' } },
-        // Badge sizes: 20, 24 and 32px, whether the tag is static, a button or a link.
-        size: {
-          large: { height: '32', paddingInline: '12', typography: 'label.14' },
-          medium: {},
-          small: { height: '20', paddingInline: '6' },
-        },
-        variant: { outlined: {}, plain: {}, soft: {} },
-      },
-    },
-    { id: 'tds/web/tag' },
-  )
-}

package/src/web/components/internal/FieldVariant.ts

@@ -1,6 +0,0 @@
-import { createContext } from 'react'
-
-export type Variant = 'default' | 'setting' | 'stacked'
-
-/** Variant that Fieldset and Field hand to the parts beneath them. */
-export const Context = createContext<Variant | undefined>(undefined)