@yakad/ui 1.0.0 → 1.0.2

package/src/main/main.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
+    navOpen?: boolean;
+}
+declare function Main(props: MainProps): JSX.Element;
+export default Main;

package/src/main/main.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./main.module.css";
+function Main(props) {
+    const navOpenClass = props.navOpen ? styles.navOpen : "";
+    const joinedClassNames = joinClassNames(styles.main, navOpenClass, props.className);
+    return (React.createElement("main", { ...props, className: joinedClassNames }, props.children));
+}
+export default Main;
+//# sourceMappingURL=main.js.map

package/src/main/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,SAAS,IAAI,CAAC,KAAgB;IAC5B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzD,MAAM,gBAAgB,GAAG,cAAc,CACrC,MAAM,CAAC,IAAI,EACX,YAAY,EACZ,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,iCAAU,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACzC,KAAK,CAAC,QAAQ,CACV,CACR,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}

package/{main → src/main}/main.module.css

@@ -1,19 +1,19 @@
-.main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-self: flex-end;
-    box-sizing: border-box;
-    width: 100%;
-    transition: width 0.3s;
-}
-
-.navOpen {
-    width: calc(100% - 22rem);
-}
-
-@media screen and (max-width: 1000px) {
-    .navOpen {
-        width: 100%;
-    }
-}
+.main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+    transition: width 0.3s;
+}
+
+.navOpen {
+    width: calc(100% - 22rem);
+}
+
+@media screen and (max-width: 1000px) {
+    .navOpen {
+        width: 100%;
+    }
+}

package/src/main/main.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./main.module.css";
+
+interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
+  navOpen?: boolean;
+}
+
+function Main(props: MainProps) {
+  const navOpenClass = props.navOpen ? styles.navOpen : "";
+
+  const joinedClassNames = joinClassNames(
+    styles.main,
+    navOpenClass,
+    props.className!
+  );
+
+  return (
+    <main {...props} className={joinedClassNames}>
+      {props.children}
+    </main>
+  );
+}
+
+export default Main;

package/src/navigation/navigation.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+    anchor?: "left" | "right" | "top" | "bottom" | "auto";
+    open: boolean;
+}
+declare function Navigation(props: NavigationProps): JSX.Element;
+export default Navigation;

package/src/navigation/navigation.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./navigation.module.css";
+function Navigation(props) {
+    const joinedClassNames = joinClassNames(styles.navigation, props.anchor ? styles[props.anchor] : styles.auto, props.open ? styles.open : "");
+    return (React.createElement("nav", { ...props, className: joinedClassNames }, props.children));
+}
+export default Navigation;
+//# sourceMappingURL=navigation.js.map

package/src/navigation/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAO7C,SAAS,UAAU,CAAC,KAAsB;IACxC,MAAM,gBAAgB,GAAG,cAAc,CACrC,MAAM,CAAC,UAAU,EACjB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EACjD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAC9B,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC"}

package/{navigation → src/navigation}/navigation.module.css

