@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

package/src/Logo/Logo.js

@@ -1,121 +0,0 @@
-// @flow
-import React from 'react'
-
-import Box from '../Box'
-
-const mark = {
-  services: `M12,0C2.4,0,0,2.4,0,12c0,9.6,2.4,12,12,12s12-2.4,12-12C24,2.4,21.6,0,12,0z M6.5,17.4c-0.7,0-1.3-0.6-1.3-1.3
-    c0-0.7,0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3C7.8,16.9,7.2,17.4,6.5,17.4z M6.5,13.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
-    s1.3,0.6,1.3,1.3C7.8,12.7,7.2,13.3,6.5,13.3z M6.5,9.2c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3s1.3,0.6,1.3,1.3S7.2,9.2,6.5,9.2z
-     M18,16.7c0,0.3-0.3,0.6-0.6,0.6H9.8c-0.3,0-0.6-0.3-0.6-0.6v-1.1c0-0.3,0.3-0.6,0.6-0.6h7.7c0.3,0,0.6,0.3,0.6,0.6V16.7z M18,12.6
-    c0,0.3-0.3,0.6-0.6,0.6H9.8c-0.3,0-0.6-0.3-0.6-0.6v-1.1c0-0.3,0.3-0.6,0.6-0.6h7.7c0.3,0,0.6,0.3,0.6,0.6V12.6z M18,8.4
-    C18,8.8,17.8,9,17.4,9H9.8C9.5,9,9.2,8.8,9.2,8.4V7.3c0-0.3,0.3-0.6,0.6-0.6h7.7C17.8,6.7,18,7,18,7.3V8.4z`,
-  'music-stand': `M12.1,0C2.5,0,0,2.3,0,11.9C0,21.5,2.3,24,11.9,24c9.6,0,12-2.3,12.1-11.9C24,2.5,21.7,0,12.1,0z M17.3,14.5L17.3,14.5
-    c0,0.9-1,1.7-2.3,1.9c-1.4,0.2-2.6-0.5-2.7-1.4c-0.1-0.9,0.9-1.8,2.3-1.9c0.4-0.1,0.9,0,1.2,0.1l0-4.4l-6.1,2l0,5.5l0,0
-    c-0.1,0.8-1.1,1.5-2.3,1.7c-1.4,0.2-2.6-0.5-2.7-1.4c-0.1-0.9,0.9-1.8,2.3-1.9c0.4-0.1,0.9,0,1.2,0.1l0-5.1c0-0.3,0.1-0.7,0.3-0.7
-    c1.3-0.4,7.4-2.4,8.2-2.6c0.3-0.1,0.5,0.2,0.5,0.3L17.3,14.5z`,
-}
-
-const type = {
-  services: {
-    width: 114,
-    path: `M41.1,14.4c0,1.8-1.5,3.6-4.4,3.6c-1.9,0-3.3-0.8-4-1.2l0,0c-0.2-0.2-0.4-0.5-0.3-0.8l0.5-1.1c0.1-0.1,0.2-0.3,0.4-0.3
-    c0.2-0.1,0.4,0,0.6,0.1l0,0c0.7,0.4,1.5,0.8,2.9,0.8c0.9,0,1.4-0.4,1.4-1c0-0.7-0.8-1.2-2.5-1.9c-1.7-0.8-3.3-1.8-3.3-3.9
-    c0-1.7,1.3-3.4,4.1-3.4c1.6,0,2.9,0.5,3.6,0.9c0.4,0.3,0.5,0.7,0.3,1.1L40,8.1c-0.2,0.4-0.6,0.4-1,0.3c-0.9-0.4-1.7-0.6-2.5-0.6
-    c-1,0-1.4,0.5-1.4,0.9c0,0.7,0.7,1.1,2,1.6C39.5,11.3,41.1,12.2,41.1,14.4z M53.5,10.9c0,0.2,0,0.6-0.1,0.8c0,0.4-0.4,0.6-0.7,0.6
-    h-8.1c0.1,1.5,1.5,3,3.4,3c1.4,0,2.1-0.5,2.8-1c0.1-0.1,0.3-0.2,0.5-0.2c0.1,0,0.3,0.1,0.4,0.3l0.7,1.1c0.2,0.3,0.4,0.6-0.1,1
-    C52,16.9,50.5,18,47.9,18c-3.5,0-6.1-2.7-6.1-6.4c0-3.6,2.6-6.4,6.1-6.4C51,5.3,53.5,7.7,53.5,10.9z M44.8,10.2h5.8
-    c-0.1-1.2-1.1-2.4-2.8-2.4C46.2,7.8,45,8.7,44.8,10.2z M60.8,5.3c-2,0-3.1,1.1-3.6,1.6L57,6.1c-0.1-0.3-0.4-0.5-0.7-0.5h-0.6
-    c-0.4,0-0.7,0.3-0.7,0.7V17c0,0.4,0.3,0.7,0.7,0.7h1.2c0.4,0,1,0,1-0.7V9.5C58.1,9.2,59,8,60.5,8c0.4,0,0.9,0.1,1,0.2
-    c0.2,0.1,0.3,0.1,0.5,0c0.2-0.1,0.3-0.2,0.4-0.4l0.6-1.3c0.1-0.3,0.1-0.5,0-0.6C62.8,5.5,61.7,5.3,60.8,5.3z M74.7,5.5h-1.2
-    c-0.3,0-0.7,0-0.9,0.4L69.3,13L66.3,6c-0.1-0.2-0.3-0.4-0.6-0.4H64c-0.3,0-0.5,0.1-0.6,0.3c-0.1,0.2-0.1,0.4,0,0.6l5.2,11.2
-    c0.1,0.2,0.3,0.4,0.6,0.4h0.2c0.3,0,0.5-0.1,0.6-0.4l5.2-11.2c0.1-0.2,0.1-0.4,0-0.6C75.2,5.6,74.9,5.5,74.7,5.5z M78.4,5.5H77
-    c-0.4,0-0.7,0.3-0.7,0.7V17c0,0.4,0.3,0.7,0.7,0.7h1.4c0.4,0,0.7-0.3,0.7-0.7V6.3C79.1,5.9,78.8,5.5,78.4,5.5z M77.7,0.2
-    c-1,0-1.8,0.8-1.8,1.9c0,1,0.8,1.9,1.8,1.9c1,0,1.9-0.8,1.9-1.9C79.6,1,78.8,0.2,77.7,0.2z M90.7,13.8c-0.3-0.3-0.7-0.2-1,0.1
-    c-0.1,0.1-0.2,0.2-0.3,0.3c-0.5,0.5-1.2,1.2-2.4,1.2c-1.9,0-3.4-1.6-3.4-3.7c0-2,1.5-3.6,3.5-3.6c0.9,0,1.8,0.6,2.4,1.1
-    c0.2,0.2,0.5,0.5,1,0.1l0.9-0.9c0.3-0.3,0.4-0.7,0.1-1C90.2,6,88.8,5.3,87,5.3c-3.5,0-6.3,2.9-6.3,6.4c0,3.6,2.7,6.4,6.2,6.4
-    c2,0,3.7-0.9,4.8-2.5c0.2-0.2,0.2-0.6-0.2-1L90.7,13.8z M104,10.9c0,0.2,0,0.6-0.1,0.8c0,0.4-0.4,0.6-0.7,0.6h-8.1
-    c0.1,1.5,1.5,3,3.4,3c1.4,0,2.1-0.5,2.8-1c0.1-0.1,0.3-0.2,0.5-0.2c0.1,0,0.3,0.1,0.4,0.3l0.7,1.1c0.2,0.3,0.4,0.6-0.1,1
-    c-0.4,0.4-1.9,1.5-4.5,1.5c-3.5,0-6.1-2.7-6.1-6.4c0-3.6,2.6-6.4,6.1-6.4C101.6,5.3,104,7.7,104,10.9z M95.3,10.2h5.8
-    C101,9,100,7.8,98.3,7.8C96.7,7.8,95.5,8.7,95.3,10.2z M109.5,10.3c-1.3-0.6-2-1-2-1.6c0-0.5,0.4-0.9,1.4-0.9
-    c0.8,0,1.6,0.2,2.5,0.6c0.3,0.1,0.8,0.1,1-0.3l0.4-0.8c0.2-0.4,0.1-0.8-0.3-1.1c-0.7-0.4-2-0.9-3.6-0.9c-2.8,0-4.1,1.7-4.1,3.4
-    c0,2.1,1.6,3.1,3.3,3.9c1.7,0.8,2.5,1.2,2.5,1.9c0,0.6-0.6,1-1.4,1c-1.4,0-2.2-0.5-2.9-0.8l0,0c-0.2-0.1-0.4-0.1-0.6-0.1
-    c-0.2,0-0.3,0.2-0.4,0.3l-0.5,1.1c-0.2,0.3,0,0.6,0.2,0.8l0,0c0.7,0.5,2.1,1.2,4,1.2c2.9,0,4.4-1.8,4.4-3.6
-    C113.4,12.2,111.9,11.3,109.5,10.3z`,
-  },
-  'music-stand': {
-    width: 152,
-    path: `M50.8,11.2l0,6c0,0.4-0.3,0.7-0.7,0.7l-1.4,0c-0.4,0-0.7-0.3-0.7-0.7l0-6.1c0-1.9-0.7-2.9-2.2-2.9c-1.5,0-2.3,0.9-2.7,1.2
-      c0,0,0,0.1-0.1,0.1c0.1,0.3,0.1,1,0.1,1.6l0,6.2c0,0.4-0.3,0.7-0.7,0.7l-1.5,0c-0.4,0-0.7-0.3-0.7-0.7l0-6.1c0-2-0.7-2.9-2.2-2.9
-      c-1.8,0-2.6,1.3-2.7,1.6l0,7.4c0,0.4-0.3,0.7-0.7,0.7l-1.4,0c-0.4,0-0.7-0.3-0.7-0.7l0-10.8c0-0.4,0.3-0.7,0.7-0.7l0.6,0
-      c0.3,0,0.5,0.2,0.6,0.5l0.3,0.8c0.6-0.6,1.8-1.5,3.7-1.5c1.6,0,2.7,0.6,3.6,1.8c1.2-1.2,2.6-1.8,4-1.8C50.4,5.4,50.8,8.7,50.8,11.2
-      z M63.5,6.5l0,10.8c0,0.4-0.3,0.7-0.7,0.7l-0.6,0c-0.4,0-0.6-0.3-0.7-0.6l-0.2-0.6c-0.4,0.5-1.6,1.5-3.7,1.5c-4.1,0-4.6-3-4.6-5.6
-      l0-6.2c0-0.4,0.3-0.7,0.7-0.7l1.4,0c0.4,0,0.7,0.3,0.7,0.7l0,6.3c0,1.8,0.7,2.7,2.2,2.7c1.6,0,2.6-1.3,2.7-1.8l0-7.2
-      c0-0.7,0.4-0.7,0.8-0.7l1.3,0C63.2,5.8,63.5,6.1,63.5,6.5z M73.8,14.7c0,1.8-1.5,3.6-4.4,3.6c-1.9,0-3.3-0.8-4-1.3l0,0
-      c-0.2-0.2-0.4-0.5-0.2-0.8l0.5-1.1c0.1-0.1,0.2-0.3,0.4-0.3c0.2-0.1,0.4,0,0.6,0.1l0,0c0.7,0.4,1.5,0.8,2.9,0.8
-      c0.9,0,1.4-0.4,1.4-1c0-0.7-0.8-1.2-2.5-1.9c-1.7-0.8-3.3-1.8-3.3-3.9c0-1.7,1.3-3.4,4.1-3.4c1.6,0,2.9,0.5,3.6,0.9
-      c0.4,0.3,0.5,0.7,0.3,1.1l-0.4,0.8c-0.2,0.4-0.6,0.4-1,0.3C70.9,8.2,70.1,8,69.3,8c-1,0-1.4,0.5-1.4,0.9c0,0.7,0.7,1.1,1.9,1.6
-      C72.3,11.6,73.8,12.4,73.8,14.7z M78.6,2.3c0,1-0.9,1.9-1.9,1.9c-1,0-1.8-0.8-1.8-1.9c0-1.1,0.8-1.9,1.8-1.9
-      C77.8,0.4,78.6,1.3,78.6,2.3z M78.1,6.5l0,10.8c0,0.4-0.3,0.7-0.7,0.7l-1.4,0c-0.4,0-0.7-0.3-0.7-0.7l0-10.8c0-0.4,0.3-0.7,0.7-0.7
-      l1.4,0C77.8,5.8,78.1,6.2,78.1,6.5z M90.4,14.8c0.5,0.4,0.4,0.8,0.2,1c-1.1,1.6-2.8,2.5-4.8,2.5c-3.5,0-6.2-2.8-6.2-6.4
-      c0-3.5,2.8-6.4,6.3-6.4c1.9,0,3.3,0.7,4.4,2.1c0.3,0.3,0.2,0.7-0.1,1l-0.9,0.8c-0.4,0.4-0.8,0.1-1-0.1c-0.5-0.6-1.4-1.2-2.3-1.2
-      c-1.9,0-3.5,1.6-3.5,3.6c0,2,1.5,3.7,3.4,3.7c1.3,0,1.9-0.6,2.4-1.1c0.1-0.1,0.2-0.2,0.3-0.3c0.3-0.3,0.7-0.3,1-0.1L90.4,14.8z
-       M105.6,14.8c0,1.8-1.5,3.6-4.4,3.6c-1.9,0-3.3-0.8-4-1.3l0,0C97,17,96.8,16.7,97,16.4l0.5-1.1c0.1-0.1,0.2-0.3,0.4-0.3
-      c0.2-0.1,0.4,0,0.6,0.1l0,0c0.7,0.4,1.5,0.8,2.9,0.8c0.9,0,1.4-0.4,1.4-1c0-0.7-0.8-1.2-2.5-1.9c-1.7-0.8-3.3-1.8-3.3-3.9
-      c0-1.7,1.3-3.4,4.1-3.4c1.6,0,2.9,0.5,3.6,0.9c0.4,0.3,0.5,0.7,0.3,1.1l-0.4,0.8c-0.2,0.4-0.6,0.4-1,0.3c-0.9-0.4-1.7-0.6-2.5-0.6
-      c-1,0-1.4,0.5-1.4,0.9c0,0.7,0.7,1.1,1.9,1.6C104.1,11.7,105.6,12.6,105.6,14.8z M114.8,16.7c0.2,0.5-0.2,0.8-0.3,0.9
-      c-0.5,0.3-1.9,0.9-3.4,0.9c-2.8,0-3.1-2-3.1-3.7l0-6.3l-1.2,0c-0.4,0-0.7-0.4-0.7-0.7l0-1.1c0-0.4,0.3-0.7,0.7-0.7l1.2,0l0-3.2
-      c0-0.4,0.3-0.7,0.7-0.7l1.5,0c0.4,0,0.7,0.3,0.7,0.7l0,3.2l3,0c0.4,0,0.7,0.3,0.7,0.7l0,1.1c0,0.4-0.3,0.7-0.7,0.7l-3,0l0,6.2
-      c0,1,0.4,1.1,0.8,1.1c0.8,0,1.6-0.4,1.8-0.5c0.2-0.1,0.4-0.1,0.5-0.1c0.2,0.1,0.3,0.2,0.4,0.4L114.8,16.7z M120.9,5.8
-      c-2.3,0-4.1,0.6-4.2,0.7c-0.4,0.1-0.6,0.4-0.5,0.9l0.2,1c0.1,0.4,0.4,0.7,0.8,0.6c0.6-0.2,1.9-0.6,3.3-0.5c0.6,0,1,0.1,1.3,0.4
-      c0.4,0.4,0.5,1,0.5,2c-0.4-0.1-1.3-0.3-2.3-0.3c-3,0-4.9,1.5-4.9,4c0,2.5,1.6,4.1,4,4.1c1.4,0,2.6-0.5,3.6-1.4l0.2,0.6
-      c0.1,0.3,0.3,0.5,0.6,0.5l0.9,0c0.4,0,0.7-0.3,0.7-0.7l0-6.3C125.2,8.2,124.9,5.8,120.9,5.8z M119.7,16.1c-1.1,0-1.7-0.7-1.7-1.8
-      c0-1.1,0.9-1.8,2.3-1.8c0.9,0,1.8,0.3,2,0.4l0,1.9C122,15.3,120.8,16.1,119.7,16.1z M138.4,11.6l0,6c0,0.4-0.3,0.7-0.7,0.7l-1.4,0
-      c-0.4,0-0.7-0.3-0.7-0.7l0-6.1c0-1.9-0.8-2.9-2.2-2.9c-1.7,0-2.8,1.1-3,1.6l0,7.4c0,0.5-0.3,0.7-0.8,0.7l-1.3,0
-      c-0.4,0-0.7-0.3-0.7-0.7l0-10.8c0-0.4,0.3-0.7,0.7-0.7l0.6,0c0.3,0,0.6,0.2,0.6,0.5l0.3,0.8c0.4-0.4,1.8-1.5,4-1.5
-      C136.8,5.8,138.4,7.7,138.4,11.6z M150.9,0l-1.5,0c-0.4,0-0.7,0.3-0.7,0.7l0,5.7c-0.5-0.2-1.5-0.6-2.9-0.6c-3.4,0-5.9,2.7-5.9,6.3
-      c0,3.6,2.4,6.4,5.6,6.4c2,0,3.4-1.1,3.9-1.5l0.2,0.7c0.1,0.4,0.3,0.6,0.7,0.6l0.6,0c0.4,0,0.7-0.3,0.7-0.7l0.1-16.9
-      C151.6,0.3,151.3,0,150.9,0z M145.8,15.9c-1.7,0-3.1-1.6-3.1-3.7c0-2,1.5-3.6,3.3-3.6c1.3,0,2.3,0.5,2.6,0.7l0,5
-      C148.5,14.6,147.6,15.9,145.8,15.9z`,
-  },
-}
-
-type Props = {
-  /** Accepts `"services"` or `"music-stand"`. */
-  name?: string,
-
-  /** Only displays the "iconmark" portion of the logo and not the wordmark. */
-  markOnly?: Boolean,
-}
-
-const Logo = ({ name, markOnly, ...restProps }: Props) => {
-  if (markOnly) {
-    return (
-      <Box
-        as="svg"
-        width="24px"
-        height="24px"
-        viewBox="0 0 24 24"
-        {...restProps}
-      >
-        <path d={mark[name]} />
-      </Box>
-    )
-  } else {
-    const { width, path } = type[name]
-    return (
-      <Box
-        as="svg"
-        width={width + 'px'}
-        height="24px"
-        viewBox={`0 0 ${width} 24`}
-        {...restProps}
-      >
-        <path d={mark[name]} />
-        <path d={path} />
-      </Box>
-    )
-  }
-}
-
-export default Logo

