@monolith-forensics/monolith-ui 1.0.8 → 1.0.9

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/package.json

@@ -1,23 +1,38 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
+  "description": "UI used for Monolith Apps",
   "main": "index.js",
-  "author": "Matt Danner (Monolith Forensics LLC)",
-  "license": "private",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "compile": "rollup -c",
+    "publish": "npm publish"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Monolith-Forensics/monolith-app.git",
-    "directory": "packages/@monolith-ui"
+    "url": "git+https://github.com/Monolith-Forensics/monolith-ui.git"
+  },
+  "author": "Matt Danner, Monolith Forensics LLC",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Monolith-Forensics/monolith-ui/issues"
   },
+  "homepage": "https://github.com/Monolith-Forensics/monolith-ui#readme",
   "dependencies": {
     "@floating-ui/react": "^0.26.16",
     "@radix-ui/react-tooltip": "^1.0.7",
     "deepmerge": "^4.3.1",
     "lucide-react": "^0.378.0",
-    "styled-components": "^6.1.11",
-    "react-textarea-autosize": "^8.5.3"
+    "react-textarea-autosize": "^8.5.3",
+    "styled-components": "^6.1.11"
   },
-  "peerDependencies": {
-    "react": "18.2.0"
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.2",
+    "react": "^18.3.1",
+    "rollup": "^4.18.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5"
   }
 }

package/rollup.config.js

@@ -0,0 +1,10 @@
+import typescript from "@rollup/plugin-typescript";
+
+export default {
+  input: "src/index.ts",
+  output: {
+    dir: "dist",
+    format: "cjs",
+  },
+  plugins: [typescript()],
+};

