@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/types/TileView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TileView';
+export { TileView as default } from './TileView';

package/dist/types/TimeField/TimeField.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/types/WrapView/WrapView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+export declare type WrapViewProps = {
+    /** The amount of space between children. */
+    spacing?: number;
+} & BoxProps;
+declare type Props = React.RefAttributes<any> & React.HTMLAttributes<any> & WrapViewProps;
+export declare function WrapView({ children, spacing, ...restProps }: Props): JSX.Element;
+export {};

package/dist/types/WrapView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './WrapView';
+export { WrapView as default } from './WrapView';

package/dist/types/hooks/use-accessibility-violation.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+export declare function useAccessibilityViolation(
+/** Content to be displayed in tooltip when hovering element. */
+tooltipContent: React.ReactNode, 
+/** Content to be displayed in the console with a reference to the element. */
+consoleContent: string): {
+    tooltipProps?: undefined;
+    wrapperProps?: undefined;
+} | {
+    tooltipProps: {
+        title: JSX.Element;
+        openDelay: number;
+        closeDelay: number;
+        popoverProps: {
+            textAlign: string;
+            paddingHorizontal: number;
+            paddingVertical: number;
+            backgroundColor: string;
+            color: string;
+            stroke: string;
+            strokeWeight: number;
+            elevation: number;
+        };
+    };
+    wrapperProps: {
+        innerRef: React.MutableRefObject<any>;
+        stroke: string;
+        strokeAlign: string;
+        strokeWeight: number;
+    };
+};

package/dist/types/index.d.ts

