Specify root imports of design-system

- it's easier to debug and quicker to bundle

lib/design-system/src/blocks/Block/Block.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Flex } from '../../';
+import { Flex } from '../../../general';
 import { Block } from './Block';
 
 export default {

lib/design-system/src/blocks/Bubble/Bubble.stories.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Box, Bubble, Flex } from '../../index';
+import { Box, Flex } from '../../../general';
+import { Bubble } from './Bubble';
 import { FragmentReactionType } from './Bubble.types';
 import { OnReactionPayload } from './Reaction';
 

lib/design-system/src/blocks/Bubble/Bubble.tsx

@@ -1,14 +1,10 @@
 import { Ref, useEffect, useMemo, useState } from 'react';
 
+import { Box, BoxProps, Flex, Icon, Text } from '../../../general';
 import {
-  Box,
-  BoxProps,
   contrastAwareBlackOrWhiteHex,
-  Flex,
   flipColorIfLowContrast,
-  Icon,
-  Text,
-} from '../..';
+} from '../../../util';
 import { chatDate } from '../../util/date';
 import { BUBBLE_HEIGHT, STATUS_HEIGHT } from './Bubble.constants';
 import { BubbleAuthor, BubbleFooter, BubbleStyle } from './Bubble.styles';

lib/design-system/src/blocks/Bubble/Pinned.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
-import { Box, BoxProps, capitalizeFirstLetter, Flex, Text } from '../../index';
+import { Box, BoxProps, Flex, Text } from '../../../general';
+import { capitalizeFirstLetter } from '../../util/strings';
 import { BubbleAuthor } from './Bubble.styles';
 import { FragmentImageType, FragmentType, TEXT_TYPES } from './Bubble.types';
 import { renderFragment } from './renderFragment';

lib/design-system/src/general/CommButton/CommButton.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { IconPathsType } from '../../';
+import { IconPathsType } from '../../../general';
 import { CommButton } from './CommButton';
 
 export default {

lib/design-system/src/general/ProgressBar/ProgressBar.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Flex } from '../../';
+import { Flex } from '../../../general';
 import { ProgressBar } from './ProgressBar';
 
 export default {

lib/design-system/src/navigation/Menu/Menu.stories.tsx

@@ -1,8 +1,9 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Button, Icon } from '../../';
 import { Box } from '../../general/Box/Box';
+import { Button } from '../../general/Button/Button';
 import { Flex } from '../../general/Flex/Flex';
+import { Icon } from '../../general/Icon/Icon';
 import { Menu } from './Menu';
 
 export default {

lib/design-system/src/navigation/TreeView/TreeItem.tsx

@@ -1,4 +1,4 @@
-import { BoxProps, Flex } from '../../';
+import { BoxProps, Flex } from '../../../general';
 
 type TreeItemProps = {
   myProp?: string;

lib/design-system/src/navigation/TreeView/TreeView.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import { Flex } from '../../';
+import { Flex } from '../../../general';
 import { TreeView } from './';
 
 export default {

lib/design-system/src/navigation/TreeView/index.tsx

@@ -1,4 +1,4 @@
-import { BoxProps, Flex } from '../../';
+import { BoxProps, Flex } from '../../../general';
 
 type TreeViewProps = {
   myProp?: string;

lib/design-system/src/os/ConnectionStatus/ConnectionStatus.tsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 import { darken, lighten, rgba, saturate } from 'polished';
 import styled, { css } from 'styled-components';
 
-import { Button, Flex, Icon, Spinner, Text } from '../../';
+import { Button, Flex, Icon, Spinner, Text } from '../../../general';
 
 interface ConnStatusStyleProps {
   baseColor: string;

lib/presence/code/src/App.styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Flex } from '@holium/design-system';
+import { Flex } from '@holium/design-system/general';
 
 export const Header = styled(Flex)`
   width: 100%;

lib/presence/code/src/App.tsx

@@ -3,7 +3,7 @@ import { TextSelection, Transaction } from 'prosemirror-state';
 import { Step } from 'prosemirror-transform';
 import { EditorView } from 'prosemirror-view';
 
-import { Flex, Text } from '@holium/design-system';
+import { Flex, Text } from '@holium/design-system/general';
 import { useBroadcast } from '@holium/realm-presence';
 
 import { EditorContainer, Header } from './App.styles';

lib/presence/code/src/components/Loader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spinner, Text } from '@holium/design-system';
+import { Flex, Spinner, Text } from '@holium/design-system/general';
 
 type Props = {
   text?: string;

lib/presence/src/types.ts

@@ -1,4 +1,4 @@
-import { Position } from '@holium/design-system';
+import { Position } from '@holium/design-system/util';
 
 import { PresenceArg } from './hooks/useBroadcast';