mcr-design-systems 1.0.45 → 1.0.48

package/README.md

@@ -93,6 +93,133 @@ To check for code quality issues:
 yarn lint
 ```
 
+## Publishing to NPM
+
+This project includes an automated publishing script that handles version management, building, and publishing to npm.
+
+### Prerequisites for Publishing
+
+Before using the publishing script, ensure you have:
+
+1. **NPM Authentication**: You must be logged into npm with publishing rights
+
+   ```bash
+   npm login
+   ```
+
+2. **Clean Working Directory**: All changes must be committed to git
+
+3. **Correct Branch**: Should be on `main` or `master` branch (script will warn if not)
+
+4. **Node.js and npm**: Must be installed and working
+
+5. **Git Repository**: Must be initialized and connected to a remote
+
+### Using the Publishing Script
+
+The `publish.sh` script automates the entire publishing process:
+
+```bash
+# Increment patch version (1.0.0 → 1.0.1) - Default
+./publish.sh
+
+# Increment minor version (1.0.0 → 1.1.0)
+./publish.sh minor
+
+# Increment major version (1.0.0 → 2.0.0)
+./publish.sh major
+
+# Set specific version
+./publish.sh 1.5.0
+```
+
+### What the Script Does
+
+The publishing script performs these steps automatically:
+
+1. **Safety Checks**:
+   - Verifies npm authentication
+   - Checks for clean working directory
+   - Confirms you're on the correct branch
+   - Validates all dependencies are installed
+
+2. **Quality Assurance**:
+   - Runs linting (if available)
+   - Builds the library (`yarn build-lib`)
+   - Ensures build completes successfully
+
+3. **Version Management**:
+   - Increments version in `package.json`
+   - Shows current → new version for confirmation
+
+4. **Git Operations**:
+   - Commits version changes with standard message
+   - Creates git tag with new version
+   - Pushes changes and tags to remote repository
+
+5. **NPM Publishing**:
+   - Publishes package to npm registry
+   - Shows success confirmation with package URL
+
+### Manual Publishing (Alternative)
+
+If you prefer to publish manually:
+
+```bash
+# 1. Build the library
+yarn build-lib
+
+# 2. Increment version
+npm version patch  # or minor/major
+
+# 3. Commit and tag (if not done by npm version)
+git push origin main --tags
+
+# 4. Publish to npm
+npm publish
+```
+
+### Publishing Best Practices
+
+- **Test thoroughly** before publishing
+- **Use semantic versioning**:
+  - `patch`: Bug fixes (1.0.0 → 1.0.1)
+  - `minor`: New features, backward compatible (1.0.0 → 1.1.0)
+  - `major`: Breaking changes (1.0.0 → 2.0.0)
+- **Write clear commit messages**
+- **Update documentation** when adding new features
+- **Announce releases** to your team
+
+### Troubleshooting Publishing
+
+**"Not logged into npm"**:
+
+```bash
+npm login
+npm whoami  # Verify login
+```
+
+**"Working directory not clean"**:
+
+```bash
+git status          # Check what files are modified
+git add .           # Stage changes
+git commit -m "..."  # Commit changes
+```
+
+**"Publishing failed"**:
+
+- Check if version already exists on npm
+- Verify package name is available
+- Ensure you have publishing rights
+- Check npm registry status
+
+**Script permission denied**:
+
+```bash
+chmod +x publish.sh
+```
+
 ## Library Usage
 
 ### Installation

package/dist/components/Card/index.d.ts

@@ -74,4 +74,4 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, Variant
  * </Card>
  * ```
  */
