From 694ba3fb3b061598ae042aa8282f9e4b058d3c58 Mon Sep 17 00:00:00 2001
From: Oksamies <asko.soisalo@gmail.com>
Date: Wed, 18 Sep 2024 19:14:56 +0300
Subject: [PATCH] Organize new folders and files

---
 .../src/components/Footer/Footer.tsx          |  3 +-
 packages/cyberstorm/src/index.ts              | 46 ++++++++++++++++---
 .../Button/{Button => }/Button.tsx            | 10 ++--
 .../Card/CardCommunity/CardCommunity.tsx      |  2 +-
 .../{Container => }/Container.module.css      |  0
 .../Container/{Container => }/Container.tsx   |  7 +--
 .../src/newComponents/DropDown/DropDown.tsx   |  2 +-
 .../Heading/{Heading => }/Heading.module.css  |  0
 .../Heading/{Heading => }/Heading.tsx         |  2 +-
 .../Link/LinkButton/LinkButton.tsx            |  2 +-
 .../Menu/{Menu => }/Menu.module.css           |  0
 .../newComponents/Menu/{Menu => }/Menu.tsx    | 25 +++++-----
 .../Modal/{Modal => }/Modal.module.css        |  0
 .../newComponents/Modal/{Modal => }/Modal.tsx | 20 ++++----
 .../newComponents/Select/Select.module.css    |  3 +-
 .../src/newComponents/Select/Select.tsx       | 11 ++++-
 .../src/newComponents/Tag/{Tag => }/Tag.tsx   |  9 ++--
 .../{TextInput => }/TextInput.module.css      |  0
 .../TextInput/{TextInput => }/TextInput.tsx   | 12 ++---
 .../Frame/Display.module.css                  | 12 ++---
 .../src/primitiveComponents/Frame/Frame.tsx   | 42 ++++++++---------
 .../Frame/Heading.module.css                  | 12 ++---
 .../ButtonStyles/Button.module.css            |  0
 .../TagStyles/Tag.module.css                  |  0
 24 files changed, 128 insertions(+), 92 deletions(-)
 rename packages/cyberstorm/src/newComponents/Button/{Button => }/Button.tsx (86%)
 rename packages/cyberstorm/src/newComponents/Container/{Container => }/Container.module.css (100%)
 rename packages/cyberstorm/src/newComponents/Container/{Container => }/Container.tsx (83%)
 rename packages/cyberstorm/src/newComponents/Heading/{Heading => }/Heading.module.css (100%)
 rename packages/cyberstorm/src/newComponents/Heading/{Heading => }/Heading.tsx (94%)
 rename packages/cyberstorm/src/newComponents/Menu/{Menu => }/Menu.module.css (100%)
 rename packages/cyberstorm/src/newComponents/Menu/{Menu => }/Menu.tsx (67%)
 rename packages/cyberstorm/src/newComponents/Modal/{Modal => }/Modal.module.css (100%)
 rename packages/cyberstorm/src/newComponents/Modal/{Modal => }/Modal.tsx (65%)
 rename packages/cyberstorm/src/newComponents/Tag/{Tag => }/Tag.tsx (84%)
 rename packages/cyberstorm/src/newComponents/TextInput/{TextInput => }/TextInput.module.css (100%)
 rename packages/cyberstorm/src/newComponents/TextInput/{TextInput => }/TextInput.tsx (88%)
 rename packages/cyberstorm/src/{sharedVariantStyles => sharedComponentStyles}/ButtonStyles/Button.module.css (100%)
 rename packages/cyberstorm/src/{sharedVariantStyles => sharedComponentStyles}/TagStyles/Tag.module.css (100%)

