@intlayer/design-system 5.1.5 → 5.1.7

package/dist/components/Form/FormDescription.cjs

@@ -5,14 +5,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const components_Form_FormField = require("./FormField.cjs");
 const FormDescription = (props) => {
   const { formDescriptionId } = components_Form_FormField.useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      className: "text-neutral dark:text-neutral-dark text-sm",
-      id: formDescriptionId,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral text-sm", id: formDescriptionId, ...props });
 };
 exports.FormDescription = FormDescription;
 //# sourceMappingURL=FormDescription.cjs.map

package/dist/components/Form/FormDescription.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormDescription.cjs","sources":["../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      className=\"text-neutral dark:text-neutral-dark text-sm\"\n      id={formDescriptionId}\n      {...props}\n    />\n  );\n};\n"],"names":["useFormField","jsx"],"mappings":";;;;;AAKa,MAAA,kBAA4D,CACvE,UACG;AACG,QAAA,EAAE,kBAAkB,IAAIA,uCAAa;AAGzC,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}
+{"version":3,"file":"FormDescription.cjs","sources":["../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n  );\n};\n"],"names":["useFormField"],"mappings":";;;;;AAKa,MAAA,kBAA4D,CACvE,UACG;AACG,QAAA,EAAE,kBAAkB,IAAIA,uCAAa;AAE3C,wCACG,KAAE,EAAA,WAAU,wBAAuB,IAAI,mBAAoB,GAAG,OAAO;AAE1E;;"}

package/dist/components/Form/FormDescription.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormDescription.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGrD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAYpE,CAAC"}
+{"version":3,"file":"FormDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormDescription.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGrD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAQpE,CAAC"}

package/dist/components/Form/FormDescription.mjs

@@ -3,14 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useFormField } from "./FormField.mjs";
 const FormDescription = (props) => {
   const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      className: "text-neutral dark:text-neutral-dark text-sm",
-      id: formDescriptionId,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsx("p", { className: "text-neutral text-sm", id: formDescriptionId, ...props });
 };
 export {
   FormDescription

package/dist/components/Form/FormDescription.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormDescription.mjs","sources":["../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      className=\"text-neutral dark:text-neutral-dark text-sm\"\n      id={formDescriptionId}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAKa,MAAA,kBAA4D,CACvE,UACG;AACG,QAAA,EAAE,kBAAkB,IAAI,aAAa;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,MACH,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"FormDescription.mjs","sources":["../../../src/components/Form/FormDescription.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>> = (\n  props\n) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p className=\"text-neutral text-sm\" id={formDescriptionId} {...props} />\n  );\n};\n"],"names":[],"mappings":";;;AAKa,MAAA,kBAA4D,CACvE,UACG;AACG,QAAA,EAAE,kBAAkB,IAAI,aAAa;AAE3C,6BACG,KAAE,EAAA,WAAU,wBAAuB,IAAI,mBAAoB,GAAG,OAAO;AAE1E;"}

package/dist/components/Form/FormItem.cjs