-export default function Card({ variant, title, titleIcon, actionButton, actionIcon, children, className, showHeader, headerGap, contentPadding, contentGap, width, maxHeaderHeight, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function Card({ variant, title, titleIcon, actionButton, actionIcon, children, className, showHeader, headerGap, contentPadding, contentGap, width, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.js

@@ -1,44 +1,42 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "react";
-import { cardHeaderTitleVariants as N, cardHeaderActionVariants as g, cardHeaderVariants as V, cardContentVariants as b, cardVariants as k } from "./helper/variants.js";
+import { cardHeaderTitleVariants as v, cardHeaderActionVariants as u, cardHeaderVariants as N, cardContentVariants as y, cardVariants as V } from "./helper/variants.js";
 import { cn as n } from "../../shared/utils/cn.js";
-import { dataTestId as j } from "../../shared/utils/dataTestId.js";
-import { Typography as C } from "../Typography/index.js";
-function A({
-  variant: p = "default",
+import { dataTestId as k } from "../../shared/utils/dataTestId.js";
+import { Typography as b } from "../Typography/index.js";
+function z({
+  variant: f = "default",
   title: a,
   titleIcon: e,
-  actionButton: i,
+  actionButton: m,
   actionIcon: s,
-  children: t,
-  className: c,
-  showHeader: f = !0,
-  headerGap: x = "xs",
-  contentPadding: o = "md",
-  contentGap: u = "md",
+  children: l,
+  className: t,
+  showHeader: p = !0,
+  headerGap: c = "xs",
+  contentPadding: x = "md",
+  contentGap: o = "md",
   width: d,
-  maxHeaderHeight: m,
-  ...v
+  ...g
 }) {
-  const y = d ? { width: typeof d == "number" ? `${d}px` : d } : {}, h = m ? { maxHeight: typeof m == "number" ? `${m}px` : m } : {};
-  return /* @__PURE__ */ l(
+  const h = d ? { width: typeof d == "number" ? `${d}px` : d } : {};
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: n(k({ variant: p }), c),
-      style: y,
-      ...j("Card"),
-      ...v,
+      className: n(V({ variant: f }), t),
+      style: h,
+      ...k("Card"),
+      ...g,
       children: [
-        f && (a || e || i || s) && /* @__PURE__ */ l(
+        p && (a || e || m || s) && /* @__PURE__ */ i(
           "div",
           {
-            className: n(V({ gap: x })),
-            style: h,
+            className: n(N({ gap: c }), t),
             children: [
-              (a || e) && /* @__PURE__ */ r("div", { className: N(), children: /* @__PURE__ */ l("div", { className: "flex items-center gap-xs", children: [
+              (a || e) && /* @__PURE__ */ r("div", { className: v(), children: /* @__PURE__ */ i("div", { className: "flex items-center gap-xs", children: [
                 e && /* @__PURE__ */ r("div", { className: "flex-shrink-0 text-fg-neutral-main", children: e }),
                 a && /* @__PURE__ */ r(
-                  C,
+                  b,
                   {
                     variants: "heading-xs",
                     size: "xs",
@@ -47,22 +45,22 @@ function A({
                   }
                 )
               ] }) }),
-              (i || s) && /* @__PURE__ */ l("div", { className: g({ gap: "xs" }), children: [
-                i,
+              (m || s) && /* @__PURE__ */ i("div", { className: u({ gap: "xs" }), children: [
+                m,
                 s && /* @__PURE__ */ r("div", { className: "flex-shrink-0 text-fg-neutral-main", children: s })
               ] })
             ]
           }
         ),
-        t && /* @__PURE__ */ r(
+        l && /* @__PURE__ */ r(
           "div",
           {
-            className: b({
-              padding: o,
-              gap: u
+            className: y({
+              padding: x,
+              gap: o
             }),
             style: { wordWrap: "break-word", overflowWrap: "break-word" },
-            children: t
+            children: l
           }
         )
       ]
@@ -70,5 +68,5 @@ function A({
   );
 }
 export {
-  A as default
+  z as default
 };

package/dist/components/InputBase/index.d.ts

@@ -14,6 +14,7 @@ export interface InputBaseProps extends React.InputHTMLAttributes<HTMLInputEleme
     fontSize?: string;
     error?: boolean;
     clearText?: boolean;
+    focus?: boolean;
     optionalProps?: {
         textAreaClassName?: string;
         maxIndicatorLength?: number;

package/dist/components/InputBase/index.js

@@ -1,10 +1,10 @@
 import { jsxs as I, jsx as o } from "react/jsx-runtime";
-import c, { forwardRef as $, useState as H, useMemo as B, useEffect as R, memo as _ } from "react";
-import { inputBaseVariants as F, textAreaVariants as K } from "./variants.js";
-import W from "../Icon/Icon.js";
+import c, { forwardRef as H, useState as R, useMemo as B, useEffect as _, memo as F } from "react";
+import { inputBaseVariants as K, textAreaVariants as W } from "./variants.js";
+import q from "../Icon/Icon.js";
 import { cn as f } from "../../shared/utils/cn.js";
-import { dataTestId as q } from "../../shared/utils/dataTestId.js";
-const A = (t) => {
+import { dataTestId as A } from "../../shared/utils/dataTestId.js";
+const G = (t) => {
   switch (t) {
     case "sm":
       return 16;
@@ -15,7 +15,7 @@ const A = (t) => {
     default:
       return 20;
   }
-}, N = $(
+}, N = H(
   ({
     disabled: t,
     readOnly: s,
@@ -32,17 +32,18 @@ const A = (t) => {
     error: j,
     clearText: D,
     optionalProps: h,
+    focus: M,
     // inputSize,
     ...e
-  }, M) => {
-    const [k, g] = H(!1), m = S || A(v), p = B(
+  }, k) => {
+    const [L, g] = R(!1), m = S || G(v), p = B(
       () => `inputbase-input-${Math.random().toString(36).substring(2, 9)}`,
       []
     ), d = B(
       () => `inputbase-textarea-${Math.random().toString(36).substring(2, 9)}`,
       []
     );
-    R(() => {
+    _(() => {
       const n = e.value;
       if (n !== void 0) {
         g(String(n).length > 0);
@@ -67,8 +68,8 @@ const A = (t) => {
       }
       return l;
     }, [e.type, e.value, p, d]);
-    const E = D && k ? /* @__PURE__ */ o(
-      W,
+    const E = D && L ? /* @__PURE__ */ o(
+      q,
       {
         name: "x-circle",
         variant: "solid",
@@ -105,7 +106,7 @@ const A = (t) => {
           size: m
         }
       ) : u
-    ] }) : E || u, L = {
+    ] }) : E || u, $ = {
       sm: "h-4",
       md: "h-5",
       lg: "h-6"
@@ -113,16 +114,17 @@ const A = (t) => {
     return /* @__PURE__ */ o("div", { className: "relative justify-center items-center", children: /* @__PURE__ */ I(
       "div",
       {
-        ...q("InputBase"),
+        ...A("InputBase"),
         ref: z,
         ...V,
-        className: F({
+        className: K({
           disabled: !!t,
           className: w,
           color: T,
           size: e?.type === "textarea" ? void 0 : v,
           readOnly: !!s,
-          error: !!j
+          error: !!j,
+          focus: !!M
         }),
         style: { minWidth: C ?? "100%" },
         children: [
@@ -144,7 +146,7 @@ const A = (t) => {
             {
               id: e?.type === "textarea" ? d : void 0,
               className: f(
-                e?.type === "textarea" ? K({
+                e?.type === "textarea" ? W({
                   size: h?.sizeTextArea,
                   disabled: !!t,
                   readOnly: !!s
@@ -162,9 +164,9 @@ const A = (t) => {
               id: e.type === "textarea" ? void 0 : p,
               className: f(
                 "w-full appearance-none bg-transparent font-sans outline-none text-fg-neutral-main",
-                L[v || "md"]
+                $[v || "md"]
               ),
-              ref: M,
+              ref: k,
               disabled: t || s,
               ...e,
               onKeyDown: (n) => {
@@ -194,7 +196,7 @@ const A = (t) => {
   }
 );
 N.displayName = "InputBase";
-const Z = _(N);
+const O = F(N);
 export {
-  Z as default
+  O as default
 };

package/dist/components/InputBase/variants.d.ts

@@ -17,6 +17,10 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
+    focus: {
+        true: string;
+        false: string;
+    };
 }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary", {
     size: {
         sm: string;
@@ -36,6 +40,10 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
+    focus: {
+        true: string;
+        false: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         sm: string;
@@ -55,6 +63,10 @@ export declare const inputBaseVariants: import('tailwind-variants').TVReturnType
         primary: string;
         error: string;
     };
+    focus: {
+        true: string;
+        false: string;
+    };
 }, undefined, "text-fg-neutral-main placeholder:text-fg-neutral-subtlest flex items-center gap-1 rounded-lg tracking-p-medium outline-1 focus-within:border-input-active focus-within:outline-2 font-primary", unknown, unknown, undefined>>;
 export declare const textAreaVariants: import('tailwind-variants').TVReturnType<{
     size: {

package/dist/components/InputBase/variants.js

@@ -19,6 +19,10 @@ const a = e({
     color: {
       primary: "",
       error: ""
+    },
+    focus: {
+      true: "outline-2 outline-fg-brand-rest",
+      false: ""
     }
   },
   defaultVariants: {
@@ -48,6 +52,17 @@ const a = e({
       disabled: !1,
       readOnly: !1,
       className: "outline-fg-accent-error focus-within:outline-fg-accent-error hover:outline-fg-accent-error"
+    },
+    // Focus state - override all other states when focus is true
+    {
+      focus: !0,
+      error: !1,
+      className: "outline-2 outline-fg-brand-rest"
+    },
+    {
+      focus: !0,
+      error: !0,
+      className: "outline-2 outline-fg-accent-error"
     }
   ]
 }), r = e({

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { useRef as s, useEffect as m } from "react";
 import { modal as F } from "./helper/variants.js";
 import { cn as n } from "../../shared/utils/cn.js";
@@ -26,40 +26,40 @@ function _({
   footer: v,
   ...R
 }) {
-  const y = s(null), j = s(null), c = s(null), {
+  const p = s(null), j = s(null), c = s(null), {
     overlay: L,
-    content: T,
-    header: z,
-    titleContainer: D,
-    title: P,
+    content: P,
+    header: T,
+    titleContainer: z,
+    title: D,
     closeButton: S,
     body: I,
-    footer: p,
+    footer: y,
     actionsContainer: M,
     loadingContainer: V
   } = F();
   m(() => {
     if (!i || !u) return;
-    const r = (A) => {
+    const e = (A) => {
       A.key === "Escape" && o();
     };
-    return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [i, u, o]), m(() => {
     if (!i) return;
-    const r = window.getComputedStyle(document.body).overflow;
+    const e = window.getComputedStyle(document.body).overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.body.style.overflow = r;
+      document.body.style.overflow = e;
     };
   }, [i]), m(() => {
     t && i && c.current?.scrollTo({ top: 0, behavior: "instant" });
   }, [t, i, c]);
-  const q = (r) => {
-    w && r.target === y.current && !a && o();
+  const q = (e) => {
+    w && e.target === p.current && !a && o();
   };
-  return i ? /* @__PURE__ */ e(
+  return i ? /* @__PURE__ */ r(
     "div",
     {
-      ref: y,
+      ref: p,
       className: n(L(), B),
       onClick: q,
       ...G("modal"),
@@ -68,24 +68,24 @@ function _({
         "div",
         {
           ref: j,
-          className: n(T({ size: x }), g),
+          className: n(P({ size: x }), g),
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": "modal-title",
           "aria-describedby": k ? "modal-subtitle" : void 0,
           children: [
-            /* @__PURE__ */ d("div", { className: z(), children: [
-              /* @__PURE__ */ e("div", { className: D(), children: /* @__PURE__ */ e(
+            /* @__PURE__ */ d("div", { className: T(), children: [
+              /* @__PURE__ */ r("div", { className: z(), children: /* @__PURE__ */ r(
                 J,
                 {
                   id: "modal-title",
                   variants: "heading-xs",
                   size: "xs",
-                  className: P(),
+                  className: D(),
                   children: b
                 }
               ) }),
-              N && /* @__PURE__ */ e(
+              N && /* @__PURE__ */ r(
                 f,
                 {
                   variant: "outline",
@@ -93,7 +93,9 @@ function _({
                   iconOnly: !0,
                   icon: "x-close",
                   type: "button",
-                  onClick: o,
+                  onClick: (e) => {
+                    e.stopPropagation(), o();
+                  },
                   disabled: a,
                   className: S(),
                   "aria-label": "Close modal"
@@ -108,37 +110,37 @@ function _({
                   "overflow-hidden": t
                 }),
                 children: [
-                  t && /* @__PURE__ */ e("div", { className: V(), children: /* @__PURE__ */ e("div", { className: "w-[44px] h-[44px] p-sm-2 bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ e(H, { width: 20, thickness: 3 }) }) }),
+                  t && /* @__PURE__ */ r("div", { className: V(), children: /* @__PURE__ */ r("div", { className: "w-[44px] h-[44px] p-sm-2 bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ r(H, { width: 20, thickness: 3 }) }) }),
                   C
                 ]
               }
             ),
-            l && /* @__PURE__ */ e("div", { className: n(p(), h), children: /* @__PURE__ */ e("div", { className: M(), children: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
-              /* @__PURE__ */ e(
+            l && /* @__PURE__ */ r("div", { className: n(y(), h), children: /* @__PURE__ */ r("div", { className: M(), children: /* @__PURE__ */ d("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ r(
                 f,
                 {
                   disabled: l.cancelBtn?.isDisabled || a,
                   variant: "outline",
-                  onClick: (r) => {
-                    r.stopPropagation(), l.cancelBtn?.onClick?.();
+                  onClick: (e) => {
+                    e.stopPropagation(), l.cancelBtn?.onClick?.();
                   },
                   children: l.cancelBtn?.label || "Cancel"
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ r(
                 f,
                 {
                   loading: a,
                   disabled: l.confirmBtn?.isDisabled || t || a,
                   variant: l?.confirmBtn?.isConfirm ? "danger" : "primary",
-                  onClick: (r) => {
-                    r.stopPropagation(), l.confirmBtn?.onClick?.();
+                  onClick: (e) => {
+                    e.stopPropagation(), l.confirmBtn?.onClick?.();
                   },
                   children: l.confirmBtn?.label || "Confirm"
                 }
               )
             ] }) }) }),
-            v && /* @__PURE__ */ e("div", { className: n(p(), h), children: v })
+            v && /* @__PURE__ */ r("div", { className: n(y(), h), children: v })
           ]
         }
       )

package/dist/components/Sidebar/helper/variants.js

@@ -47,7 +47,7 @@ const t = e({
       true: [
         "bg-bg-selected-rest text-fg-selected-rest",
         "before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2",
-        "before:w-[2px] before:h-[16px] before:bg-fg-selected-rest",
+        "before:w-[2px] before:h-[16px] before:bg-fg-brand-rest",
         "before:rounded-tr-xs before:rounded-br-xs"
       ],
       false: "text-fg-neutral-subtle hover:bg-bg-neutral-subtle"

package/dist/components/TextField/HelperText.js

@@ -1,45 +1,45 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { Typography as c } from "../Typography/index.js";
-import n from "../Icon/Icon.js";
-import u from "clsx";
-const j = ({
-  text: f,
+import { Typography as n } from "../Typography/index.js";
+import f from "../Icon/Icon.js";
+import g from "clsx";
+const T = ({
+  text: m,
   error: l = !1,
-  haveIcon: d = !0,
-  iconsCustom: m,
+  haveIcon: h = !0,
+  iconsCustom: o,
   className: r,
   iconsSize: t = 16,
-  customContent: o,
+  customContent: d,
   requirementsList: a
 }) => {
-  if (o)
+  if (d)
     return /* @__PURE__ */ e(
       "div",
       {
         className: `self-stretch inline-flex flex-col justify-start items-start ${r || ""}`,
-        children: o
+        children: d
       }
     );
   if (a) {
-    const { items: x } = a, h = a.showTitle !== !1, p = a.title || "Requirements:";
+    const { items: x } = a, u = a.showTitle !== !1, p = a.title || "Requirements:", c = x.every((s) => s.isValid);
     return /* @__PURE__ */ i("div", { className: `mt-1 space-y-1 ${r || ""}`, children: [
-      h && /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
+      u && /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
         /* @__PURE__ */ e(
-          n,
+          f,
           {
-            name: "alert-octagon",
-            className: "text-fg-accent-error",
+            name: c ? "check-circle" : "alert-octagon",
+            className: c ? "text-fg-accent-success" : "text-fg-accent-error",
             variant: "solid",
             size: typeof t == "number" ? t : 16
           }
         ),
         /* @__PURE__ */ e(
-          c,
+          n,
           {
             variants: "body",
             size: "sm",
-            color: "fg-accent-error",
+            color: c ? "fg-accent-success" : "fg-accent-error",
             className: "font-medium",
             children: p
           }
@@ -48,23 +48,23 @@ const j = ({
       /* @__PURE__ */ e("ul", { className: "list-disc ml-9", children: x.map((s) => /* @__PURE__ */ e(
         "li",
         {
-          className: u("", {
+          className: g("", {
             "marker:text-fg-accent-success text-fg-accent-success": s.isValid,
             "marker:text-fg-accent-error text-fg-accent-error": !s.isValid
           }),
-          children: /* @__PURE__ */ e(c, { variants: "body", size: "sm", className: "text-inherit", children: s.text })
+          children: /* @__PURE__ */ e(n, { variants: "body", size: "sm", className: "text-inherit", children: s.text })
         },
         s.id
       )) })
     ] });
   }
-  return f ? /* @__PURE__ */ e(
+  return m ? /* @__PURE__ */ e(
     "div",
     {
       className: `self-stretch inline-flex flex-col justify-start items-start ${r || ""}`,
       children: /* @__PURE__ */ i("div", { className: "self-stretch inline-flex justify-start items-start gap-1", children: [
-        l && (m || /* @__PURE__ */ e(
-          n,
+        l && (o || /* @__PURE__ */ e(
+          f,
           {
             name: "alert-octagon",
             className: "text-fg-accent-error",
@@ -72,8 +72,8 @@ const j = ({
             size: typeof t == "number" ? t : 16
           }
         )),
-        d && !l && /* @__PURE__ */ e(
-          n,
+        h && !l && /* @__PURE__ */ e(
+          f,
           {
             name: "help-circle",
             variant: "line",
@@ -82,13 +82,13 @@ const j = ({
           }
         ),
         /* @__PURE__ */ e("div", { className: "flex-1 justify-start text-left flex flex-wrap items-center gap-0", children: /* @__PURE__ */ e(
-          c,
+          n,
           {
             variants: "body",
             size: "sm",
             color: l ? "fg-accent-error" : "fg-neutral-subtle",
             className: "inline",
-            children: f
+            children: m
           }
         ) })
       ] })
@@ -96,5 +96,5 @@ const j = ({
   ) : null;
 };
 export {
-  j as default
+  T as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.45",
+  "version": "1.0.48",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",