package/src/Logo/Logo.mdx

@@ -1,19 +0,0 @@
----
-title: Logo
-category: General
-summary: Generates an SVG for the respective app's logo which includes the mark and/or type.
-propsSummary: Accepts [Box](/box) props.
----
-
-```jsx live
-render(
-  <StackView spacing={2}>
-    <Box padding={2} backgroundColor="services">
-      <Logo name="services" fill="white" />
-    </Box>
-    <Box padding={2} backgroundColor="music-stand">
-      <Logo name="music-stand" fill="white" />
-    </Box>
-  </StackView>
-)
-```

package/src/Logo/index.js

@@ -1,2 +0,0 @@
-import Logo from './Logo'
-export default Logo

package/src/Menu/Heading.js

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import HeadingUppercase from '../HeadingUppercase'
-
-export type Props = {
-  children?: any,
-}
-
-function Heading({ children, ...restProps }: Props) {
-  return (
-    <HeadingUppercase
-      paddingBottom={0.5}
-      paddingHorizontal={2}
-      paddingTop={1}
-      {...restProps}
-    >
-      {children}
-    </HeadingUppercase>
-  )
-}
-
-Heading.displayName = 'Menu.Heading'
-export default Heading

package/src/Menu/Heading.mdx

@@ -1,20 +0,0 @@
----
-title: Menu.Heading
-category: General
-propsSummary: Accepts [HeadingUppercase](/headinguppercase) props.
-parent: Menu
----
-
-```jsx live
-render(
-  <Menu>
-    <Menu.Heading>Heading 1</Menu.Heading>
-    <Menu.Item>Item 1</Menu.Item>
-    <Menu.Item>Item 2</Menu.Item>
-    <Divider margin={0.5} />
-    <Menu.Heading>Heading 2</Menu.Heading>
-    <Menu.Item>Item 3</Menu.Item>
-    <Menu.Item>Item 4</Menu.Item>
-  </Menu>
-)
-```

