@rulab/adminjs-components 0.1.0 → 0.2.1

package/README.md

@@ -1,8 +1,8 @@
 # adminjs-components
 
 Prebuilt AdminJS components and features for common UI needs: colored status
-badges, slug generation, Editor.js content, sortable string lists, tabs layout,
-and record preview.
+badges, slug and UUID generation, Editor.js content, sortable string lists, tabs
+layout, and record preview.
 
 ## Install
 
@@ -49,6 +49,8 @@ You can also pass `componentLoader` into every feature instead of calling
 ### ColorStatus
 
 Renders a colored badge in edit/list/show based on a list of available values.
+By default (`nullable: false`) the first option is auto-selected in new records.
+Set `nullable: true` to allow an empty value.
 
 ```ts
 import { ColorStatusFeature } from "@rulab/adminjs-components";
@@ -56,6 +58,7 @@ import { ColorStatusFeature } from "@rulab/adminjs-components";
 features: [
   ColorStatusFeature({
     key: "status",
+    nullable: false, // optional, default false
     availableValues: [
       { value: "draft", label: "Draft", color: "#64748b" },
       { value: "review", label: "In review", color: "#f59e0b" },
@@ -68,6 +71,7 @@ features: [
 ### Slug
 
 Generates a slug from another field and stores it in the target property.
+Use `button` to override the generate button label in edit view.
 
 ```ts
 import { SlugFeature } from "@rulab/adminjs-components";
@@ -76,6 +80,23 @@ features: [
   SlugFeature({
     key: "slug",
     source: "title",
+    button: "Create slug", // optional
+  }),
+]
+```
+
+### UUID
+
+Adds a UUID field with a "Generate UUID" button in edit view.
+Use `button` to override the generate button label.
+
+```ts
+import { UuidFeature } from "@rulab/adminjs-components";
+
+features: [
+  UuidFeature({
+    key: "uuid",
+    button: "Generate ID", // optional
   }),
 ]
 ```
@@ -105,6 +126,7 @@ features: [
 ### StringList
 
 Sortable list stored as a single string (comma-separated by default).
+Use `separator` to override the delimiter used for storing and rendering values.
 
 ```ts
 import { StringListFeature } from "@rulab/adminjs-components";
@@ -112,6 +134,7 @@ import { StringListFeature } from "@rulab/adminjs-components";
 features: [
   StringListFeature({
     key: "facts",
+    separator: "|", // optional, default "|"
   }),
 ]
 ```
@@ -120,13 +143,14 @@ features: [
 
 Groups edit/show fields into tabs based on property `props.tab` or
 `custom.tab`. Fields without a tab go to a common group.
+`commonTabLabel` is optional and defaults to `"Common"`.
 
 ```ts
 import { TabsFeature } from "@rulab/adminjs-components";
 
 features: [
   TabsFeature({
-    commonTabLabel: "Common",
+    commonTabLabel: "General", // optional, default "Common"
   }),
 ]
 

package/dist/components/ColorStatus/ColorStatusEdit.js

@@ -43,8 +43,12 @@ const colorStyles = {
 };
 export const ColorStatusEdit = ({ property, record, onChange, }) => {
     const availableValues = property.availableValues;
-    const currentOption = availableValues.find((item) => item.value === record.params[property.path]);
-    const [selectOption, setCurrentOption] = useState(currentOption);
+    const nullable = Boolean(property.custom?.nullable);
+    const isNewRecord = !record.id;
+    const currentValue = record.params[property.path];
+    const currentOption = availableValues.find((item) => item.value === currentValue);
+    const initialOption = currentOption ?? (!nullable && isNewRecord ? availableValues[0] : null);
+    const [selectOption, setCurrentOption] = useState(initialOption);
     const handleSelectChange = (option) => {
         setCurrentOption(option);
     };
@@ -53,6 +57,6 @@ export const ColorStatusEdit = ({ property, record, onChange, }) => {
     }, [selectOption]);
     return (React.createElement(ColorStatusWrapper, null,
         React.createElement(Label, null, property.label ?? property.path),
-        React.createElement(Select, { className: "basic-single", classNamePrefix: "select", defaultValue: selectOption ?? availableValues[0], onChange: handleSelectChange, isClearable: true, name: "color", options: availableValues, styles: colorStyles })));
+        React.createElement(Select, { className: "basic-single", classNamePrefix: "select", value: selectOption, onChange: handleSelectChange, isClearable: nullable, name: "color", options: availableValues, styles: colorStyles })));
 };
 export default ColorStatusEdit;

package/dist/components/ColorStatus/ColorStatusFeature.d.ts

