@soul-refiner/design-system 0.0.14 → 0.0.16

package/src/iconography/StarRating/StarRating.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+
+export interface StarRatingProps {
+  rating: number;
+  width: number;
+  outlines?: boolean;
+  gradient?: boolean;
+}
+
+export const StarRating = ({
+  rating,
+  width,
+  outlines = true,
+  gradient = false,
+}: StarRatingProps) => {
+  var maskWidth = 0;
+  const fillColor = gradient ? "url(#gradient)" : "#D5A806";
+
+  // Kind of a cheap way to skip the mask over the gaps... But it works :)
+  if (rating < 1) {
+    maskWidth = 2 + rating * 25;
+  } else if (rating < 2) {
+    maskWidth = 31.5 + (rating - 1) * 25;
+  } else if (rating < 3) {
+    maskWidth = 61 + (rating - 2) * 25;
+  } else if (rating < 4) {
+    maskWidth = 90.5 + (rating - 3) * 25;
+  } else {
+    maskWidth = 120 + (rating - 4) * 25;
+  }
+
+  return (
+    <svg
+      width={width}
+      height="30"
+      viewBox="0 0 147 30"
+      fill={fillColor}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <mask id="starMask">
+          <path
+            d="M26.3806 10.0509L19.1404 8.99872L15.9039 2.43728C15.8155 2.25763 15.6701 2.1122 15.4904 2.0238C15.0399 1.80138 14.4924 1.98673 14.2671 2.43728L11.0306 8.99872L3.79048 10.0509C3.59087 10.0795 3.40837 10.1736 3.26864 10.3161C3.09972 10.4898 3.00664 10.7233 3.00985 10.9656C3.01305 11.2078 3.11229 11.4388 3.28575 11.6079L8.52407 16.715L7.28649 23.9267C7.25747 24.0944 7.27604 24.2669 7.34008 24.4247C7.40412 24.5824 7.51109 24.7191 7.64884 24.8191C7.78659 24.9192 7.94962 24.9786 8.11943 24.9907C8.28925 25.0028 8.45907 24.9671 8.60962 24.8876L15.0855 21.4829L21.5614 24.8876C21.7382 24.9817 21.9435 25.0131 22.1403 24.9789C22.6365 24.8933 22.9701 24.4228 22.8845 23.9267L21.647 16.715L26.8853 11.6079C27.0279 11.4682 27.122 11.2857 27.1505 11.0861C27.2275 10.587 26.8796 10.1251 26.3806 10.0509Z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M55.5798 10.0509L48.3397 8.99872L45.1031 2.43728C45.0147 2.25763 44.8693 2.1122 44.6897 2.0238C44.2391 1.80138 43.6916 1.98673 43.4663 2.43728L40.2298 8.99872L32.9897 10.0509C32.7901 10.0795 32.6076 10.1736 32.4679 10.3161C32.2989 10.4898 32.2059 10.7233 32.2091 10.9656C32.2123 11.2078 32.3115 11.4388 32.485 11.6079L37.7233 16.715L36.4857 23.9267C36.4567 24.0944 36.4753 24.2669 36.5393 24.4247C36.6033 24.5824 36.7103 24.7191 36.8481 24.8191C36.9858 24.9192 37.1488 24.9786 37.3187 24.9907C37.4885 25.0028 37.6583 24.9671 37.8088 24.8876L44.2847 21.4829L50.7606 24.8876C50.9374 24.9817 51.1427 25.0131 51.3395 24.9789C51.8357 24.8933 52.1693 24.4228 52.0838 23.9267L50.8462 16.715L56.0845 11.6079C56.2271 11.4682 56.3212 11.2857 56.3497 11.0861C56.4267 10.587 56.0788 10.1251 55.5798 10.0509Z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M84.7809 10.0509L77.5408 8.99872L74.3043 2.43728C74.2159 2.25763 74.0705 2.1122 73.8908 2.0238C73.4403 1.80138 72.8928 1.98673 72.6675 2.43728L69.431 8.99872L62.1909 10.0509C61.9913 10.0795 61.8088 10.1736 61.669 10.3161C61.5001 10.4898 61.407 10.7233 61.4102 10.9656C61.4134 11.2078 61.5127 11.4388 61.6861 11.6079L66.9245 16.715L65.6869 23.9267C65.6579 24.0944 65.6764 24.2669 65.7405 24.4247C65.8045 24.5824 65.9115 24.7191 66.0492 24.8191C66.187 24.9192 66.35 24.9786 66.5198 24.9907C66.6896 25.0028 66.8595 24.9671 67.01 24.8876L73.4859 21.4829L79.9618 24.8876C80.1386 24.9817 80.3439 25.0131 80.5407 24.9789C81.0368 24.8933 81.3705 24.4228 81.2849 23.9267L80.0474 16.715L85.2857 11.6079C85.4283 11.4682 85.5224 11.2857 85.5509 11.0861C85.6279 10.587 85.28 10.1251 84.7809 10.0509Z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M113.98 10.0509L106.74 8.99872L103.504 2.43728C103.415 2.25763 103.27 2.1122 103.09 2.0238C102.64 1.80138 102.092 1.98673 101.867 2.43728L98.6302 8.99872L91.3901 10.0509C91.1905 10.0795 91.008 10.1736 90.8683 10.3161C90.6993 10.4898 90.6062 10.7233 90.6095 10.9656C90.6127 11.2078 90.7119 11.4388 90.8854 11.6079L96.1237 16.715L94.8861 23.9267C94.8571 24.0944 94.8756 24.2669 94.9397 24.4247C95.0037 24.5824 95.1107 24.7191 95.2484 24.8191C95.3862 24.9192 95.5492 24.9786 95.719 24.9907C95.8889 25.0028 96.0587 24.9671 96.2092 24.8876L102.685 21.4829L109.161 24.8876C109.338 24.9817 109.543 25.0131 109.74 24.9789C110.236 24.8933 110.57 24.4228 110.484 23.9267L109.247 16.715L114.485 11.6079C114.627 11.4682 114.722 11.2857 114.75 11.0861C114.827 10.587 114.479 10.1251 113.98 10.0509Z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M143.181 10.0588L135.941 9.00653L132.705 2.44509C132.616 2.26544 132.471 2.12001 132.291 2.03161C131.841 1.80919 131.293 1.99454 131.068 2.44509L127.831 9.00653L120.591 10.0588C120.392 10.0873 120.209 10.1814 120.069 10.324C119.901 10.4976 119.807 10.7312 119.811 10.9734C119.814 11.2156 119.913 11.4466 120.087 11.6157L125.325 16.7229L124.087 23.9345C124.058 24.1022 124.077 24.2748 124.141 24.4325C124.205 24.5902 124.312 24.7269 124.45 24.8269C124.587 24.927 124.75 24.9864 124.92 24.9985C125.09 25.0106 125.26 24.9749 125.41 24.8954L131.886 21.4907L138.362 24.8954C138.539 24.9895 138.744 25.0209 138.941 24.9867C139.437 24.9011 139.771 24.4306 139.685 23.9345L138.448 16.7229L143.686 11.6157C143.829 11.476 143.923 11.2935 143.951 11.0939C144.028 10.5949 143.68 10.1329 143.181 10.0588Z"
+            fill="#FFFFFF"
+          />
+        </mask>
+        <linearGradient id="gradient">
+          <stop offset="0%" stopColor="#FFB51F" />
+          <stop offset="100%" stopColor="#FF870A" />
+        </linearGradient>
+      </defs>
+
+      <rect
+        x="0"
+        y="0"
+        height="30"
+        width={maskWidth}
+        fillOpacity="100%"
+        mask="url(#starMask)"
+      />
+      <path
+        d="M26.3806 10.1603L19.1404 9.1081L15.9039 2.54665C15.8155 2.367 15.6701 2.22157 15.4904 2.13317C15.0399 1.91075 14.4924 2.0961 14.2671 2.54665L11.0306 9.1081L3.79048 10.1603C3.59087 10.1888 3.40837 10.2829 3.26864 10.4255C3.09972 10.5991 3.00664 10.8327 3.00985 11.0749C3.01305 11.3172 3.11229 11.5482 3.28575 11.7173L8.52407 16.8244L7.28649 24.036C7.25747 24.2038 7.27604 24.3763 7.34008 24.5341C7.40413 24.6918 7.51109 24.8284 7.64884 24.9285C7.78659 25.0285 7.94962 25.088 8.11943 25.1001C8.28925 25.1122 8.45907 25.0765 8.60962 24.997L15.0855 21.5922L21.5614 24.997C21.7382 25.0911 21.9435 25.1225 22.1403 25.0882C22.6365 25.0027 22.9701 24.5322 22.8845 24.036L21.647 16.8244L26.8853 11.7173C27.0279 11.5775 27.122 11.395 27.1505 11.1954C27.2275 10.6964 26.8796 10.2345 26.3806 10.1603V10.1603ZM19.4427 16.1058L20.4721 22.1027L15.0855 19.2739L9.69892 22.1055L10.7283 16.1087L6.37114 11.8599L12.3936 10.9844L15.0855 5.52939L17.7774 10.9844L23.7999 11.8599L19.4427 16.1058Z"
+        fillOpacity={outlines ? 1 : 0}
+      />
+      <path
+        d="M55.5798 10.1603L48.3397 9.1081L45.1031 2.54665C45.0147 2.367 44.8693 2.22157 44.6897 2.13317C44.2391 1.91075 43.6916 2.0961 43.4663 2.54665L40.2298 9.1081L32.9897 10.1603C32.7901 10.1888 32.6076 10.2829 32.4679 10.4255C32.2989 10.5991 32.2059 10.8327 32.2091 11.0749C32.2123 11.3172 32.3115 11.5482 32.485 11.7173L37.7233 16.8244L36.4857 24.036C36.4567 24.2038 36.4753 24.3763 36.5393 24.5341C36.6033 24.6918 36.7103 24.8284 36.8481 24.9285C36.9858 25.0285 37.1488 25.088 37.3187 25.1001C37.4885 25.1122 37.6583 25.0765 37.8088 24.997L44.2847 21.5922L50.7606 24.997C50.9374 25.0911 51.1427 25.1225 51.3395 25.0882C51.8357 25.0027 52.1693 24.5322 52.0838 24.036L50.8462 16.8244L56.0845 11.7173C56.2271 11.5775 56.3212 11.395 56.3497 11.1954C56.4267 10.6964 56.0788 10.2345 55.5798 10.1603V10.1603ZM48.6419 16.1058L49.6713 22.1027L44.2847 19.2739L38.8981 22.1055L39.9275 16.1087L35.5704 11.8599L41.5929 10.9844L44.2847 5.52939L46.9766 10.9844L52.9991 11.8599L48.6419 16.1058Z"
+        fillOpacity={outlines ? 1 : 0}
+      />
+      <path
+        d="M84.7809 10.1603L77.5408 9.1081L74.3043 2.54665C74.2159 2.367 74.0705 2.22157 73.8908 2.13317C73.4403 1.91075 72.8928 2.0961 72.6675 2.54665L69.431 9.1081L62.1909 10.1603C61.9913 10.1888 61.8088 10.2829 61.669 10.4255C61.5001 10.5991 61.407 10.8327 61.4102 11.0749C61.4134 11.3172 61.5127 11.5482 61.6861 11.7173L66.9245 16.8244L65.6869 24.036C65.6579 24.2038 65.6764 24.3763 65.7405 24.5341C65.8045 24.6918 65.9115 24.8284 66.0492 24.9285C66.187 25.0285 66.35 25.088 66.5198 25.1001C66.6896 25.1122 66.8595 25.0765 67.01 24.997L73.4859 21.5922L79.9618 24.997C80.1386 25.0911 80.3439 25.1225 80.5407 25.0882C81.0368 25.0027 81.3705 24.5322 81.2849 24.036L80.0474 16.8244L85.2857 11.7173C85.4283 11.5775 85.5224 11.395 85.5509 11.1954C85.6279 10.6964 85.28 10.2345 84.7809 10.1603V10.1603ZM77.8431 16.1058L78.8725 22.1027L73.4859 19.2739L68.0993 22.1055L69.1287 16.1087L64.7715 11.8599L70.794 10.9844L73.4859 5.52939L76.1778 10.9844L82.2003 11.8599L77.8431 16.1058Z"
+        fillOpacity={outlines ? 1 : 0}
+      />
+      <path
+        d="M113.98 10.1603L106.74 9.1081L103.504 2.54665C103.415 2.367 103.27 2.22157 103.09 2.13317C102.64 1.91075 102.092 2.0961 101.867 2.54665L98.6302 9.1081L91.3901 10.1603C91.1905 10.1888 91.008 10.2829 90.8683 10.4255C90.6993 10.5991 90.6062 10.8327 90.6095 11.0749C90.6127 11.3172 90.7119 11.5482 90.8854 11.7173L96.1237 16.8244L94.8861 24.036C94.8571 24.2038 94.8756 24.3763 94.9397 24.5341C95.0037 24.6918 95.1107 24.8284 95.2484 24.9285C95.3862 25.0285 95.5492 25.088 95.719 25.1001C95.8889 25.1122 96.0587 25.0765 96.2092 24.997L102.685 21.5922L109.161 24.997C109.338 25.0911 109.543 25.1225 109.74 25.0882C110.236 25.0027 110.57 24.5322 110.484 24.036L109.247 16.8244L114.485 11.7173C114.627 11.5775 114.722 11.395 114.75 11.1954C114.827 10.6964 114.479 10.2345 113.98 10.1603V10.1603ZM107.042 16.1058L108.072 22.1027L102.685 19.2739L97.2985 22.1055L98.3279 16.1087L93.9708 11.8599L99.9933 10.9844L102.685 5.52939L105.377 10.9844L111.4 11.8599L107.042 16.1058Z"
+        fillOpacity={outlines ? 1 : 0}
+      />
+      <path
+        d="M143.181 10.1603L135.941 9.1081L132.705 2.54665C132.616 2.367 132.471 2.22157 132.291 2.13317C131.841 1.91075 131.293 2.0961 131.068 2.54665L127.831 9.1081L120.591 10.1603C120.392 10.1888 120.209 10.2829 120.069 10.4255C119.901 10.5991 119.807 10.8327 119.811 11.0749C119.814 11.3172 119.913 11.5482 120.087 11.7173L125.325 16.8244L124.087 24.036C124.058 24.2038 124.077 24.3763 124.141 24.5341C124.205 24.6918 124.312 24.8284 124.45 24.9285C124.587 25.0285 124.75 25.088 124.92 25.1001C125.09 25.1122 125.26 25.0765 125.41 24.997L131.886 21.5922L138.362 24.997C138.539 25.0911 138.744 25.1225 138.941 25.0882C139.437 25.0027 139.771 24.5322 139.685 24.036L138.448 16.8244L143.686 11.7173C143.829 11.5775 143.923 11.395 143.951 11.1954C144.028 10.6964 143.68 10.2345 143.181 10.1603V10.1603ZM136.243 16.1058L137.273 22.1027L131.886 19.2739L126.5 22.1055L127.529 16.1087L123.172 11.8599L129.194 10.9844L131.886 5.52939L134.578 10.9844L140.601 11.8599L136.243 16.1058Z"
+        fillOpacity={outlines ? 1 : 0}
+      />
+    </svg>
+  );
+};