diff --git a/packages/cyberstorm/src/components/Footer/Footer.tsx b/packages/cyberstorm/src/components/Footer/Footer.tsx
index 6f429d32a..7f37a487b 100644
--- a/packages/cyberstorm/src/components/Footer/Footer.tsx
+++ b/packages/cyberstorm/src/components/Footer/Footer.tsx
@@ -54,7 +54,7 @@ export function Footer() {
           </div>
           <div className={classnames(styles.item, styles.linksWrapper)}>
             <div className={classnames(styles.inner, styles.navLinks)}>
-              <nav className={styles.nav} aria-label="Links">
+              <nav className={styles.nav} aria-label="Footer links">
                 <Container rootClasses={styles.navSection}>
                   <Heading
                     variant="primary"
@@ -192,6 +192,7 @@ export function Footer() {
             <NewLink
               primitiveType="link"
               href="https://github.com/thunderstore-io/thunderstore-ui/"
+              aria-label="This page is open source, link to Thunderstore UIs Github page"
             >
               open-source ❤
             </NewLink>
diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
index 25d1c70be..d39afda30 100644
--- a/packages/cyberstorm/src/index.ts
+++ b/packages/cyberstorm/src/index.ts
@@ -77,20 +77,52 @@ export { CollapsibleText } from "./components/CollapsibleText/CollapsibleText";
 export { SkeletonBox } from "./components/SkeletonBox/SkeletonBox";
 export { isNode, isRecord, isStringArray } from "./utils/type_guards";
 
+// primitiveComponents
+export {
+  Actionable,
+  type ActionableButtonProps,
+  type ActionableLinkProps,
+  type ActionableCyberstormLinkProps,
+} from "./primitiveComponents/Actionable/Actionable";
+export {
+  Frame,
+  type FrameDisplayProps,
+  type FrameFloaterProps,
+  type FrameHeadingProps,
+  type FrameIconProps,
+  type FrameListItemProps,
+  type FrameListProps,
+  type FrameModalProps,
+  type FramePopoverProps,
+  type FrameTextProps,
+  type FrameWindowProps,
+} from "./primitiveComponents/Frame/Frame";
+export {
+  Input,
+  type InputTextInputProps,
+} from "./primitiveComponents/Input/Input";
+export {
+  type variants,
+  type colors,
+  type sizes,
+  type TextStyles,
+  type PrimitiveComponentDefaultProps,
+} from "./primitiveComponents/utils/utils";
+
 // newComponents
-export { Menu } from "./newComponents/Menu/Menu/Menu";
-export { Modal } from "./newComponents/Modal/Modal/Modal";
-export { Heading } from "./newComponents/Heading/Heading/Heading";
+export { Menu } from "./newComponents/Menu/Menu";
+export { Modal } from "./newComponents/Modal/Modal";
+export { Heading } from "./newComponents/Heading/Heading";
 export { CardCommunity } from "./newComponents/Card/CardCommunity/CardCommunity";
 export { Link as NewLink } from "./newComponents/Link/Link/Link";
 export { LinkButton } from "./newComponents/Link/LinkButton/LinkButton";
-export { Button as NewButton } from "./newComponents/Button/Button/Button";
+export { Button as NewButton } from "./newComponents/Button/Button";
 export { BreadCrumbs as NewBreadCrumbs } from "./newComponents/BreadCrumbs/BreadCrumbs";
-export { Container } from "./newComponents/Container/Container/Container";
-export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput/TextInput";
+export { Container } from "./newComponents/Container/Container";
+export { TextInput as NewTextInput } from "./newComponents/TextInput/TextInput";
 export { Select as NewSelect } from "./newComponents/Select/Select";
 export { Icon as NewIcon } from "./newComponents/Icon/Icon";
-export { Tag as NewTag } from "./newComponents/Tag/Tag/Tag";
+export { Tag as NewTag } from "./newComponents/Tag/Tag";
 export {
   DropDown as NewDropDown,
   DropDownItem as NewDropDownItem,
diff --git a/packages/cyberstorm/src/newComponents/Button/Button/Button.tsx b/packages/cyberstorm/src/newComponents/Button/Button.tsx
similarity index 86%
rename from packages/cyberstorm/src/newComponents/Button/Button/Button.tsx
rename to packages/cyberstorm/src/newComponents/Button/Button.tsx
index 1e49bf4e7..4a7f962aa 100644
--- a/packages/cyberstorm/src/newComponents/Button/Button/Button.tsx
+++ b/packages/cyberstorm/src/newComponents/Button/Button.tsx
@@ -1,10 +1,10 @@
+import styles from "../../sharedComponentStyles/ButtonStyles/Button.module.css";
+import React from "react";
+import { classnames } from "../../utils/utils";
 import {
-  Actionable,
   ActionableButtonProps,
-} from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "../../../sharedVariantStyles/ButtonStyles/Button.module.css";
-import React from "react";
-import { classnames } from "../../../utils/utils";
+  Actionable,
+} from "../../primitiveComponents/Actionable/Actionable";
 
 export const Button = React.forwardRef<
   HTMLButtonElement,
diff --git a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
index cecc763e0..ca33e2983 100644
--- a/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
+++ b/packages/cyberstorm/src/newComponents/Card/CardCommunity/CardCommunity.tsx
@@ -10,7 +10,7 @@ import { Community } from "@thunderstore/dapper/types";
 import styles from "./CardCommunity.module.css";
 import { numberWithSpaces, formatInteger } from "../../../utils/utils";
 import { NewLink, NewIcon, Image, NewTag } from "../../..";
-import { Container } from "../../Container/Container/Container";
+import { Container } from "../../Container/Container";
 
 interface Props {
   community: Community;
diff --git a/packages/cyberstorm/src/newComponents/Container/Container/Container.module.css b/packages/cyberstorm/src/newComponents/Container/Container.module.css
similarity index 100%
rename from packages/cyberstorm/src/newComponents/Container/Container/Container.module.css
rename to packages/cyberstorm/src/newComponents/Container/Container.module.css
diff --git a/packages/cyberstorm/src/newComponents/Container/Container/Container.tsx b/packages/cyberstorm/src/newComponents/Container/Container.tsx
similarity index 83%
rename from packages/cyberstorm/src/newComponents/Container/Container/Container.tsx
rename to packages/cyberstorm/src/newComponents/Container/Container.tsx
index d1673b2dd..f42e4f14a 100644
--- a/packages/cyberstorm/src/newComponents/Container/Container/Container.tsx
+++ b/packages/cyberstorm/src/newComponents/Container/Container.tsx
@@ -1,10 +1,7 @@
 import styles from "./Container.module.css";
 import React from "react";
-import {
-  Frame,
-  FrameWindowProps,
-} from "../../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../../utils/utils";
+import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
+import { classnames } from "../../utils/utils";
 
 export const Container = React.forwardRef<
   HTMLDivElement,
diff --git a/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx b/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
index 898f9927d..03a112880 100644
--- a/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
+++ b/packages/cyberstorm/src/newComponents/DropDown/DropDown.tsx
@@ -2,7 +2,7 @@ import { ReactNode, ReactElement } from "react";
 import styles from "./DropDown.module.css";
 
 import * as RadixDropDown from "@radix-ui/react-dropdown-menu";
-import { Container } from "../Container/Container/Container";
+import { Container } from "../Container/Container";
 import { classnames } from "../../utils/utils";
 import { PrimitiveComponentDefaultProps } from "../../primitiveComponents/utils/utils";
 
diff --git a/packages/cyberstorm/src/newComponents/Heading/Heading/Heading.module.css b/packages/cyberstorm/src/newComponents/Heading/Heading.module.css
similarity index 100%
rename from packages/cyberstorm/src/newComponents/Heading/Heading/Heading.module.css
rename to packages/cyberstorm/src/newComponents/Heading/Heading.module.css
diff --git a/packages/cyberstorm/src/newComponents/Heading/Heading/Heading.tsx b/packages/cyberstorm/src/newComponents/Heading/Heading.tsx
similarity index 94%
rename from packages/cyberstorm/src/newComponents/Heading/Heading/Heading.tsx
rename to packages/cyberstorm/src/newComponents/Heading/Heading.tsx
index 3de2e62fa..0093ac1fd 100644
--- a/packages/cyberstorm/src/newComponents/Heading/Heading/Heading.tsx
+++ b/packages/cyberstorm/src/newComponents/Heading/Heading.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import styles from "./Heading.module.css";
 import React from "react";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+import { Frame } from "../../primitiveComponents/Frame/Frame";
 
 interface DefaultProps
   extends React.HTMLAttributes<HTMLHeadingElement>,
diff --git a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
index fc2acaccd..4bf3eca71 100644
--- a/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
+++ b/packages/cyberstorm/src/newComponents/Link/LinkButton/LinkButton.tsx
@@ -3,7 +3,7 @@ import {
   ActionableCyberstormLinkProps,
   ActionableLinkProps,
 } from "../../../primitiveComponents/Actionable/Actionable";
-import styles from "../../../sharedVariantStyles/ButtonStyles/Button.module.css";
+import styles from "../../../sharedComponentStyles/ButtonStyles/Button.module.css";
 import React from "react";
 import { classnames } from "../../../utils/utils";
 
diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu/Menu.module.css b/packages/cyberstorm/src/newComponents/Menu/Menu.module.css
similarity index 100%
rename from packages/cyberstorm/src/newComponents/Menu/Menu/Menu.module.css
rename to packages/cyberstorm/src/newComponents/Menu/Menu.module.css
diff --git a/packages/cyberstorm/src/newComponents/Menu/Menu/Menu.tsx b/packages/cyberstorm/src/newComponents/Menu/Menu.tsx
similarity index 67%
rename from packages/cyberstorm/src/newComponents/Menu/Menu/Menu.tsx
rename to packages/cyberstorm/src/newComponents/Menu/Menu.tsx
index 65dfed8d1..77a42c62c 100644
--- a/packages/cyberstorm/src/newComponents/Menu/Menu/Menu.tsx
+++ b/packages/cyberstorm/src/newComponents/Menu/Menu.tsx
@@ -1,16 +1,20 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+import { ReactNode } from "react";
+
 import styles from "./Menu.module.css";
-import { Button } from "../../..";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { NewButton, NewIcon } from "../..";
+import {
+  FramePopoverProps,
+  Frame,
+} from "../../primitiveComponents/Frame/Frame";
 
-interface Props extends PropsWithChildren {
+interface Props extends Omit<FramePopoverProps, "primitiveType"> {
   trigger: ReactNode;
-  popoverId: string;
   controls?: ReactNode;
 }
 
+// TODO: Add support for color, size and text systems
 export function Menu(props: Props) {
   return (
     <>
@@ -23,23 +27,22 @@ export function Menu(props: Props) {
         rootClasses={styles.menuRoot}
         wrapperClasses={styles.menuWrapper}
       >
-        {/* STYLELIB UPDATE TODO: Use variant of primitive */}
         {props.controls ? (
           props.controls
         ) : (
-          <Button.Root
+          <NewButton
             {...{
               popovertarget: props.popoverId,
               popovertargetaction: "close",
             }}
-            colorScheme="transparentTertiary"
+            csVariant="tertiary"
             className={styles.menuCloseButton}
             tooltipText="Close"
           >
-            <Button.ButtonIcon>
+            <NewIcon csMode="inline" noWrapper>
               <FontAwesomeIcon icon={faXmark} />
-            </Button.ButtonIcon>
-          </Button.Root>
+            </NewIcon>
+          </NewButton>
         )}
 
         {props.children}
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal/Modal.module.css b/packages/cyberstorm/src/newComponents/Modal/Modal.module.css
similarity index 100%
rename from packages/cyberstorm/src/newComponents/Modal/Modal/Modal.module.css
rename to packages/cyberstorm/src/newComponents/Modal/Modal.module.css
diff --git a/packages/cyberstorm/src/newComponents/Modal/Modal/Modal.tsx b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
similarity index 65%
rename from packages/cyberstorm/src/newComponents/Modal/Modal/Modal.tsx
rename to packages/cyberstorm/src/newComponents/Modal/Modal.tsx
index 19831db5b..cd077a46b 100644
--- a/packages/cyberstorm/src/newComponents/Modal/Modal/Modal.tsx
+++ b/packages/cyberstorm/src/newComponents/Modal/Modal.tsx
@@ -1,13 +1,12 @@
-import { PropsWithChildren, ReactNode } from "react";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+import { ReactNode } from "react";
+import { Frame, FrameModalProps } from "../../primitiveComponents/Frame/Frame";
 import styles from "./Modal.module.css";
-import { Button } from "../../..";
+import { NewButton, NewIcon } from "../..";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
-interface Props extends PropsWithChildren {
+interface Props extends Omit<FrameModalProps, "primitiveType"> {
   trigger: ReactNode;
-  popoverId: string;
 }
 
 export function Modal(props: Props) {
@@ -22,20 +21,19 @@ export function Modal(props: Props) {
         rootClasses={styles.modalRoot}
         wrapperClasses={styles.modalWrapper}
       >
-        {/* STYLELIB UPDATE TODO: Use variant of primitive */}
-        <Button.Root
+        <NewButton
           {...{
             popovertarget: props.popoverId,
             popovertargetaction: "close",
           }}
-          colorScheme="transparentTertiary"
+          csVariant="tertiary"
           className={styles.modalCloseButton}
           tooltipText="Close"
         >
-          <Button.ButtonIcon>
+          <NewIcon csMode="inline" noWrapper>
             <FontAwesomeIcon icon={faXmark} />
-          </Button.ButtonIcon>
-        </Button.Root>
+          </NewIcon>
+        </NewButton>
         {props.children}
       </Frame>
     </>
diff --git a/packages/cyberstorm/src/newComponents/Select/Select.module.css b/packages/cyberstorm/src/newComponents/Select/Select.module.css
index 58b07e953..38a86810a 100644
--- a/packages/cyberstorm/src/newComponents/Select/Select.module.css
+++ b/packages/cyberstorm/src/newComponents/Select/Select.module.css
@@ -30,7 +30,8 @@
   cursor: pointer;
 }
 
-.item:hover {
+.item:hover,
+.item:focus {
   background-color: var(--color-surface--6, var(--color-primary, red));
 }
 
diff --git a/packages/cyberstorm/src/newComponents/Select/Select.tsx b/packages/cyberstorm/src/newComponents/Select/Select.tsx
index 2112dab42..8fbf578db 100644
--- a/packages/cyberstorm/src/newComponents/Select/Select.tsx
+++ b/packages/cyberstorm/src/newComponents/Select/Select.tsx
@@ -3,7 +3,14 @@ import styles from "./Select.module.css";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Root, Content, Item, Portal, Trigger } from "@radix-ui/react-select";
+import {
+  Root,
+  Content,
+  Item,
+  Portal,
+  Trigger,
+  Viewport,
+} from "@radix-ui/react-select";
 import { classnames } from "../../utils/utils";
 import { Container, NewButton, NewIcon } from "../..";
 
@@ -85,7 +92,7 @@ export function Select<T extends string>(props: SelectProps<T>) {
           sideOffset={4}
           className={classnames(styles.content)}
         >
-          {selectItemElements}
+          <Viewport>{selectItemElements}</Viewport>
         </Content>
       </Portal>
     </Root>
diff --git a/packages/cyberstorm/src/newComponents/Tag/Tag/Tag.tsx b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
similarity index 84%
rename from packages/cyberstorm/src/newComponents/Tag/Tag/Tag.tsx
rename to packages/cyberstorm/src/newComponents/Tag/Tag.tsx
index c60592d16..ffd25aa82 100644
--- a/packages/cyberstorm/src/newComponents/Tag/Tag/Tag.tsx
+++ b/packages/cyberstorm/src/newComponents/Tag/Tag.tsx
@@ -1,10 +1,7 @@
-import styles from "../../../sharedVariantStyles/TagStyles/Tag.module.css";
+import styles from "../../sharedComponentStyles/TagStyles/Tag.module.css";
 import React from "react";
-import {
-  Frame,
-  FrameWindowProps,
-} from "../../../primitiveComponents/Frame/Frame";
-import { classnames } from "../../../utils/utils";
+import { Frame, FrameWindowProps } from "../../primitiveComponents/Frame/Frame";
+import { classnames } from "../../utils/utils";
 
 interface TagProps extends Omit<FrameWindowProps, "primitiveType"> {
   dark?: boolean;
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput/TextInput.module.css b/packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css
similarity index 100%
rename from packages/cyberstorm/src/newComponents/TextInput/TextInput/TextInput.module.css
rename to packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput/TextInput.tsx b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
similarity index 88%
rename from packages/cyberstorm/src/newComponents/TextInput/TextInput/TextInput.tsx
rename to packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
index 1e3be6fdf..d502aacbf 100644
--- a/packages/cyberstorm/src/newComponents/TextInput/TextInput/TextInput.tsx
+++ b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
@@ -3,14 +3,14 @@ import React from "react";
 import {
   Input,
   InputTextInputProps,
-} from "../../../primitiveComponents/Input/Input";
-import { classnames } from "../../../utils/utils";
-import { Frame } from "../../../primitiveComponents/Frame/Frame";
+} from "../../primitiveComponents/Input/Input";
+import { classnames } from "../../utils/utils";
+import { Frame } from "../../primitiveComponents/Frame/Frame";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
-import { Actionable } from "../../../primitiveComponents/Actionable/Actionable";
-import { colors, variants } from "../../../primitiveComponents/utils/utils";
-import { NewIcon } from "../../..";
+import { Actionable } from "../../primitiveComponents/Actionable/Actionable";
+import { colors, variants } from "../../primitiveComponents/utils/utils";
+import { NewIcon } from "../..";
 
 interface TextInputProps extends Omit<InputTextInputProps, "primitiveType"> {
   leftIcon?: JSX.Element;
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css
index c6b3647e6..6c001498a 100644
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css
+++ b/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css
@@ -5,33 +5,33 @@
   line-height: normal;
 }
 
-.display[data-styleLevel="1"] {
+.display[data-stylelevel="1"] {
   font-weight: var(--font-weight-heavy);
   font-size: calc(var(--space--54) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
   line-height: 115%; /* 62.1px */
 }
 
-.display[data-styleLevel="2"] {
+.display[data-stylelevel="2"] {
   font-weight: var(--font-weight-heavy);
   font-size: calc(var(--space--51) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
 }
 
-.display[data-styleLevel="3"] {
+.display[data-stylelevel="3"] {
   font-weight: 700;
   font-size: calc(var(--space--38) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
 }
 
-.display[data-styleLevel="4"] {
+.display[data-stylelevel="4"] {
   font-size: calc(var(--space--16) * var(--scaling, 1));
 }
 
-.display[data-styleLevel="5"] {
+.display[data-stylelevel="5"] {
   font-size: calc(var(--space--14) * var(--scaling, 1));
 }
 
-.display[data-styleLevel="6"] {
+.display[data-stylelevel="6"] {
   font-size: calc(var(--space--12) * var(--scaling, 1));
 }
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx b/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
index f7445a367..686a3fab8 100644
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
+++ b/packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
@@ -27,7 +27,7 @@ export interface FrameListItemProps
 }
 
 // TODO: Turn this into the new "attachable window", used for dropdowns etc
-interface FloaterProps extends PrimitiveComponentDefaultProps {
+export interface FrameFloaterProps extends PrimitiveComponentDefaultProps {
   primitiveType: "floater";
 }
 
@@ -47,13 +47,13 @@ export interface FrameDisplayProps
   csLevel: "1" | "2" | "3" | "4" | "5" | "6";
 }
 
-interface TextProps
+export interface FrameTextProps
   extends React.HTMLAttributes<HTMLParagraphElement>,
     PrimitiveComponentDefaultProps {
   primitiveType: "text";
 }
 
-interface PopoverProps
+export interface FramePopoverProps
   extends React.HTMLAttributes<HTMLDivElement>,
     PrimitiveComponentDefaultProps {
   primitiveType: "popover";
@@ -62,7 +62,7 @@ interface PopoverProps
   noWrapper?: boolean;
 }
 
-interface ModalProps
+export interface FrameModalProps
   extends React.HTMLAttributes<HTMLDivElement>,
     PrimitiveComponentDefaultProps {
   primitiveType: "modal";
@@ -92,12 +92,12 @@ export const Frame = React.forwardRef<
   | FrameWindowProps
   | FrameListProps
   | FrameListItemProps
-  | FloaterProps
+  | FrameFloaterProps
   | FrameHeadingProps
   | FrameDisplayProps
-  | TextProps
-  | PopoverProps
-  | ModalProps
+  | FrameTextProps
+  | FramePopoverProps
+  | FrameModalProps
   | FrameIconProps
 >(
   (
@@ -105,12 +105,12 @@ export const Frame = React.forwardRef<
       | FrameWindowProps
       | FrameListProps
       | FrameListItemProps
-      | FloaterProps
+      | FrameFloaterProps
       | FrameHeadingProps
       | FrameDisplayProps
-      | TextProps
-      | PopoverProps
-      | ModalProps
+      | FrameTextProps
+      | FramePopoverProps
+      | FrameModalProps
       | FrameIconProps,
     forwardedRef
   ) => {
@@ -210,7 +210,7 @@ export const Frame = React.forwardRef<
             data-color={csColor}
             data-variant={csVariant}
             data-size={csSize}
-            data-styleLevel={csStyleLevel}
+            data-stylelevel={csStyleLevel}
             ref={fRef}
           >
             {children}
@@ -228,7 +228,7 @@ export const Frame = React.forwardRef<
             data-color={csColor}
             data-variant={csVariant}
             data-size={csSize}
-            data-styleLevel={csStyleLevel}
+            data-stylelevel={csStyleLevel}
             ref={fRef}
           >
             {children}
@@ -246,7 +246,7 @@ export const Frame = React.forwardRef<
             data-color={csColor}
             data-variant={csVariant}
             data-size={csSize}
-            data-styleLevel={csStyleLevel}
+            data-stylelevel={csStyleLevel}
             ref={fRef}
           >
             {children}
@@ -264,7 +264,7 @@ export const Frame = React.forwardRef<
             data-color={csColor}
             data-variant={csVariant}
             data-size={csSize}
-            data-styleLevel={csStyleLevel}
+            data-stylelevel={csStyleLevel}
             ref={fRef}
           >
             {children}
@@ -282,7 +282,7 @@ export const Frame = React.forwardRef<
             data-color={csColor}
             data-variant={csVariant}
             data-size={csSize}
-            data-styleLevel={csStyleLevel}
+            data-stylelevel={csStyleLevel}
             ref={fRef}
           >
             {children}
@@ -300,7 +300,7 @@ export const Frame = React.forwardRef<
             data-color={csColor}
             data-variant={csVariant}
             data-size={csSize}
-            data-styleLevel={csStyleLevel}
+            data-stylelevel={csStyleLevel}
             ref={fRef}
           >
             {children}
@@ -315,7 +315,7 @@ export const Frame = React.forwardRef<
     }
     if (primitiveType === "text") {
       const fRef = forwardedRef as React.ForwardedRef<HTMLParagraphElement>;
-      const textProps = forwardedProps as TextProps;
+      const textProps = forwardedProps as FrameTextProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <p
@@ -341,7 +341,7 @@ export const Frame = React.forwardRef<
         popoverId,
         noWrapper,
         ...strippedForwardedProps
-      } = forwardedProps as PopoverProps;
+      } = forwardedProps as FramePopoverProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <div
@@ -374,7 +374,7 @@ export const Frame = React.forwardRef<
         popoverId,
         noWrapper,
         ...strippedForwardedProps
-      } = forwardedProps as ModalProps;
+      } = forwardedProps as FrameModalProps;
       return (
         <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <div
diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
index c37bf85ef..c2879194d 100644
--- a/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
+++ b/packages/cyberstorm/src/primitiveComponents/Frame/Heading.module.css
@@ -5,30 +5,30 @@
   line-height: normal;
 }
 
-.heading[data-styleLevel="1"] {
+.heading[data-stylelevel="1"] {
   font-weight: var(--font-weight-heavy);
   font-size: var(--space--54);
   font-family: Hubot-Sans, sans-serif;
   line-height: 115%; /* 62.1px */
 }
 
-.heading[data-styleLevel="2"] {
+.heading[data-stylelevel="2"] {
   font-size: var(--space--32);
   line-height: 140%; /* 44.8px */
 }
 
-.heading[data-styleLevel="3"] {
+.heading[data-stylelevel="3"] {
   font-size: var(--space--20);
 }
 
-.heading[data-styleLevel="4"] {
+.heading[data-stylelevel="4"] {
   font-size: var(--space--16);
 }
 
-.heading[data-styleLevel="5"] {
+.heading[data-stylelevel="5"] {
   font-size: var(--space--14);
 }
 
-.heading[data-styleLevel="6"] {
+.heading[data-stylelevel="6"] {
   font-size: var(--space--12);
 }
diff --git a/packages/cyberstorm/src/sharedVariantStyles/ButtonStyles/Button.module.css b/packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
similarity index 100%
rename from packages/cyberstorm/src/sharedVariantStyles/ButtonStyles/Button.module.css
rename to packages/cyberstorm/src/sharedComponentStyles/ButtonStyles/Button.module.css
diff --git a/packages/cyberstorm/src/sharedVariantStyles/TagStyles/Tag.module.css b/packages/cyberstorm/src/sharedComponentStyles/TagStyles/Tag.module.css
similarity index 100%
rename from packages/cyberstorm/src/sharedVariantStyles/TagStyles/Tag.module.css
rename to packages/cyberstorm/src/sharedComponentStyles/TagStyles/Tag.module.css