@sproutsocial/racine 13.7.1 → 14.0.0

package/lib/utils/hooks.js

@@ -1,4 +1,5 @@
 'no babel-plugin-flow-react-proptypes';
+
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -19,7 +20,7 @@ export function useTextContent(initial) {
     textContent = _useState2[0],
     setTextContent = _useState2[1];
   var ref = useCallback(function (node) {
-    if (node !== null) {
+    if (node && node.textContent !== null) {
       setTextContent(node.textContent);
     }
   }, []);
@@ -72,6 +73,7 @@ export function useMutationObserverOnce(targetNode, config, callback) {
 export var useSelect = function useSelect() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       initialValue: '',
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: function onChange() {}
     },
     _ref$initialValue = _ref.initialValue,
@@ -103,10 +105,12 @@ var valueReducer = function valueReducer(state, action) {
     case 'toggle_item':
     default:
       {
-        if (newState.has(action.value)) {
-          newState.delete(action.value);
-        } else {
-          newState.add(action.value);
+        if (action.value) {
+          if (newState.has(action.value)) {
+            newState.delete(action.value);
+          } else {
+            newState.add(action.value);
+          }
         }
         return newState;
       }
@@ -115,6 +119,7 @@ var valueReducer = function valueReducer(state, action) {
 export var useMultiselect = function useMultiselect() {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       initialValue: [],
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: function onChange() {}
     },
     _ref2$initialValue = _ref2.initialValue,
@@ -141,6 +146,7 @@ export var useMultiselect = function useMultiselect() {
       return;
     }
     userOnChange(getArrayValue(value));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userOnChange, value]);
   var onClear = useCallback(function () {
     dispatch({

package/lib/utils/index.js

@@ -10,6 +10,7 @@ export var mergeRefs = function mergeRefs(refs) {
   var filteredRefs = refs.filter(Boolean);
   if (!filteredRefs.length) return null;
   if (filteredRefs.length === 0) return filteredRefs[0];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return function (inst) {
     var _iterator = _createForOfIteratorHelper(filteredRefs),
       _step;

package/lib/utils/innerText.flow.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/utils/innerText.js

@@ -1,4 +1,3 @@
-// Copied from 'script/core/react/innerText.js' in web-app-core
 var hasOwnProperty = function hasOwnProperty(obj, property) {
   return Object.prototype.hasOwnProperty.call(obj, property);
 };
@@ -20,8 +19,11 @@ var innerText = function innerText(node) {
     return node.toString();
   } else if (Array.isArray(node)) {
     return node.reduce(reduceNodeToString, '');
-    // $FlowIssue - Portal and Iterable
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - hasProps checks for props, but may be able to fix this
   } else if (hasProps(node) && hasChildren(node.props)) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - how can we make sure ts knows this is ok?
     return innerText(node.props.children);
   }
   return '';

package/lib/utils/react-testing-library.flow.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { act as defaultAct, cleanup as defaultCleanup, createEvent as defaultCreateEvent, fireEvent as defaultFireEvent, waitFor as defaultWaitFor, waitForElementToBeRemoved as defaultWaitForElementToBeRemoved } from '@testing-library/react';
+import defaultUserEvent from '@testing-library/user-event';

package/lib/utils/react-testing-library.js

@@ -7,8 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import * as React from 'react';
-import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, wait, waitFor, waitForElement, waitForElementToBeRemoved, within } from '@testing-library/react';
+import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ThemeProvider from "../ThemeProvider";
 import { a11yCheck } from "./a11yTest";
@@ -47,4 +46,4 @@ var customWithin = function customWithin(element) {
 };
 var boundQueries = within(document.body, sproutQueries);
 var customScreen = _objectSpread(_objectSpread({}, defaultScreen), boundQueries);
-export { act, cleanup, createEvent, customRender as render, customWithin as within, fireEvent, customScreen as screen, userEvent, wait, waitFor, waitForElement, waitForElementToBeRemoved };
+export { act, cleanup, createEvent, customRender as render, customWithin as within, fireEvent, customScreen as screen, userEvent, waitFor, waitForElementToBeRemoved };

package/lib/utils/responsiveProps/index.test.flow.js

@@ -0,0 +1,21 @@
+import { normalizeResponsiveProp } from "./index.flow";
+describe('normalizeResponsiveProp', function () {
+  it('should handle single, literal values', function () {
+    expect(normalizeResponsiveProp(0)).toMatchObject([0, 0, 0, 0, 0]);
+  });
+  it('should handle arrays with 1 value', function () {
+    expect(normalizeResponsiveProp([0])).toMatchObject([0, 0, 0, 0, 0]);
+  });
+  it('should handle arrays with 2 values', function () {
+    expect(normalizeResponsiveProp([0, 1])).toMatchObject([0, 1, 1, 1, 1]);
+  });
+  it('should handle arrays with 3 values', function () {
+    expect(normalizeResponsiveProp([0, 1, 2])).toMatchObject([0, 1, 2, 2, 2]);
+  });
+  it('should handle arrays with 4 values', function () {
+    expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([0, 1, 2, 3, 3]);
+  });
+  it('should handle arrays with 5 values', function () {
+    expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([0, 1, 2, 3, 4]);
+  });
+});

package/lib/utils/system-props.js

@@ -8,7 +8,13 @@ export var COMMON = styles.compose(styles.color, styles.space, styles.system({
   cursor: true,
   whiteSpace: true
 }));
-export var BORDER = styles.compose(styles.border, styles.borderTop, styles.borderRight, styles.borderBottom, styles.borderLeft, styles.borderWidth, styles.borderStyle, styles.borderColor, styles.borderRadius, styles.border.borderBottomLeftRadius, styles.border.borderBottomRightRadius, styles.border.borderTopLeftRadius, styles.border.borderTopRightRadius, styles.boxShadow);
+export var BORDER = styles.compose(styles.border, styles.borderTop, styles.borderRight, styles.borderBottom, styles.borderLeft, styles.borderWidth, styles.borderStyle, styles.borderColor, styles.borderRadius,
+// After reading the docs, these seem duplicate to styles.border
+// styles.border.borderBottomLeftRadius,
+// styles.border.borderBottomRightRadius,
+// styles.border.borderTopLeftRadius,
+// styles.border.borderTopRightRadius,
+styles.boxShadow);
 export var TYPOGRAPHY = styles.compose(typeScale, styles.fontFamily, styles.fontStyle, styles.fontWeight, styles.lineHeight, styles.textAlign);
 export var LAYOUT = styles.compose(styles.display, styles.size, styles.width, styles.height, styles.minWidth, styles.minHeight, styles.maxWidth, styles.maxHeight, styles.overflow, styles.verticalAlign);
 export var POSITION = styles.compose(styles.position, styles.zIndex, styles.top, styles.right, styles.bottom, styles.left);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "13.7.1",
+  "version": "14.0.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -17,28 +17,33 @@
   },
   "main": "commonjs/index.js",
   "module": "lib/index.js",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "install-deps": "yarn install",
     "prepublishOnly": "yarn run build",
     "precommit": "lint-staged",
     "change": "yarn changeset add",
-    "clean": "rimraf ./__flow__ ./commonjs ./dist ./lib ./es",
+    "clean": "rimraf ./__flow__ ./commonjs ./dist ./lib ./es tsconfig.tsbuildinfo",
     "build-package": "node ./bin/buildPackage.js",
     "watch-package": "node ./bin/buildPackage.js --watch",
     "build-icons": "node ./bin/buildSVG.js",
     "build-app": "BABEL_ENV=es node ./bin/buildApp.js",
+    "build:ts-declarations": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build:typescript": "tsc --noEmit",
     "watch-app": "BABEL_ENV=es node ./bin/buildApp.js --watch",
     "start-package-only": "npm-run-all install-deps clean -p build-icons watch-package",
     "start": "npm-run-all install-deps clean -p build-icons watch-package watch-app",
-    "build": "npm-run-all -s clean build-icons build-package build-app",
-    "flow": "yarn run build-icons && flow check --max-warnings 0",
+    "build": "npm-run-all -s clean build-icons build:typescript build:ts-declarations build-package build-app",
     "lint-js": "eslint --max-warnings=0 --fix .",
     "lint-css": "stylelint 'src/**/*.js'",
     "lint-icons": "yarn icon-lint check 'icons/*.svg'",
     "jest": "jest",
     "jest:watch": "jest --watch",
-    "test": "npm-run-all flow lint-js lint-css lint-icons jest",
+    "test:flow": "flow check --max-warnings 0",
+    "test:ts": "tsc --noEmit",
+    "test:types": "yarn build-icons && yarn test:flow && yarn test:ts",
+    "test": "npm-run-all test:types lint-js lint-css lint-icons jest",
     "backstop-test": "yarn backstop test --config='backstop.config.js' --docker",
     "backstop-reference": "yarn backstop reference --config='backstop.config.js' --docker",
     "backstop-approve": "yarn backstop approve --config='backstop.config.js' --docker",
@@ -94,6 +99,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.18.6",
     "@changesets/cli": "^2.12.0",
+    "@khanacademy/flow-to-ts": "^0.5.2",
     "@reach/component-component": "^0.1.3",
     "@sproutsocial/seeds-border": "^1.1.0",
     "@sproutsocial/seeds-color": "^1.5.3",
@@ -112,8 +118,18 @@
     "@storybook/react": "^6.4.19",
     "@storybook/theming": "^6.4.19",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.0.0",
+    "@types/jest": "^29.2.3",
+    "@types/jest-axe": "^3.5.5",
+    "@types/node": "^17.0.38",
+    "@types/react": "^18.0.10",
+    "@types/react-dates": "^21.8.3",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-virtualized": "9.18.*",
+    "@types/styled-components": "^5.1.26",
+    "@types/styled-system": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "babel-eslint": "^10.1.0",
@@ -126,7 +142,8 @@
     "babel-polyfill": "^6.26.0",
     "backstopjs": "^6.1.4",
     "chalk": "^2.3.2",
-    "csstype": "^2.6.9",
+    "chokidar": "^3.0.2",
+    "csstype": "^3.1.1",
     "eslint": "7.27.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
@@ -172,6 +189,8 @@
     "stylelint-processor-styled-components": "^1.8.0",
     "svgo": "^1.3.0",
     "svgstore": "^2.0.3",
+    "tsc-alias": "^1.8.2",
+    "typescript": "^4.7.2",
     "webpack": "^4.20.0",
     "webpack-dev-server": "^4.9.0"
   },

package/__flow__/Avatar/index.js

@@ -1,70 +0,0 @@
-// @flow
-import * as React from 'react';
-import { useState, useCallback, useMemo, memo } from 'react';
-import styled, { css, type StyledComponent } from 'styled-components';
-import classnames from 'classnames';
-import Box from "../Box";
-import Image from "../Image";
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-import type { TypeAvatarProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeAvatarProps from root instead
- */
-export type TypeProps = TypeAvatarProps;
-const AvatarText = styled(({
-  fontSize,
-  ...rest
-}) => <Text {...rest} />)`
-  font-size: ${props => props.fontSize}px;
-  color: ${props => props.color}px;
-`;
-const Container: StyledComponent<any, TypeTheme, *> = styled(Box)`
-  ${({
-  theme,
-  type,
-  variant,
-  bg
-}) => css`
-    color: ${theme.colors[type][variant === 'dark' ? '200' : '900']};
-    background: ${bg ? bg : theme.colors[type][variant === 'dark' ? '900' : '200']};
-  `}
-`;
-const getInitials = (name: string, fallback: string = '?'): string => {
-  if (!name || typeof name !== 'string') return fallback;
-  return name.replace(/\s+/, ' ').split(' ') // Repeated spaces results in empty strings
-  .slice(0, 2).map(v => v && v[0].toUpperCase()) // Watch out for empty strings
-  .join('');
-};
-export const Avatar = ({
-  appearance = 'circle',
-  name,
-  src,
-  variant = 'light',
-  type = 'neutral',
-  size = '40px',
-  bg,
-  color,
-  ...rest
-}: TypeAvatarProps) => {
-  const [imageFailedLoading, setImageFailedLoading] = useState(false);
-  const initials = useMemo(() => getInitials(name), [name]);
-  const handleError = useCallback(() => {
-    setImageFailedLoading(true);
-  }, [setImageFailedLoading]);
-
-  // Font size for initials is half the size of the avatar, rounded down.
-  const fontSize = Math.floor(Number(size.replace('px', '')) * 0.4);
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container className={classnames(variant)} size={size} overflow="hidden" borderRadius={appearance === 'leaf' ? '40% 0 40% 0' : '50%'} position="relative" display="flex" flexShrink={0} justifyContent="center" alignItems="center" title={name} bg={bg} variant={variant} type={type} data-qa-user-avatar={name} {...rest}>
-      {!src || imageFailedLoading ? <AvatarText lineHeight={size} fontWeight="semibold" fontSize={fontSize} color={color}>
-          {initials}
-        </AvatarText> : <Image alt={name} width="auto" height="100%" src={src} onError={handleError} m={0} />}
-    </Container>
-  );
-};
-
-// $FlowIssue Upgrade 0.111.1
-export default memo(Avatar);

package/__flow__/Badge/constants.js

@@ -1,42 +0,0 @@
-//@flow
-
-const defaultPurple = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.purple'
-};
-const suggestion = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.blue'
-};
-const passive = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.neutral'
-};
-const primary = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.blue'
-};
-const secondary = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.yellow'
-};
-const common = {
-  color: 'colors.text.inverse',
-  background: 'colors.aqua.600'
-};
-const approval = {
-  color: 'colors.text.body',
-  background: 'colors.container.background.decorative.orange'
-};
-
-//Deprecated former "types"
-
-export const legacyBadgeColors = {
-  primary,
-  secondary,
-  passive,
-  common,
-  approval,
-  default: defaultPurple,
-  suggestion
-};

