@bitrise/bitkit 10.0.1 → 10.1.0-alpha-chakra.2

package/package.json

@@ -1,29 +1,16 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.0.1",
+  "version": "10.1.0-alpha-chakra.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
-    "build": "yarn build:lib && yarn build:site",
-    "build:docs": "ts-node ./scripts/build-docs",
     "build:icons": "ts-node ./scripts/build-icons.ts",
-    "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
-    "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
-    "build:lib:cjs": "tsc -p src --outDir lib/cjs",
-    "build:prepare": "rm -rf ./dist && mkdir dist && cp site/index.html dist && ln -s index.html dist/404.html",
-    "build:site": "yarn build:prepare && yarn build:docs && yarn tsc:site && yarn build:site:esbuild",
-    "tsc:site": "tsc --noEmit -p site/tsconfig.json",
-    "build:site:esbuild": "esbuild --bundle site/index.tsx --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file --minify --sourcemap",
     "commitlint": "commitlint",
-    "lint": "yarn lint:js",
-    "lint:js": "eslint src/**/*.tsx",
+    "lint": "eslint src/**/*.tsx",
     "semantic-release": "semantic-release",
-    "serve": "superstatic ./dist --port 4001 -c superstatic.json",
-    "start": "yarn build:prepare && concurrently \"yarn start:docs\" \"yarn start:esbuild\" \"yarn serve\"",
-    "start:esbuild": "esbuild --bundle site/index.tsx --watch --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file",
-    "start:docs": "ts-node ./scripts/build-docs-watch",
+    "start": "yarn storybook",
     "test": "jest ./src",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -33,15 +20,14 @@
     "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/react": "^2.2.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
-    "framer-motion": "^6.3.15",
-    "luxon": "^2.4.0",
+    "framer-motion": "^6.5.1",
+    "luxon": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0"
@@ -51,13 +37,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/parser": "^7.18.5",
+    "@babel/core": "^7.18.9",
+    "@babel/parser": "^7.18.9",
     "@bitrise/eslint-plugin": "^2.2.0",
-    "@chakra-ui/cli": "^2.1.0",
+    "@chakra-ui/cli": "^2.1.2",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
-    "@google-cloud/storage": "^5.19.4",
+    "@google-cloud/storage": "^5.20.5",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -71,63 +57,43 @@
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
-    "@svgr/cli": "^6.2.1",
-    "@svgr/core": "^6.2.1",
+    "@svgr/core": "^6.3.0",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
-    "@types/fscreen": "^1.0.1",
-    "@types/jest": "^27.5.1",
-    "@types/lodash.sample": "^4.2.7",
-    "@types/lodash.shuffle": "^4.2.7",
-    "@types/luxon": "^2.3.2",
-    "@types/prismjs": "^1.26.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/jest": "^27.5.2",
+    "@types/luxon": "^2.4.0",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
-    "concurrently": "^7.2.2",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "esbuild": "^0.14.47",
-    "eslint": "^8.18.0",
+    "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^26.6.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-storybook": "^0.6.1",
     "eslint-plugin-testing-library": "^5.5.1",
-    "fscreen": "^1.2.0",
     "glob": "^8.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jsdom": "^19.0.0",
-    "lodash.sample": "^4.2.1",
-    "lodash.shuffle": "^4.2.0",
-    "node-watch": "^0.7.3",
     "prettier": "^2.7.1",
-    "prismjs": "^1.28.0",
-    "react": "^18.2.0",
-    "react-docgen": "5.4.2",
-    "react-dom": "^18.2.0",
-    "react-router": "^5.3.1",
-    "react-router-dom": "^5.3.1",
     "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
-    "superstatic": "^8.0.0",
     "ts-jest": "^27.1.5",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0"
@@ -153,7 +119,7 @@
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "@types/react": "17.0.40"
   }
 }

package/src/Components/ButtonGroup/ButtonGroup.stories.tsx