@@ -4,6 +4,7 @@ type ColorStatusOptions = {
     componentLoader?: ComponentLoader;
     key: string;
     availableValues?: AvailableValueType[];
+    nullable?: boolean;
 };
 export declare const ColorStatusFeature: (config: ColorStatusOptions) => FeatureType;
 export default ColorStatusFeature;

package/dist/components/ColorStatus/ColorStatusFeature.js

@@ -2,7 +2,10 @@ import { buildFeature } from "adminjs";
 import { bundleComponent } from "../../utils/bundle-component.js";
 const COMPONENT_NAME = "ColorStatus";
 export const ColorStatusFeature = (config) => {
-    const { componentLoader, key, availableValues = [] } = config;
+    const { componentLoader, key, availableValues = [], nullable = false } = config;
+    const values = nullable
+        ? [{ value: null, label: "", color: "#ffffff" }, ...availableValues]
+        : availableValues;
     const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusEdit.js");
     const listComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusList.js");
     const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "ColorStatusShow.js");
@@ -10,7 +13,10 @@ export const ColorStatusFeature = (config) => {
         properties: {
             [key]: {
                 isVisible: { filter: true, show: true, edit: true, list: true },
-                availableValues,
+                availableValues: values,
+                custom: {
+                    nullable,
+                },
                 components: {
                     edit: editComponent,
                     list: listComponent,

package/dist/components/Editor/Editor.d.ts

@@ -1,13 +1,11 @@
-export function Editor({ property, record, resource, onChange, onChangeAdmin, editorId }: {
+import React from "react";
+type EditorProps = {
     property: any;
     record: any;
     resource: any;
-    onChange: any;
-    onChangeAdmin: any;
-    editorId: any;
-}): React.FunctionComponentElement<{
-    children?: React.ReactNode;
-    theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
-}>;
+    onChange?: (path: string, value: string | undefined) => void;
+    onChangeAdmin?: (path: string, value: string | undefined) => void;
+    editorId?: string;
+};
+export declare const Editor: ({ property, record, resource, onChange, onChangeAdmin, editorId, }: EditorProps) => React.JSX.Element;
 export default Editor;
-import React from "react";

package/dist/components/Editor/Editor.js

@@ -22,15 +22,15 @@ const getEditorData = (record, property) => {
     try {
         return JSON.parse(raw);
     }
-    catch (error) {
+    catch {
         return "";
     }
 };
-export const Editor = ({ property, record, resource, onChange, onChangeAdmin, editorId }) => {
+export const Editor = ({ property, record, resource, onChange, onChangeAdmin, editorId, }) => {
     const [jsonData, setJsonData] = useState();
     const isSavedData = Boolean(record?.params?.[property.path]);
     const holderId = editorId || property?.props?.editorId || `editor-${property.path}`;
-    const uploadAction = property?.props?.uploadAction;
+    const uploadAction = property?.custom?.uploadAction ?? property?.props?.uploadAction;
     const resourceId = resource?.id;
     const ref = useRef();
     useEffect(() => {
@@ -78,7 +78,7 @@ export const Editor = ({ property, record, resource, onChange, onChangeAdmin, ed
                     holder: holderId,
                     tools,
                     data: isSavedData ? getEditorData(record, property) : "",
-                    async onChange(api, event) {
+                    async onChange(api) {
                         const data = await api.saver.save();
                         setJsonData(JSON.stringify(data));
                     },
@@ -91,6 +91,9 @@ export const Editor = ({ property, record, resource, onChange, onChangeAdmin, ed
             ref?.current?.destroy?.();
         };
     }, []);
-    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledLabel, null, property.label ?? property.path), React.createElement(StyledEditorWrapper, null, React.createElement(StyledEditor, { id: holderId }))));
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledLabel, null, property.label ?? property.path),
+        React.createElement(StyledEditorWrapper, null,
+            React.createElement(StyledEditor, { id: holderId }))));
 };
 export default Editor;

package/dist/components/Editor/EditorList.d.ts

@@ -1,9 +1,7 @@
-export function EditorList({ property, record }: {
+import React from "react";
+type EditorListProps = {
     property: any;
     record: any;
-}): React.FunctionComponentElement<{
-    children?: React.ReactNode;
-    theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
-}>;
+};
+export declare const EditorList: ({ property, record }: EditorListProps) => React.JSX.Element;
 export default EditorList;
-import React from "react";

package/dist/components/Editor/EditorList.js

@@ -5,6 +5,7 @@ import { parseHtml } from "../../utils/parseHtml.js";
 import { StyledEditorViewWrapper } from "./styles.js";
 export const EditorList = ({ property, record }) => {
     const htmlContent = parseHtml(record.params[property.path]);
-    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledEditorViewWrapper, null, htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledEditorViewWrapper, null, htmlContent && React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } }))));
 };
 export default EditorList;