package/src/Menu/Item.js

@@ -1,126 +0,0 @@
-import React, { cloneElement } from 'react'
-
-import Box from '../Box'
-import StackView from '../StackView'
-
-export type Props = {
-  children: any,
-  disabled: boolean,
-  backgroundColor: string,
-  highlightedColor: string,
-  isHighlighted: boolean,
-  renderLeft: Function | React.ReactNode,
-  renderRight: Function | React.ReactNode,
-}
-
-function Item({
-  backgroundColor = 'surface',
-  children,
-  disabled,
-  highlightedColor = 'highlight',
-  isHighlighted,
-  renderLeft,
-  renderRight,
-  ...props
-}: Props) {
-  const css = {
-    axis: 'horizontal',
-    alignment: 'center',
-    shrink: 0,
-    minHeight: 4,
-    fontSize: '14px',
-    paddingVertical: 0.75,
-    paddingHorizontal: 2,
-    whiteSpace: 'nowrap',
-    position: 'relative',
-    userSelect: 'none',
-    backgroundColor,
-  }
-
-  if (renderLeft) {
-    // @ts-ignore error TS2339: Property 'paddingLeft' does not exist on type
-    css.paddingLeft = 5
-  }
-
-  if (renderRight) {
-    // @ts-ignore error TS2339: Property 'paddingRight' does not exist on type
-    css.paddingRight = 5
-  }
-
-  if (isHighlighted) {
-    css.backgroundColor = highlightedColor
-  }
-
-  if (disabled) {
-    // @ts-ignore error TS2339: Property 'cursor' does not exist on type ...
-    css.cursor = 'not-allowed'
-    // @ts-ignore error TS2339: Property 'opacity' does not exist on type ...
-    css.opacity = 0.65
-  } else if (
-    // @ts-ignore error TS2339: Property 'onClick' does not exist on type '{}'.
-    props.onClick ||
-    // @ts-ignore error TS2339: Property 'onDoubleClick' does not exist on type '{}'.
-    props.onDoubleClick ||
-    // @ts-ignore error TS2339: Property 'onMouseDown' does not exist on type '{}'.
-    props.onMouseDown ||
-    // @ts-ignore error TS2339: Property 'onMouseUp' does not exist on type '{}'.
-    props.onMouseUp
-  ) {
-    // @ts-ignore error TS2339: Property 'cursor' does not exist on type ...
-    css.cursor = 'pointer'
-  }
-
-  return (
-    // @ts-ignore error TS2322: Type '{ ... }' is not assignable to type ...
-    <StackView {...css} {...props}>
-      {renderLeft && (
-        <Box
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          width={4}
-          height="100%"
-          position="absolute"
-          top={0}
-          left={0.5}
-        >
-          {typeof renderLeft === 'function'
-            // @ts-ignore error TS2349: This expression is not callable.
-            ? renderRight()
-            // @ts-ignore error TS2769: No overload matches this call.
-            : cloneElement(renderLeft, {
-                // @ts-ignore error TS2339: Property 'props' does not exist on type ...
-                size: (renderLeft.props && renderLeft.props.size) || 'md',
-              })}
-        </Box>
-      )}
-
-      {children}
-
-      {renderRight && (
-        <Box
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          width={4}
-          height="100%"
-          position="absolute"
-          top={0}
-          right={0.5}
-        >
-          {typeof renderRight === 'function'
-            ? renderRight()
-            // @ts-ignore error TS2769: No overload matches this call.
-            : cloneElement(renderRight, {
-                // @ts-ignore error TS2339: Property 'props' does not exist on type ...
-                size: (renderRight.props && renderRight.props.size) || 'md',
-              })}
-        </Box>
-      )}
-    </StackView>
-  )
-}
-
-Item.displayName = 'Menu.Item'
-
-export default Item