@@ -11,7 +11,7 @@ const FormItem = (props) => {
     }),
     [id]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext, { value: memoValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext, { value: memoValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 p-2", ...props }) });
 };
 const FormItemContext = ReactExports.createContext(
   {}

package/dist/components/Form/FormItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.cjs","sources":["../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  useId,\n  createContext,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = (props) => {\n  const id = useId();\n\n  const memoValue = useMemo(\n    () => ({\n      id,\n    }),\n    [id]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"space-y-2\" {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"names":["useId","useMemo","jsx","createContext"],"mappings":";;;;;AAUa,MAAA,WAA+C,CAAC,UAAU;AACrE,QAAM,KAAKA,aAAAA,MAAM;AAEjB,QAAM,YAAYC,aAAA;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,EAAE;AAAA,EACL;AAGE,SAAAC,2BAAA,IAAC,iBAAgB,EAAA,OAAO,WACtB,UAAAA,2BAAAA,IAAC,SAAI,WAAU,aAAa,GAAG,MAAA,CAAO,EACxC,CAAA;AAEJ;AAMO,MAAM,kBAAkBC,aAAA;AAAA,EAC7B,CAAA;AACF;;;"}
+{"version":3,"file":"FormItem.cjs","sources":["../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  useId,\n  createContext,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = (props) => {\n  const id = useId();\n\n  const memoValue = useMemo(\n    () => ({\n      id,\n    }),\n    [id]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"flex flex-col gap-2 p-2\" {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"names":["useId","useMemo","jsx","createContext"],"mappings":";;;;;AAUa,MAAA,WAA+C,CAAC,UAAU;AACrE,QAAM,KAAKA,aAAAA,MAAM;AAEjB,QAAM,YAAYC,aAAA;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,EAAE;AAAA,EACL;AAGE,SAAAC,2BAAA,IAAC,iBAAgB,EAAA,OAAO,WACtB,UAAAA,2BAAAA,IAAC,SAAI,WAAU,2BAA2B,GAAG,MAAA,CAAO,EACtD,CAAA;AAEJ;AAMO,MAAM,kBAAkBC,aAAA;AAAA,EAC7B,CAAA;AACF;;;"}

package/dist/components/Form/FormItem.mjs

@@ -9,7 +9,7 @@ const FormItem = (props) => {
     }),
     [id]
   );
-  return /* @__PURE__ */ jsx(FormItemContext, { value: memoValue, children: /* @__PURE__ */ jsx("div", { className: "space-y-2", ...props }) });
+  return /* @__PURE__ */ jsx(FormItemContext, { value: memoValue, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", ...props }) });
 };
 const FormItemContext = createContext(
   {}

package/dist/components/Form/FormItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.mjs","sources":["../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  useId,\n  createContext,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = (props) => {\n  const id = useId();\n\n  const memoValue = useMemo(\n    () => ({\n      id,\n    }),\n    [id]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"space-y-2\" {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"names":[],"mappings":";;;AAUa,MAAA,WAA+C,CAAC,UAAU;AACrE,QAAM,KAAK,MAAM;AAEjB,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,EAAE;AAAA,EACL;AAGE,SAAA,oBAAC,iBAAgB,EAAA,OAAO,WACtB,UAAA,oBAAC,SAAI,WAAU,aAAa,GAAG,MAAA,CAAO,EACxC,CAAA;AAEJ;AAMO,MAAM,kBAAkB;AAAA,EAC7B,CAAA;AACF;"}
+{"version":3,"file":"FormItem.mjs","sources":["../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  useId,\n  createContext,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = (props) => {\n  const id = useId();\n\n  const memoValue = useMemo(\n    () => ({\n      id,\n    }),\n    [id]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"flex flex-col gap-2 p-2\" {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"names":[],"mappings":";;;AAUa,MAAA,WAA+C,CAAC,UAAU;AACrE,QAAM,KAAK,MAAM;AAEjB,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,IAAA;AAAA,IAEF,CAAC,EAAE;AAAA,EACL;AAGE,SAAA,oBAAC,iBAAgB,EAAA,OAAO,WACtB,UAAA,oBAAC,SAAI,WAAU,2BAA2B,GAAG,MAAA,CAAO,EACtD,CAAA;AAEJ;AAMO,MAAM,kBAAkB;AAAA,EAC7B,CAAA;AACF;"}

package/dist/components/Form/FormLabel.cjs

@@ -13,11 +13,7 @@ const FormLabel = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     components_Label_index.Label,
     {
-      className: utils_cn.cn(
-        "mb-2",
-        error && "text-error dark:text-error-dark",
-        className
-      ),
+      className: utils_cn.cn("mb-2", error && "text-error", className),
       htmlFor: formItemId,
       ...props
     }

package/dist/components/Form/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(\n        'mb-2',\n        error && 'text-error dark:text-error-dark',\n        className\n      )}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"names":["useFormField","jsx","Label","cn"],"mappings":";;;;;;;AAOO,MAAM,YAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,WAAW,IAAIA,uCAAa;AAGzC,SAAAC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}
+{"version":3,"file":"FormLabel.cjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn('mb-2', error && 'text-error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"names":["useFormField","jsx","Label","cn"],"mappings":";;;;;;;AAOO,MAAM,YAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,WAAW,IAAIA,uCAAa;AAGzC,SAAAC,2BAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA,GAAG,QAAQ,SAAS,cAAc,SAAS;AAAA,MACtD,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}

package/dist/components/Form/FormLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAiBtD,CAAC"}
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAatD,CAAC"}

package/dist/components/Form/FormLabel.mjs

@@ -11,11 +11,7 @@ const FormLabel = ({
   return /* @__PURE__ */ jsx(
     Label,
     {
-      className: cn(
-        "mb-2",
-        error && "text-error dark:text-error-dark",
-        className
-      ),
+      className: cn("mb-2", error && "text-error", className),
       htmlFor: formItemId,
       ...props
     }

package/dist/components/Form/FormLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.mjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn(\n        'mb-2',\n        error && 'text-error dark:text-error-dark',\n        className\n      )}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,YAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"FormLabel.mjs","sources":["../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n  className,\n  ...props\n}) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      className={cn('mb-2', error && 'text-error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,YAA8C,CAAC;AAAA,EAC1D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,SAAS,cAAc,SAAS;AAAA,MACtD,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/Form/FormMessage.cjs

@@ -15,7 +15,7 @@ const FormMessage = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
-      className: "text-error dark:text-error-dark text-xs font-medium",
+      className: "text-error text-xs font-medium",
       role: "alert",
       id: formMessageId,
       ...props,

package/dist/components/Form/FormMessage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormMessage.cjs","sources":["../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"text-error dark:text-error-dark text-xs font-medium\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"names":["useFormField","jsx"],"mappings":";;;;;AAKO,MAAM,cAAwD,CAAC;AAAA,EACpE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,cAAc,IAAIA,uCAAa;AAC9C,QAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;AAEpD,MAAI,CAAC,MAAM;AACF,WAAA;AAAA,EAAA;AAIP,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
+{"version":3,"file":"FormMessage.cjs","sources":["../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"text-error text-xs font-medium\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"names":["useFormField","jsx"],"mappings":";;;;;AAKO,MAAM,cAAwD,CAAC;AAAA,EACpE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,cAAc,IAAIA,uCAAa;AAC9C,QAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;AAEpD,MAAI,CAAC,MAAM;AACF,WAAA;AAAA,EAAA;AAIP,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;;"}

package/dist/components/Form/FormMessage.mjs

@@ -13,7 +13,7 @@ const FormMessage = ({
   return /* @__PURE__ */ jsx(
     "p",
     {
-      className: "text-error dark:text-error-dark text-xs font-medium",
+      className: "text-error text-xs font-medium",
       role: "alert",
       id: formMessageId,
       ...props,

package/dist/components/Form/FormMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormMessage.mjs","sources":["../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"text-error dark:text-error-dark text-xs font-medium\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,cAAwD,CAAC;AAAA,EACpE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,cAAc,IAAI,aAAa;AAC9C,QAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;AAEpD,MAAI,CAAC,MAAM;AACF,WAAA;AAAA,EAAA;AAIP,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"FormMessage.mjs","sources":["../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n  children,\n  ...props\n}) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? '') : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      className=\"text-error text-xs font-medium\"\n      role=\"alert\"\n      id={formMessageId}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,cAAwD,CAAC;AAAA,EACpE;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,OAAO,cAAc,IAAI,aAAa;AAC9C,QAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;AAEpD,MAAI,CAAC,MAAM;AACF,WAAA;AAAA,EAAA;AAIP,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,IAAI;AAAA,MACH,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/Form/elements/AutoSizeTextAreaElement.cjs

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("../../TextArea/AutoSizeTextArea.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.AutoSizedTextAreaElement = components_Form_layout_FormItemLayout.AutoSizedTextAreaElement;
 //# sourceMappingURL=AutoSizeTextAreaElement.cjs.map

package/dist/components/Form/elements/AutoSizeTextAreaElement.mjs

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../TextArea/AutoSizeTextArea.mjs";
-import { A } from "../../../Form-BZUDRfoN.js";
+import { A } from "../../../Form-MjLzPGze.js";
 export {
   A as AutoSizedTextAreaElement
 };

package/dist/components/Form/elements/CheckboxElement.cjs

@@ -5,6 +5,6 @@ require("../../Input/Input.cjs");
 require("lucide-react");
 require("react");
 require("../../Input/Checkbox.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.CheckboxElement = components_Form_layout_FormItemLayout.CheckboxElement;
 //# sourceMappingURL=CheckboxElement.cjs.map

package/dist/components/Form/elements/CheckboxElement.mjs

@@ -3,7 +3,7 @@ import "../../Input/Input.mjs";
 import "lucide-react";
 import "react";
 import "../../Input/Checkbox.mjs";
-import { C } from "../../../Form-BZUDRfoN.js";
+import { C } from "../../../Form-MjLzPGze.js";
 export {
   C as CheckboxElement
 };

package/dist/components/Form/elements/EditableFieldInputElement.cjs

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("../../EditableField/EditableFieldInput.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.EditableFieldInputElement = components_Form_layout_FormItemLayout.EditableFieldInputElement;
 //# sourceMappingURL=EditableFieldInputElement.cjs.map

package/dist/components/Form/elements/EditableFieldInputElement.mjs

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../EditableField/EditableFieldInput.mjs";
-import { E } from "../../../Form-BZUDRfoN.js";
+import { E } from "../../../Form-MjLzPGze.js";
 export {
   E as EditableFieldInputElement
 };

package/dist/components/Form/elements/EditableFieldTextAreaElement.cjs

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("../../EditableField/EditableFieldTextArea.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.EditableFieldTextAreaElement = components_Form_layout_FormItemLayout.EditableFieldTextAreaElement;
 //# sourceMappingURL=EditableFieldTextAreaElement.cjs.map

package/dist/components/Form/elements/EditableFieldTextAreaElement.mjs

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../EditableField/EditableFieldTextArea.mjs";
-import { c } from "../../../Form-BZUDRfoN.js";
+import { c } from "../../../Form-MjLzPGze.js";
 export {
   c as EditableFieldTextAreaElement
 };

package/dist/components/Form/elements/FormElement.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 require("clsx");
 require("tailwind-merge");

package/dist/components/Form/elements/FormElement.mjs

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react-hook-form";
-import { a } from "../../../Form-BZUDRfoN.js";
+import { a } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 import "clsx";
 import "tailwind-merge";

package/dist/components/Form/elements/InputElement.cjs

@@ -5,6 +5,6 @@ require("../../Input/Input.cjs");
 require("lucide-react");
 require("react");
 require("../../Input/Checkbox.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.InputElement = components_Form_layout_FormItemLayout.InputElement;
 //# sourceMappingURL=InputElement.cjs.map

package/dist/components/Form/elements/InputElement.mjs

@@ -3,7 +3,7 @@ import "../../Input/Input.mjs";
 import "lucide-react";
 import "react";
 import "../../Input/Checkbox.mjs";
-import { I } from "../../../Form-BZUDRfoN.js";
+import { I } from "../../../Form-MjLzPGze.js";
 export {
   I as InputElement
 };

package/dist/components/Form/elements/InputPasswordElement.cjs

@@ -4,6 +4,6 @@ require("react/jsx-runtime");
 require("../../Input/Input.cjs");
 require("../../Input/InputPassword.cjs");
 require("../../Input/Checkbox.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.InputPasswordElement = components_Form_layout_FormItemLayout.InputPasswordElement;
 //# sourceMappingURL=InputPasswordElement.cjs.map

package/dist/components/Form/elements/InputPasswordElement.mjs

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../Input/Input.mjs";
 import "../../Input/InputPassword.mjs";
 import "../../Input/Checkbox.mjs";
-import { b } from "../../../Form-BZUDRfoN.js";
+import { b } from "../../../Form-MjLzPGze.js";
 export {
   b as InputPasswordElement
 };

package/dist/components/Form/elements/MultiselectElement.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
 require("../../Select/Multiselect.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 exports.MultiSelectElement = components_Form_layout_FormItemLayout.MultiSelectElement;
 //# sourceMappingURL=MultiselectElement.cjs.map

package/dist/components/Form/elements/MultiselectElement.mjs

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react-hook-form";
 import "../../Select/Multiselect.mjs";
-import { M } from "../../../Form-BZUDRfoN.js";
+import { M } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 export {
   M as MultiSelectElement

package/dist/components/Form/elements/SelectElement.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
 require("../../Select/Select.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 exports.SelectElement = components_Form_layout_FormItemLayout.SelectElement;
 //# sourceMappingURL=SelectElement.cjs.map

package/dist/components/Form/elements/SelectElement.mjs

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react-hook-form";
 import "../../Select/Select.mjs";
-import { S } from "../../../Form-BZUDRfoN.js";
+import { S } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 export {
   S as SelectElement

package/dist/components/Form/elements/SwitchSelectorElement.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react-hook-form");
 require("../../SwitchSelector/index.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("../FormField.cjs");
 exports.SwitchSelectorElement = components_Form_layout_FormItemLayout.SwitchSelectorElement;
 //# sourceMappingURL=SwitchSelectorElement.cjs.map

package/dist/components/Form/elements/SwitchSelectorElement.mjs

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react-hook-form";
 import "../../SwitchSelector/index.mjs";
-import { e } from "../../../Form-BZUDRfoN.js";
+import { e } from "../../../Form-MjLzPGze.js";
 import "../FormField.mjs";
 export {
   e as SwitchSelectorElement

package/dist/components/Form/elements/TextAreaElement.cjs

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("../../TextArea/TextArea.cjs");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.TextAreaElement = components_Form_layout_FormItemLayout.TextAreaElement;
 //# sourceMappingURL=TextAreaElement.cjs.map

package/dist/components/Form/elements/TextAreaElement.mjs

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../TextArea/TextArea.mjs";
-import { T } from "../../../Form-BZUDRfoN.js";
+import { T } from "../../../Form-MjLzPGze.js";
 export {
   T as TextAreaElement
 };

package/dist/components/Form/elements/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 exports.EditableFieldInputElement = components_Form_layout_FormItemLayout.EditableFieldInputElement;
 exports.EditableFieldTextAreaElement = components_Form_layout_FormItemLayout.EditableFieldTextAreaElement;
 exports.FormElement = components_Form_layout_FormItemLayout.FormElement;

package/dist/components/Form/elements/index.mjs

@@ -1,4 +1,4 @@
-import { E, c, a, I, b, T } from "../../../Form-BZUDRfoN.js";
+import { E, c, a, I, b, T } from "../../../Form-MjLzPGze.js";
 export {
   E as EditableFieldInputElement,
   c as EditableFieldTextAreaElement,

package/dist/components/Form/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_Form_FormBase = require("./FormBase.cjs");
 const components_Form_FormField = require("./FormField.cjs");
-const components_Form_layout_FormItemLayout = require("../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../Form-BpxW17v4.cjs");
 exports.useForm = components_Form_FormBase.useForm;
 exports.useFormField = components_Form_FormField.useFormField;
 exports.Form = components_Form_layout_FormItemLayout.Form;

package/dist/components/Form/index.mjs

@@ -1,6 +1,6 @@
 import { useForm } from "./FormBase.mjs";
 import { useFormField } from "./FormField.mjs";
-import { F } from "../../Form-BZUDRfoN.js";
+import { F } from "../../Form-MjLzPGze.js";
 export {
   F as Form,
   useForm,

package/dist/components/Form/layout/FormItemLayout.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 require("./FormLabelLayout.cjs");
 exports.FormItemLayout = components_Form_layout_FormItemLayout.FormItemLayout;
 //# sourceMappingURL=FormItemLayout.cjs.map

package/dist/components/Form/layout/FormItemLayout.mjs

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { d } from "../../../Form-BZUDRfoN.js";
+import { d } from "../../../Form-MjLzPGze.js";
 import "./FormLabelLayout.mjs";
 export {
   d as FormItemLayout

package/dist/components/Form/layout/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Form_layout_FormItemLayout = require("../../../Form-yi0CMK-a.cjs");
+const components_Form_layout_FormItemLayout = require("../../../Form-BpxW17v4.cjs");
 const components_Form_layout_FormLabelLayout = require("./FormLabelLayout.cjs");
 exports.FormItemLayout = components_Form_layout_FormItemLayout.FormItemLayout;
 exports.FormLabelLayout = components_Form_layout_FormLabelLayout.FormLabelLayout;

package/dist/components/Form/layout/index.mjs

@@ -1,4 +1,4 @@
-import { d } from "../../../Form-BZUDRfoN.js";
+import { d } from "../../../Form-MjLzPGze.js";
 import { FormLabelLayout } from "./FormLabelLayout.mjs";
 export {
   d as FormItemLayout,

package/dist/components/Headers/index.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const utils_cn = require("../../utils/cn.cjs");
 const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
-const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({
   className,
   ...props

package/dist/components/Headers/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["jsx","cn","id"],"mappings":"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"}

package/dist/components/Headers/index.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.mjs";
 const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
-const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
+const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
 const StyledH1 = ({
   className,
   ...props

package/dist/components/Headers/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer dark:after:text-neutral-dark after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["id"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, MouseEvent, JSX } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />\n);\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h2\n    className={cn('mt-5 text-2xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h3\n    className={cn('mt-3 text-xl font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h4\n    className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  // eslint-disable-next-line jsx-a11y/heading-has-content\n  <h5\n    className={cn('mt-3 text-base font-bold', styledHeading, className)}\n    {...props}\n  />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left,\n    parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n    afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n    afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX,\n    mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n"],"names":["id"],"mappings":"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"}

package/dist/components/IDE/Code.cjs

@@ -42,7 +42,7 @@ const Code = ({
           ...props,
           children: [
             showHeader && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card/50 dark:bg-card-dark/50 text-neutral dark:text-neutral-dark grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card/50 text-neutral grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl py-1.5 pl-4 pr-12 text-xs", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: fileName ?? language }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                   packageManager && /* @__PURE__ */ jsxRuntime.jsx(components_IDE_PackageManagerSelector.PackageManagerSelector, {}),