@bitrise/bitkit 10.2.0 → 10.2.3-alpha-chakra.1

package/package.json

@@ -1,29 +1,16 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.2.0",
+  "version": "10.2.3-alpha-chakra.1",
   "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/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/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

@@ -1,14 +1,12 @@
 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 DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
-import DropdownMenu from './DropdownMenu';
-import DropdownMenuItem from './DropdownMenuItem';
+import Text from '../../Components/Text/Text';
+import Popover from '../../Components/Popover/Popover';
+import PopoverTrigger from '../../Components/Popover/PopoverTrigger';
+import PopoverContent from '../../Components/Popover/PopoverContent';
+import Button, { ButtonProps } from '../../Components/Button/Button';
 import DropdownMenuItemGroup from './DropdownMenuItemGroup';
-
-const { useState } = React;
+import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenu from './DropdownMenu';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DropdownValue = any;
@@ -22,7 +20,7 @@ interface OptionGroup {
   options: DropdownValue[];
 }
 
-export interface Props extends DropdownButtonProps {
+export interface Props extends ButtonProps {
   /** Handler for the value that is selected */
   onChange?: (value: DropdownValue) => void;
   /** Array of options that can be selected */
@@ -40,58 +38,64 @@ export interface Props extends DropdownButtonProps {
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
-  const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    setVisible(false);
   };
 
-  const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
+  const renderOption = ({ text, value }: Option, onClose: () => void) => (
+    <DropdownMenuItem
+      onClick={() => {
+        handleChange(value);
+        onClose();
+      }}
+      selected={selected === value}
+      width="100%"
+    >
       {text}
     </DropdownMenuItem>
   );
 
   return (
-    <PlacementManager>
-      <PlacementReference>
-        {({ ref }) => (
-          <DropdownButton
-            {...rest}
-            alignChildrenHorizontal="start"
-            innerRef={ref}
-            onClick={() => {
-              setVisible(!visible);
-            }}
-          >
-            <Text ellipsis>{children}</Text>
-          </DropdownButton>
-        )}
-      </PlacementReference>
-
-      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
-        {() => (
-          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
-            {options.map((option) => (
-              <React.Fragment key={option.text}>
-                {'options' in option ? (
-                  <DropdownMenuItemGroup text={option.text}>
-                    {option.options.map((groupOption) => (
-                      <React.Fragment key={groupOption.value}>{renderOption(groupOption)}</React.Fragment>
-                    ))}
-                  </DropdownMenuItemGroup>
-                ) : (
-                  renderOption(option)
-                )}
-              </React.Fragment>
-            ))}
-          </DropdownMenu>
-        )}
-      </Placement>
-    </PlacementManager>
+    <Popover matchWidth>
+      {({ onClose }) => (
+        <>
+          {' '}
+          <PopoverTrigger>
+            <Button
+              width="100%"
+              variant="secondary"
+              rightIconName="ChevronDown"
+              justifyContent="space-between"
+              {...rest}
+            >
+              <Text as="span" hasEllipsis>
+                {children}
+              </Text>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
+              {options.map((option) => (
+                <React.Fragment key={option.text}>
+                  {'options' in option ? (
+                    <DropdownMenuItemGroup text={option.text}>
+                      {option.options.map((groupOption) => (
+                        <React.Fragment key={groupOption.value}>{renderOption(groupOption, onClose)}</React.Fragment>
+                      ))}
+                    </DropdownMenuItemGroup>
+                  ) : (
+                    renderOption(option, onClose)
+                  )}
+                </React.Fragment>
+              ))}
+            </DropdownMenu>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
   );
 };
 

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/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/Status500.tsx

@@ -1,8 +1,8 @@
 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 Image from '../../Components/Image/Image';
+import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
 
@@ -20,19 +20,19 @@ 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>
 
-      <Image margin="x16" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
+      <Image marginY="64" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
     </Flex>
   );
 };

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';

package/src/Old/Text/TextSizes.css

@@ -1,39 +0,0 @@
-.Text--size-1 {
-  font-size: var(--fontSizes-1);
-  line-height: var(--lineHeights-1);
-}
-
-.Text--size-2 {
-  font-size: var(--fontSizes-2);
-  line-height: var(--lineHeights-2);
-}
-
-.Text--size-3 {
-  font-size: var(--fontSizes-3);
-  line-height: var(--lineHeights-3);
-}
-
-.Text--size-4 {
-  font-size: var(--fontSizes-4);
-  line-height: var(--lineHeights-4);
-}
-
-.Text--size-5 {
-  font-size: var(--fontSizes-5);
-  line-height: var(--lineHeights-5);
-}
-
-.Text--size-6 {
-  font-size: var(--fontSizes-6);
-  line-height: var(--lineHeights-6);
-}
-
-.Text--size-7 {
-  font-size: var(--fontSizes-7);
-  line-height: var(--lineHeights-7);
-}
-
-.Text--size-8 {
-  font-size: var(--fontSizes-8);
-  line-height: var(--lineHeights-8);
-}

package/src/Old/Toggle/Toggle.tsx

@@ -1,7 +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 Icon from '../../Components/Icon/Icon';
 import './Toggle.css';
 
 export interface Props extends FlexProps {