diff --git a/apps/cyberstorm-storybook/package.json b/apps/cyberstorm-storybook/package.json
index 615e033e0..56c449617 100644
--- a/apps/cyberstorm-storybook/package.json
+++ b/apps/cyberstorm-storybook/package.json
@@ -22,8 +22,5 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
-  },
-  "devDependencies": {
-    "@types/uuid": "^10.0.0"
   }
 }
diff --git a/apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx b/apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx
index 89c8bb916..34535851f 100644
--- a/apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx
+++ b/apps/cyberstorm-storybook/stories/components/BreadCrumb.stories.tsx
@@ -47,6 +47,7 @@ const breadCrumbStory = (args: { excludeHome?: boolean | undefined }) => (
   </>
 );
 
-export const DefaultCrumbs: BreadCrumbsStory = (args) => breadCrumbStory(args);
+export const ReferenceCrumbs: BreadCrumbsStory = (args) =>
+  breadCrumbStory(args);
 export const ExcludeHomeCrumbs: BreadCrumbsStory = () =>
   breadCrumbStory({ excludeHome: true });
diff --git a/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx b/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx
new file mode 100644
index 000000000..e35077367
--- /dev/null
+++ b/apps/cyberstorm-storybook/stories/components/CommunityCard.stories.tsx
@@ -0,0 +1,61 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { CommunityCard } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const style: React.CSSProperties = {
+  padding: "3rem",
+  flexWrap: "wrap",
+  display: "grid",
+  flexDirection: "row",
+  gap: "1rem",
+  gridTemplateColumns: "repeat(auto-fit, minmax(15.5rem, 1fr))",
+};
+
+const defaultCommunity = {
+  name: "Risk of Rain 2",
+  identifier: "",
+  description: "",
+  discord_url: "",
+  datetime_created: "",
+  background_image_url: "",
+  cover_image_url: "",
+  icon_url: "",
+  total_download_count: 0,
+  total_package_count: 0,
+};
+
+const meta = {
+  title: "Cyberstorm/Components/CommunityCard",
+  component: CommunityCard,
+} as Meta<typeof CommunityCard>;
+
+const Template: StoryFn<typeof CommunityCard> = (args) => (
+  <div style={style}>
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+    <CommunityCard {...args} />
+  </div>
+);
+
+const ReferenceCommunityCard = Template.bind({});
+ReferenceCommunityCard.args = { community: defaultCommunity };
+
+const LongCommunityCard = Template.bind({});
+LongCommunityCard.args = {
+  community: {
+    ...defaultCommunity,
+    name: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    total_download_count: 123456789,
+    total_package_count: 123456789,
+  },
+};
+
+export { meta as default, ReferenceCommunityCard, LongCommunityCard };
diff --git a/apps/cyberstorm-storybook/stories/components/Footer.stories.tsx b/apps/cyberstorm-storybook/stories/components/Footer.stories.tsx
new file mode 100644
index 000000000..1a901821c
--- /dev/null
+++ b/apps/cyberstorm-storybook/stories/components/Footer.stories.tsx
@@ -0,0 +1,15 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { Footer } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const meta = {
+  title: "Cyberstorm/Components/Footer",
+  component: Footer,
+} as Meta<typeof Footer>;
+
+const Template: StoryFn<typeof Footer> = () => <Footer />;
+
+const ReferenceFooter = Template.bind({});
+ReferenceFooter.args = {};
+
+export { meta as default, ReferenceFooter };
diff --git a/apps/cyberstorm-storybook/stories/components/SearchFilter.stories.tsx b/apps/cyberstorm-storybook/stories/components/SearchFilter.stories.tsx
new file mode 100644
index 000000000..74ac30030
--- /dev/null
+++ b/apps/cyberstorm-storybook/stories/components/SearchFilter.stories.tsx
@@ -0,0 +1,28 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { SearchFilter } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const meta = {
+  title: "Cyberstorm/Components/SearchFilter",
+  component: SearchFilter,
+} as Meta<typeof SearchFilter>;
+
+const defaultArgs = {
+  tags: [],
+};
+
+const Template: StoryFn<typeof SearchFilter> = (args) => (
+  <SearchFilter {...args} />
+);
+
+const MinimalSearchFilter = Template.bind({});
+MinimalSearchFilter.args = {
+  ...defaultArgs,
+};
+
+const ReferenceSearchFilter = Template.bind({});
+ReferenceSearchFilter.args = {
+  tags: ["tag1", "tag2", "tag3", "tag4", "tag5"],
+};
+
+export { meta as default, MinimalSearchFilter, ReferenceSearchFilter };
diff --git a/apps/cyberstorm-storybook/stories/components/TextInput.stories.tsx b/apps/cyberstorm-storybook/stories/components/TextInput.stories.tsx
new file mode 100644
index 000000000..1b274317d
--- /dev/null
+++ b/apps/cyberstorm-storybook/stories/components/TextInput.stories.tsx
@@ -0,0 +1,53 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { TextInput } from "@thunderstore/cyberstorm";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+
+const meta = {
+  title: "Cyberstorm/Components/TextInput",
+  component: TextInput,
+} as Meta<typeof TextInput>;
+
+const defaultArgs = {};
+
+const Template: StoryFn<typeof TextInput> = (args) => <TextInput {...args} />;
+
+const ReferenceTextInput = Template.bind({});
+ReferenceTextInput.args = defaultArgs;
+
+const IconTextInput = Template.bind({});
+IconTextInput.args = {
+  ...defaultArgs,
+  leftIcon: <FontAwesomeIcon icon={faSearch} />,
+};
+
+const PlaceholderTextInput = Template.bind({});
+PlaceholderTextInput.args = {
+  ...defaultArgs,
+  placeholder: "Placeholder text",
+};
+
+const ValueTextInput = Template.bind({});
+ValueTextInput.args = {
+  ...defaultArgs,
+  value: "Text value",
+};
+
+const ValueTextWithClearInput = Template.bind({});
+ValueTextWithClearInput.args = {
+  ...defaultArgs,
+  value: "Text value",
+  clearValue: () => {
+    return;
+  },
+};
+
+export {
+  meta as default,
+  ReferenceTextInput,
+  IconTextInput,
+  PlaceholderTextInput,
+  ValueTextInput,
+  ValueTextWithClearInput,
+};
diff --git a/apps/cyberstorm-storybook/stories/components/Title.stories.tsx b/apps/cyberstorm-storybook/stories/components/Title.stories.tsx
new file mode 100644
index 000000000..c73cd6ad5
--- /dev/null
+++ b/apps/cyberstorm-storybook/stories/components/Title.stories.tsx
@@ -0,0 +1,30 @@
+import { StoryFn, Meta } from "@storybook/react";
+import { Title } from "@thunderstore/cyberstorm";
+import React from "react";
+
+const meta = {
+  title: "Cyberstorm/Components/Title",
+  component: Title,
+} as Meta<typeof Title>;
+
+const defaultArgs = {
+  text: "This is a title",
+};
+
+const Template: StoryFn<typeof Title> = (args) => <Title {...args} />;
+
+const ReferenceTitle = Template.bind({});
+ReferenceTitle.args = defaultArgs;
+
+const LongTitle = Template.bind({});
+LongTitle.args = {
+  text:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n" +
+    "Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. \n" +
+    "Vestibulum sapien.",
+};
+
+const EmptyTitle = Template.bind({});
+EmptyTitle.args = { text: "" };
+
+export { meta as default, ReferenceTitle, LongTitle, EmptyTitle };
diff --git a/packages/cyberstorm/src/components/Header/DevelopersDropDown.tsx b/packages/cyberstorm/src/components/Header/DevelopersDropDown.tsx
new file mode 100644
index 000000000..10be79e57
--- /dev/null
+++ b/packages/cyberstorm/src/components/Header/DevelopersDropDown.tsx
@@ -0,0 +1,58 @@
+import { faCaretDown, faCode } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import * as Button from "../Button/";
+import { DropDown, DropDownItem } from "../DropDown/DropDown";
+import { DropDownLink } from "../DropDown/DropDownLink";
+import styles from "./Header.module.css";
+
+interface Props {
+  squareButton?: boolean;
+}
+
+export const DevelopersDropDown = (props: Props) => (
+  <DropDown
+    trigger={
+      props.squareButton ? (
+        <Button.Root
+          paddingSize="mediumSquare"
+          colorScheme="default"
+          tooltipText="Developers"
+          className={styles.developersSquareButton}
+        >
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faCode} />
+          </Button.ButtonIcon>
+        </Button.Root>
+      ) : (
+        <Button.Root paddingSize="large" colorScheme="transparentDefault">
+          <Button.ButtonLabel fontSize="large" fontWeight="600">
+            Developers
+          </Button.ButtonLabel>
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faCaretDown} />
+          </Button.ButtonIcon>
+        </Button.Root>
+      )
+    }
+    content={[
+      <a href="/api/docs" key="docs">
+        <DropDownItem content={<DropDownLink label="API Docs" />} />
+      </a>,
+      <a href="https://github.com/thunderstore-io" key="github">
+        <DropDownItem content={<DropDownLink label="GitHub" isExternal />} />
+      </a>,
+      <a href="/package/create/docs/" key="old_format_docs">
+        <DropDownItem content={<DropDownLink label="Package Format Docs" />} />
+      </a>,
+      <a href="/tools/markdown-preview/" key="old_markdown_preview">
+        <DropDownItem content={<DropDownLink label="Markdown Preview" />} />
+      </a>,
+      <a href="/tools/manifest-v1-validator/" key="old_manifest_validator">
+        <DropDownItem content={<DropDownLink label="Manifest Validator" />} />
+      </a>,
+    ]}
+  />
+);
+
+DevelopersDropDown.displayName = "DevelopersDropDown";
diff --git a/packages/cyberstorm/src/components/Header/Header.module.css b/packages/cyberstorm/src/components/Header/Header.module.css
new file mode 100644
index 000000000..e03b9e72d
--- /dev/null
+++ b/packages/cyberstorm/src/components/Header/Header.module.css
@@ -0,0 +1,124 @@
+.root {
+  position: sticky;
+  top: 0;
+  z-index: 99999;
+  display: flex;
+  gap: var(--gap--32);
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--header-height);
+  background-color: rgb(16 16 40 / 0.85);
+  backdrop-filter: blur(10px);
+}
+
+.item {
+  display: flex;
+  flex: 2 1 100%;
+}
+
+.item:last-child {
+  justify-content: flex-end;
+  padding-right: 0.75rem;
+}
+
+.nav {
+  display: flex;
+  gap: var(--gap--16);
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.search {
+  display: flex;
+  flex: 1 2 100%;
+  justify-content: center;
+}
+
+.logoWrapper {
+  display: flex;
+  width: 1.655rem;
+  height: 1.463rem;
+  margin: 0 0.75rem 0 1.25rem;
+  color: var(--color-highlight);
+}
+
+.navButtons {
+  display: flex;
+  gap: var(--space--8);
+}
+
+.dropDownUserInfo {
+  display: flex;
+  gap: var(--gap--16);
+  margin: 0 var(--space--8);
+  padding: var(--space--8) var(--space--16);
+  border-radius: var(--border-radius--8);
+}
+
+.dropDownUserInfo:hover {
+  background-color: var(--color-surface--6);
+}
+
+.dropdownUserInfoDetails {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.dropdownUserInfoDetails_userName {
+  color: var(--color-text--default);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size--m);
+  line-height: 1;
+}
+
+.dropdownUserInfoDetails_description {
+  color: var(--color-text--tertiary);
+  font-size: var(--font-size--m);
+  line-height: 1;
+}
+
+.narrowHeader {
+  display: none;
+}
+
+.narrowHeader > a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.developersSquareButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 63.5rem) {
+  .root {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+
+  .narrowHeader {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .logoWrapper {
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    margin: 0.625rem;
+    color: var(--color-highlight);
+  }
+
+  .wideHeader,
+  .navButtons {
+    display: none;
+  }
+}
diff --git a/packages/cyberstorm/src/components/Header/HeaderUserNav.tsx b/packages/cyberstorm/src/components/Header/HeaderUserNav.tsx
new file mode 100644
index 000000000..5893bf2ca
--- /dev/null
+++ b/packages/cyberstorm/src/components/Header/HeaderUserNav.tsx
@@ -0,0 +1,37 @@
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import * as Button from "../Button/";
+import { UserDropDown } from "./UserDropDown";
+import { CurrentUser } from "@thunderstore/dapper/types";
+
+export const HeaderUserNav = (props: { user: CurrentUser }) => {
+  const avatar = props.user.connections.find((c) => c.avatar !== null)?.avatar;
+
+  return (
+    <>
+      {props.user.username ? (
+        <li>
+          {/* TODO: This is a bit bad, since old upload pages exist on per community basis. Good enough until new upload page is deployed. */}
+          {/* When new upload page is deployed change to use PackageUploadLink instead */}
+          <a href="/package/create/" key="old_upload">
+            <Button.Root
+              paddingSize="mediumSquare"
+              colorScheme="transparentAccent"
+              tooltipText="Upload"
+            >
+              <Button.ButtonIcon>
+                <FontAwesomeIcon icon={faUpload} />
+              </Button.ButtonIcon>
+            </Button.Root>
+          </a>
+        </li>
+      ) : null}
+      <li>
+        <UserDropDown username={props.user.username} avatar={avatar} />
+      </li>
+    </>
+  );
+};
+
+HeaderUserNav.displayName = "HeaderUserNav";
diff --git a/packages/cyberstorm/src/components/Header/UserDropDown.tsx b/packages/cyberstorm/src/components/Header/UserDropDown.tsx
new file mode 100644
index 000000000..eca20c074
--- /dev/null
+++ b/packages/cyberstorm/src/components/Header/UserDropDown.tsx
@@ -0,0 +1,66 @@
+import { faSignOut, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as RadixDropDown from "@radix-ui/react-dropdown-menu";
+
+import styles from "./Header.module.css";
+import { Avatar } from "../Avatar/Avatar";
+import { AvatarButton } from "../Avatar/AvatarButton";
+import { DropDown, DropDownDivider, DropDownItem } from "../DropDown/DropDown";
+import { DropDownLink } from "../DropDown/DropDownLink";
+
+interface Props {
+  username: string | null;
+  avatar?: string | null;
+}
+
+export function UserDropDown(props: Props) {
+  const { avatar, username } = props;
+  return (
+    <DropDown
+      contentAlignment="end"
+      trigger={<AvatarButton src={avatar} username={username} size="small" />}
+      content={
+        username
+          ? [
+              <RadixDropDown.Item key="user">
+                <div className={styles.dropDownUserInfo}>
+                  <Avatar src={avatar} username={username} size="small" />
+                  <div className={styles.dropdownUserInfoDetails}>
+                    <div className={styles.dropdownUserInfoDetails_userName}>
+                      {username}
+                    </div>
+                  </div>
+                </div>
+              </RadixDropDown.Item>,
+
+              <DropDownDivider key="divider-first" />,
+
+              <a href="/logout" key="logout">
+                <DropDownItem
+                  content={
+                    <DropDownLink
+                      leftIcon={<FontAwesomeIcon icon={faSignOut} />}
+                      label="Log Out"
+                    />
+                  }
+                />
+              </a>,
+            ]
+          : [
+              <a href="/" key="login_link">
+                <DropDownItem
+                  content={
+                    <DropDownLink
+                      leftIcon={<FontAwesomeIcon icon={faUsers} />}
+                      label="Log in"
+                    />
+                  }
+                />
+              </a>,
+            ]
+      }
+    />
+  );
+}
+
+UserDropDown.displayName = "UserDropDown";
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
index 3e53f765d..1cc615cad 100644
--- a/packages/cyberstorm/src/index.ts
+++ b/packages/cyberstorm/src/index.ts
@@ -34,6 +34,7 @@ export { MetaItem, type MetaItemProps } from "./components/MetaItem/MetaItem";
 export { MetaInfoItem } from "./components/MetaInfoItem/MetaInfoItem";
 export { MetaInfoItemList } from "./components/MetaInfoItemList/MetaInfoItemList";
 export { default as NewTabs } from "./components/NewTabs/Tabs";
+export { SearchFilter } from "./components/SearchFilter/SearchFilter";
 export { SelectSearch } from "./components/SelectSearch/SelectSearch";
 export {
   MultiSelectSearch,
diff --git a/yarn.lock b/yarn.lock
index a174f6b66..5f42fe791 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -75,48 +75,10 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.4.tgz#7d2a80ce229890edcf4cc259d4d696cb4dae2fcb"
   integrity sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==
 
-<<<<<<< HEAD
-"@babel/core@7.25", "@babel/core@>=7.2.2", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.18.5", "@babel/core@^7.20.7", "@babel/core@^7.21.0", "@babel/core@^7.21.8", "@babel/core@^7.22.9", "@babel/core@^7.23.9", "@babel/core@^7.7.5", "@babel/core@^7.7.7":
+"@babel/core@7.25", "@babel/core@^7.18.5", "@babel/core@^7.20.7", "@babel/core@^7.21.0", "@babel/core@^7.21.8", "@babel/core@^7.22.9", "@babel/core@^7.23.9", "@babel/core@^7.7.5":
   version "7.25.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.25.2.tgz#ed8eec275118d7613e77a352894cd12ded8eba77"
   integrity sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==
-=======
-"@babel/compat-data@^7.23.5":
-  version "7.24.4"
-  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
-  integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
-
-"@babel/compat-data@^7.24.6":
-  version "7.24.6"
-  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.6.tgz#b3600217688cabb26e25f8e467019e66d71b7ae2"
-  integrity sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==
-
-"@babel/core@7.20":
-  version "7.20.12"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.20.12.tgz#7930db57443c6714ad216953d1356dac0eb8496d"
-  integrity sha512-XsMfHovsUYHFMdrIHkZphTN/2Hzzi78R08NuHfDBehym2VsPDL6Zn/JAD/JQdnRvbSsbQc4mVaU1m6JgtTEElg==
-  dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.20.7"
-    "@babel/helper-compilation-targets" "^7.20.7"
-    "@babel/helper-module-transforms" "^7.20.11"
-    "@babel/helpers" "^7.20.7"
-    "@babel/parser" "^7.20.7"
-    "@babel/template" "^7.20.7"
-    "@babel/traverse" "^7.20.12"
-    "@babel/types" "^7.20.7"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.2"
-    semver "^6.3.0"
-
-"@babel/core@>=7.2.2", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.7.7":
-  version "7.21.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659"
-  integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==
->>>>>>> b5ae65ef (Fix Cyberstorm Storybook and BreadCrumb's story)
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.24.7"
@@ -134,6 +96,27 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
+"@babel/core@>=7.2.2", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.13.16", "@babel/core@^7.7.7":
+  version "7.21.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.21.4.tgz#c6dc73242507b8e2a27fd13a9c1814f9fa34a659"
+  integrity sha512-qt/YV149Jman/6AfmlxJ04LMIu8bMoyl3RB91yTFrxQmgbrSvQMy7cI8Q62FHx1t8wJ8B5fu0UDoLwHAhUo1QA==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.21.4"
+    "@babel/generator" "^7.21.4"
+    "@babel/helper-compilation-targets" "^7.21.4"
+    "@babel/helper-module-transforms" "^7.21.2"
+    "@babel/helpers" "^7.21.0"
+    "@babel/parser" "^7.21.4"
+    "@babel/template" "^7.20.7"
+    "@babel/traverse" "^7.21.4"
+    "@babel/types" "^7.21.4"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.12.11", "@babel/generator@^7.21.5", "@babel/generator@^7.22.9", "@babel/generator@^7.25.0", "@babel/generator@^7.25.4", "@babel/generator@^7.7.2":
   version "7.25.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.5.tgz#b31cf05b3fe8c32d206b6dad03bb0aacbde73450"
@@ -7145,17 +7128,11 @@ acorn@^7.4.0, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-<<<<<<< HEAD
-acorn@^8.0.0, acorn@^8.10.0, acorn@^8.11.3, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.1, acorn@^8.8.2, acorn@^8.9.0:
-=======
 acorn@^8.0.0, acorn@^8.11.3, acorn@^8.8.1, acorn@^8.9.0:
->>>>>>> b5ae65ef (Fix Cyberstorm Storybook and BreadCrumb's story)
   version "8.11.3"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
-<<<<<<< HEAD
-=======
 acorn@^8.10.0, acorn@^8.8.2:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
@@ -7166,7 +7143,6 @@ acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
->>>>>>> b5ae65ef (Fix Cyberstorm Storybook and BreadCrumb's story)
 address@^1.0.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
@@ -8238,22 +8214,10 @@ caniuse-lite@^1.0.30001109:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001482.tgz#8b3fad73dc35b2674a5c96df2d4f9f1c561435de"
   integrity sha512-F1ZInsg53cegyjroxLNW9DmrEQ1SuGRTO1QlpA0o2/6OpQ0gFeDRoq1yFmnr8Sakn9qwwt9DmbxHB6w167OSuQ==
 
-<<<<<<< HEAD
 caniuse-lite@^1.0.30001646:
   version "1.0.30001653"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz#b8af452f8f33b1c77f122780a4aecebea0caca56"
   integrity sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==
-=======
-caniuse-lite@^1.0.30001541:
-  version "1.0.30001541"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz#b1aef0fadd87fb72db4dcb55d220eae17b81cdb1"
-  integrity sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw==
-
-caniuse-lite@^1.0.30001587:
-  version "1.0.30001616"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz#4342712750d35f71ebba9fcac65e2cf8870013c3"
-  integrity sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==
->>>>>>> b5ae65ef (Fix Cyberstorm Storybook and BreadCrumb's story)
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -9996,9 +9960,6 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-<<<<<<< HEAD
-eslint-scope@^7.2.0, eslint-scope@^7.2.2:
-=======
 eslint-scope@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b"
@@ -10008,7 +9969,6 @@ eslint-scope@^7.2.0:
     estraverse "^5.2.0"
 
 eslint-scope@^7.2.2:
->>>>>>> b5ae65ef (Fix Cyberstorm Storybook and BreadCrumb's story)
   version "7.2.2"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
   integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
@@ -11398,7 +11358,7 @@ got@^11.7.0:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -17785,7 +17745,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17803,15 +17763,6 @@ string-width@^3.0.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -17921,7 +17872,7 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17935,13 +17886,6 @@ strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -19492,16 +19436,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==