package/dist/components/Editor/EditorShow.d.ts

@@ -1,9 +1,7 @@
-export function EditorShow({ property, record }: {
+import React from "react";
+type EditorShowProps = {
     property: any;
     record: any;
-}): React.FunctionComponentElement<{
-    children?: React.ReactNode;
-    theme: import("styled-components").DefaultTheme | ((outerTheme?: import("styled-components").DefaultTheme | undefined) => import("styled-components").DefaultTheme);
-}>;
+};
+export declare const EditorShow: ({ property, record }: EditorShowProps) => React.JSX.Element;
 export default EditorShow;
-import React from "react";

package/dist/components/Editor/EditorShow.js

@@ -5,6 +5,9 @@ import { parseHtml } from "../../utils/parseHtml.js";
 import { StyledEditorShowWrapper, StyledShowLabel } from "./styles.js";
 export const EditorShow = ({ property, record }) => {
     const htmlContent = parseHtml(record.params[property.path]);
-    return (React.createElement(ThemeProvider, { theme: theme }, React.createElement(StyledEditorShowWrapper, null, React.createElement(StyledShowLabel, null, property.label ?? property.path), htmlContent && (React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledEditorShowWrapper, null,
+            React.createElement(StyledShowLabel, null, property.label ?? property.path),
+            htmlContent && React.createElement("div", { dangerouslySetInnerHTML: { __html: htmlContent } }))));
 };
 export default EditorShow;

package/dist/components/Slug/SlugEdit.js

@@ -17,7 +17,7 @@ export const SlugEdit = ({ property, record, resource, onChange, }) => {
         React.createElement(StyledLabel, { htmlFor: "customSlug" }, property.label ?? property.path),
         React.createElement(StyledInputWrapper, null,
             React.createElement(StyledCustomInput, { id: property.path, name: property.path, value: inputValue, onChange: handleInput }),
-            React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, "Generate Slug"))));
+            React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateSlug }, custom.button ?? "Generate Slug"))));
     function handleInput(e) {
         setInputValue(e.target.value);
     }

package/dist/components/Slug/SlugFeature.js

@@ -2,7 +2,7 @@ import { buildFeature } from "adminjs";
 import { bundleComponent } from "../../utils/bundle-component.js";
 const COMPONENT_NAME = 'Slug';
 export const SlugFeature = (config) => {
-    const { componentLoader, source, key } = config;
+    const { componentLoader, source, key, button } = config;
     const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, 'SlugEdit.js');
     return buildFeature({
         properties: {
@@ -11,7 +11,7 @@ export const SlugFeature = (config) => {
                 components: {
                     edit: editComponent,
                 },
-                custom: { source, key }
+                custom: { source, key, button }
             },
         },
     });

package/dist/components/Slug/SlugOptions.type.d.ts

@@ -3,5 +3,6 @@ type SlugOptions = {
     componentLoader?: ComponentLoader;
     source: string;
     key: string;
+    button?: string;
 };
 export default SlugOptions;

package/dist/components/StringList/StringList.js

@@ -3,8 +3,9 @@ import React, { useEffect, useState, } from "react";
 import { ThemeProvider } from "styled-components";
 import { StyledCustomInput, StyledInputWrapper, StyledLabel, StyledListWrapper, StyledWrapper, } from "./styles.js";
 import { SortableList } from "./SortableList/SortableList.js";
