@bettercms-ai/kit 0.1.1 → 2.0.0

package/src/core/primitives/button/__workshop__/customIcons.tsx

@@ -1,30 +0,0 @@
-import {RocketIcon} from '@bettercms-ai/icons'
-import {Button, Flex, Inline} from '@bettercms-ai/kit'
-
-export default function CustomIconsStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Inline space={1}>
-        <Button fontSize={1} icon={RocketIcon} padding={2} space={2} text="Rocket" />
-        <Button fontSize={1} icon={CustomIcon} padding={2} space={2} text="Heart" />
-      </Inline>
-    </Flex>
-  )
-}
-
-function CustomIcon() {
-  return (
-    <svg
-      stroke="currentColor"
-      fill="currentColor"
-      strokeWidth="0"
-      viewBox="0 0 24 24"
-      height="1em"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path fill="none" d="M0 0h24v24H0z"></path>
-      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>
-    </svg>
-  )
-}

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -1,74 +0,0 @@
-import {SquareIcon} from '@bettercms-ai/icons'
-
-import {Card} from '../../card/card'
-import {Container} from '../../container/container'
-import {Grid} from '../../grid/grid'
-import {Stack} from '../../stack/stack'
-import {Text} from '../../text/text'
-import {Button, ButtonOwnProps} from '../button'
-
-const GAP = 4
-const COLUMNS = 3
-
-const DEFAULT_PROPS: ButtonOwnProps = {
-  icon: SquareIcon,
-  iconRight: SquareIcon,
-}
-
-function Layout() {
-  return (
-    <Container width={2}>
-      <Stack space={4}>
-        <Grid columns={COLUMNS} gap={GAP}>
-          <Text size={1} weight="semibold">
-            Default
-          </Text>
-          <Text size={1} weight="semibold">
-            Ghost
-          </Text>
-          <Text size={1} weight="semibold">
-            Bleed
-          </Text>
-        </Grid>
-
-        <Stack space={2}>
-          <Grid columns={COLUMNS} gap={GAP}>
-            <Stack space={2}>
-              <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
-            </Stack>
-
-            <Stack space={2}>
-              <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
-            </Stack>
-
-            <Stack space={2}>
-              <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
-              <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
-            </Stack>
-          </Grid>
-        </Stack>
-      </Stack>
-    </Container>
-  )
-}
-
-export default function DisabledButtonStory() {
-  return (
-    <Stack>
-      <Stack space={4}>
-        <Card padding={5} scheme="light">
-          <Layout />
-        </Card>
-
-        <Card padding={5} scheme="dark">
-          <Layout />
-        </Card>
-      </Stack>
-    </Stack>
-  )
-}

package/src/core/primitives/button/__workshop__/index.ts

@@ -1,59 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/button',
-  title: 'Button',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./props')),
-    },
-    {
-      name: 'styled-1',
-      title: 'Styled #1',
-      component: lazy(() => import('./styled1')),
-    },
-    {
-      name: 'styled-2',
-      title: 'Styled #2',
-      component: lazy(() => import('./styled2')),
-    },
-    {
-      name: 'stacked',
-      title: 'Stacked',
-      component: lazy(() => import('./stacked')),
-    },
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./custom')),
-    },
-    {
-      name: 'mixed-children',
-      title: 'Mixed children',
-      component: lazy(() => import('./mixedChildren')),
-    },
-    {
-      name: 'upload-button',
-      title: 'Upload button',
-      component: lazy(() => import('./uploadButton')),
-    },
-    {
-      name: 'label-upload-button-workaround',
-      title: 'LabelUploadButtonWorkaroundStory',
-      component: lazy(() => import('./labelUploadButton')),
-    },
-    {
-      name: 'custom-icons',
-      title: 'Custom icons',
-      component: lazy(() => import('./customIcons')),
-    },
-    {
-      name: 'disabled',
-      title: 'Disabled',
-      component: lazy(() => import('./disabled')),
-    },
-  ],
-})

package/src/core/primitives/button/__workshop__/labelUploadButton.tsx