@@ -0,0 +1,340 @@
+import * as React from 'react'
+import { LiteralUnion } from 'type-fest'
+
+import { BoxProps } from './Box'
+import { NativeStyleNames, ColorStyleNames } from './system/style-names'
+
+export interface BoxSizes {}
+
+export interface Breakpoints {}
+
+export interface DefaultBreakpoints {
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+}
+
+export interface SpinnerSizes {
+  xxs: number
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+export interface SpinnerThickness {
+  xxs: number
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+export interface Colors {
+  foreground: string
+  foregroundSecondary: string
+  foregroundTertiary: string
+  background: string
+  backgroundSecondary: string
+  backgroundTertiary: string
+  surface: string
+  surfaceSecondary: string
+  surfaceTertiary: string
+  separator: string
+  separatorSecondary: string
+  separatorTertiary: string
+  separatorHover: string
+  separatorFocus: string
+  separatorFocusSecondary: string
+  highlight: string
+  highlightSecondary: string
+  linkForeground: string
+  linkBackground: string
+  primary: string
+  'primary-light': string
+  'primary-lighter': string
+  'primary-lightest': string
+  'primary-dark': string
+  'primary-darker': string
+  'primary-darkest': string
+  warning: string
+  'warning-light': string
+  'warning-lighter': string
+  'warning-lightest': string
+  'warning-dark': string
+  'warning-darker': string
+  'warning-darkest': string
+  error: string
+  'error-light': string
+  'error-lighter': string
+  'error-lightest': string
+  'error-dark': string
+  'error-darker': string
+  'error-darkest': string
+  success: string
+  'success-light': string
+  'success-lighter': string
+  'success-lightest': string
+  'success-dark': string
+  'success-darker': string
+  'success-darkest': string
+  sunday: string
+  monday: string
+  tuesday: string
+  wednesday: string
+  thursday: string
+  friday: string
+  saturday: string
+  'check-ins': string
+  giving: string
+  groups: string
+  'music-stand': string
+  pco: string
+  people: string
+  'planning-center': string
+  projector: string
+  registrations: string
+  calendar: string
+  services: string
+  'red-0': string
+  'red-1': string
+  'red-2': string
+  'red-3': string
+  'red-4': string
+  'red-5': string
+  'red-6': string
+  'red-7': string
+  'red-8': string
+  'red-9': string
+  'blue-0': string
+  'blue-1': string
+  'blue-2': string
+  'blue-3': string
+  'blue-4': string
+  'blue-5': string
+  'blue-6': string
+  'blue-7': string
+  'blue-8': string
+  'blue-9': string
+  'green-0': string
+  'green-1': string
+  'green-2': string
+  'green-3': string
+  'green-4': string
+  'green-5': string
+  'green-6': string
+  'green-7': string
+  'green-8': string
+  'green-9': string
+  'yellow-0': string
+  'yellow-1': string
+  'yellow-2': string
+  'yellow-3': string
+  'yellow-4': string
+  'yellow-5': string
+  'yellow-6': string
+  'yellow-7': string
+  'yellow-8': string
+  'yellow-9': string
+  'light-0': string
+  'light-1': string
+  'light-2': string
+  'light-3': string
+  'light-4': string
+  'light-5': string
+  'light-6': string
+  'light-7': string
+  'light-8': string
+  'light-9': string
+  'dark-0': string
+  'dark-1': string
+  'dark-2': string
+  'dark-3': string
+  'dark-4': string
+  'dark-5': string
+  'dark-6': string
+  'dark-7': string
+  'dark-8': string
+  'dark-9': string
+  'grey-0': string
+  'grey-1': string
+  'grey-2': string
+  'grey-3': string
+  'grey-4': string
+  'grey-5': string
+  'grey-6': string
+  'grey-7': string
+  'grey-8': string
+  'grey-9': string
+  transparent: string
+}
+
+export type ColorProp = LiteralUnion<keyof Colors, string>
+
+export interface ButtonTheme {
+  fill: any
+  outline: any
+  naked: any
+}
+
+export interface Theme {
+  boxSizes?: Record<keyof BoxSizes, BoxProps>
+  breakpoints?: Partial<Breakpoints>
+  button?: { themes?: { [key: string]: ButtonTheme } }
+  calendar?: any
+  checkbox?: any
+  colors?: Partial<Colors>
+  elevations?: Array<string>
+  fontSizes?: Array<number>
+  group?: { radius?: number }
+  pageBody?: BoxProps
+  pageButton?: any
+  pageDropdown?: any
+  pageHeader?: BoxProps
+  pageTitle?: any
+  icons?: object
+  lineHeights?: Array<number>
+  radio?: any
+  spinner?: {
+    color?: ColorProp
+    sizes?: Partial<SpinnerSizes>
+    thickness?: Partial<SpinnerThickness>
+    trackColor?: ColorProp
+  }
+}
+
+export interface MediaQueries<T> {
+  mediaQueries?: Partial<Record<keyof Breakpoints, T>>
+}
+
+export interface Variants<T> {
+  variants?: {
+    [key in any]?: T
+  }
+}
+
+type CustomStyles = {
+  css?: any
+  paddingHorizontal?: number | string
+  paddingVertical?: number | string
+  marginHorizontal?: number | string
+  marginVertical?: number | string
+  column?: React.CSSProperties['gridColumn']
+  columnStart?: React.CSSProperties['gridColumnStart']
+  columnEnd?: React.CSSProperties['gridColumnEnd']
+  row?: React.CSSProperties['gridRow']
+  rowStart?: React.CSSProperties['gridRowStart']
+  rowEnd?: React.CSSProperties['gridRowEnd']
+  basis?: React.CSSProperties['flexBasis']
+  grow?: React.CSSProperties['flexGrow']
+  shrink?: React.CSSProperties['flexShrink']
+  wrap?: boolean | string
+  radius?: React.CSSProperties['borderRadius']
+  radiusTop?: number | string
+  radiusRight?: number | string
+  radiusBottom?: number | string
+  radiusLeft?: number | string
+  strokeAlign?: 'inside' | 'center' | 'outside'
+  strokeWeight?: number
+  elevation?: number
+  x?: number | string
+  y?: number | string
+  rotate?: number
+  scale?: number
+  uppercase?: boolean
+}
+
+export type StyleProps = Pick<React.CSSProperties, NativeStyleNames> &
+  Partial<Record<ColorStyleNames, ColorProp>> &
+  CustomStyles
+
+export type CommonProps = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  any
+
+export const designSystem: any
+export const hooks: any
+export const server: any
+export const utils: any
+
+export const Avatar: React.FC<CommonProps>
+export const Badge: React.FC<CommonProps>
+export const Calendar: React.FC<CommonProps>
+export const Checkbox: React.FC<CommonProps>
+export const CheckboxCard: React.FC<CommonProps>
+export const CheckboxGroup: React.FC<CommonProps>
+export const ChurchCenterStatus: React.FC<CommonProps>
+export const Collapse: React.FC<CommonProps>
+export const ColumnView: React.FC<CommonProps>
+export const Combobox: React.FC<CommonProps>
+export const DataTable: React.FC<CommonProps>
+export const DateField: React.FC<CommonProps>
+export const DragDrop: React.FC<CommonProps>
+export const Drawer: React.FC<CommonProps>
+export const Dropdown: React.FC<CommonProps>
+export const EditActions: React.FC<CommonProps>
+export const Field: React.FC<CommonProps>
+export const Form: React.FC<CommonProps>
+export const FieldSet: React.FC<CommonProps>
+export const Heading: React.FC<CommonProps>
+export const HelperDrawer: React.FC<CommonProps>
+export const Highlight: React.FC<CommonProps>
+export const Icon: React.FC<CommonProps>
+export const Link: React.FC<CommonProps>
+export const LinkList: React.FC<CommonProps>
+export const List: React.FC<CommonProps>
+export const Logo: React.FC<CommonProps>
+export const Menu: React.FC<CommonProps>
+export const Modal: React.FC<CommonProps>
+export const NumberField: React.FC<CommonProps>
+export const PagerView: React.FC<CommonProps>
+export const Pagination: React.FC<CommonProps>
+export const Progress: React.FC<CommonProps>
+export const Radio: React.FC<CommonProps>
+export const RangeSlider: React.FC<CommonProps>
+export const ScreenReader: React.FC<CommonProps>
+export const Section: React.FC<CommonProps>
+export const HeadingUppercase: React.FC<CommonProps>
+export const SegmentedControl: React.FC<CommonProps>
+export const SegmentedTabs: React.FC<CommonProps>
+export const Select: React.FC<CommonProps>
+export const Sidebar: React.FC<CommonProps>
+export const Sortable: React.FC<CommonProps>
+export const StepperField: React.FC<CommonProps>
+export const StepperProgress: React.FC<CommonProps>
+export const Summary: React.FC<CommonProps>
+export const Table: React.FC<CommonProps>
+export const Tabs: React.FC<CommonProps>
+export const TextArea: React.FC<CommonProps>
+export const TimeField: React.FC<CommonProps>
+export const Toolbar: React.FC<CommonProps>
+export const TokenInput: React.FC<CommonProps>
+export const Tooltip: React.FC<CommonProps>
+export const VariantProvider: React.FC<CommonProps>
+export const Wizard: React.FC<CommonProps>
+
+export * from './Alert'
+export * from './Box'
+export * from './Button'
+export * from './Card'
+export * from './Divider'
+export * from './FilterLayout'
+export * from './GridView'
+export * from './Group'
+export * from './Input'
+export * from './Popover'
+export * from './Portal'
+export * from './Scrim'
+export * from './Spinner'
+export * from './StackView'
+export * from './Tab'
+export * from './Text'
+export * from './TileView'
+export * from './ThemeProvider'
+export * from './WrapView'

package/dist/types/system/default-theme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '../index';
+declare const defaultTheme: Theme;
+export default defaultTheme;

package/dist/types/system/style-names.d.ts

@@ -0,0 +1,8 @@
+export declare const nativeStyleNames: readonly ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "baselineShift", "border", "borderBottom", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderLeft", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "clear", "clip", "clipPath", "clipRule", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "content", "counterIncrement", "counterReset", "cursor", "direction", "display", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "font", "fontFamily", "fontFeatureSettings", "fontKerning", "fontSize", "fontStretch", "fontStyle", "fontVariant", "fontVariantCaps", "fontVariantLigatures", "fontVariantNumeric", "fontWeight", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "imageRendering", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "mask", "maskType", "maxHeight", "maxWidth", "minHeight", "minWidth", "mixBlendMode", "motion", "objectFit", "objectPosition", "opacity", "order", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowWrap", "overflowX", "overflowY", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "perspective", "perspectiveOrigin", "placeItems", "placeSelf", "pointerEvents", "position", "resize", "right", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "tabSize", "tableLayout", "textAlign", "textDecoration", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textTransform", "top", "touchAction", "transform", "transformOrigin", "transformStyle", "transition", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "verticalAlign", "visibility", "clipPath", "filter", "userSelect", "WebkitOverflowScrolling", "writingMode", "whiteSpace", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "zIndex"];
+export declare type NativeStyleNames = typeof nativeStyleNames[number];
+export declare const colorStyleNames: readonly ["backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke"];
+export declare type ColorStyleNames = typeof colorStyleNames[number];
+export declare const customStyleNames: readonly ["css", "column", "columnStart", "columnEnd", "row", "rowStart", "rowEnd", "basis", "elevation", "grow", "marginHorizontal", "marginVertical", "paddingHorizontal", "paddingVertical", "radius", "radiusTop", "radiusRight", "radiusBottom", "radiusLeft", "x", "y", "rotate", "scale", "uppercase", "shrink", "wrap", "strokeAlign", "strokeWeight"];
+export declare type CustomStyleNames = typeof customStyleNames[number];
+export declare const stylePropNames: readonly ["alignContent", "alignItems", "alignSelf", "alignmentBaseline", "animation", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationTimingFunction", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "baselineShift", "border", "borderBottom", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderLeft", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStyle", "borderTop", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "clear", "clip", "clipPath", "clipRule", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "content", "counterIncrement", "counterReset", "cursor", "direction", "display", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "font", "fontFamily", "fontFeatureSettings", "fontKerning", "fontSize", "fontStretch", "fontStyle", "fontVariant", "fontVariantCaps", "fontVariantLigatures", "fontVariantNumeric", "fontWeight", "gap", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "imageRendering", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBottom", "marginLeft", "marginRight", "marginTop", "mask", "maskType", "maxHeight", "maxWidth", "minHeight", "minWidth", "mixBlendMode", "motion", "objectFit", "objectPosition", "opacity", "order", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowWrap", "overflowX", "overflowY", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "perspective", "perspectiveOrigin", "placeItems", "placeSelf", "pointerEvents", "position", "resize", "right", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "tabSize", "tableLayout", "textAlign", "textDecoration", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textTransform", "top", "touchAction", "transform", "transformOrigin", "transformStyle", "transition", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "verticalAlign", "visibility", "clipPath", "filter", "userSelect", "WebkitOverflowScrolling", "writingMode", "whiteSpace", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "zIndex", "backgroundColor", "borderColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "fill", "stroke", "css", "column", "columnStart", "columnEnd", "row", "rowStart", "rowEnd", "basis", "elevation", "grow", "marginHorizontal", "marginVertical", "paddingHorizontal", "paddingVertical", "radius", "radiusTop", "radiusRight", "radiusBottom", "radiusLeft", "x", "y", "rotate", "scale", "uppercase", "shrink", "wrap", "strokeAlign", "strokeWeight"];
+export declare const pseudoPropNames: readonly ["active", "focus", "hover"];

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@planningcenter/tapestry-react",
+  "version": "0.0.1-alpha.0",
+  "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
+  "author": "Front End Systems Engineering <frontend@pco.bz>",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ministrycentered/tapestry-react.git"
+  },
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "is-ci \"test:coverage\" \"test:watch\"",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watch",
+    "test:debug": "node --inspect-brk ./node_modules/bin/jest --runInBand --watch",
+    "icons": "node scripts/generate-icons.js",
+    "prebuild": "rimraf dist",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:types",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel src -d dist/cjs --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
+    "build:esm": "NODE_ENV=production BABEL_ENV=esm babel src -d dist/esm --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
+    "build:types": "tsc && node scripts/copy-types.js",
+    "prepublishOnly": "yarn build",
+    "develop": "yarn prebuild && yarn build:esm --watch",
+    "develop:yalc": "yalc publish && chokidar src -c 'yalc publish --push --changed'",
+    "lint": "eslint src",
+    "validate": "yarn lint && yarn prettier --list-different",
+    "semantic-release": "semantic-release"
+  },
+  "peerDependencies": {
+    "@emotion/cache": "10.x",
+    "@emotion/core": "10.x",
+    "emotion-theming": "10.x",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.12.17",
+    "@babel/core": "7.12.17",
+    "@babel/plugin-proposal-class-properties": "7.12.13",
+    "@babel/plugin-proposal-object-rest-spread": "7.12.13",
+    "@babel/plugin-transform-react-constant-elements": "7.12.13",
+    "@babel/plugin-transform-runtime": "7.12.17",
+    "@babel/preset-env": "7.12.17",
+    "@babel/preset-flow": "7.12.13",
+    "@babel/preset-react": "7.12.13",
+    "@babel/preset-typescript": "^7.12.17",
+    "@emotion/cache": "10.0.29",
+    "@emotion/core": "10.0.35",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/react-hooks": "5.0.3",
+    "@types/jest": "^26.0.20",
+    "babel-eslint": "10.1.0",
+    "chokidar-cli": "^2.1.0",
+    "commitizen": "^4.2.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "dotenv": "^8.2.0",
+    "emotion-theming": "10.0.27",
+    "eslint": "7.20.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-plugin-flowtype": "5.2.1",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "figma-tools": "^0.2.4",
+    "husky": "^4.3.8",
+    "is-ci-cli": "^2.2.0",
+    "jest": "^26.6.3",
+    "jest-canvas-mock": "2.3.1",
+    "jest-watch-typeahead": "0.6.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "17.0.1",
+    "rimraf": "3.0.2",
+    "semantic-release": "17.3.9",
+    "svgo": "^2.1.0",
+    "svgson": "4.1.0",
+    "typescript": "^4.1.5"
+  },
+  "dependencies": {
+    "@popmotion/popcorn": "^0.4.4",
+    "@popperjs/core": "^2.6.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/user-event": "^13.1.9",
+    "camel-to-kebab": "^1.1.0",
+    "csstype": "^3.0.6",
+    "date-fns": "^2.17.0",
+    "deepmerge": "^4.2.2",
+    "focus-options-polyfill": "^1.6.0",
+    "focus-visible": "^5.2.0",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.get": "^4.4.2",
+    "lodash.snakecase": "^4.1.1",
+    "match-sorter": "^6.2.0",
+    "mitt": "^2.1.0",
+    "mousetrap": "^1.6.5",
+    "polished": "^4.1.1",
+    "popper-max-size-modifier": "^0.2.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-sticky-box": "^0.9.3",
+    "resize-observer-polyfill": "^1.5.1",
+    "stylefire": "^7.0.3",
+    "tabbable": "^5.1.5",
+    "tiny-invariant": "^1.1.0",
+    "tiny-spring": "^1.0.0",
+    "type-fest": "^0.21.1",
+    "use-constant": "^1.1.0",
+    "warning": "^4.0.3",
+    "zustand": "^3.3.2"
+  }
+}

