removed @chakra-ui dependencies (#7004)

Issue #6976 @FelixMalfait I could not do ``` import { Banner } from 'twenty-ui'; const StyledBanner = styled(Banner) display: flex; align-items: center; padding: ${({ theme }) => theme.spacing(8)}; position: absolute; border-radius: 8px; &:hover { background-color: ${({ theme }) => theme.accent.primary}; } ; ``` The styles wont get overridden for Banner, so for now I styled a new banner in `UnmatchColumnBanner` which is inconsistent. I couldnt figure out why css properties are not being overridden, need help! @Bonapara Question - Should the click work on entire banner or just cheveron? For now it just on cheveron click. https://github.com/user-attachments/assets/0f409e78-a341-4f26-af74-117e4b2775a9 --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-09-14 20:25:17 +05:30
parent 4544114109
commit 0dbd4a7665
10 changed files with 231 additions and 350 deletions
--- a/package.json
+++ b/package.json
@ -8,8 +8,6 @@
    "@aws-sdk/credential-providers": "^3.363.0",
    "@blocknote/mantine": "^0.15.3",
    "@blocknote/react": "^0.15.3",
-    "@chakra-ui/accordion": "^2.3.0",
-    "@chakra-ui/system": "^2.6.0",
    "@codesandbox/sandpack-react": "^2.13.5",
    "@dagrejs/dagre": "^1.1.2",
    "@docusaurus/core": "^3.1.0",
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx
@ -1,56 +1,13 @@
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { SubMatchingSelect } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect';
+import { UnmatchColumnBanner } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner';
 import { Column } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { Fields } from '@/spreadsheet-import/types';
-import {
-  Accordion,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  AccordionButton as ChakraAccordionButton,
-} from '@chakra-ui/accordion';
 import styled from '@emotion/styled';
-import { IconChevronDown, IconInfoCircle, isDefined } from 'twenty-ui';
+import { useState } from 'react';
+import { ExpandableContainer, isDefined } from 'twenty-ui';

-const StyledAccordionButton = styled(ChakraAccordionButton)`
-  align-items: center;
-  background-color: ${({ theme }) => theme.accent.secondary};
-  border: none;
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  box-sizing: border-box;
-  color: ${({ theme }) => theme.font.color.primary};
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => theme.spacing(2)};
-  width: 100%;
-  height: 40px;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.accent.primary};
-  }
-`;
-
-const StyledAccordionContainer = styled.div`
-  display: flex;
-  width: 100%;
-  height: auto;
-`;
-
-const StyledAccordionLabel = styled.span`
-  color: ${({ theme }) => theme.color.blue};
-  display: flex;
-  flex: 1;
-  font-size: ${({ theme }) => theme.font.size.sm};
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing(2)};
-  text-align: left;
-`;
-
-const StyledIconChevronDown = styled(IconChevronDown)`
-  color: ${({ theme }) => theme.color.blue} !important;
-`;
-
-const getAccordionTitle = <T extends string>(
+const getExpandableContainerTitle = <T extends string>(
  fields: Fields<T>,
  column: Column<T>,
 ) => {
@ -70,42 +27,51 @@ type UnmatchColumnProps<T extends string> = {
  onSubChange: (val: T, index: number, option: string) => void;
 };

+const StyledContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const StyledContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+  padding-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
 export const UnmatchColumn = <T extends string>({
  columns,
  columnIndex,
  onSubChange,
 }: UnmatchColumnProps<T>) => {
  const { fields } = useSpreadsheetImportInternal<T>();
-
+  const [isExpanded, setIsExpanded] = useState(false);
  const column = columns[columnIndex];
  const isSelect = 'matchedOptions' in column;

+  if (!isSelect) return null;
+
  return (
-    isSelect && (
-      <StyledAccordionContainer>
-        <Accordion allowMultiple width="100%" height="100%">
-          <AccordionItem border="none" py={1} height="100%">
-            <StyledAccordionButton data-testid="accordion-button">
-              <StyledAccordionLabel>
-                <IconInfoCircle />
-                {getAccordionTitle(fields, column)}
-              </StyledAccordionLabel>
-              <AccordionIcon as={StyledIconChevronDown} />
-            </StyledAccordionButton>
-            <AccordionPanel mt={16} gap={12} display="flex" flexDir="column">
-              {column.matchedOptions.map((option) => (
-                <SubMatchingSelect
-                  option={option}
-                  column={column}
-                  onSubChange={onSubChange}
-                  key={option.entry}
-                  placeholder="Select an option"
-                />
-              ))}
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
-      </StyledAccordionContainer>
-    )
+    <StyledContainer>
+      <UnmatchColumnBanner
+        message={getExpandableContainerTitle(fields, column)}
+        buttonOnClick={() => setIsExpanded(!isExpanded)}
+        isExpanded={isExpanded}
+      />
+      <ExpandableContainer isExpanded={isExpanded}>
+        <StyledContentWrapper>
+          {column.matchedOptions.map((option) => (
+            <SubMatchingSelect
+              option={option}
+              column={column}
+              onSubChange={onSubChange}
+              key={option.entry}
+              placeholder="Select an option"
+            />
+          ))}
+        </StyledContentWrapper>
+      </ExpandableContainer>
+    </StyledContainer>
  );
 };
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx
@ -0,0 +1,53 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui';
+
+const StyledBanner = styled(Banner)`
+  background: ${({ theme }) => theme.accent.secondary};
+  border-radius: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2.5)};
+`;
+
+const StyledText = styled.div`
+  color: ${({ theme }) => theme.color.blue};
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledTransitionedIconChevronDown = styled(IconChevronDown)<{
+  isExpanded: boolean;
+}>`
+  color: ${({ theme }) => theme.color.blue};
+  transform: ${({ isExpanded }) =>
+    isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'};
+  transition: ${({ theme }) =>
+    `transform ${theme.animation.duration.normal}s ease`};
+  cursor: pointer;
+`;
+
+export const UnmatchColumnBanner = ({
+  message,
+  isExpanded,
+  buttonOnClick,
+}: {
+  message: string;
+  isExpanded: boolean;
+  buttonOnClick?: () => void;
+}) => {
+  const theme = useTheme();
+  return (
+    <StyledBanner>
+      <IconInfoCircle color={theme.color.blue} size={theme.icon.size.md} />
+      <StyledText>{message}</StyledText>
+      {buttonOnClick && (
+        <StyledTransitionedIconChevronDown
+          isExpanded={isExpanded}
+          onClick={buttonOnClick}
+          size={theme.icon.size.md}
+        />
+      )}
+    </StyledBanner>
+  );
+};
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@ -127,7 +127,6 @@ export default defineConfig(({ command, mode }) => {
        localsConvention: 'camelCaseOnly',
      },
    },
-
    resolve: {
      alias: {
        path: 'rollup-plugin-node-polyfills/polyfills/path',
--- a/packages/twenty-ui/src/display/banner/components/Banner.tsx
+++ b/packages/twenty-ui/src/display/banner/components/Banner.tsx
@ -22,12 +22,18 @@ const StyledBanner = styled.div<{ variant?: BannerVariant }>`

 export type BannerVariant = 'danger' | 'default';

+type BannerProps = {
+  variant?: BannerVariant;
+  className?: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
 export const Banner = ({
  variant = 'default',
+  className,
  children,
-}: {
-  variant?: BannerVariant;
-  children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>) => (
-  <StyledBanner variant={variant}>{children}</StyledBanner>
+}: BannerProps) => (
+  <StyledBanner variant={variant} className={className}>
+    {children}
+  </StyledBanner>
 );
--- a/packages/twenty-ui/src/index.ts
+++ b/packages/twenty-ui/src/index.ts
@ -1,5 +1,6 @@
 export * from './components';
 export * from './display';
+export * from './layout';
 export * from './testing';
 export * from './theme';
 export * from './utilities';
--- a/packages/twenty-ui/src/layout/expandableContainer/components/ExpandableContainer.tsx
+++ b/packages/twenty-ui/src/layout/expandableContainer/components/ExpandableContainer.tsx
@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { isDefined } from '@ui/utilities';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+const StyledTransitionContainer = styled.div<{
+  isExpanded: boolean;
+  height: number;
+}>`
+  max-height: ${({ isExpanded, height }) => (isExpanded ? `${height}px` : '0')};
+  overflow: hidden;
+  position: relative;
+  transition: max-height
+    ${({ theme, isExpanded }) =>
+      `${theme.animation.duration.normal}s ${isExpanded ? 'ease-in' : 'ease-out'}`};
+`;
+
+type ExpandableContainerProps = {
+  isExpanded: boolean;
+  children: React.ReactNode;
+};
+
+export const ExpandableContainer = ({
+  isExpanded,
+  children,
+}: ExpandableContainerProps) => {
+  const [contentHeight, setContentHeight] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (isDefined(contentRef.current)) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [isExpanded]);
+
+  return (
+    <StyledTransitionContainer isExpanded={isExpanded} height={contentHeight}>
+      <div ref={contentRef}>{children}</div>
+    </StyledTransitionContainer>
+  );
+};
+
+export default ExpandableContainer;
--- a/packages/twenty-ui/src/layout/expandableContainer/components/stories/ExpandableContainer.stories.tsx
+++ b/packages/twenty-ui/src/layout/expandableContainer/components/stories/ExpandableContainer.stories.tsx
@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from '@ui/testing';
+import { useState } from 'react';
+import ExpandableContainer from '../ExpandableContainer';
+
+const StyledButton = styled.button`
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(4)};
+  background-color: ${({ theme }) => theme.color.blue50};
+  color: ${({ theme }) => theme.font.color.primary};
+  border: none;
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  cursor: pointer;
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.blue40};
+  }
+`;
+
+const StyledContent = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  height: 200px;
+  padding: ${({ theme }) => theme.spacing(3)};
+
+  p {
+    color: ${({ theme }) => theme.font.color.primary};
+    margin-bottom: ${({ theme }) => theme.spacing(2)};
+    font-size: ${({ theme }) => theme.font.size.md};
+  }
+`;
+
+const ExpandableContainerWithButton = (args: any) => {
+  const [isExpanded, setIsExpanded] = useState(args.isExpanded);
+
+  return (
+    <div>
+      <StyledButton onClick={() => setIsExpanded(!isExpanded)}>
+        {isExpanded ? 'Collapse' : 'Expand'}
+      </StyledButton>
+      <ExpandableContainer isExpanded={isExpanded}>
+        <StyledContent>
+          <p>
+            This is some content inside the ExpandableContainer. It will grow
+            and shrink depending on the expand/collapse state.
+          </p>
+          <p>
+            Add more text or even other components here to test how the
+            container handles more content.
+          </p>
+          <p>
+            Feel free to adjust the height and content to see how it affects the
+            expand/collapse behavior.
+          </p>
+        </StyledContent>
+      </ExpandableContainer>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ExpandableContainer> = {
+  title: 'UI/Layout/ExpandableContainer',
+  component: ExpandableContainerWithButton,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    isExpanded: {
+      control: 'boolean',
+      description: 'Controls whether the container is expanded or collapsed',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ExpandableContainerWithButton>;
+
+export const Default: Story = {
+  args: {
+    isExpanded: false,
+  },
+};
--- a/packages/twenty-ui/src/layout/index.ts
+++ b/packages/twenty-ui/src/layout/index.ts
@ -0,0 +1 @@
+export * from './expandableContainer/components/ExpandableContainer';
--- a/yarn.lock
+++ b/yarn.lock
@ -3369,231 +3369,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@chakra-ui/accordion@npm:^2.3.0":
-  version: 2.3.1
-  resolution: "@chakra-ui/accordion@npm:2.3.1"
-  dependencies:
-    "@chakra-ui/descendant": "npm:3.1.0"
-    "@chakra-ui/icon": "npm:3.2.0"
-    "@chakra-ui/react-context": "npm:2.1.0"
-    "@chakra-ui/react-use-controllable-state": "npm:2.1.0"
-    "@chakra-ui/react-use-merge-refs": "npm:2.1.0"
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-    "@chakra-ui/transition": "npm:2.1.0"
-  peerDependencies:
-    "@chakra-ui/system": ">=2.0.0"
-    framer-motion: ">=4.0.0"
-    react: ">=18"
-  checksum: 10c0/72d8c89e8d9b886b6387f4b1877263cecacc50897b38328bceb84e62c13e95759e081abe805465ee690dbbeede48e8638e5cfe3851b38613d8c26e6cbd7bc7ef
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/anatomy@npm:2.2.2":
-  version: 2.2.2
-  resolution: "@chakra-ui/anatomy@npm:2.2.2"
-  checksum: 10c0/06088161541e63bcc240487c0916d536c4b807e53da8ec4821b6dad737c84683a5936e3e44b99b6a6435a9cf896a3236d5f87226add27378c939804daed77305
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/color-mode@npm:2.2.0":
-  version: 2.2.0
-  resolution: "@chakra-ui/color-mode@npm:2.2.0"
-  dependencies:
-    "@chakra-ui/react-use-safe-layout-effect": "npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/9df4a9f0bddff97c06e95c2863d0064d48cf2b0e7d149d322e33c2daebc40d980ddf3367c62db006ee0b20c470a7feed3ca76ad37a29c5e51f01f71f332447ab
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/descendant@npm:3.1.0":
-  version: 3.1.0
-  resolution: "@chakra-ui/descendant@npm:3.1.0"
-  dependencies:
-    "@chakra-ui/react-context": "npm:2.1.0"
-    "@chakra-ui/react-use-merge-refs": "npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/979af5026f261be91023619290f7edfcb49113eefd5094a9f5ccbf98e8b3a49688c05b894b11c47764e689ced1a9eb52af8fc99541c9a3fcbbef4575666e707a
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/icon@npm:3.2.0":
-  version: 3.2.0
-  resolution: "@chakra-ui/icon@npm:3.2.0"
-  dependencies:
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-  peerDependencies:
-    "@chakra-ui/system": ">=2.0.0"
-    react: ">=18"
-  checksum: 10c0/0bd5c4b2dafc0adef1c5ffe9a137556a81b7f6f724c406d49740bea34153ba8ce6d8c9eaffa697a3d564d7df7b226cd59a8f0c103853f874543466c2816643b1
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/object-utils@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/object-utils@npm:2.1.0"
-  checksum: 10c0/581350502ae80b5fbb9ed7443002168c5cc685dc291fc0ace0946443041e5ac8835141c265da4e2c547e3795b7eea6b362d1dd03447187665791de8cdf2c746f
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/react-context@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/react-context@npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/a2e7b5ccf3ea2316ee2537641c5bff5ef0a48a3717f3daaa749eccdc96751423db184747c489c876ca1ce8e0a31881c4690214d913c638f3d0fc89cd2b87612b
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/react-use-callback-ref@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/react-use-callback-ref@npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/77e4cb8e71e75c178071cba80a18d114225116fadc5c325ae036144cde76ea491d11f5def721ea1d390d7ae3974371d41d0fe79beec308353866f43275b834c4
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/react-use-controllable-state@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/react-use-controllable-state@npm:2.1.0"
-  dependencies:
-    "@chakra-ui/react-use-callback-ref": "npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/b62ce7e5e8b9c20f67dea77e63e28feb5f9846b53c7d3d8a4d404b5aee30677be9f024f0d9e43c85f468e0c559486f49d2eaf8b6ab0656260847101d2723d4ca
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/react-use-merge-refs@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/react-use-merge-refs@npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/2da9b877145c0bd426fd0cef3b46051f8f1f4d1e0f2d0feb1dd68ac40ac6a3899e71abf04440d3a7067fb64d637c17241c98fafd0bd78b22f0d8850cad08c567
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/react-use-safe-layout-effect@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/react-use-safe-layout-effect@npm:2.1.0"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/f2d760068dd6c90680076ccccd68c0e6dbc12015e819bfe128a1be4010ff86487812b5d2ec23b385cd11aa83614f418909abe503c78512b5dc076735a6e5265f
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/react-utils@npm:2.0.12":
-  version: 2.0.12
-  resolution: "@chakra-ui/react-utils@npm:2.0.12"
-  dependencies:
-    "@chakra-ui/utils": "npm:2.0.15"
-  peerDependencies:
-    react: ">=18"
-  checksum: 10c0/2bfa8626b6da77a666896da3be80a85f90808db27f8fbbcbdce89ad0ce1ffe688c352d0ef7e07f3c048c9d73f345fd05dfa803f9d1f75d7876f3568f4e81a0c5
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/shared-utils@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@chakra-ui/shared-utils@npm:2.0.5"
-  checksum: 10c0/d9095a4abb678e382f8fdf882a2e50fde5789267b9bf7165bd06babcbd0afcb0c8c319b78922b7ea9fdbf22659623fa8604cd76bcfec8750304fa4614c73a3f0
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/styled-system@npm:2.9.2":
-  version: 2.9.2
-  resolution: "@chakra-ui/styled-system@npm:2.9.2"
-  dependencies:
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-    csstype: "npm:^3.1.2"
-    lodash.mergewith: "npm:4.6.2"
-  checksum: 10c0/0dfe83262cf74b62ecdf8150401ae28b32079c53bda5c6ba32c230c1ad6db63148a3bfbe2bf118526a4cecf60f5df3f7f1aba0d43311453ac551fb2bf917574e
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/system@npm:^2.6.0":
-  version: 2.6.2
-  resolution: "@chakra-ui/system@npm:2.6.2"
-  dependencies:
-    "@chakra-ui/color-mode": "npm:2.2.0"
-    "@chakra-ui/object-utils": "npm:2.1.0"
-    "@chakra-ui/react-utils": "npm:2.0.12"
-    "@chakra-ui/styled-system": "npm:2.9.2"
-    "@chakra-ui/theme-utils": "npm:2.0.21"
-    "@chakra-ui/utils": "npm:2.0.15"
-    react-fast-compare: "npm:3.2.2"
-  peerDependencies:
-    "@emotion/react": ^11.0.0
-    "@emotion/styled": ^11.0.0
-    react: ">=18"
-  checksum: 10c0/026c7df02ae997c331f9f4af2ab07c9352e81e091882edb20186cddb5a8fe2964d09afad2ce674ccf925a0f1161d27c1a250679098f3c0b7d960b94f62451f8a
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/theme-tools@npm:2.1.2":
-  version: 2.1.2
-  resolution: "@chakra-ui/theme-tools@npm:2.1.2"
-  dependencies:
-    "@chakra-ui/anatomy": "npm:2.2.2"
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-    color2k: "npm:^2.0.2"
-  peerDependencies:
-    "@chakra-ui/styled-system": ">=2.0.0"
-  checksum: 10c0/b7015d34cf19b1b0d6c0b415c4f489158d0cc65d8066050deff782b62705db68e8dbdcde0d7dd3b920be4b34c0a98e22568ea1e27ccc8ee133e78476e746f262
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/theme-utils@npm:2.0.21":
-  version: 2.0.21
-  resolution: "@chakra-ui/theme-utils@npm:2.0.21"
-  dependencies:
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-    "@chakra-ui/styled-system": "npm:2.9.2"
-    "@chakra-ui/theme": "npm:3.3.1"
-    lodash.mergewith: "npm:4.6.2"
-  checksum: 10c0/9fab70021a46d4a4b04d01d54270218a9e06817a26dfa03473e68529ea2aef54ffed0b0c451a4a64160bd62a23fd798ef202965af1211fddea66aaf36fe51db2
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/theme@npm:3.3.1":
-  version: 3.3.1
-  resolution: "@chakra-ui/theme@npm:3.3.1"
-  dependencies:
-    "@chakra-ui/anatomy": "npm:2.2.2"
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-    "@chakra-ui/theme-tools": "npm:2.1.2"
-  peerDependencies:
-    "@chakra-ui/styled-system": ">=2.8.0"
-  checksum: 10c0/ff1f479636965c1d8a345a8ea37ae67f772bf67ac83a82141c7e80a7e25e7cefcf5f89a16eafe469fa3b21f53c18040e0dc49cde6f484d702e705633c5385e55
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/transition@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@chakra-ui/transition@npm:2.1.0"
-  dependencies:
-    "@chakra-ui/shared-utils": "npm:2.0.5"
-  peerDependencies:
-    framer-motion: ">=4.0.0"
-    react: ">=18"
-  checksum: 10c0/08256dcdb2ed5e83ab7deedd1a76ef83ae3f2b1cab07492db1022fe7889437ac38fa2db7d32034faa1da5a73ea875e6b2f89e42de7943a60a12ad7c939421ec3
-  languageName: node
-  linkType: hard
-
-"@chakra-ui/utils@npm:2.0.15":
-  version: 2.0.15
-  resolution: "@chakra-ui/utils@npm:2.0.15"
-  dependencies:
-    "@types/lodash.mergewith": "npm:4.6.7"
-    css-box-model: "npm:1.2.1"
-    framesync: "npm:6.1.2"
-    lodash.mergewith: "npm:4.6.2"
-  checksum: 10c0/5dea8094bddfeb0e6809c1110c04dc8e975c741e0ba71bef4b640fab69218436fa16509706716af2c5d326fd33c2a32f6f30870397f8eaff0a5757fe0e18a6df
-  languageName: node
-  linkType: hard
-
 "@codemirror/autocomplete@npm:^6.0.0, @codemirror/autocomplete@npm:^6.4.0":
  version: 6.18.0
  resolution: "@codemirror/autocomplete@npm:6.18.0"
@ -16695,15 +16470,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/lodash.mergewith@npm:4.6.7":
-  version: 4.6.7
-  resolution: "@types/lodash.mergewith@npm:4.6.7"
-  dependencies:
-    "@types/lodash": "npm:*"
-  checksum: 10c0/d3945227d2e08034eaec1eb15abb204af841215f55b9deb8173ac3bcb24e40c98181033652ad4bc46951afc04fe0de1021677d4036f0e5cff4c05e238e76abee
-  languageName: node
-  linkType: hard
-
 "@types/lodash.omit@npm:^4.5.9":
  version: 4.5.9
  resolution: "@types/lodash.omit@npm:4.5.9"
@ -22748,13 +22514,6 @@ __metadata:
  languageName: node
  linkType: hard

-"color2k@npm:^2.0.2":
-  version: 2.0.3
-  resolution: "color2k@npm:2.0.3"
-  checksum: 10c0/e7c13d212c9d1abb1690e378bbc0a6fb1751e4b02e9a73ba3b2ade9d54da673834597d342791d577d1ce400ec486c7f92c5098f9fa85cd113bcfde57420a2bb9
-  languageName: node
-  linkType: hard
-
 "color@npm:^4.2.3":
  version: 4.2.3
  resolution: "color@npm:4.2.3"
@ -23661,7 +23420,7 @@ __metadata:
  languageName: node
  linkType: hard

-"css-box-model@npm:1.2.1, css-box-model@npm:^1.2.1":
+"css-box-model@npm:^1.2.1":
  version: 1.2.1
  resolution: "css-box-model@npm:1.2.1"
  dependencies:
@ -28197,15 +27956,6 @@ __metadata:
  languageName: node
  linkType: hard

-"framesync@npm:6.1.2":
-  version: 6.1.2
-  resolution: "framesync@npm:6.1.2"
-  dependencies:
-    tslib: "npm:2.4.0"
-  checksum: 10c0/9e7d240ddf0bbe062bc9b71ffffd889b9923ee5d9c638ed84f2fe31aaa42e25e624eaf0b28ccca1d08f5ae170b8d083a6dabe5983f5dabea6bbbe6d4a9f8d27a
-  languageName: node
-  linkType: hard
-
 "fresh@npm:0.5.2":
  version: 0.5.2
  resolution: "fresh@npm:0.5.2"
@ -34507,13 +34257,6 @@ __metadata:
  languageName: node
  linkType: hard

-"lodash.mergewith@npm:4.6.2":
-  version: 4.6.2
-  resolution: "lodash.mergewith@npm:4.6.2"
-  checksum: 10c0/4adbed65ff96fd65b0b3861f6899f98304f90fd71e7f1eb36c1270e05d500ee7f5ec44c02ef979b5ddbf75c0a0b9b99c35f0ad58f4011934c4d4e99e5200b3b5
-  languageName: node
-  linkType: hard
-
 "lodash.omit@npm:4.5.0, lodash.omit@npm:^4.5.0":
  version: 4.5.0
  resolution: "lodash.omit@npm:4.5.0"
@ -41915,7 +41658,7 @@ __metadata:
  languageName: node
  linkType: hard

-"react-fast-compare@npm:3.2.2, react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
+"react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
  version: 3.2.2
  resolution: "react-fast-compare@npm:3.2.2"
  checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
@ -46937,13 +46680,6 @@ __metadata:
  languageName: node
  linkType: hard

-"tslib@npm:2.4.0":
-  version: 2.4.0
-  resolution: "tslib@npm:2.4.0"
-  checksum: 10c0/eb19bda3ae545b03caea6a244b34593468e23d53b26bf8649fbc20fce43e9b21a71127fd6d2b9662c0fe48ee6ff668ead48fd00d3b88b2b716b1c12edae25b5d
-  languageName: node
-  linkType: hard
-
 "tslib@npm:2.5.2":
  version: 2.5.2
  resolution: "tslib@npm:2.5.2"
@ -47241,8 +46977,6 @@ __metadata:
    "@babel/preset-typescript": "npm:^7.24.6"
    "@blocknote/mantine": "npm:^0.15.3"
    "@blocknote/react": "npm:^0.15.3"
-    "@chakra-ui/accordion": "npm:^2.3.0"
-    "@chakra-ui/system": "npm:^2.6.0"
    "@codesandbox/sandpack-react": "npm:^2.13.5"
    "@crxjs/vite-plugin": "npm:^1.0.14"
    "@dagrejs/dagre": "npm:^1.1.2"
				`@ -0,0 +1 @@`
				`export * from './expandableContainer/components/ExpandableContainer';`