@@ -1,56 +1,56 @@
-.navigation {
-    position: fixed;
-    max-width: 100%;
-    transition: transform 0.3s;
-    background: var(--backgroundColor);
-    overflow-y: auto;
-}
-
-.auto,
-.left {
-    top: 5.1rem;
-    left: 0;
-    width: 21.9rem;
-    height: calc(100% - 5.1rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid #7d7d7d40;
-    transform: translate(-100%, 0);
-}
-[dir="rtl"] .auto,
-.right {
-    right: 0;
-    top: 5.1rem;
-    width: 21.9rem;
-    height: calc(100% - 5.1rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid #7d7d7d40;
-    transform: translate(100%, 0);
-}
-
-.top {
-    top: 0;
-    width: 100%;
-    height: auto;
-    border-bottom: 0.2rem solid #7d7d7d40;
-    transform: translate(0, -100%);
-}
-.bottom {
-    bottom: 0;
-    width: 100%;
-    height: auto;
-    border-top: 0.2rem solid #7d7d7d40;
-    transform: translate(0, 100%);
-}
-
-.open {
-    transform: translate(0, 0);
-}
-
-@media screen and (max-width: 1000px) {
-    .auto,
-    .left,
-    .right {
-        top: 0;
-        height: 100%;
-    }
-}
+.navigation {
+    position: fixed;
+    max-width: 100%;
+    transition: transform 0.3s;
+    background: var(--backgroundColor);
+    overflow-y: auto;
+}
+
+.auto,
+.left {
+    top: 5.1rem;
+    left: 0;
+    width: 21.9rem;
+    height: calc(100% - 5.1rem);
+    max-height: 100%;
+    border-inline-end: 0.2rem solid #7d7d7d40;
+    transform: translate(-100%, 0);
+}
+[dir="rtl"] .auto,
+.right {
+    right: 0;
+    top: 5.1rem;
+    width: 21.9rem;
+    height: calc(100% - 5.1rem);
+    max-height: 100%;
+    border-inline-end: 0.2rem solid #7d7d7d40;
+    transform: translate(100%, 0);
+}
+
+.top {
+    top: 0;
+    width: 100%;
+    height: auto;
+    border-bottom: 0.2rem solid #7d7d7d40;
+    transform: translate(0, -100%);
+}
+.bottom {
+    bottom: 0;
+    width: 100%;
+    height: auto;
+    border-top: 0.2rem solid #7d7d7d40;
+    transform: translate(0, 100%);
+}
+
+.open {
+    transform: translate(0, 0);
+}
+
+@media screen and (max-width: 1000px) {
+    .auto,
+    .left,
+    .right {
+        top: 0;
+        height: 100%;
+    }
+}

package/src/navigation/navigation.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./navigation.module.css";
+
+interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+  anchor?: "left" | "right" | "top" | "bottom" | "auto";
+  open: boolean;
+}
+
+function Navigation(props: NavigationProps) {
+  const joinedClassNames = joinClassNames(
+    styles.navigation,
+    props.anchor ? styles[props.anchor] : styles.auto,
+    props.open ? styles.open : ""
+  );
+
+  return (
+    <nav {...props} className={joinedClassNames}>
+      {props.children}
+    </nav>
+  );
+}
+
+export default Navigation;

package/src/page/page.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Page(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export default Page;

package/src/page/page.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./page.module.css";
+function Page(props) {
+    const joinedClassNames = joinClassNames(styles.page, props.className);
+    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
+}
+export default Page;
+//# sourceMappingURL=page.js.map

package/src/page/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,SAAS,IAAI,CAAC,KAA2C;IACvD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEvE,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,IAAI,CAAC"}

package/{page → src/page}/page.module.css

@@ -1,9 +1,9 @@
-.page {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    width: 100%;
-    background: var(--backgroundColor);
-    color: var(--onBackgroundColor);
-    fill: var(--onBackgroundColor);
-}
+.page {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    background: var(--backgroundColor);
+    color: var(--onBackgroundColor);
+    fill: var(--onBackgroundColor);
+}

package/src/page/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./page.module.css";
+
+function Page(props: React.HTMLAttributes<HTMLDivElement>) {
+  const joinedClassNames = joinClassNames(styles.page, props.className!);
+
+  return (
+    <div {...props} className={joinedClassNames}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Page;

package/src/row/row.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Row(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export default Row;

package/src/row/row.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./row.module.css";
+function Row(props) {
+    const joinedClassNames = joinClassNames(styles.row, props.className);
+    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
+}
+export default Row;
+//# sourceMappingURL=row.js.map

package/src/row/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,SAAS,GAAG,CAAC,KAA2C;IACtD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEtE,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}

package/{row → src/row}/row.module.css

@@ -1,7 +1,7 @@
-.row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 1.5rem;
-    box-sizing: border-box;
-}
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+    box-sizing: border-box;
+}

package/src/row/row.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./row.module.css";
+
+function Row(props: React.HTMLAttributes<HTMLDivElement>) {
+  const joinedClassNames = joinClassNames(styles.row, props.className!);
+
+  return (
+    <div {...props} className={joinedClassNames}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Row;

package/src/spacer/spacer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Spacer(): JSX.Element;
+export default Spacer;

package/src/spacer/spacer.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./spacer.module.css";
+function Spacer() {
+    return React.createElement("div", { className: styles.spacer });
+}
+export default Spacer;
+//# sourceMappingURL=spacer.js.map

package/src/spacer/spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,SAAS,MAAM;IACX,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,GAAQ,CAAC;AACjD,CAAC;AAED,eAAe,MAAM,CAAC"}

package/{spacer → src/spacer}/spacer.module.css

@@ -1,5 +1,5 @@
-.spacer {
-    width: 0;
-    height: 100%;
-    margin: auto;
-}
+.spacer {
+    width: 0;
+    height: 100%;
+    margin: auto;
+}

package/{spacer → src/spacer}/spacer.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import styles from "./spacer.module.css";
-
-function Spacer() {
-    return <div className={styles.spacer}></div>;
-}
-
-export default Spacer;
+import React from "react";
+import styles from "./spacer.module.css";
+
+function Spacer() {
+    return <div className={styles.spacer}></div>;
+}
+
+export default Spacer;

package/src/stack/stack.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare function Stack(props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export default Stack;

package/src/stack/stack.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { joinClassNames } from "@yakad/lib";
+import styles from "./stack.module.css";
+function Stack(props) {
+    const joinedClassNames = joinClassNames(styles.stack, props.className);
+    return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
+}
+export default Stack;
+//# sourceMappingURL=stack.js.map

package/src/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,SAAS,KAAK,CAAC,KAA2C;IACxD,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC"}

package/{stack → src/stack}/stack.module.css

@@ -1,6 +1,6 @@
-.stack {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    box-sizing: border-box;
-}
+.stack {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    box-sizing: border-box;
+}

package/src/stack/stack.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./stack.module.css";
+
+function Stack(props: React.HTMLAttributes<HTMLDivElement>) {
+  const joinedClassNames = joinClassNames(styles.stack, props.className!);
+
+  return (
+    <div {...props} className={joinedClassNames}>
+      {props.children}
+    </div>
+  );
+}
+
+export default Stack;

package/src/svgIcon/svgIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface SvgIconProps extends React.HTMLAttributes<HTMLElement> {
+    size?: number;
+}
+declare function SvgIcon(props: SvgIconProps): JSX.Element;
+export default SvgIcon;

package/src/svgIcon/svgIcon.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./svgIcon.module.css";
+function SvgIcon(props) {
+    const joinedClassNames = joinClassNames(styles.svg, props.className);
+    const joinedStyles = joinStyles(props.size
+        ? { width: props.size + "rem", height: props.size + "rem" }
+        : { width: "2.4rem", height: "2.4rem" }, props.style);
+    return (React.createElement("div", { ...props, className: joinedClassNames, style: joinedStyles }, props.children));
+}
+export default SvgIcon;
+//# sourceMappingURL=svgIcon.js.map

package/src/svgIcon/svgIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgIcon.js","sourceRoot":"","sources":["svgIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAM1C,SAAS,OAAO,CAAC,KAAmB;IAClC,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAEtE,MAAM,YAAY,GAAG,UAAU,CAC7B,KAAK,CAAC,IAAI;QACR,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE;QAC3D,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,EACzC,KAAK,CAAC,KAAM,CACb,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,IAC7D,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,OAAO,CAAC"}

package/{svgIcon → src/svgIcon}/svgIcon.module.css

@@ -1,5 +1,5 @@
-.svg svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
+.svg svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

package/src/svgIcon/svgIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./svgIcon.module.css";
+
+interface SvgIconProps extends React.HTMLAttributes<HTMLElement> {
+  size?: number;
+}
+
+function SvgIcon(props: SvgIconProps) {
+  const joinedClassNames = joinClassNames(styles.svg, props.className!);
+
+  const joinedStyles = joinStyles(
+    props.size
+      ? { width: props.size + "rem", height: props.size + "rem" }
+      : { width: "2.4rem", height: "2.4rem" },
+    props.style!
+  );
+
+  return (
+    <div {...props} className={joinedClassNames} style={joinedStyles}>
+      {props.children}
+    </div>
+  );
+}
+
+export default SvgIcon;

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "module": "es2022",
+    "target": "es2022",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true
+  }
+}

package/appBar/appBar.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "library";
-import styles from "./appBar.module.css";
-
-function AppBar(props: React.HTMLAttributes<HTMLElement>) {
-    const joinedClassNames = joinClassNames(styles.header, props.className!);
-
-    return (
-        <header {...props} className={joinedClassNames}>
-            {props.children}
-        </header>
-    );
-}
-
-export default AppBar;

package/button/button.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { joinClassNames } from "library";
-import styles from "./button.module.css";
-import SvgIcon from "ui/svgIcon/svgIcon";
-
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-    variant?: "text" | "outlined" | "filled" | "tonal" | "elevated";
-    size?: "small" | "medium" | "large";
-    borderStyle?: "none" | "semi" | "rounded";
-    icon?: JSX.Element;
-}
-
-interface svgSizeMap {
-    small: number;
-    medium: number;
-    large: number;
-}
-
-const svgSizeMaps: svgSizeMap = {
-    small: 2,
-    medium: 2.4,
-    large: 3,
-};
-
-function Button(props: ButtonProps) {
-    const joinedClassNames = joinClassNames(
-        styles.button,
-        props.variant ? styles[props.variant] : styles.text,
-        props.size ? styles[props.size] : styles.medium,
-        props.borderStyle ? styles[props.borderStyle] : styles.rounded,
-        props.icon && !props.children ? styles.iconButton : "",
-        props.className!
-    );
-
-    return (
-        <button {...props} className={joinedClassNames}>
-            {props.icon ? (
-                <SvgIcon
-                    size={
-                        props.size
-                            ? svgSizeMaps[props.size]
-                            : svgSizeMaps.medium
-                    }
-                >
-                    {props.icon}
-                </SvgIcon>
-            ) : null}
-            {props.children}
-        </button>
-    );
-}
-
-export default Button;

package/card/card.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { joinClassNames } from "library";
-import styles from "./card.module.css";
-
-function Card(props: React.HTMLAttributes<HTMLElement>) {
-    const joinedClassNames = joinClassNames(styles.card, props.className!);
-
-    return (
-        <div {...props} className={joinedClassNames}>
-            {props.children}
-        </div>
-    );
-}
-
-export default Card;

package/container/container.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { joinClassNames, joinStyles } from "library";
-import styles from "./container.module.css";
-
-type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
-
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    maxWidth?: ScreenSize;
-}
-
-function Container(props: ContainerProps) {
-    const joinedClassNames = joinClassNames(
-        props.maxWidth ? styles[props.maxWidth] : "",
-        styles.container,
-        props.className!
-    );
-
-    return (
-        <div {...props} className={joinedClassNames}>
-            {props.children}
-        </div>
-    );
-}
-
-export default Container;