@@ -1,36 +0,0 @@
-import {UploadIcon} from '@bettercms-ai/icons'
-import {Button, Flex} from '@bettercms-ai/kit'
-import {styled} from 'styled-components'
-
-const LabelUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
-  & input {
-    appearance: none;
-    overflow: hidden;
-    overflow: clip;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    position: absolute;
-    max-width: 0;
-    width: -webkit-fill-available;
-    width: stretch;
-  }
-
-  & span:nth-child(2) {
-    width: 0;
-    flex: none;
-    padding: 0;
-  }
-`
-
-export default function LabelUploadButtonWorkaroundStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <LabelUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
-        <input type="file" />
-      </LabelUploadButton>
-    </Flex>
-  )
-}

package/src/core/primitives/button/__workshop__/mixedChildren.tsx

@@ -1,12 +0,0 @@
-import {AddIcon} from '@bettercms-ai/icons'
-import {Button, Flex} from '@bettercms-ai/kit'
-
-export default function MixedChildrenStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">
-        <span style={{display: 'none'}}>test</span>
-      </Button>
-    </Flex>
-  )
-}

package/src/core/primitives/button/__workshop__/props.tsx

@@ -1,55 +0,0 @@
-import {icons} from '@bettercms-ai/icons/map'
-import {Button, Flex} from '@bettercms-ai/kit'
-import {useAction, useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
-
-import {
-  WORKSHOP_BUTTON_MODE_OPTIONS,
-  WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
-  WORKSHOP_BUTTON_TONE_OPTIONS,
-  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function ButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
-  const textAlign =
-    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
-  const textProp = useText('Text', 'Label', 'Props')
-  const textWeight =
-    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button
-        disabled={disabled}
-        fontSize={fontSize}
-        icon={icon && icons[icon]}
-        iconRight={iconRight && icons[iconRight]}
-        justify={justify}
-        mode={mode}
-        onClick={useAction('onClick')}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        selected={selected}
-        space={space}
-        textAlign={textAlign}
-        text={textProp}
-        textWeight={textWeight}
-        tone={tone}
-      />
-    </Flex>
-  )
-}

package/src/core/primitives/button/__workshop__/stacked.tsx

@@ -1,58 +0,0 @@
-import {icons} from '@bettercms-ai/icons/map'
-import {Box, Button, Card, Container, Flex, Stack} from '@bettercms-ai/kit'
-import {useAction, useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
-
-import {
-  WORKSHOP_BUTTON_MODE_OPTIONS,
-  WORKSHOP_BUTTON_TONE_OPTIONS,
-  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function StackedStory() {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
-  const onClick = useAction('onClick')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-
-  return (
-    <Card height="fill">
-      <Flex align="center" height="fill" justify="center">
-        <Container width={0} style={{textAlign: 'center'}}>
-          <Box padding={4}>
-            <Stack space={1}>
-              {tones.map(([title, tone]) => (
-                <Button
-                  disabled={disabled}
-                  fontSize={fontSize}
-                  icon={icon && icons[icon]}
-                  iconRight={iconRight && icons[iconRight]}
-                  justify={justify}
-                  key={tone}
-                  mode={mode}
-                  onClick={onClick}
-                  paddingX={paddingX}
-                  paddingY={paddingY}
-                  selected={selected}
-                  space={space}
-                  text={title}
-                  tone={tone}
-                />
-              ))}
-            </Stack>
-          </Box>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

package/src/core/primitives/button/__workshop__/styled1.tsx

@@ -1,17 +0,0 @@
-import {Button, Flex} from '@bettercms-ai/kit'
-import {styled} from 'styled-components'
-
-const StyledButton1 = styled.a`
-  &:hover {
-    background-color: red;
-    box-shadow: none;
-  }
-`
-
-export default function StyledButton1Story() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button as={StyledButton1} href="#" text="Test" />
-    </Flex>
-  )
-}

package/src/core/primitives/button/__workshop__/styled2.tsx

@@ -1,19 +0,0 @@
-import {Button, Flex} from '@bettercms-ai/kit'
-import {styled} from 'styled-components'
-
-const StyledButton2 = styled(Button)<{$color?: boolean}>`
-  &:hover {
-    background-color: red;
-    box-shadow: none;
-  }
-`
-
-export default function StyledButton2Story() {
-  const props = {href: '#', text: 'Test'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <StyledButton2 $color forwardedAs="a" {...props} />
-    </Flex>
-  )
-}

package/src/core/primitives/button/__workshop__/uploadButton.tsx

@@ -1,28 +0,0 @@
-import {Button, Flex} from '@bettercms-ai/kit'
-import {useCallback, useRef} from 'react'
-
-export default function UploadButtonStory() {
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      inputRef.current?.click()
-    }
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button
-        as="label"
-        onKeyDown={handleKeyDown}
-        tabIndex={0}
-        text={
-          <>
-            Upload
-            <input id="file" ref={inputRef} type="file" style={{display: 'none'}} />
-          </>
-        }
-      />
-    </Flex>
-  )
-}

package/src/core/primitives/button/button.test.tsx

@@ -1,82 +0,0 @@
-/** @jest-environment jsdom */
-
-import {AddIcon} from '@bettercms-ai/icons'
-import {screen} from '@testing-library/react'
-import {axe} from 'jest-axe'
-
-import {render} from '../../../../test'
-import {Flex} from '../flex'
-import {Button, ButtonOwnProps} from './button'
-
-jest.mock('../flex', () => {
-  const actual = jest.requireActual('../flex')
-
-  return {
-    ...actual,
-    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
-  }
-})
-
-describe('atoms/button', () => {
-  const mockedFlex = jest.mocked(Flex)
-
-  beforeEach(() => {
-    mockedFlex.mockClear()
-  })
-
-  it('Axe: should have no violations', async () => {
-    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'light',
-    })
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-
-    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'dark',
-    })
-
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-
-  it('should render text', () => {
-    render(<Button text="Button text" />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-
-  it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonOwnProps}) {
-      return <Button {...buttonProps} />
-    }
-
-    const buttonProps: ButtonOwnProps = {
-      text: 'Button text',
-    }
-
-    render(<WrappedButton button={buttonProps} />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-
-  it('should support `space`', () => {
-    render(<Button icon={AddIcon} space={17} text="Button text" />)
-
-    const propsList = mockedFlex.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({gap: [17]}))
-  })
-
-  it('should support `gap`', () => {
-    render(<Button gap={18} icon={AddIcon} text="Button text" />)
-
-    const propsList = mockedFlex.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({gap: [18]}))
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    render(<Button gap={19} icon={AddIcon} space={20} text="Button text" />)
-
-    const propsList = mockedFlex.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({gap: [19]}))
-    expect(propsList).not.toContainEqual(expect.objectContaining({gap: [20]}))
-  })
-})

package/src/core/primitives/button/button.tsx

@@ -1,210 +0,0 @@
-import {ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
-import {forwardRef, isValidElement, useMemo} from 'react'
-import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
-
-import {_getArrayProp, ThemeProps} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {
-  ButtonMode,
-  ButtonTextAlign,
-  ButtonTone,
-  ButtonWidth,
-  ElementType,
-  FlexJustify,
-  Props,
-} from '../../types'
-import {Box} from '../box'
-import {Flex} from '../flex'
-import {Spinner} from '../spinner'
-import {Text} from '../text'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
-import {buttonBaseStyles, buttonColorStyles} from './styles'
-
-/**
- * @public
- */
-export interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  mode?: ButtonMode
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  loading?: boolean
-  selected?: boolean
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  gap?: number | number[]
-  muted?: boolean
-  text?: React.ReactNode
-  textAlign?: ButtonTextAlign
-  textWeight?: ThemeFontWeightKey
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
-}
-
-/**
- * @public
- */
-export type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
-
-const StyledButton = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
-    ThemeProps
->(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
-
-const LoadingBox = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`
-
-const ButtonComponent = forwardRef(function Button(
-  props: ButtonOwnProps & {as?: ElementType} & Omit<
-      React.HTMLProps<HTMLButtonElement>,
-      'as' | 'width'
-    >,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    children,
-    disabled,
-    fontSize = 1,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify: justifyProp = 'center',
-    loading,
-    mode = 'default',
-    padding: paddingProp = 3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
-    selected,
-    gap,
-    space: deprecated_space = 3,
-    text,
-    textAlign,
-    textWeight,
-    tone = 'default',
-    type = 'button',
-    muted = false,
-    width,
-    ...restProps
-  } = props
-  const {button} = useTheme_v2()
-
-  const justify = _getArrayProp(justifyProp)
-  const padding = _getArrayProp(paddingProp)
-  const paddingX = _getArrayProp(paddingXProp)
-  const paddingY = _getArrayProp(paddingYProp)
-  const paddingTop = _getArrayProp(paddingTopProp)
-  const paddingBottom = _getArrayProp(paddingBottomProp)
-  const paddingLeft = _getArrayProp(paddingLeftProp)
-  const paddingRight = _getArrayProp(paddingRightProp)
-  const radius = _getArrayProp(radiusProp)
-  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
-
-  const boxProps = useMemo(
-    () => ({
-      // flex: 1,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
-  )
-
-  return (
-    <StyledButton
-      data-ui="Button"
-      {...restProps}
-      $mode={mode}
-      $radius={radius}
-      $tone={tone}
-      data-disabled={Boolean(loading || disabled)}
-      data-selected={selected ? '' : undefined}
-      disabled={Boolean(loading || disabled)}
-      ref={ref}
-      type={type}
-      $width={width}
-    >
-      {Boolean(loading) && (
-        <LoadingBox>
-          <Spinner />
-        </LoadingBox>
-      )}
-
-      {(IconComponent || text || IconRightComponent) && (
-        <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={spacing}>
-            {IconComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            )}
-
-            {text && (
-              <Box>
-                <Text
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={textWeight ?? button.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
-            )}
-
-            {IconRightComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            )}
-          </Flex>
-        </Box>
-      )}
-
-      {children && (
-        <Box as="span" {...boxProps}>
-          {children}
-        </Box>
-      )}
-    </StyledButton>
-  )
-})
-ButtonComponent.displayName = 'ForwardRef(Button)'
-
-/**
- * @public
- */
-export const Button = ButtonComponent as unknown as <E extends ElementType = 'button'>(
-  props: ButtonProps<E>,
-) => React.JSX.Element