package/__flow__/Badge/index.js

@@ -1,29 +0,0 @@
-// @flow
-import * as React from 'react';
-import Box from "../Box";
-import Icon from "../Icon";
-import Container from "./styles";
-import type { TypeBadgeProps } from "./index.flow";
-const Badge = ({
-  children,
-  text,
-  iconName,
-  type,
-  tip,
-  size = 'small',
-  badgeColor = 'blue',
-  ...rest
-}: TypeBadgeProps) => {
-  if (children && text) {
-    throw new Error("can't use both `children` and `text` props. Text is deprecated, consider using children.");
-  }
-  return <Container {...rest}
-  // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
-  size={size === 'default' ? 'large' : size} badgeColor={badgeColor} data-tip={tip} data-qa-badge={text || ''} data-qa-badge-type={type} data-qa-badge-tip={tip || ''} type={type && type}>
-      <Box display="flex" alignItems="center" JustifyContent="center">
-        {iconName ? <Icon mr={200} name={iconName} size={size === 'small' ? 'mini' : 'default'} /> : null}
-        {children || text}
-      </Box>
-    </Container>;
-};
-export default Badge;

package/__flow__/Badge/styles.js

@@ -1,25 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { themeGet } from '@styled-system/theme-get';
-import { COMMON } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-import { legacyBadgeColors } from "./constants";
-
-// eslint-disable-next-line flowtype/generic-spacing
-const Container: StyledComponent<{
-  type: ?string,
-  badgeColor: string,
-  size: string,
-  ...
-}, TypeTheme, *> = styled.span`
-  font-family: ${p => p.theme.fontFamily};
-  ${p => p.size === 'small' ? p.theme.typography[100] : p.theme.typography[200]};
-  border-radius: 9999px;
-  line-height: 16px;
-  display: inline-block;
-  color: ${p => p.type ? themeGet(legacyBadgeColors[p.type].color) : p.theme.colors.text.body};
-  background: ${p => p.type ? themeGet(legacyBadgeColors[p.type].background) : p.theme.colors.container.background.decorative[p.badgeColor]};
-  padding: ${p => p.size === 'small' ? `${p.theme.space[0]} ${p.theme.space[200]}` : `${p.theme.space[300]}`};
-  ${COMMON};
-`;
-export default Container;