package/src/components/ArrowButton/ArrowButton.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ChevronDownIcon } from "lucide-react";
+import styled from "styled-components";
+
+interface ArrowIconProps {
+  className?: string;
+}
+
+const ArrowIcon: React.FC<ArrowIconProps> = styled(
+  ({ className, ...props }: ArrowIconProps) => (
+    <div className={className} {...props}>
+      <ChevronDownIcon size={16} />
+    </div>
+  )
+)`
+  color: ${(props) => props.theme.palette.text.secondary};
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(0deg);
+  will-change: transform;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface ArrowButtonProps {
+  className?: string;
+}
+
+const ArrowButton: React.FC<ArrowButtonProps> = styled(
+  ({ className, ...props }: ArrowButtonProps) => (
+    <button
+      className={className}
+      {...props}
+      tabIndex={-1}
+      data-default-btn={true}
+    >
+      <ArrowIcon />
+    </button>
+  )
+)`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding-inline: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+`;
+
+export default ArrowButton;

package/src/components/ArrowButton/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ArrowButton";

package/{Button/Button.js → src/components/Button/Button.tsx}

@@ -1,3 +1,4 @@
+import React from "react";
 import { forwardRef } from "react";
 import styled from "styled-components";
 
@@ -16,9 +17,23 @@ const colors = {
   orange: "#e8590c",
 };
 
-const StyledButton = styled.button`
+interface StyledButtonProps {
+  variant?:
+    | "default"
+    | "contained"
+    | "filled"
+    | "light"
+    | "outlined"
+    | "text"
+    | "subtle";
+  color?: string;
+  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+  fullWidth?: boolean;
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
   width: ${({ fullWidth }) => (fullWidth ? "100%" : "auto")};
-  height: ${({ theme, size }) => {
+  height: ${({ size }) => {
     switch (size) {
       case "xxs":
         return `24px`;
@@ -39,7 +54,7 @@ const StyledButton = styled.button`
 
   font-weight: 525;
   letter-spacing: 0.75px;
-  font-size: ${({ theme, size }) => {
+  font-size: ${({ size }) => {
     switch (size) {
       case "xxs":
         return `11px`;
@@ -58,7 +73,7 @@ const StyledButton = styled.button`
     }
   }};
 
-  padding: ${({ theme, size }) => {
+  padding: ${({ size }) => {
     switch (size) {
       case "xxs":
         return `0px 8px`;
@@ -85,12 +100,12 @@ const StyledButton = styled.button`
     switch (color) {
       case "primary":
         return theme.palette.primary.main;
-      case !color:
+      case undefined || null:
         return theme.palette.text.primary;
       default:
         return (
-          theme?.palette?.[color]?.main ||
-          colors?.[color] ||
+          theme?.palette?.[color!]?.main ||
+          colors?.[color!] ||
           theme.palette.text.primary
         );
     }
@@ -100,18 +115,21 @@ const StyledButton = styled.button`
     if (variant === "default") return "transparent";
     switch (variant) {
       case "contained":
+        if (!color) return theme.palette.background.secondary;
         return (
           theme?.palette?.[color]?.main ||
           colors?.[color] ||
           theme.palette.background.secondary
         );
       case "filled":
+        if (!color) return theme.palette.background.secondary;
         return (
           theme?.palette?.[color]?.main ||
           colors?.[color] ||
           theme.palette.background.secondary
         );
       case "light":
+        if (!color) return theme.palette.background.secondary + "30";
         return (
           (theme?.palette?.[color]?.main ||
             colors?.[color] ||
@@ -137,6 +155,7 @@ const StyledButton = styled.button`
         case "light":
           return "transparent";
         case "outlined":
+          if (!color) return theme.palette.divider;
           return (
             theme?.palette?.[color]?.main ||
             colors?.[color] ||
@@ -147,6 +166,7 @@ const StyledButton = styled.button`
         case "subtle":
           return "transparent";
         default:
+          if (!color) return theme.palette.divider;
           return (
             theme?.palette?.[color]?.main ||
             colors?.[color] ||
@@ -164,18 +184,21 @@ const StyledButton = styled.button`
       if (variant === "default") return "transparent";
       switch (variant) {
         case "contained":
+          if (!color) return theme.palette.background.secondary + "90";
           return (
             (theme?.palette?.[color]?.main ||
               colors?.[color] ||
               theme.palette.background.secondary) + "90"
           );
         case "filled":
+          if (!color) return theme.palette.background.secondary + "90";
           return (
             (theme?.palette?.[color]?.main ||
               colors?.[color] ||
               theme.palette.background.secondary) + "90"
           );
         case "light":
+          if (!color) return theme.palette.background.secondary + "70";
           return (
             (theme?.palette?.[color]?.main ||
               colors?.[color] ||
@@ -186,6 +209,7 @@ const StyledButton = styled.button`
         case "text":
           return "transparent";
         case "subtle":
+          if (!color) return theme.palette.action.hover;
           return theme?.palette?.[color]?.main || colors?.[color]
             ? (theme?.palette?.[color]?.main || colors?.[color]) + "30"
             : theme.palette.action.hover;
@@ -204,12 +228,14 @@ const StyledButton = styled.button`
           case "light":
             return "transparent";
           case "outlined":
+            if (!color) return theme.palette.divider;
             return colors?.[color] || theme.palette.divider;
           case "text":
             return "transparent";
           case "subtle":
             return "transparent";
           default:
+            if (!color) return theme.palette.divider;
             return (
               theme?.palette?.[color]?.main ||
               colors?.[color] ||
@@ -220,15 +246,33 @@ const StyledButton = styled.button`
   }
 `;
 
-const Button = forwardRef((props, ref) => {
-  const { children, ...other } = props;
-  return (
-    <StyledButton ref={ref} {...other}>
-      <span style={{ height: "100%" }}>
-        <span style={{ height: "100%" }}>{children}</span>
-      </span>
-    </StyledButton>
-  );
-});
+export interface ButtonProps {
+  children: React.ReactNode;
+  variant?:
+    | "default"
+    | "contained"
+    | "filled"
+    | "light"
+    | "outlined"
+    | "text"
+    | "subtle";
+  color?: string;
+  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+  fullWidth?: boolean;
+  onClick?: () => void;
+}
+
+const Button = forwardRef(
+  (props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+    const { children, ...other } = props;
+    return (
+      <StyledButton ref={ref} {...other}>
+        <span style={{ height: "100%" }}>
+          <span style={{ height: "100%" }}>{children}</span>
+        </span>
+      </StyledButton>
+    );
+  }
+);
 
 export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from "./Button";

package/{FieldLabel/FieldLabel.js → src/components/FieldLabel/FieldLabel.tsx}

@@ -1,33 +1,42 @@
+import React from "react";
 import styled from "styled-components";
 import * as Tooltip from "@radix-ui/react-tooltip";
 
-const InfoComponent = styled(({ className, children, description, label }) => {
-  if (!description) return children;
-
-  return (
-    <Tooltip.Provider
-      delayDuration={800}
-      skipDelayDuration={0}
-      disableHoverableContent
-    >
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content
-            className={className}
-            side="right"
-            sideOffset={15}
-            align="start"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="title">{label || "Info"}</div>
-            <div>{description || "N/A"}</div>
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-    </Tooltip.Provider>
-  );
-})`
+interface InfoComponentProps {
+  description?: string | null;
+  label?: string | Element;
+  children: React.ReactNode;
+}
+
+const InfoComponent: React.FC<InfoComponentProps> = styled(
+  ({ className, children, description, label }) => {
+    if (!description) return children;
+
+    return (
+      <Tooltip.Provider
+        delayDuration={800}
+        skipDelayDuration={0}
+        disableHoverableContent
+      >
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className={className}
+              side="right"
+              sideOffset={15}
+              align="start"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="title">{label || "Info"}</div>
+              <div>{description || "N/A"}</div>
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+    );
+  }
+)`
   pointer-events: none;
   z-index: 99999;
   background-color: ${({ theme }) => theme.palette.background.default};
@@ -47,7 +56,16 @@ const InfoComponent = styled(({ className, children, description, label }) => {
   }
 `;
 
-const FieldLabel = styled(
+interface FieldLabelProps {
+  errorMessage?: string;
+  error?: boolean;
+  description?: string | null;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  asterisk?: boolean;
+  children: string | Element;
+}
+
+const FieldLabel: React.FC<FieldLabelProps> = styled(
   ({
     className,
     children,

package/src/components/FieldLabel/index.ts

@@ -0,0 +1 @@
+export { default } from "./FieldLabel";

package/{primitives/Input.js → src/components/Input/Input.tsx}

@@ -1,24 +1,36 @@
+import React from "react";
 import styled from "styled-components";
 
-export const StyledInput = styled.input`
+interface StyledInputProps {
+  variant?: "contained" | "filled" | "outlined" | "text";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  width?: string | number | null;
+  error?: boolean;
+}
+
+const StyledInput = styled.input<StyledInputProps>`
   font-family: ${({ theme }) => theme.typography.fontFamily};
   pointer-events: "all";
   user-select: "all";
   outline: none;
 
-  color: ${({ theme, error }) => theme.palette.text.primary};
-  font-size: ${({ size }) =>
-    size === "xs"
-      ? "12px"
-      : size === "sm"
-      ? "14px"
-      : size === "md"
-      ? "16px"
-      : size === "lg"
-      ? "18px"
-      : size === "xl"
-      ? "20px"
-      : "12px"};
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: ${({ size }) => {
+    switch (size) {
+      case "xs":
+        return "12px";
+      case "sm":
+        return "14px";
+      case "md":
+        return "16px";
+      case "lg":
+        return "18px";
+      case "xl":
+        return "20px";
+      default:
+        return "12px";
+    }
+  }};
 
   height: ${({ size }) =>
     size === "xs"
@@ -125,3 +137,5 @@ export const StyledInput = styled.input`
     border: 1px solid ${({ theme, error }) => theme.palette.primary.main};
   }
 `;
+
+export default StyledInput;

package/src/components/Input/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Input";

package/{Pill/Pill.js → src/components/Pill/Pill.tsx}

@@ -1,6 +1,13 @@
+import React from "react";
 import styled from "styled-components";
 import { X } from "lucide-react";
 
+interface PillProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  showRemoveIcon?: boolean;
+  onRemove?: () => void;
+}
+
 const StyledButton = styled.button`
   background-color: transparent;
   border: none;
@@ -15,7 +22,7 @@ const StyledButton = styled.button`
   padding-inline-end: 5px;
 `;
 
-const Pill = styled(
+const Pill: React.FC<PillProps> = styled(
   ({ className, children, size, showRemoveIcon = true, onRemove }) => {
     const handleRemove = (e) => {
       e.preventDefault();

package/src/components/Pill/index.ts

@@ -0,0 +1 @@
+export { default } from "./Pill";

package/{SelectBox → src/components/SelectBox}/SelectBox.js

@@ -1,8 +1,9 @@
 import styled from "styled-components";
 import { useFloating, flip, offset } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ChevronDownIcon, X } from "lucide-react";
+import { X } from "lucide-react";
 import FieldLabel from "../FieldLabel/FieldLabel.js";
+import ArrowButton from "../ArrowButton";
 
 export const StyledInputContainer = styled.div`
   position: relative;
@@ -215,43 +216,6 @@ const StyledItem = styled.div`
   }
 `;
 
-const ArrowIcon = styled(({ className, ...props }) => (
-  <div className={className} {...props}>
-    <ChevronDownIcon size={16} />
-  </div>
-))`
-  color: ${(props) => props.theme.palette.text.secondary};
-  transition: transform 0.2s ease-in-out;
-  transform: rotate(0deg);
-  will-change: transform;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const ArrowButton = styled(({ className, ...props }) => (
-  <button
-    className={className}
-    {...props}
-    tabIndex={-1}
-    data-default-btn={true}
-  >
-    <ArrowIcon />
-  </button>
-))`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  padding-inline: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-`;
-
 const ClearIcon = styled(({ className, ...props }) => (
   <div className={className} {...props}>
     <X size={16} />

package/{primitives/TextArea.js → src/components/TextArea/TextArea.tsx}

@@ -1,7 +1,13 @@
+import React from "react";
 import styled from "styled-components";
 import TextareaAutosize from "react-textarea-autosize";
 
-export const StyledTextArea = styled(TextareaAutosize)`
+interface StyledTextAreaProps {
+  variant?: "contained" | "filled" | "outlined" | "text";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
+const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
   outline: none;
   resize: none;
   padding: 8px 8px;
@@ -59,7 +65,6 @@ export const StyledTextArea = styled(TextareaAutosize)`
   &:focus {
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }
-  // ::placeholder {
-  //   color: ${(props) => props.theme.palette.input.placeholder};
-  // }
 `;
+
+export default StyledTextArea;

package/src/components/TextArea/index.ts

@@ -0,0 +1 @@
+export { default } from "./TextArea";

package/{TextAreaInput/TextAreaInput.js → src/components/TextAreaInput/TextAreaInput.tsx}

@@ -1,12 +1,25 @@
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import { StyledTextArea } from "../primitives/TextArea.js";
+import React from "react";
+import FieldLabel from "../FieldLabel";
+import StyledTextArea from "../TextArea";
 
-const TextAreaInput = ({
+interface TextAreaInputProps {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  colSpan?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  description?: string | null;
+}
+
+const TextAreaInput: React.FC<TextAreaInputProps> = ({
   label,
   error,
   errorMessage,
   required,
   colSpan = 1,
+  size,
+  description,
   ...other
 }) => {
   return (
@@ -21,8 +34,8 @@ const TextAreaInput = ({
           error={error}
           errorMessage={errorMessage}
           asterisk={required}
-          size={other.size}
-          description={other.description}
+          size={size}
+          description={description}
         >
           {label}
         </FieldLabel>

package/src/components/TextAreaInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./TextAreaInput";

package/{TextInput/TextInput.js → src/components/TextInput/TextInput.tsx}

@@ -1,12 +1,25 @@
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import { StyledInput } from "../primitives/Input.js";
+import React from "react";
+import FieldLabel from "../FieldLabel";
+import StyledInput from "../Input";
 
-const TextInput = ({
+interface TextInputProps {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  colSpan?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  description?: string | null;
+}
+
+const TextInput: React.FC<TextInputProps> = ({
   label,
   error,
   errorMessage,
   required,
   colSpan = 1,
+  size,
+  description,
   ...other
 }) => {
   return (
@@ -23,8 +36,8 @@ const TextInput = ({
           error={error}
           errorMessage={errorMessage}
           asterisk={required}
-          size={other.size}
-          description={other.description}
+          size={size}
+          description={description}
         >
           {label}
         </FieldLabel>

package/src/components/TextInput/index.tsx

@@ -0,0 +1 @@
+export { default } from "./TextInput";

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";
+export { default as TextArea } from "./TextArea";
+export { default as FieldLabel } from "./FieldLabel";
+export { default as TextInput } from "./TextInput";
+export { default as TextAreaInput } from "./TextAreaInput";
+export { default as Pill } from "./Pill";

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";

package/tsconfig.json

@@ -0,0 +1,109 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "ES2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react" /* Specify what JSX code is generated. */,
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "ESNext" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "dist" /* Specify an output folder for all emitted files. */,
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    "declarationDir": "dist/types" /* Specify the output directory for generated declaration files. */,
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

package/TagBox/TagBoxOLD.js

@@ -1,75 +0,0 @@
-import { useState } from "react";
-import { useRef } from "react";
-import styled from "styled-components";
-import { InputLabel } from "../Input";
-import {
-  Tag,
-  TagBoxContainer,
-  TagBoxInner,
-  TagBoxInput,
-  TagKillButton,
-  TagsContainer,
-  TagText,
-} from "./TagBoxStyles";
-
-const TestTags = [
-  "STG-1200",
-  "Archive Drive 1",
-  "NAS 1",
-  "Riker",
-  "Azure",
-  "Tag 6",
-];
-
-const TagBox = styled(({ labelName, labelStyle = {}, data = [] }) => {
-  const [tags, setTags] = useState(TestTags);
-  const tagBoxContainerRef = useRef(null);
-  const tagBoxInputRef = useRef(null);
-  const tagBoxInnerRef = useRef(null);
-
-  const onClick = (e) => {
-    tagBoxInputRef.current.focus();
-  };
-
-  const onBlur = (e) => {
-    tagBoxInnerRef.current.scrollLeft = -99999;
-  };
-
-  const removeTag = ({ event, clickedTag }) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setTags(tags.filter((tag) => tag !== clickedTag));
-  };
-
-  return (
-    <TagBoxContainer ref={tagBoxContainerRef} onClick={onClick} onBlur={onBlur}>
-      {labelName && (
-        <InputLabel
-          labelName={labelName}
-          style={{ ...labelStyle }}
-        ></InputLabel>
-      )}
-      <TagBoxInner ref={tagBoxInnerRef}>
-        <TagsContainer>
-          {tags.map((tag, index) => {
-            return (
-              <Tag key={index} value={tag}>
-                <TagText>{tag}</TagText>
-                <TagKillButton
-                  onClick={(e) => {
-                    removeTag({ event: e, clickedTag: tag });
-                  }}
-                ></TagKillButton>
-              </Tag>
-            );
-          })}
-        </TagsContainer>
-        <TagBoxInput ref={tagBoxInputRef}></TagBoxInput>
-      </TagBoxInner>
-    </TagBoxContainer>
-  );
-})``;
-
-TagBox.displayName = "TagBox";
-
-export default TagBox;

package/TagBox/TagBoxStyles.js

@@ -1,122 +0,0 @@
-import styled from "styled-components";
-import CloseIcon from "@mui/icons-material/Close";
-
-export const TagBoxContainer = styled.div`
-  width: 100%;
-`;
-
-export const TagBoxInner = styled.div`
-  height: 33px;
-  display: flex;
-  border: 1px solid ${(props) => props.theme.palette.input.border};
-  color: ${(props) => props.theme.palette.text.primary};
-  outline: none;
-  padding: 8px 8px;
-  width: 100%;
-  background-color: ${(props) => props.theme.palette.input.background};
-  border-radius: 5px;
-  transition: border 0.1s ease-in-out;
-  overflow-x: hidden;
-  &:focus {
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-export const TagsContainer = styled.div`
-  //   min-height: 34px;
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  flex-wrap: nowrap;
-  margin-left: calc(-5px);
-  box-sizing: border-box;
-`;
-
-export const TagBoxInput = styled.input`
-  border: none;
-  outline: none;
-  width: 100%;
-  min-width: 50px;
-  background-color: transparent;
-  color: ${(props) => props.theme.palette.text.primary};
-  &:focus {
-    border: none;
-    outline: none;
-  }
-`;
-
-export const Tag = styled.div`
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  background-color: rgb(26, 27, 30);
-  color: rgb(193, 194, 197);
-  height: 22px;
-  padding-left: 10px;
-  padding-right: 0px;
-  font-weight: 500;
-  font-size: 12px;
-  border-radius: 4px;
-  cursor: default;
-  user-select: none;
-  max-width: 120px;
-  margin: calc(3px) calc(5px);
-`;
-
-export const TagText = styled.div`
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  background-color: rgb(26, 27, 30);
-  color: rgb(193, 194, 197);
-  height: 22px;
-  //   padding-left: 12px;
-  padding-right: 0px;
-  font-weight: 500;
-  font-size: 12px;
-  border-radius: 4px;
-  cursor: default;
-  user-select: none;
-  max-width: 75px;
-  //   margin: calc(3px) calc(5px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const TagKillButton = styled(CloseIcon)`
-  -webkit-tap-highlight-color: transparent;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  cursor: pointer;
-  appearance: none;
-  //   font-size: 18px;
-  text-align: left;
-  text-decoration: none;
-  box-sizing: border-box;
-  border: 1px solid transparent;
-  background-color: transparent;
-  position: relative;
-  height: 19px;
-  min-height: 19px;
-  width: 22px;
-  min-width: 19px;
-  border-radius: 2px;
-  line-height: 1;
-  display: flex;
-  -webkit-box-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  justify-content: center;
-  color: rgb(193, 194, 197);
-  // margin-left: 4px;
-  // margin-right: 4px;
-  padding: 0px 3px;
-  &:hover {
-    color: rgb(255, 255, 255);
-  }
-`;
-
-export const TagBoxOptions = styled.div``;
-
-export const TagBoxOption = styled.div``;