package/src/Menu/Item.mdx

@@ -1,18 +0,0 @@
----
-title: Menu.Item
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
-parent: Menu
----
-
-```jsx live
-render(
-  <Menu>
-    <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
-    <Menu.Item>Should be used as a child of Menu</Menu.Item>
-    <Menu.Item>
-      <Icon name="general.person" marginRight={1} /> Add icons and other things
-    </Menu.Item>
-  </Menu>
-)
-```

package/src/Menu/Menu.js

@@ -1,29 +0,0 @@
-// @flow
-import React from 'react'
-
-import Card from '../Card'
-
-import Heading from './Heading'
-import Item from './Item'
-
-export type Props = {
-  /** Often wraps `Menu.Item` and `Menu.Heading` components. */
-  children?: any,
-}
-
-function Menu(props: Props) {
-  return (
-    <Card
-      paddingVertical={0.5}
-      minWidth={12}
-      overflow="auto"
-      outline={0}
-      {...props}
-    />
-  )
-}
-
-Menu.Heading = Heading
-Menu.Item = Item
-
-export default Menu

package/src/Menu/Menu.mdx

@@ -1,42 +0,0 @@
----
-title: Menu
-category: General
-propsSummary: Accepts [Card](/card) props.
-isParent: true
----
-
-```jsx live
-render(
-  <Menu>
-    <Menu.Item>Item 1</Menu.Item>
-    <Menu.Item>Item 2</Menu.Item>
-    <Menu.Item>Item 3</Menu.Item>
-  </Menu>
-)
-```
-
-```jsx live
-render(
-  <Menu>
-    <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
-    <Menu.Item>Should be used as a child of Menu</Menu.Item>
-    <Menu.Item>
-      <Icon name="general.person" marginRight={1} /> Add icons and other things
-    </Menu.Item>
-  </Menu>
-)
-```
-
-```jsx live
-render(
-  <Menu>
-    <Menu.Heading>Heading 1</Menu.Heading>
-    <Menu.Item>Item 1</Menu.Item>
-    <Menu.Item>Item 2</Menu.Item>
-    <Divider margin={0.5} />
-    <Menu.Heading>Heading 2</Menu.Heading>
-    <Menu.Item>Item 3</Menu.Item>
-    <Menu.Item>Item 4</Menu.Item>
-  </Menu>
-)
-```