package/__flow__/Banner/index.js

@@ -1,45 +0,0 @@
-// @flow
-import * as React from 'react';
-import Box from "../Box";
-import Icon from "../Icon";
-import Container from "./styles";
-import type { TypeBannerProps, EnumBannerType } from "./index.flow";
-
-/**
- * @deprecated Use TypeBannerProps from root instead
- */
-export type TypeProps = TypeBannerProps;
-const getBannerIcon = (type: EnumBannerType) => {
-  switch (type) {
-    case 'success':
-      return <Icon name="circle-check-no-fill" className="Icon" fixedWidth />;
-    case 'info':
-      return <Icon name="info-white" className="Icon" fixedWidth />;
-    case 'error':
-      return <Icon name="triangle" className="Icon" fixedWidth />;
-    case 'warning':
-      return <Icon name="triangle" className="Icon" fixedWidth />;
-    case 'opportunity':
-      return <Icon name="sparkles" className="Icon" fixedWidth />;
-    default:
-      return;
-  }
-};
-
-/** TODO: change to 'info' type by default in future version */
-const Banner = ({
-  type = 'info',
-  text,
-  ...rest
-}: TypeBannerProps) => {
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container type={type} data-qa-alert="" data-qa-alert-type={type} data-qa-alert-text={text} {...rest}>
-      <Box display="flex" alignItems="center" width={1}>
-        {getBannerIcon(type)}
-        {text}
-      </Box>
-    </Container>
-  );
-};
-export default Banner;