package/src/iconography/StarRating/index.ts

@@ -0,0 +1 @@
+export { StarRating, type StarRatingProps } from "./StarRating";

package/src/iconography/index.ts

@@ -0,0 +1,5 @@
+export { Avatar, type AvatarProps } from "./Avatar";
+export { ColoredIcon, type ColoredIconProps } from "./ColoredIcon";
+export { DevicePreview, type DevicePreviewProps } from "./DevicePreview";
+export { IconHeader, type IconHeaderProps } from "./IconHeader";
+export { StarRating, type StarRatingProps } from "./StarRating";

package/src/implementations/BodyContent/BodyContent.module.scss

@@ -0,0 +1,38 @@
+@use "@soul-refiner/styles/mixins";
+
+.bodycontent {
+  position: relative;
+  width: 100%;
+
+  [class~="menu-bar"] {
+    box-shadow: 0px 3.75998px 11.28px rgba(0, 0, 0, 0.0503198);
+    border-radius: 8px;
+    margin-bottom: 32px;
+    width: fit-content;
+  }
+
+  [class~="content"] {
+    &[class~="not-editing"] {
+      @include mixins.hover-editable();
+      cursor: pointer;
+    }
+
+    & > h1,
+    & > h2,
+    & > h3,
+    & > p {
+      margin-bottom: 24px;
+      padding-left: 16px;
+      padding-right: 16px;
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+
+    img {
+      margin: 12px 0px 32px;
+      border-radius: 16px;
+      width: 100%;
+    }
+  }
+}

package/src/implementations/BodyContent/BodyContent.tsx

@@ -0,0 +1,78 @@
+// import React from "react";
+// import { Editor } from "../../editor";
+// import bodyContentStyles from "./BodyContent.module.scss";
+// import { Media } from "@soul-refiner/models";
+
+// export interface BodyContentProps {}
+
+// const getContent = () => `
+//   <h1>About Soul Refiner</h1>
+//   <p>At Soul Refiner, we are on a mission to bring inner-healing tools to every church in the world. Our mission is to see the power of God break addictions and heal broken lives.</p>
+//   <h3>Powerful Bible-based training.</h3>
+//   <p>The Church is ground-zero for people who are hurting, broken, and addicted. Soul Refiner is a turn-key ministry that provides you or your church with proven, Bible-based tools and strategies that bring healing and restoration to their lives.</p>
+//   <p>Your small groups will have all the videos, digital tools, and resources necessary to help heal broken hearts and bring lasting change and freedom where there once was no hope.</p>
+//   <img src="./example-course.png" alt="" />
+//   <h3>We strive for excellence.</h3>
+//   <p>We like what we do. We like to dream big. We like to take on big films. We don’t believe in “that’s good enough,” mediocrity or failure. We push each other to be our best. Hopefully our passion comes across in our work.</p>
+// `;
+
+// export const BodyContent = ({}: BodyContentProps) => {
+//   const content = getContent(); // TODO: Get Content from Redux / Network request
+
+//   const handleUploadImage = (event: React.FormEvent) => {
+//     const uploads = (event.target as HTMLInputElement).files;
+//     // TODO: Network request and image processing
+//     return "https://source.unsplash.com/random/1920x1080/?christian";
+//   };
+
+//   const handleVideoUpload = async (event: React.FormEvent) => {
+//     const uploads = (event.target as HTMLInputElement).files;
+//     // TODO: Network request and image processing
+//     return await ({
+//       id: "string",
+//       created: new Date(),
+//       Modified: new Date(),
+//       parentId: "",
+//       title: "New Video",
+//       synopsis: "Video kjlkjsdf",
+//       duration: 123456,
+//       thumbnail: "https://source.unsplash.com/random/1920x1080/?christian",
+//       captions: [
+//         {
+//           id: "captions-1234-asdf-1234",
+//           parent: "vid-1234-asdf-1234",
+//           created: new Date(),
+//           source: "https://www.amazon-bucket-is-here.com",
+//           language: "English",
+//         },
+//       ],
+//       source: "https://source.unsplash.com/random/1920x1080/?christian",
+//       sample: "https://source.unsplash.com/random/1920x1080/?christian",
+//       status: "draft",
+//     } as Media);
+//   };
+
+//   return (
+//     <div className={bodyContentStyles.bodycontent}>
+//       <Editor
+//         editing={true}
+//         alignment
+//         bold
+//         editCaption="Edit Course Content"
+//         history
+//         image
+//         indent
+//         initialContent={content}
+//         italic
+//         link
+//         onImageUpload={handleUploadImage}
+//         onVideoUpload={handleVideoUpload}
+//         orderedList
+//         underline
+//         unorderedList
+//         video
+//       />
+//     </div>
+//   );
+// };
+export {};

package/src/implementations/BodyContent/index.ts

@@ -0,0 +1,2 @@
+// export { BodyContent, type BodyContentProps } from "./BodyContent";
+export {}

package/src/implementations/JoinGroupModal/JoinGroupModal.module.scss

@@ -0,0 +1,83 @@
+@use "@soul-refiner/styles/_mixins";
+
+.header {
+  @include mixins.flex($gap: 32px, $align: center);
+  h5 {
+    color: var(--colorify-blue-3);
+  }
+}
+
+.content {
+  @include mixins.flex($dir: column, $gap: 16px);
+  max-height: 460px;
+  width: 484px;
+  margin-top: 16px;
+  padding: 4px 35px 20px 30px;
+  overflow-y: scroll;
+
+  &[class~="warning"] {
+    overflow-y: auto;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  [class~="pending-box"] {
+    padding: 16px;
+    border-radius: var(--border-radius-small);
+    background-color: var(--color-grey-9);
+    & > h6 {
+      margin-bottom: 8px;
+    }
+  }
+
+  ol {
+    list-style-type: revert;
+    padding: 0px 0px 0px 20px;
+    li {
+      padding-left: 18px;
+      margin-bottom: 16px;
+      &:last-of-type {
+        margin-bottom: 0px;
+      }
+      [class~="rule-title"] {
+        @include mixins.font(400, 15px, 20px);
+        color: var(--color-grey-0);
+      }
+      [class~="rule-explanation"] {
+        @include mixins.font(400, 13px, 16px);
+        color: var(--color-grey-4);
+      }
+    }
+  }
+
+  [class~="agreement"] {
+    @include mixins.flex($justify: space-between, $align: center);
+    width: 100%;
+    padding: 20px 16px;
+    border-radius: var(--border-radius-small);
+    cursor: pointer;
+    user-select: none;
+    &[class~="active"] {
+      background-color: var(--color-grey-9);
+    }
+    & > p {
+      @include mixins.font(600, 16px, 22px);
+      color: var(--color-grey-4);
+    }
+  }
+
+  &::-webkit-scrollbar {
+    height: calc(100% - 20px);
+    margin-bottom: 20px;
+  }
+  &::-webkit-scrollbar-thumb {
+    margin-bottom: 20px;
+  }
+  &::-webkit-scrollbar-track {
+    margin-bottom: 20px;
+  }
+}
+
+.footer {
+  @include mixins.flex($gap: 16px);
+}

package/src/implementations/JoinGroupModal/JoinGroupModal.tsx

@@ -0,0 +1,176 @@
+import React from "react";
+import { Button } from "../../actions";
+import { CircleQuestion, CloseThin } from "@soul-refiner/icons/src";
+import { RadioInput } from "../../inputs";
+import { Modal } from "../../surfaces";
+import styles from "./JoinGroupModal.module.scss";
+
+export interface JoinGroupModalProps {
+  onSubmit: () => void;
+  rules: {
+    title: React.ReactNode;
+    explanation?: React.ReactNode;
+  }[];
+  trigger: React.ReactElement;
+}
+
+export const JoinGroupModal = ({
+  onSubmit,
+  rules,
+  trigger,
+}: JoinGroupModalProps) => {
+  const [warning, setWarning] = React.useState(false);
+  const [disabled, setDisabled] = React.useState(true);
+
+  return (
+    <Modal>
+      <Modal.Trigger>{trigger}</Modal.Trigger>
+      <Modal.Content
+        footer={
+          !warning ? (
+            <div className={styles.footer}>
+              <Button
+                buttonColor="#FFFFFF"
+                color="var(--color-grey-3)"
+                icon={
+                  <CloseThin
+                    fill="var(--color-grey-3)"
+                    iconSize={12}
+                    size={20}
+                  />
+                }
+                onClick={() => setWarning(true)}
+                shape="rectangular"
+                size="large"
+                style={{
+                  flex: 1,
+                  border: "1px solid var(--color-grey-7)",
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                buttonColor="var(--color-blue-3)"
+                color="#FFFFFF"
+                disabled={disabled}
+                onClick={onSubmit}
+                shape="rectangular"
+                size="large"
+                style={{
+                  flex: 1,
+                  border: "1px solid var(--color-grey-7)",
+                }}
+              >
+                Submit
+              </Button>
+            </div>
+          ) : undefined
+        }
+        header={
+          <div className={styles.header}>
+            <CircleQuestion
+              fill="var(--colorify-blue-3)"
+              iconSize={24}
+              size={48}
+              style={{
+                backgroundColor: "var(--colorify-blue-2)",
+                borderRadius: "var(--border-radius-small)",
+              }}
+            />
+            <h5>
+              {!warning ? "Answer Questions" : "Cancel your request to join?"}
+            </h5>
+          </div>
+        }
+      >
+        {!warning && (
+          <div className={`${styles.content}`}>
+            <div className="pending-box">
+              <h6>Your membership is pending approval</h6>
+              <p>
+                Answer these questions from the group admins to help them review
+                your request to join. Only the admins and moderators will see
+                your answers.
+              </p>
+            </div>
+            <div>
+              <h6>Group rules</h6>
+              <p>Group members agree to follow these rules</p>
+            </div>
+            <ol>
+              {rules.map((rule) => (
+                <li key={JSON.stringify(rule)}>
+                  <p className="rule-title">{rule.title}</p>
+                  {rule?.explanation && (
+                    <p className="rule-explanation">{rule?.explanation}</p>
+                  )}
+                </li>
+              ))}
+            </ol>
+            <div
+              className={`agreement ${!disabled ? "active" : ""}`}
+              onClick={() => setDisabled((prev) => !prev)}
+            >
+              <p>I agree to the group rules</p>
+              <RadioInput
+                checked={!disabled}
+                onChange={(_, checked) =>
+                  setDisabled((prev) =>
+                    checked !== undefined ? checked : prev
+                  )
+                }
+              />
+            </div>
+          </div>
+        )}
+        {warning && (
+          <div className={`${styles.content} warning`}>
+            <p>
+              Answering these questions helps the group leaders to review your
+              pending membership. By exiting, your request to join will be
+              canceled.
+            </p>
+            <div
+              style={{
+                display: "flex",
+                width: "100%",
+                marginTop: "8px",
+                gap: "16px",
+              }}
+            >
+              <Button
+                buttonColor="#FFFFFF"
+                color="var(--color-grey-3)"
+                onClick={() => setWarning(false)}
+                shape="rectangular"
+                size="large"
+                style={{
+                  flex: 1,
+                  padding: "14px",
+                  border: "1px solid var(--color-grey-7)",
+                }}
+              >
+                Answer Questions
+              </Button>
+              <Modal.Dismiss>
+                <Button
+                  buttonColor="var(--color-blue-3)"
+                  color="#FFFFFF"
+                  shape="rectangular"
+                  size="large"
+                  style={{
+                    flex: 1,
+                    padding: "14px",
+                    border: "1px solid var(--color-grey-7)",
+                  }}
+                >
+                  Exit
+                </Button>
+              </Modal.Dismiss>
+            </div>
+          </div>
+        )}
+      </Modal.Content>
+    </Modal>
+  );
+};

package/src/implementations/JoinGroupModal/index.ts

@@ -0,0 +1 @@
+export { JoinGroupModal, type JoinGroupModalProps } from "./JoinGroupModal";

package/src/implementations/index.ts

@@ -0,0 +1,2 @@
+// export { BodyContent, type BodyContentProps } from "./BodyContent";
+export { JoinGroupModal, type JoinGroupModalProps } from "./JoinGroupModal";

package/src/index.ts

@@ -0,0 +1,86 @@
+import React from "react";
+export {
+  Button,
+  Dropdown,
+  Dropzone,
+  Rate,
+  Switch,
+} from "./actions";
+
+export {
+  CourseCard,
+  EpisodeCard,
+  FeatureCard,
+} from "./cards";
+
+export {
+  Bar,
+  Line,
+  Pie,
+} from "./data";
+
+export { 
+  Editor,
+} from "./editor";
+
+export {
+  Chip,
+  Loader,
+  ProgressBar,
+  Toast,
+  Tooltip,
+} from "./feedback";
+
+export {
+  Avatar,
+  ColoredIcon,
+  DevicePreview,
+  IconHeader,
+  StarRating,
+} from "./iconography";
+
+export {
+  JoinGroupModal,
+} from "./implementations";
+
+export {
+  CalendarInput,
+  CheckboxInput, 
+  FeedInput,
+  InboxInput,
+  PostInput,
+  RadioInput,
+  SearchInput,
+  SelectInput,
+  TagInput,
+  TextInput,
+} from "./inputs";
+
+export { ContactDetails } from "./lists";
+
+export {
+  Breadcrumbs,
+  EditorBar,
+  Drawer,
+  MenuTabs,
+  Navigation,
+  SubNavigation,
+  Pagination,
+} from "./navigation";
+
+export {
+  Comment,
+  Faq,
+  Message,
+  Modal,
+  Plan,
+  Post,
+  ProfileHeader,
+  RatingsOverview,
+  Review,
+} from "./surfaces";
+
+export {
+  Filter,
+  Table
+} from "./tables";

package/src/inputs/CalendarInput/CalendarInput.module.scss

@@ -0,0 +1,38 @@
+.calendar {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    place-items: center;
+    
+    [class~=icon] svg {
+        fill: var(--color-grey-3);
+    }
+
+    input[type=date] {
+        resize: none;
+        border: 1px solid var(--color-grey-9);
+        border-radius: 16px;
+        background-color: var(--color-grey-10);
+        box-sizing: border-box;
+        padding: 10px 20px;
+        font-size: 16px;
+        line-height: 24px;
+        color: var(--color-grey-1);
+        overflow-y: hidden;
+
+        &::-webkit-datetime-edit-day-field:focus,
+        &::-webkit-datetime-edit-month-field:focus,
+        &::-webkit-datetime-edit-year-field:focus {
+            background-color: transparent;
+            color: var(--color-grey-3);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &::placeholder {
+            color: var(--color-grey-7);
+        }
+    }
+}

package/src/inputs/CalendarInput/CalendarInput.spec.js

@@ -0,0 +1,19 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { CalendarInput } from "./CalendarInput";
+
+const generateMockProps = props => ({
+  ...props,
+});
+
+describe("Calendar Input", () => {
+  it("selects the date", () => {
+    const props = generateMockProps({});
+    render(<CalendarInput {...props} />);
+    const input = screen.getByTestId("calendar-input");
+    fireEvent.click(input);
+    fireEvent.change(input, { target: { value: "2022-09-23" } })
+  });
+});

package/src/inputs/CalendarInput/CalendarInput.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import calendarStyles from "./CalendarInput.module.scss";
+import { Calendar } from "@soul-refiner/icons/src";
+
+export interface CalendarInputProps extends React.HTMLProps<HTMLInputElement> {
+  icon?: boolean;
+}
+
+export const CalendarInput = ({ icon = true, ...rest }: CalendarInputProps) => {
+  const ref = React.useRef<HTMLInputElement>(null);
+  const handleWrapperClick = () => {
+    if (ref?.current && (ref.current as any)?.showPicker) {
+      (ref.current as any).showPicker();
+    }
+  };
+
+  return (
+    <label className={calendarStyles.calendar} onClick={handleWrapperClick}>
+      {icon && <Calendar />}
+      <input
+        {...rest}
+        data-testid="calendar-input"
+        type="date"
+        data-form-type="other"
+        ref={ref}
+      />
+    </label>
+  );
+};

package/src/inputs/CalendarInput/index.ts

@@ -0,0 +1 @@
+export { CalendarInput, type CalendarInputProps } from "./CalendarInput";