package/src/Menu/index.js

@@ -1,2 +0,0 @@
-import Menu from './Menu'
-export default Menu

package/src/Modal/Modal.mdx

@@ -1,60 +0,0 @@
----
-title: Modal
-category: Overlays
-propsSummary: Accepts [Box](/box) props.
-themeKey: modal
----
-
-```jsx live
-function MyModal(props) {
-  const [lazyComponent, setLazyComponent] = React.useState(null)
-  React.useEffect(() => {
-    if (props.open) {
-      setTimeout(() => {
-        setLazyComponent(<Input />)
-      }, 3000)
-    }
-    return () => setLazyComponent(null)
-  }, [props.open])
-  return (
-    <Modal id="modal" closeOnOutsideClick height={25} {...props}>
-      <StackView spacing={2}>
-        {lazyComponent || <Text>Loading lazy component...</Text>}
-        <Select
-          emptyValue=""
-          tooltip={{ title: 'Select a number' }}
-          onChange={(e) => console.log(e)}
-        >
-          {generateRange(100).map((number) => (
-            <Select.Option key={number} value={number}>
-              {number}
-            </Select.Option>
-          ))}
-        </Select>
-      </StackView>
-      <StackView
-        axis="horizontal"
-        distribution="end"
-        marginVertical={1}
-        spacing={1}
-      >
-        <Button title="Cancel" variant="naked" onClick={props.onRequestClose} />
-        <Button title="Submit" theme="primary" />
-      </StackView>
-    </Modal>
-  )
-}
-render(() => {
-  const [open, setOpen] = React.useState(false)
-  return (
-    <React.Fragment>
-      <Button
-        title="Open modal"
-        theme="primary"
-        onClick={() => setOpen(true)}
-      />
-      <MyModal open={open} onRequestClose={() => setOpen(false)} />
-    </React.Fragment>
-  )
-})
-```