package/__flow__/Banner/styles.js

@@ -1,48 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON, LAYOUT } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-import type { EnumBannerType } from "./index.flow";
-type TypeProps = {|
-  type: EnumBannerType
-|};
-const Container: StyledComponent<TypeProps, TypeTheme, *> = styled.div(props => css`
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    justify-content: space-between;
-    color: ${props.theme.colors.text.body};
-    border-radius: ${props.theme.radii.outer};
-    font-family: ${props.theme.fontFamily};
-    ${props.theme.typography[200]}
-    padding: ${props.theme.space[300]};
-    border: 1px solid ${props.theme.colors.container.border[props.type]};
-    background-color: ${props.theme.colors.container.background[props.type]};
-
-    .Icon {
-      align-self: flex-start;
-      margin-top: 3px;
-      margin-right: ${props.theme.space[400]};
-      min-width: 16px;
-      color: ${props.theme.colors.icon[props.type]};
-    }
-
-    a,
-    button {
-      font-weight: ${props.theme.fontWeights.semibold};
-      color: ${props.theme.colors.text.body};
-      font-size: inherit;
-      &:hover {
-        color: ${props.theme.colors.text.body};
-        text-decoration: underline;
-      }
-    }
-
-    > span:not(.Icon) {
-      display: block;
-    }
-
-    ${COMMON}
-    ${LAYOUT}
-  `);
-export default Container;