@@ -7,7 +7,7 @@ export default {
 } as ComponentMeta<typeof ButtonGroup>;
 
 const Template: ComponentStory<typeof ButtonGroup> = (props) => (
-  <ButtonGroup {...props} width="900px" flexDirection="column">
+  <ButtonGroup {...props} width="900px" flexDirection="row">
     <Button>Button 1</Button>
     <Button>Button 2</Button>
     <Button>Button 3</Button>

package/src/Components/Dialog/Dialog.tsx

@@ -7,6 +7,7 @@ import {
   useBreakpointValue,
   HTMLChakraProps,
 } from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
 
@@ -33,7 +34,7 @@ const Dialog = ({
   trapFocus,
   ...rest
 }: DialogProps) => {
-  const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
   return (
     <Modal
       closeOnEsc={isClosable}

package/src/Components/EmptyState/EmptyState.theme.ts

@@ -10,7 +10,7 @@ const EmptyStateTheme: ComponentStyleConfig = {
       justifyContent: 'center',
       paddingX: '16',
       paddingY: {
-        mobile: '32',
+        base: '32',
         desktop: '48',
       },
       backgroundColor: 'neutral.95',

package/src/Components/Tabs/Tab.tsx

@@ -1,6 +1,4 @@
 import {
-  Badge as ChakraBadge,
-  BadgeProps as ChakraBadgeProps,
   Button,
   Tab as ChakraTab,
   TabProps as ChakraTabProps,
@@ -8,28 +6,8 @@ import {
   useMultiStyleConfig,
   useTab,
 } from '@chakra-ui/react';
-import Icon from '../../Old/Icon/Icon';
-import { TypeIconName } from '../../Old/Icon/tsx';
-
-// TODO: separated component
-interface BadgeProps extends ChakraBadgeProps {
-  backgroundColor?: ChakraBadgeProps['backgroundColor'];
-  children?: number | string;
-  color?: ChakraBadgeProps['color'];
-}
-
-const Badge = (props: BadgeProps) => {
-  const properties: ChakraBadgeProps = {
-    ...props,
-    borderRadius: '4',
-    fontSize: '1',
-    lineHeight: '1',
-    paddingY: '3px',
-    paddingX: '8',
-    textTransform: 'uppercase',
-  };
-  return <ChakraBadge {...properties} />;
-};
+import Badge, { BadgeProps } from '../Badge/Badge';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,7 +1,13 @@
+export const BREAKPOINTS = {
+  MOBILE: 'base',
+  DESKTOP: 'desktop',
+  WIDE: 'wide',
+};
+
 const breakpoints = {
-  mobile: '0rem',
-  desktop: '53rem', // 848px
-  wide: '101rem', // 1616px
+  [BREAKPOINTS.MOBILE]: '0rem',
+  [BREAKPOINTS.DESKTOP]: '53rem', // 848px
+  [BREAKPOINTS.WIDE]: '101rem', // 1616px
 };
 
 export default breakpoints;

package/src/Old/DatePicker/DatePicker.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { DateTime } from 'luxon';
 import { ReferenceChildrenProps } from 'react-popper';
 import { useMediaQuery, useSyncedStateAndProps } from '../hooks';
-import Button from '../Button/Button';
-import Buttons from '../Button/Buttons';
+import Button from '../../Components/Button/Button';
+import ButtonGroup from '../../Components/ButtonGroup/ButtonGroup';
 import { Props as FlexProps } from '../Flex/Flex';
 import Placement from '../Placement/Placement';
 import PlacementArea from '../Placement/PlacementArea';
@@ -175,15 +175,15 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
               )}
             </PlacementArea>
 
-            <Buttons alignChildren="end" margin="x2" paddingHorizontal="x8">
-              <Button level="secondary" onClick={handleClose} size="small">
+            <ButtonGroup alignItems="flex-end" marginY="8" paddingX="32">
+              <Button variant="secondary" onClick={handleClose} size="small">
                 Cancel
               </Button>
 
-              <Button level="primary" onClick={handleApply} size="small">
+              <Button onClick={handleApply} size="small">
                 Apply
               </Button>
-            </Buttons>
+            </ButtonGroup>
           </PlacementArea>
         )}
       </Placement>

package/src/Old/DatePicker/DatePickerMonth.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { DateTime, Info } from 'luxon';
 import Base, { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Link from '../Link/Link';
-import Text from '../Text/Text';
+import Icon from '../../Components/Icon/Icon';
+import Link from '../../Components/Link/Link';
+import Text from '../../Components/Text/Text';
 import DatePickerGrid from './DatePickerGrid';
 import DatePickerDay from './DatePickerDay';
 
@@ -40,18 +40,18 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
       <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4" paddingHorizontal="x12">
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link onClick={onPreviousMonth}>
+          <Link as="button" onClick={onPreviousMonth}>
             <Icon name="ChevronLeft" />
           </Link>
         </Flex>
 
         <Flex grow>
-          <Text align="middle">{viewDate.toFormat('MMMM yyyy')}</Text>
+          <Text align="center">{viewDate.toFormat('MMMM yyyy')}</Text>
         </Flex>
 
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link onClick={onNextMonth}>
+          <Link as="button" onClick={onNextMonth}>
             <Icon name="ChevronRight" />
           </Link>
         </Flex>
@@ -59,7 +59,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
 
       <DatePickerGrid margin="x1">
         {daysOfTheWeek.map((day) => (
-          <Text align="middle" key={day} paddingVertical="x4" size="2" textColor="neutral.70" uppercase>
+          <Text textAlign="center" key={day} paddingY="16" size="2" color="neutral.70" textTransform="uppercase">
             {day}
           </Text>
         ))}

package/src/Old/Dropdown/Dropdown.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Placement from '../Placement/Placement';
 import PlacementManager from '../Placement/PlacementManager';
 import PlacementReference from '../Placement/PlacementReference';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
 import DropdownMenu from './DropdownMenu';
 import DropdownMenuItem from './DropdownMenuItem';
@@ -58,16 +58,14 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementManager>
       <PlacementReference>
-        {({ ref }) => (
+        {() => (
           <DropdownButton
             {...rest}
-            alignChildrenHorizontal="start"
-            innerRef={ref}
             onClick={() => {
               setVisible(!visible);
             }}
           >
-            <Text ellipsis>{children}</Text>
+            <Text hasEllipsis>{children}</Text>
           </DropdownButton>
         )}
       </PlacementReference>

package/src/Old/Dropdown/DropdownButton.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import Button, { Props as ButtonProps } from '../Button/Button';
-import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
+import Button, { ButtonProps } from '../../Components/Button/Button';
 
 export type Props = Omit<ButtonProps, 'level'>;
 
@@ -10,19 +8,7 @@ export type Props = Omit<ButtonProps, 'level'>;
  * standard prop configuration for a Dropdown.
  */
 const DropdownButton: React.FunctionComponent<Props> = (props: Props) => {
-  const { children } = props;
-
-  return (
-    <Button type="button" {...props} alignChildrenHorizontal="start" fullWidth gap="x4" level="secondary">
-      <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow shrink>
-        {children}
-      </Flex>
-
-      <Flex>
-        <Icon name="ChevronDown" />
-      </Flex>
-    </Button>
-  );
+  return <Button width="100%" variant="secondary" rightIconName="ChevronDown" {...props} />;
 };
 
 export default DropdownButton;

package/src/Old/Dropdown/DropdownMenuItem.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import { TypeIconName } from '../Icon/tsx';
+import Icon, { TypeIconName } from '../../Components/Icon/Icon';
 import Visibility from '../Visibility/Visibility';
 
 export interface Props extends FlexProps {

package/src/Old/Dropdown/DropdownMenuItemGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export interface Props extends FlexProps {
   text: string;
@@ -9,7 +9,7 @@ export interface Props extends FlexProps {
 
 const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({ text, children, className, ...rest }: Props) => (
   <Flex className={classnames('DropdownMenu__group', className)} {...rest}>
-    <Text className="DropdownMenu__group-text" size="2" textColor="neutral.50">
+    <Text className="DropdownMenu__group-text" size="2" color="neutral.50">
       {text}
     </Text>
     {children}

package/src/Old/Input/InputLabel.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import Text, { Props as TextProps } from '../Text/Text';
+import Text, { TextProps } from '../../Components/Text/Text';
 
-export type Props = TextProps;
+export type Props = {
+  htmlFor?: string | undefined;
+} & TextProps;
 
 /**
  * Provides specific styling for a label that accompanies an
  * input.
  */
 const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} Component="label" margin="x1" size="3" textColor="purple.10" weight="bold" />;
+  return <Text {...props} as="label" marginY="4" size="3" color="purple.10" fontWeight="bold" />;
 };
 
 export default InputLabel;

package/src/Old/Notification/Notification.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import { TypeIconName } from '../Icon/tsx';
-import Link from '../Link/Link';
+import Icon, { TypeIconName } from '../../Components/Icon/Icon';
+import Link from '../../Components/Link/Link';
 import ProgressSpinner from '../Progress/ProgressSpinner';
 import './Notification.css';
 
@@ -58,7 +57,7 @@ const Notification: React.FunctionComponent<Props> = (props: Props) => {
       {onRemove && (
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link clickable onClick={onRemove}>
+          <Link as="button" onClick={onRemove}>
             <Icon name="CloseSmall" />
           </Link>
         </Flex>

package/src/Old/Notification/__snapshots__/Notification.test.tsx.snap

@@ -9,9 +9,8 @@ exports[`Notification default icon can be overridden 1`] = `
   padding="x3"
 >
   <Flex>
-    <Icon
+    <ForwardRef
       name="Bell"
-      size="1.5rem"
     />
   </Flex>
   <Flex
@@ -32,9 +31,8 @@ exports[`Notification default template 1`] = `
   padding="x3"
 >
   <Flex>
-    <Icon
+    <ForwardRef
       name="ErrorGeneral"
-      size="1.5rem"
     />
   </Flex>
   <Flex
@@ -55,9 +53,8 @@ exports[`Notification with onRemove has a close icon 1`] = `
   padding="x3"
 >
   <Flex>
-    <Icon
+    <ForwardRef
       name="ErrorGeneral"
-      size="1.5rem"
     />
   </Flex>
   <Flex
@@ -67,16 +64,15 @@ exports[`Notification with onRemove has a close icon 1`] = `
     Content
   </Flex>
   <Flex>
-    <Link
-      Component="a"
-      clickable={true}
+    <ForwardRef
+      as="button"
+      isUnderlined={false}
       onClick={[Function]}
     >
-      <Icon
+      <ForwardRef
         name="CloseSmall"
-        size="1.5rem"
       />
-    </Link>
+    </ForwardRef>
   </Flex>
 </Flex>
 `;

package/src/Old/Progress/ProgressBitbot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props as BaseProps } from '../Base/Base';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export interface Props extends BaseProps {
   /**
@@ -62,7 +62,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
   const { content, size, ...rest } = props;
 
   return (
-    <Text {...rest} align="middle">
+    <Text {...rest} align="center">
       <svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
@@ -159,7 +159,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
       </svg>
 
       {content && (
-        <Text align="middle" letterSpacing="x5" size="1" uppercase>
+        <Text align="center" letterSpacing="20" size="1" textTransform="uppercase">
           {content}
         </Text>
       )}

package/src/Old/Ribbon/Ribbon.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Link from '../Link/Link';
+import Icon from '../../Components/Icon/Icon';
+import Link from '../../Components/Link/Link';
 import './Ribbon.css';
 import Base from '../Base/Base';
 
@@ -38,8 +38,8 @@ const Ribbon: React.FunctionComponent<Props> = (props: Props) => {
       {onRemove && (
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link clickable onClick={onRemove}>
-            <Icon name="CloseSmall" size="1.5rem" />
+          <Link as="button" onClick={onRemove}>
+            <Icon name="CloseSmall" />
           </Link>
         </Flex>
       )}

package/src/Old/Status/Status404.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMediaQuery } from '../hooks';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Image from '../Image/Image';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
 
@@ -21,10 +21,10 @@ const Status404: React.FunctionComponent<Props> = (props: Props) => {
         gap={match('65rem') ? 'x8' : 'x4'}
         paddingHorizontal="x6"
       >
-        <Text align="middle" size="7" weight="bold">
+        <Text align="center" size="7" fontWeight="bold">
           404
         </Text>
-        <Text align="middle" size="6" weight="bold">
+        <Text align="center" size="6" fontWeight="bold">
           The coordinates you are looking for do not exist
         </Text>
       </Flex>

package/src/Old/Status/Status500.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMediaQuery } from '../hooks';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Image from '../Image/Image';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
 
@@ -20,15 +20,15 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
         direction={match('65rem') ? 'horizontal' : 'vertical'}
         gap={match('65rem') ? 'x8' : 'x4'}
       >
-        <Text align="middle" size="7" weight="bold">
+        <Text align="center" size="7" fontWeight="bold">
           500
         </Text>
-        <Text align="middle" size="2" uppercase weight="bold">
+        <Text align="center" size="2" textTransform="uppercase" fontWeight="bold">
           Something went wrong
         </Text>
       </Flex>
 
-      <Text align="middle" letterSpacing="x2" margin="x5" size="4">
+      <Text align="center" letterSpacing="8" marginY="20" size="4">
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 

package/src/Old/Table/TableHeaderCell.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
+import Icon from '../../Components/Icon/Icon';
 import Text, { Props as TextProps } from '../Text/Text';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';