package/src/Modal/Modal.test.tsx

@@ -1,113 +0,0 @@
-import React, { useState } from 'react'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom/extend-expect'
-import Dropdown from '../Dropdown'
-import Select from '../Select'
-import { Button, Heading, Modal, ThemeProvider } from '../'
-import noop from 'lodash/noop'
-
-describe('Modal', () => {
-  const TestModal = () => {
-    const [open, setOpen] = useState(false)
-
-    return (
-      <ThemeProvider>
-        <>
-          <Button
-            data-testid="modal-toggle"
-            onClick={() => setOpen(!open)}
-            title="Toggle modal"
-          />
-          <Modal open={open} onRequestClose={() => setOpen(false)}>
-            <Heading data-testid="modal-header">Hello</Heading>
-            <Dropdown>
-              {[1, 2, 3].map((n) => (
-                <Dropdown.Item data-testid={`dropdown-item-${n}`} key={n}>
-                  {n}
-                </Dropdown.Item>
-              ))}
-            </Dropdown>
-            <Select onChange={noop}>
-              {[1, 2, 3].map((n) => (
-                <Select.Option
-                  data-testid={`select-option-${n}`}
-                  key={n}
-                  value={n}
-                >
-                  {n}
-                </Select.Option>
-              ))}
-            </Select>
-          </Modal>
-        </>
-      </ThemeProvider>
-    )
-  }
-
-  describe('Keyboard navigation', () => {
-    it('should close modal on escape keypress (dropdown button has focus)', () => {
-      render(<TestModal />)
-      expect(screen.queryByTestId('modal-header')).toBeNull()
-      userEvent.click(screen.getByTestId('modal-toggle'))
-      expect(screen.getByTestId('modal-header')).toBeInTheDocument()
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('modal-header')).toBeNull()
-    })
-
-    it('should not close modal when escape key closes a dropdown within modal', () => {
-      render(<TestModal />)
-      userEvent.click(screen.getByTestId('modal-toggle'))
-      const [, dropdown] = screen.getAllByRole('button')
-      expect(dropdown).toHaveFocus()
-      userEvent.keyboard('{arrowdown}')
-      userEvent.keyboard(`{esc}`)
-      expect(screen.getByTestId('modal-header')).toBeInTheDocument()
-    })
-
-    it('should close dropdown on escape & close modal on subsequent escape', () => {
-      render(<TestModal />)
-      userEvent.click(screen.getByTestId('modal-toggle'))
-      userEvent.keyboard('{arrowdown}')
-      userEvent.keyboard(`{esc}`)
-      expect(screen.getByTestId('modal-header')).toBeInTheDocument()
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('modal-header')).toBeNull()
-    })
-
-    it('should hide select popover on escape, but select remains in dom', () => {
-      render(<TestModal />)
-      userEvent.click(screen.getByTestId('modal-toggle'))
-      userEvent.tab()
-      userEvent.keyboard('{arrowdown}')
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument()
-    })
-
-    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, persist modal', () => {
-      render(<TestModal />)
-      userEvent.click(screen.getByTestId('modal-toggle'))
-      userEvent.tab()
-      userEvent.keyboard('{arrowdown}')
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument()
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('select-option-1')).toBeNull()
-      expect(screen.queryByTestId('modal-header')).toBeInTheDocument()
-    })
-
-    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, close modal on subsequent escape', () => {
-      render(<TestModal />)
-      userEvent.click(screen.getByTestId('modal-toggle'))
-      userEvent.tab()
-      userEvent.keyboard('{arrowdown}')
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument()
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('select-option-1')).toBeNull()
-      expect(screen.queryByTestId('modal-header')).toBeInTheDocument()
-      userEvent.keyboard(`{esc}`)
-      expect(screen.queryByTestId('modal-header')).toBeNull()
-    })
-  })
-})