package/__flow__/Box/index.js

@@ -1,14 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container from "./styles";
-import type { TypeBoxProps as TypeBoxProps2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeBoxProps from root instead
- */
-export type TypeBoxProps = TypeBoxProps2;
-const Box = React.forwardRef<TypeBoxProps, *>((props, ref) => {
-  return <Container {...props} ref={ref} />;
-});
-Box.displayName = 'Box';
-export default Box;

package/__flow__/Box/styles.js

@@ -1,30 +0,0 @@
-//@flow
-import styled, { type StyledComponent } from 'styled-components';
-import { COMMON, BORDER, LAYOUT, POSITION, FLEXBOX, GRID } from "../utils/system-props";
-import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
-import type { TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
-import type { TypeTheme } from "../types/theme.flow";
-export type TypeContainerProps = $ReadOnly<{|
-  ...TypeStyledComponentsCommonProps,
-  ...TypeSystemCommonProps,
-  ...TypeSystemBorderProps,
-  ...TypeSystemLayoutProps,
-  ...TypeSystemPositionProps,
-  ...TypeSystemFlexboxProps,
-  ...TypeSystemGridProps,
-|}>;
-type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
-const Container: TypeBoxContainer = styled.div`
-  box-sizing: border-box;
-  font-family: ${({
-  theme
-}) => theme.fontFamily};
-
-  ${COMMON}
-  ${BORDER}
-  ${LAYOUT}
-  ${POSITION}
-  ${FLEXBOX}
-  ${GRID}
-`;
-export default Container;

package/__flow__/Breadcrumb/index.js

@@ -1,57 +0,0 @@
-// @flow
-import * as React from 'react';
-import Icon from "../Icon";
-import Link from "../Link";
-import { MenuButton } from "../Menu";
-import Nav from "./styles";
-import type { TypeBreadcrumbProps as TypeBreadcrumbProps2, TypeBreadcrumbItemProps as TypeBreadcrumbItemProps2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeBreadcrumbProps from root instead
- */
-export type TypeBreadcrumbProps = TypeBreadcrumbProps2;
-
-/**
- * @deprecated Use TypeBreadcrumbItemProps from root instead
- */
-export type TypeBreadcrumbItemProps = TypeBreadcrumbItemProps2;
-const BreadcrumbItem = ({
-  children,
-  href,
-  ...rest
-}: TypeBreadcrumbItemProps) => {
-  return <li>
-      {/* $FlowIssue - upgrade v0.112.0 */}
-      <Link href={href} {...rest}>
-        {children}
-      </Link>
-    </li>;
-};
-const Breadcrumb = ({
-  ariaLabel,
-  overflow,
-  children,
-  ...rest
-}: TypeBreadcrumbProps) => {
-  const listItems = React.Children.toArray(children);
-  const lastItem = listItems[listItems.length - 1];
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>
-      <ol>
-        {overflow && <li>
-            <MenuButton appearance="secondary" content={overflow.menu} aria-label={overflow.label} className="overflow--menu" px={200} py={0}>
-              <Icon name="dotdotdot" />
-            </MenuButton>
-          </li>}
-        {listItems.map((item, i) => React.cloneElement(item, {
-          ...item.props,
-          'aria-current': listItems[i] === lastItem ? 'page' : undefined
-        }))}
-      </ol>
-    </Nav>
-  );
-};
-Breadcrumb.Item = BreadcrumbItem;
-Breadcrumb.Item.displayName = 'Breadcrumb.Item';
-export default Breadcrumb;