-import { separator } from "./constants.js";
-export const StringList = ({ record, onChange, property, stringListSeparator = separator, }) => {
+const DEFAULT_SEPARATOR = "|";
+export const StringList = ({ record, onChange, property, stringListSeparator = DEFAULT_SEPARATOR, }) => {
+    const separatorValue = property.props?.stringListSeparator ?? stringListSeparator;
     const stringListValue = record.params?.[property.path] ?? property.props.value ?? "";
     const initialList = stringListValue
         ? prepareDataForList(stringListValue)
@@ -45,10 +46,10 @@ export const StringList = ({ record, onChange, property, stringListSeparator = s
         setList(newData);
     }
     function prepareDataForDatabase(list) {
-        return list.map(({ value }) => value).join(stringListSeparator);
+        return list.map(({ value }) => value).join(separatorValue);
     }
     function prepareDataForList(str) {
-        return str.split(stringListSeparator).map((item) => createListObject(item));
+        return str.split(separatorValue).map((item) => createListObject(item));
     }
     function createListObject(value) {
         return {

package/dist/components/StringList/StringListFeature.d.ts

@@ -2,6 +2,7 @@ import { ComponentLoader, FeatureType } from "adminjs";
 type StringListOptions = {
     componentLoader?: ComponentLoader;
     key: string;
+    separator?: string;
 };
 export declare const StringListFeature: (config: StringListOptions) => FeatureType;
 export default StringListFeature;

package/dist/components/StringList/StringListFeature.js

@@ -2,13 +2,14 @@ import { buildFeature } from "adminjs";
 import { bundleComponent } from "../../utils/bundle-component.js";
 const COMPONENT_NAME = "StringList";
 export const StringListFeature = (config) => {
-    const { componentLoader, key } = config;
+    const { componentLoader, key, separator } = config;
     const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "StringList.js");
     const showComponent = bundleComponent(componentLoader, COMPONENT_NAME, "StringListShow.js");
     return buildFeature({
         properties: {
             [key]: {
                 isVisible: { filter: true, show: true, edit: true, list: true },
+                props: separator ? { stringListSeparator: separator } : undefined,
                 components: {
                     edit: editComponent,
                     show: showComponent,

package/dist/components/StringList/StringListShow.js

@@ -2,13 +2,15 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import { theme } from "@adminjs/design-system";
 import { StyledShowLabel, StyledShowWrapper, StyledListItem } from "./styles.js";
-import { separator } from "./constants.js";
-export const StringListShow = ({ property, record, stringListSeparator = separator, }) => {
+const DEFAULT_SEPARATOR = "|";
+export const StringListShow = ({ property, record, stringListSeparator = DEFAULT_SEPARATOR, }) => {
+    const separatorValue = property.props?.stringListSeparator ?? stringListSeparator;
+    const value = record.params[property.path];
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(StyledShowWrapper, null,
             React.createElement(StyledShowLabel, null, property.label ?? property.path),
-            record.params.facts && (React.createElement("ul", null, record.params.facts
-                .split(stringListSeparator)
+            value && (React.createElement("ul", null, value
+                .split(separatorValue)
                 .map((item, index) => (React.createElement(StyledListItem, { key: index }, `- ${item}`))))))));
 };
 export default StringListShow;

package/dist/components/Uuid/UuidEdit.d.ts

@@ -0,0 +1,5 @@
+import { EditPropertyProps } from "adminjs";
+import { FC } from "react";
+type CustomUuidTypes = Omit<EditPropertyProps, "where">;
+export declare const UuidEdit: FC<CustomUuidTypes>;
+export default UuidEdit;

package/dist/components/Uuid/UuidEdit.js

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@adminjs/design-system";
+import { StyledCustomInput, StyledGenerateButton, StyledInputWrapper, StyledLabel, } from "./styles.js";
+const generateUuidV4 = () => {
+    if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
+        const random = (Math.random() * 16) | 0;
+        const value = char === "x" ? random : (random & 0x3) | 0x8;
+        return value.toString(16);
+    });
+};
+export const UuidEdit = ({ property, record, onChange, }) => {
+    const { custom } = property;
+    const [inputValue, setInputValue] = useState(record.params[property.path] ?? "");
+    useEffect(() => {
+        onChange(property.path, inputValue);
+    }, [inputValue]);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement(StyledLabel, { htmlFor: "customUuid" }, property.label ?? property.path),
+        React.createElement(StyledInputWrapper, null,
+            React.createElement(StyledCustomInput, { id: property.path, name: property.path, value: inputValue, onChange: handleInput }),
+            React.createElement(StyledGenerateButton, { variant: "outlined", onClick: generateUuid }, custom?.button ?? "Generate UUID"))));
+    function handleInput(e) {
+        setInputValue(e.target.value);
+    }
+    function generateUuid(e) {
+        e.preventDefault();
+        setInputValue(generateUuidV4());
+    }
+};
+export default UuidEdit;

package/dist/components/Uuid/UuidFeature.d.ts

@@ -0,0 +1,4 @@
+import { FeatureType } from "adminjs";
+import UuidOptions from "./UuidOptions.type.js";
+export declare const UuidFeature: (config: UuidOptions) => FeatureType;
+export default UuidFeature;

package/dist/components/Uuid/UuidFeature.js

@@ -0,0 +1,21 @@
+import { buildFeature } from "adminjs";
+import { bundleComponent } from "../../utils/bundle-component.js";
+const COMPONENT_NAME = "Uuid";
+export const UuidFeature = (config) => {
+    const { componentLoader, key, button } = config;
+    const editComponent = bundleComponent(componentLoader, COMPONENT_NAME, "UuidEdit.js");
+    return buildFeature({
+        properties: {
+            [key]: {
+                isVisible: { filter: true, show: true, edit: true, list: true },
+                custom: {
+                    button,
+                },
+                components: {
+                    edit: editComponent,
+                },
+            },
+        },
+    });
+};
+export default UuidFeature;

package/dist/components/Uuid/UuidOptions.type.d.ts

@@ -0,0 +1,7 @@
+import { ComponentLoader } from "adminjs";
+type UuidOptions = {
+    componentLoader?: ComponentLoader;
+    key: string;
+    button?: string;
+};
+export default UuidOptions;

package/dist/components/Uuid/UuidOptions.type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Uuid/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledInputWrapper: any;
+export declare const StyledCustomInput: any;
+export declare const StyledGenerateButton: any;
+export declare const StyledLabel: any;

package/dist/components/Uuid/styles.js

@@ -0,0 +1,20 @@
+// @ts-ignore
+import { styled } from "@adminjs/design-system/styled-components";
+// @ts-ignore
+import { Box, Button, Input } from "@adminjs/design-system";
+export const StyledInputWrapper = styled(Box) `
+  display: flex;
+  margin-bottom: 40px;
+`;
+export const StyledCustomInput = styled(Input) `
+  width: 100%;
+  margin-right: 10px;
+`;
+export const StyledGenerateButton = styled(Button) `
+  white-space: nowrap;
+`;
+export const StyledLabel = styled.div `
+  font-size: 12px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+`;

package/dist/components/index.d.ts

@@ -13,3 +13,4 @@ export { StringListFeature } from "./StringList/StringListFeature.js";
 export { SlugFeature } from "./Slug/SlugFeature.js";
 export { TabsFeature } from "./Tabs/TabsFeature.js";
 export { PreviewFeature } from "./Preview/PreviewFeature.js";
+export { UuidFeature } from "./Uuid/UuidFeature.js";

package/dist/components/index.js

@@ -13,3 +13,4 @@ export { StringListFeature } from "./StringList/StringListFeature.js";
 export { SlugFeature } from "./Slug/SlugFeature.js";
 export { TabsFeature } from "./Tabs/TabsFeature.js";
 export { PreviewFeature } from "./Preview/PreviewFeature.js";
+export { UuidFeature } from "./Uuid/UuidFeature.js";

package/package.json

@@ -1,35 +1,55 @@
 {
   "name": "@rulab/adminjs-components",
-  "version": "0.1.0",
+  "version": "0.2.1",
+  "description": "Prebuilt AdminJS features for common UI needs.",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "private": false,
   "type": "module",
+  "license": "MIT",
   "keywords": [
-    "adminjs"
+    "adminjs",
+    "components",
+    "react",
+    "editorjs"
   ],
+  "homepage": "https://github.com/rulab/adminjs-components#readme",
+  "bugs": {
+    "url": "https://github.com/rulab/adminjs-components/issues"
+  },
   "repository": {
     "url": "git+https://github.com/rulab/adminjs-components.git"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
   "scripts": {
-    "build": "tsc && node scripts/fix-import-extensions.js",
-    "build-tsup": "tsup",
-    "lint": "tsc"
+    "build": "tsc",
+    "lint": "tsc",
+    "prepublishOnly": "pnpm run build"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@editorjs/editorjs": "2.30.2",
-    "@editorjs/header": "^2.8.7",
-    "@editorjs/image": "^2.9.2",
-    "@editorjs/list": "^1.9.0",
-    "@editorjs/paragraph": "^2.11.6",
-    "@editorjs/quote": "^2.7.2",
-    "@editorjs/table": "^2.4.1",
+    "@editorjs/editorjs": "~2.30.2",
+    "@editorjs/header": "~2.8.7",
+    "@editorjs/image": "~2.9.2",
+    "@editorjs/list": "~1.9.0",
+    "@editorjs/paragraph": "~2.11.6",
+    "@editorjs/quote": "~2.7.2",
+    "@editorjs/table": "~2.4.1",
     "chroma-js": "^3.0.0",
-    "editorjs-audio-player": "^0.0.3",
-    "editorjs-html": "^3.4.3",
+    "editorjs-audio-player": "~0.0.3",
+    "editorjs-html": "~3.4.3",
     "react-select": "^5.8.0",
     "slugify": "^1.6.6"
   },
@@ -53,7 +73,6 @@
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "react": "^18.2.0",
-    "tsup": "^8.1.0",
     "styled-components": "^6.1.11",
     "typescript": "^5.3.2"
   },