@hellobetterdigitalnz/betterui 0.0.1 → 0.0.2-2

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hellobetterdigitalnz/betterui",
-  "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2-2",
   "type": "module",
+  "typings": "dist/export.d.ts",
+  "types": "dist/export.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
@@ -15,7 +16,9 @@
     "@floating-ui/react": "^0.26.4",
     "classnames": "^2.4.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vite-tsconfig-paths": "^4.2.3"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.6.5",
@@ -43,6 +46,8 @@
     "vite": "^5.0.0"
   },
   "files": [
+    "dist/",
     "src/"
-  ]
+  ],
+  "packageManager": "yarn@4.0.2"
 }

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { BannerCard } from './BannerCard.tsx';
+import BannerCard  from './BannerCard.tsx';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.tsx

@@ -2,7 +2,7 @@ import BannerCardInterface from "./BannerCardInterface.tsx";
 import './banner-card.scss'
 import Button from "../../../Form/Button/Button";
 
-export const BannerCard = (props: BannerCardInterface) => {
+const BannerCard = (props: BannerCardInterface) => {
   const {
     title,
     btnTitle,
@@ -45,3 +45,5 @@ export const BannerCard = (props: BannerCardInterface) => {
     </div>
   );
 };
+
+export default BannerCard;

package/src/Components/DataDisplay/Media/Media.tsx

@@ -1,47 +1,47 @@
-import MediaProps from "./MediaProps.tsx";
-import styles from "./media.module.scss";
-
-const Media = ({ type, videoSrc, imageSrc }: MediaProps) => {
-  const isImageString = typeof imageSrc === "string";
-
-  return (
-    <>
-      {type === "image" && (
-        <>
-          {isImageString ? (
-            <img
-              src={imageSrc}
-              alt={"media image"}
-              className={styles.mediaImage}
-            />
-          ) : (
-            <div className={styles.mediaImage}>{imageSrc}</div>
-          )}
-        </>
-      )}
-      {type === "video" && (
-        <div className="video-container">
-          <div className="custom-play-button">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="64"
-              height="64"
-              viewBox="0 0 64 64"
-            >
-              <path
-                fill="#fff"
-                d="M32 2C16.536 2 4 14.536 4 30s12.536 28 28 28 28-12.536 28-28S47.464 2 32 2zm13.898 32.111L20 50V14l25.898 15.889z"
-              />
-            </svg>
-          </div>
-          <video controls className="custom-video">
-            <source src={videoSrc} type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Media;
+import MediaProps from "./MediaProps.tsx";
+import styles from "./media.module.scss";
+
+const Media = ({ type, videoSrc, imageSrc }: MediaProps) => {
+  const isImageString = typeof imageSrc === "string";
+
+  return (
+    <>
+      {type === "image" && (
+        <>
+          {isImageString ? (
+            <img
+              src={imageSrc}
+              alt={"media image"}
+              className={styles.mediaImage}
+            />
+          ) : (
+            <div className={styles.mediaImage}>{imageSrc}</div>
+          )}
+        </>
+      )}
+      {type === "video" && (
+        <div className="video-container">
+          <div className="custom-play-button">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="64"
+              height="64"
+              viewBox="0 0 64 64"
+            >
+              <path
+                fill="#fff"
+                d="M32 2C16.536 2 4 14.536 4 30s12.536 28 28 28 28-12.536 28-28S47.464 2 32 2zm13.898 32.111L20 50V14l25.898 15.889z"
+              />
+            </svg>
+          </div>
+          <video controls className="custom-video">
+            <source src={videoSrc} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Media;

package/src/Components/DataDisplay/Media/MediaProps.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
-
-interface MediaProps {
-  type?: "image" | "video";
-  videoSrc?: string;
-  imageSrc: string | ReactNode;
-}
-
-export default MediaProps;
+import { ReactNode } from "react";
+
+interface MediaProps {
+  type?: "image" | "video";
+  videoSrc?: string;
+  imageSrc: string | ReactNode;
+}
+
+export default MediaProps;

package/src/Components/DataDisplay/NotificationsBell/NotificationsBellProps.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
-
-interface NotificationsBellProps {
-  children?: ReactNode;
-  extraClass?: string;
-  active?:boolean;
-}
-
-export default NotificationsBellProps;
+import { ReactNode } from "react";
+
+interface NotificationsBellProps {
+  children?: ReactNode;
+  extraClass?: string;
+  active?:boolean;
+}
+
+export default NotificationsBellProps;

package/src/Components/DataDisplay/export.ts

@@ -0,0 +1,14 @@
+export { default as Accordion } from './Accordion/Accordion';
+export type { default as AccordionProps } from './Accordion/AccordionProps';
+export { default as AccordionContext } from './Accordion/AccordionContext';
+export type { default as AccordionContextInterface } from './Accordion/AccordionContextInterface';
+export { default as AccordionItem } from './Accordion/AccordionItem';
+export type { default as AccordionItemProps } from './Accordion/AccordionItemProps';
+export { default as AccordionProvider } from './Accordion/AccordionProvider';
+export type { default as AccordionProviderInterface } from './Accordion/AccordionProviderInterface';
+
+export { default as Badge } from './Badge/Badge';
+export type { default as BadgeProps } from './Badge/BadgeProps';
+
+export { default as BannerCard } from './Cards/BannerCard/BannerCard';
+export type  { default as BannerCardInterface } from './Cards/BannerCard/BannerCardInterface';

package/src/Components/Form/Button/Button.stories.tsx

@@ -29,6 +29,9 @@ export const Primary: Story = {
 export const Secondary: Story = {
   args: {
     label: "Button Text",
+    style: "hollow",
+    size: "default",
+    scheme: "secondary",
   },
 };
 

package/src/Components/Form/Button/Button.tsx

@@ -9,9 +9,9 @@ const Button = (props: ButtonProps) => {
   const {
     type = "button",
     size = "default",
-    style,
+    style = "solid",
     disabled = false,
-    scheme,
+    scheme = "primary",
     label,
     primaryIcon,
     secondaryIcon,

package/src/Components/Form/FormFieldHolder/FormFieldHolder.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react";
+import FormFieldHolder from "./FormFieldHolder";
+import TextField from "../TextField/TextField";
+
+const meta: Meta = {
+  title: "Form / FormFieldHolder",
+  component: FormFieldHolder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const FormFieldHolderTemplate: Story = {
+  render: () => {
+    return (
+      <FormFieldHolder label="Name" description={"helper text"}>
+        <TextField placeholder="Placeholder" />
+      </FormFieldHolder>
+    );
+  },
+};
+
+export const FormFieldHolderComponent = {
+  ...FormFieldHolderTemplate,
+};

package/src/Components/Form/FormFieldHolder/FormFieldHolder.tsx

@@ -1,5 +1,40 @@
-const FormFieldHolder = () => {
+import WarningCircle from "../../Icons/SecurityAndWarnings/WarningCircle/WarningCircle";
+import FormFieldHolderProps from "./FormFieldHolderProps";
+import styles from "./formHolder.module.scss";
 
-}
+const FormFieldHolder = (props: FormFieldHolderProps) => {
+  const { label, description, extraClass = "", children, error } = props;
+
+  return (
+    <div
+      className={`field-holder ${extraClass} ${styles.holder} ${
+        error ? styles.holderError : ""
+      }`}
+    >
+      {!!label && (
+        <div className={styles.label}>
+          <label>{label}</label>
+        </div>
+      )}
+      <div className={styles.field}>{children}</div>
+
+      {!!description && (
+        <div className={styles.description}>
+          <>
+            {error && (
+              <div className={styles.helperIcon}>
+                <WarningCircle />
+              </div>
+            )}
+          </>
+          <>
+            {typeof description === "string" && <p>{description}</p>}
+            {typeof description !== "string" && { description }}
+          </>
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default FormFieldHolder;

package/src/Components/Form/FormFieldHolder/FormFieldHolderProps.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+interface FormFieldHolderProps {
+  label?: string;
+  description?: string | ReactNode;
+  extraClass?: string;
+  error?: boolean;
+  children: ReactNode;
+  icon?: ReactNode;
+}
+
+export default FormFieldHolderProps;

package/src/Components/Form/FormFieldHolder/formHolder.module.scss

@@ -0,0 +1,56 @@
+.holder {
+  margin-bottom: calc(var(--space-unit) * 5);
+  width: 100%;
+}
+
+.label {
+  display: block;
+  margin-bottom: calc(var(--space-unit) * 3);
+
+  label {
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-label);
+    font-weight: var(--font-weight-label);
+  }
+
+  .holderError & {
+    color: var(--color-error);
+  }
+}
+
+.field {
+  .holderError & {
+    color: var(--color-error);
+  }
+}
+
+.description {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+  padding-top: calc(var(--space-unit) * 2);
+  color: var(--color-description);
+
+  p {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    font-weight: var(--font-weight-body-sm);
+  }
+
+  .helperIcon {
+    margin-right: var(--space-unit);
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .holderError & {
+    color: var(--color-error);
+  }
+}

package/src/Components/Form/export.ts

@@ -0,0 +1,8 @@
+export type { default as InputProps } from './InputProps';
+export { default as Button } from './Button/Button';
+export type { default as ButtonProps } from './Button/ButtonProps';
+export { default as Checkbox } from './Checkbox/Checkbox';
+export type { default as CheckboxProps } from './Checkbox/CheckboxProps';
+// export { default as CheckboxSelect } from './CheckboxSelect/CheckboxSelect';
+// export { default as CheckboxSelectItem } from './CheckboxSelect/CheckboxSelectItem';
+

package/src/Components/Icons/Brand/WindowLogo/WindowLogo.tsx

@@ -0,0 +1,105 @@
+import IconProps from "../../IconProps";
+
+const WindowLogo = ({ type = "light" }: IconProps) => {
+  if (type === "thin") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M27 17.5H17C16.8674 17.5 16.7402 17.5527 16.6464 17.6465C16.5527 17.7402 16.5 17.8674 16.5 18V25.1813C16.4998 25.2984 16.5408 25.4118 16.6157 25.5018C16.6907 25.5918 16.7948 25.6527 16.91 25.6738L26.91 27.4925C26.9397 27.4975 26.9698 27.5 27 27.5C27.117 27.4999 27.2302 27.4588 27.32 27.3838C27.3763 27.3369 27.4216 27.2782 27.4527 27.2119C27.4838 27.1456 27.4999 27.0733 27.5 27V18C27.5 17.8674 27.4473 17.7402 27.3536 17.6465C27.2598 17.5527 27.1326 17.5 27 17.5ZM26.5 26.4013L17.5 24.765V18.5H26.5V26.4013ZM13 17.5H5C4.86739 17.5 4.74022 17.5527 4.64645 17.6465C4.55268 17.7402 4.5 17.8674 4.5 18V23C4.49984 23.1171 4.5408 23.2306 4.61573 23.3206C4.69066 23.4106 4.7948 23.4714 4.91 23.4925L12.91 24.9463C12.9396 24.9523 12.9698 24.9552 13 24.955C13.1326 24.955 13.2598 24.9023 13.3536 24.8086C13.4473 24.7148 13.5 24.5876 13.5 24.455V18C13.5 17.8674 13.4473 17.7402 13.3536 17.6465C13.2598 17.5527 13.1326 17.5 13 17.5ZM12.5 23.855L5.5 22.5825V18.5H12.5V23.855ZM27.32 4.61626C27.2638 4.56919 27.198 4.53505 27.1271 4.51625C27.0563 4.49746 26.9821 4.49448 26.91 4.50751L16.91 6.32626C16.7948 6.34734 16.6907 6.40819 16.6157 6.49819C16.5408 6.5882 16.4998 6.70165 16.5 6.81876V14C16.5 14.1326 16.5527 14.2598 16.6464 14.3536C16.7402 14.4473 16.8674 14.5 17 14.5H27C27.1326 14.5 27.2598 14.4473 27.3536 14.3536C27.4473 14.2598 27.5 14.1326 27.5 14V5.00001C27.4999 4.92677 27.4838 4.85443 27.4527 4.78812C27.4216 4.72181 27.3763 4.66314 27.32 4.61626ZM26.5 13.5H17.5V7.23501L26.5 5.59876V13.5ZM12.91 7.05376L4.91 8.50751C4.7948 8.52859 4.69066 8.58944 4.61573 8.67944C4.5408 8.76945 4.49984 8.8829 4.5 9.00001V14C4.5 14.1326 4.55268 14.2598 4.64645 14.3536C4.74022 14.4473 4.86739 14.5 5 14.5H13C13.1326 14.5 13.2598 14.4473 13.3536 14.3536C13.4473 14.2598 13.5 14.1326 13.5 14V7.54501C13.4999 7.47178 13.4837 7.39945 13.4526 7.33316C13.4215 7.26686 13.3762 7.20821 13.3199 7.16135C13.2637 7.11449 13.1978 7.08057 13.1269 7.06197C13.0561 7.04338 12.982 7.04058 12.91 7.05376ZM12.5 13.5H5.5V9.41751L12.5 8.14501V13.5Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "regular") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M27 17H17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18V25.1813C15.9997 25.4157 16.0818 25.6427 16.2319 25.8227C16.382 26.0028 16.5906 26.1244 16.8213 26.1663L26.8213 27.9838C26.8802 27.9948 26.94 28.0002 27 28C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8946 27.5196 28 27.2652 28 27V18C28 17.7348 27.8946 17.4804 27.7071 17.2929C27.5196 17.1054 27.2652 17 27 17ZM26 25.8013L18 24.3475V19H26V25.8013ZM13 17H5C4.73478 17 4.48043 17.1054 4.29289 17.2929C4.10536 17.4804 4 17.7348 4 18V23C4.00003 23.2342 4.08226 23.4609 4.23234 23.6407C4.38242 23.8205 4.59083 23.9419 4.82125 23.9838L12.8212 25.4388C12.8803 25.4492 12.9401 25.4546 13 25.455C13.2652 25.455 13.5196 25.3496 13.7071 25.1621C13.8946 24.9746 14 24.7202 14 24.455V18C14 17.7348 13.8946 17.4804 13.7071 17.2929C13.5196 17.1054 13.2652 17 13 17ZM12 23.2563L6 22.165V19H12V23.2563ZM27.6413 4.2325C27.5288 4.13858 27.397 4.07052 27.2553 4.03315C27.1136 3.99578 26.9654 3.99001 26.8213 4.01625L16.8213 5.835C16.5908 5.87686 16.3824 5.99827 16.2323 6.17804C16.0823 6.35782 16 6.58457 16 6.81875V14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15H27C27.2652 15 27.5196 14.8946 27.7071 14.7071C27.8946 14.5196 28 14.2652 28 14V5C28 4.85361 27.9679 4.709 27.9059 4.57638C27.8439 4.44377 27.7536 4.32638 27.6413 4.2325ZM26 13H18V7.6525L26 6.19875V13ZM13.6412 6.7775C13.5288 6.68358 13.397 6.61552 13.2553 6.57815C13.1136 6.54078 12.9654 6.53501 12.8212 6.56125L4.82125 8.01625C4.59083 8.05811 4.38242 8.17952 4.23234 8.35929C4.08226 8.53907 4.00003 8.76582 4 9V14C4 14.2652 4.10536 14.5196 4.29289 14.7071C4.48043 14.8946 4.73478 15 5 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V7.545C14 7.39861 13.9679 7.254 13.9059 7.12138C13.8439 6.98877 13.7536 6.87138 13.6412 6.7775ZM12 13H6V9.835L12 8.75V13Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "bold") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M13.4613 6.48501C13.2926 6.34401 13.095 6.24182 12.8824 6.18565C12.6699 6.12949 12.4476 6.12074 12.2312 6.16001L4.73125 7.52376C4.38564 7.58671 4.07308 7.76895 3.84807 8.03874C3.62306 8.30852 3.49988 8.64872 3.5 9.00001V13.5C3.5 13.8978 3.65804 14.2794 3.93934 14.5607C4.22064 14.842 4.60218 15 5 15H12.5C12.8978 15 13.2794 14.842 13.5607 14.5607C13.842 14.2794 14 13.8978 14 13.5V7.63626C14 7.41663 13.9517 7.19968 13.8586 7.00075C13.7655 6.80182 13.6299 6.62576 13.4613 6.48501ZM11 12H6.5V10.25L11 9.43251V12ZM27.9613 3.84876C27.7926 3.70776 27.595 3.60557 27.3824 3.5494C27.1699 3.49324 26.9476 3.48449 26.7313 3.52376L17.2313 5.25001C16.8854 5.31299 16.5727 5.49543 16.3477 5.76547C16.1226 6.03551 15.9996 6.376 16 6.72751V13.5C16 13.8978 16.158 14.2794 16.4393 14.5607C16.7206 14.842 17.1022 15 17.5 15H27C27.3978 15 27.7794 14.842 28.0607 14.5607C28.342 14.2794 28.5 13.8978 28.5 13.5V5.00001C28.5 4.78038 28.4517 4.56343 28.3586 4.3645C28.2655 4.16557 28.1299 3.98951 27.9613 3.84876ZM25.5 12H19V7.97876L25.5 6.79751V12ZM12.5 17H5C4.60218 17 4.22064 17.1581 3.93934 17.4394C3.65804 17.7207 3.5 18.1022 3.5 18.5V23C3.49988 23.3513 3.62306 23.6915 3.84807 23.9613C4.07308 24.2311 4.38564 24.4133 4.73125 24.4763L12.2312 25.84C12.4475 25.8794 12.6697 25.8708 12.8823 25.8148C13.0948 25.7587 13.2924 25.6567 13.4612 25.5159C13.6299 25.375 13.7656 25.1989 13.8587 24.9998C13.9519 24.8007 14.0001 24.5836 14 24.3638V18.5C14 18.1022 13.842 17.7207 13.5607 17.4394C13.2794 17.1581 12.8978 17 12.5 17ZM11 22.5663L6.5 21.75V20H11V22.5663ZM27 17H17.5C17.1022 17 16.7206 17.1581 16.4393 17.4394C16.158 17.7207 16 18.1022 16 18.5V25.2725C15.9996 25.624 16.1226 25.9645 16.3477 26.2346C16.5727 26.5046 16.8854 26.687 17.2313 26.75L26.7313 28.4775C26.9476 28.5169 27.1699 28.5083 27.3826 28.4522C27.5952 28.3961 27.7929 28.294 27.9616 28.153C28.1304 28.012 28.2661 27.8357 28.3591 27.6364C28.4522 27.4372 28.5003 27.2199 28.5 27V18.5C28.5 18.1022 28.342 17.7207 28.0607 17.4394C27.7794 17.1581 27.3978 17 27 17ZM25.5 25.2025L19 24.0213V20H25.5V25.2025Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "fill") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          d="M14 18V24.455C14 24.7202 13.8946 24.9746 13.7071 25.1621C13.5196 25.3496 13.2652 25.455 13 25.455C12.9401 25.4546 12.8803 25.4492 12.8212 25.4388L4.82125 23.9838C4.59083 23.9419 4.38242 23.8205 4.23234 23.6407C4.08226 23.4609 4.00003 23.2342 4 23V18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1054 4.73478 17 5 17H13C13.2652 17 13.5196 17.1054 13.7071 17.2929C13.8946 17.4804 14 17.7348 14 18ZM13.6412 6.7775C13.5288 6.68358 13.397 6.61552 13.2553 6.57815C13.1136 6.54078 12.9654 6.53501 12.8212 6.56125L4.82125 8.01625C4.59083 8.05811 4.38242 8.17952 4.23234 8.35929C4.08226 8.53907 4.00003 8.76582 4 9V14C4 14.2652 4.10536 14.5196 4.29289 14.7071C4.48043 14.8946 4.73478 15 5 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V7.545C14 7.39861 13.9679 7.254 13.9059 7.12138C13.8439 6.98877 13.7536 6.87138 13.6412 6.7775ZM27 17H17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18V25.1813C15.9997 25.4157 16.0818 25.6427 16.2319 25.8227C16.382 26.0028 16.5906 26.1244 16.8213 26.1663L26.8213 27.9838C26.8802 27.9948 26.94 28.0002 27 28C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8946 27.5196 28 27.2652 28 27V18C28 17.7348 27.8946 17.4804 27.7071 17.2929C27.5196 17.1054 27.2652 17 27 17ZM27.6413 4.2325C27.5288 4.13858 27.397 4.07052 27.2553 4.03315C27.1136 3.99578 26.9654 3.99001 26.8213 4.01625L16.8213 5.835C16.5908 5.87686 16.3824 5.99827 16.2323 6.17804C16.0823 6.35782 16 6.58457 16 6.81875V14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15H27C27.2652 15 27.5196 14.8946 27.7071 14.7071C27.8946 14.5196 28 14.2652 28 14V5C28 4.85361 27.9679 4.709 27.9059 4.57638C27.8439 4.44377 27.7536 4.32638 27.6413 4.2325Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  if (type === "duotone") {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+      >
+        <path
+          opacity="0.2"
+          d="M17 18H27V27L17 25.1812V18ZM5 23L13 24.455V18H5V23ZM17 6.81875V14H27V5L17 6.81875ZM5 14H13V7.545L5 9V14Z"
+          fill="currentColor"
+        />
+        <path
+          d="M27 17H17C16.7348 17 16.4804 17.1054 16.2929 17.2929C16.1054 17.4804 16 17.7348 16 18V25.1813C15.9997 25.4157 16.0818 25.6427 16.2319 25.8227C16.382 26.0028 16.5906 26.1244 16.8213 26.1663L26.8213 27.9838C26.8802 27.9948 26.94 28.0002 27 28C27.2652 28 27.5196 27.8946 27.7071 27.7071C27.8946 27.5196 28 27.2652 28 27V18C28 17.7348 27.8946 17.4804 27.7071 17.2929C27.5196 17.1054 27.2652 17 27 17ZM26 25.8013L18 24.3475V19H26V25.8013ZM13 17H5C4.73478 17 4.48043 17.1054 4.29289 17.2929C4.10536 17.4804 4 17.7348 4 18V23C4.00003 23.2342 4.08226 23.4609 4.23234 23.6407C4.38242 23.8205 4.59083 23.9419 4.82125 23.9838L12.8212 25.4388C12.8803 25.4492 12.9401 25.4546 13 25.455C13.2652 25.455 13.5196 25.3496 13.7071 25.1621C13.8946 24.9746 14 24.7202 14 24.455V18C14 17.7348 13.8946 17.4804 13.7071 17.2929C13.5196 17.1054 13.2652 17 13 17ZM12 23.2563L6 22.165V19H12V23.2563ZM27.6413 4.2325C27.5288 4.13858 27.397 4.07052 27.2553 4.03315C27.1136 3.99578 26.9654 3.99001 26.8213 4.01625L16.8213 5.835C16.5908 5.87686 16.3824 5.99827 16.2323 6.17804C16.0823 6.35782 16 6.58457 16 6.81875V14C16 14.2652 16.1054 14.5196 16.2929 14.7071C16.4804 14.8946 16.7348 15 17 15H27C27.2652 15 27.5196 14.8946 27.7071 14.7071C27.8946 14.5196 28 14.2652 28 14V5C28 4.85361 27.9679 4.709 27.9059 4.57638C27.8439 4.44377 27.7536 4.32638 27.6413 4.2325ZM26 13H18V7.6525L26 6.19875V13ZM13.6412 6.7775C13.5288 6.68358 13.397 6.61552 13.2553 6.57815C13.1136 6.54078 12.9654 6.53501 12.8212 6.56125L4.82125 8.01625C4.59083 8.05811 4.38242 8.17952 4.23234 8.35929C4.08226 8.53907 4.00003 8.76582 4 9V14C4 14.2652 4.10536 14.5196 4.29289 14.7071C4.48043 14.8946 4.73478 15 5 15H13C13.2652 15 13.5196 14.8946 13.7071 14.7071C13.8946 14.5196 14 14.2652 14 14V7.545C14 7.39861 13.9679 7.254 13.9059 7.12138C13.8439 6.98877 13.7536 6.87138 13.6412 6.7775ZM12 13H6V9.835L12 8.75V13Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <path
+        d="M27 17.25H17C16.8011 17.25 16.6103 17.329 16.4697 17.4697C16.329 17.6103 16.25 17.8011 16.25 18V25.1812C16.2498 25.3571 16.3114 25.5274 16.4241 25.6624C16.5367 25.7975 16.6932 25.8886 16.8662 25.92L26.8662 27.7375C26.9103 27.7461 26.9551 27.7502 27 27.75C27.1989 27.75 27.3897 27.671 27.5303 27.5303C27.671 27.3897 27.75 27.1989 27.75 27V18C27.75 17.8011 27.671 17.6103 27.5303 17.4697C27.3897 17.329 27.1989 17.25 27 17.25ZM26.25 26.1012L17.75 24.5562V18.75H26.25V26.1012ZM13 17.25H5C4.80109 17.25 4.61032 17.329 4.46967 17.4697C4.32902 17.6103 4.25 17.8011 4.25 18V23C4.25011 23.1756 4.31186 23.3457 4.42447 23.4804C4.53709 23.6152 4.69343 23.7062 4.86625 23.7375L12.8663 25.1925C12.9104 25.2004 12.9551 25.2046 13 25.205C13.1989 25.205 13.3897 25.126 13.5303 24.9853C13.671 24.8447 13.75 24.6539 13.75 24.455V18C13.75 17.8011 13.671 17.6103 13.5303 17.4697C13.3897 17.329 13.1989 17.25 13 17.25ZM12.25 23.5562L5.75 22.375V18.75H12.25V23.5562ZM27.48 4.42375C27.3957 4.35364 27.2971 4.30287 27.191 4.27501C27.085 4.24715 26.9741 4.24288 26.8662 4.2625L16.8662 6.08C16.6932 6.11136 16.5367 6.20252 16.4241 6.33755C16.3114 6.47258 16.2498 6.6429 16.25 6.81875V14C16.25 14.1989 16.329 14.3897 16.4697 14.5303C16.6103 14.671 16.8011 14.75 17 14.75H27C27.1989 14.75 27.3897 14.671 27.5303 14.5303C27.671 14.3897 27.75 14.1989 27.75 14V5C27.75 4.89003 27.7258 4.7814 27.6791 4.68182C27.6325 4.58224 27.5645 4.49413 27.48 4.42375ZM26.25 13.25H17.75V7.44375L26.25 5.89875V13.25ZM13.48 6.97C13.3958 6.89968 13.2972 6.84868 13.1912 6.8206C13.0851 6.79252 12.9742 6.78805 12.8663 6.8075L4.86625 8.2625C4.69343 8.29382 4.53709 8.3848 4.42447 8.51957C4.31186 8.65435 4.25011 8.82437 4.25 9V14C4.25 14.1989 4.32902 14.3897 4.46967 14.5303C4.61032 14.671 4.80109 14.75 5 14.75H13C13.1989 14.75 13.3897 14.671 13.5303 14.5303C13.671 14.3897 13.75 14.1989 13.75 14V7.545C13.7498 7.43524 13.7255 7.32686 13.6789 7.2275C13.6322 7.12815 13.5643 7.04025 13.48 6.97ZM12.25 13.25H5.75V9.625L12.25 8.4425V13.25Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default WindowLogo;