package/src/Modal/Modal.tsx

@@ -1,87 +0,0 @@
-import React, { useLayoutEffect, useRef } from 'react'
-
-import Box from '../Box'
-import Scrim from '../Scrim'
-import { useDocumentEvent } from '../hooks'
-import { trapFocus } from '../utils'
-import { useThemeProps } from '../system'
-
-export type ModalProps = {
-  children?: React.ReactNode
-  /**
-   * Close the modal when clicking outside of it.
-   */
-  closeOnOutsideClick?: boolean
-
-  /**
-   * Called by either clicking on the internal [`<Scrim/>`](/scrim) component or
-   * by pressing the `Escape` key.
-   */
-  onRequestClose?: () => null
-
-  /**
-   * Determines whether the modal is open or not.
-   */
-  open: boolean
-
-  /**
-   * Props passed to the internal [`<Scrim/>`](/scrim) component.
-   */
-  scrimProps?: Record<string, any>
-}
-
-const Modal = ({
-  children,
-  closeOnOutsideClick = false,
-  onRequestClose,
-  open,
-  ...restProps
-}: ModalProps): JSX.Element => {
-  const { scrimProps = {}, ...themeProps } = useThemeProps('modal', restProps)
-  const modalRef = useRef(null)
-
-  useLayoutEffect(() => {
-    if (open) {
-      return trapFocus(modalRef.current)
-    }
-  }, [open])
-
-  useDocumentEvent('keydown', (event) => {
-    if (open && onRequestClose && event.keyCode === 27) {
-      onRequestClose()
-    }
-  })
-
-  if (!open) {
-    return null
-  }
-
-  return (
-    <Scrim
-      alignment="center"
-      onMouseDown={(event) => {
-        if (closeOnOutsideClick && event.currentTarget === event.target) {
-          onRequestClose()
-        }
-      }}
-      {...scrimProps}
-    >
-      <Box
-        backgroundColor="surface"
-        boxShadow="0 0 20px rgba(0, 0, 0, 0.15)"
-        innerRef={modalRef}
-        margin={4}
-        maxWidth={60}
-        padding={4}
-        paddingBottom={3}
-        radius={8}
-        width="100%"
-        {...themeProps}
-      >
-        {children}
-      </Box>
-    </Scrim>
-  )
-}
-
-export default Modal

package/src/Modal/index.js

@@ -1,2 +0,0 @@
-import Modal from './Modal'
-export default Modal