package/src/ActionsDropdown/ActionsDropdown.mdx

@@ -0,0 +1,69 @@
+---
+title: ActionsDropdown
+category: General
+summary: A shared implementation for the Profile actions dropdown.
+---
+
+## Default State
+
+```jsx live
+render(
+  <ActionsDropdown isBelowManager>
+    <Dropdown.Link to="#">Permissions</Dropdown.Link>
+  </ActionsDropdown>
+)
+```
+
+## Duplicates State
+
+```jsx live
+render(
+  <ActionsDropdown
+    duplicates={{
+      amount: 1,
+      url: '#',
+    }}
+    onDeleteProfile={() => alert('Delete profile 🗑')}
+  >
+    <Dropdown.Link to="#">Edit profile</Dropdown.Link>
+    <Dropdown.Link to="#">Permissions</Dropdown.Link>
+    <Dropdown.Link to="#">Perform action</Dropdown.Link>
+    <Dropdown.Link to="#">Merge profile</Dropdown.Link>
+    <Dropdown.Link to="#">Set inactive</Dropdown.Link>
+  </ActionsDropdown>
+)
+```
+
+## Inactive State
+
+```jsx live
+render(
+  <ActionsDropdown
+    inactive={{
+      date: new Date('Sep 19, 2019'),
+      reason: 'Deceased',
+      linkProps: { onClick: () => alert('Reactivate 🎚') },
+    }}
+    isPeopleProduct
+  >
+    <Dropdown.Link to="#">Permissions</Dropdown.Link>
+  </ActionsDropdown>
+)
+```
+
+## Custom Styles
+
+```jsx live
+render(
+  <ActionsDropdown
+    defaultButtonProps={{
+      backgroundColor: 'hotpink',
+      color: 'white',
+      hover: { backgroundColor: '#f25ca7' },
+      active: { backgroundColor: '#ea539e' },
+    }}
+  >
+    <Dropdown.Link to="#">Edit profile</Dropdown.Link>
+  </ActionsDropdown>
+)
+```