@intlayer/design-system 5.1.3 → 5.1.5

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

@@ -1 +1 @@
-{"version":3,"file":"FormBase.cjs","sources":["../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { type HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  useForm as useFormReactHookForm,\n  type UseFormProps,\n} from 'react-hook-form';\nimport type { ZodType, z } from 'zod';\nimport { cn } from '../../utils/cn';\n\ntype FormProps<T extends ZodType> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n};\n\nexport const Form = <T extends ZodType>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: T) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.errors.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex size-full flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nForm.displayName = 'Form';\n\nexport const useForm = <T extends ZodType>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema),\n    ...props,\n  });\n\n  const isSubmitting = form.formState.isSubmitting;\n  const isSubmitted = form.formState.isSubmitted;\n  const isLoading = form.formState.isLoading;\n  const isValid = form.formState.isValid;\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"names":["jsx","FormProvider","cn","useFormReactHookForm","zodResolver"],"mappings":";;;;;;;AAsBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,MAAI,MAAM,OAAO,GAAG,SAAS,YAAY;AAEjC,UAAA;AAAA,EAAA;AAGV;AAEO,MAAM,OAAO,CAAoB;AAAA,EACtC;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AACZ,QAAA,WAAW,OAAO,WAAc;AACpC,UAAM,eAAe,QAAQ,UAAU,MAAM,KAAK;AAAA,MAChD,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAGM,UAAA,cAAc,eAAe,MAAM,CAAC;AAE1C,QAAI,aAAa,SAAS;AACxB,YAAM,cAAc,sBAAsB,aAAa,IAAI,CAAC;AAAA,IAAA,OACvD;AACC,YAAA;AAAA,QACJ;AAAA,UACE,IAAI;AAAA,YACF,aAAa,MAAM,OAAO,IAAI,CAAC,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI;AAAA,UAAA;AAAA,QACnE;AAAA,MAEJ;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAA,2BAAA,IAACC,cAAc,cAAA,EAAA,GAAG,OAChB,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,SAAAA,GAAG,mCAAmC,SAAS;AAAA,MAC1D,UAAU,MAAM,aAAa,QAAQ;AAAA,MACrC,cAAc,eAAe,OAAO;AAAA,MAEnC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,KAAK,cAAc;AAEN,MAAA,UAAU,CACrB,QACA,UACG;AACH,QAAM,OAAOC,cAAAA,QAAiC;AAAA,IAC5C,UAAUC,MAAY,MAAM;AAAA,IAC5B,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,eAAe,KAAK,UAAU;AAC9B,QAAA,cAAc,KAAK,UAAU;AAC7B,QAAA,YAAY,KAAK,UAAU;AAC3B,QAAA,UAAU,KAAK,UAAU;AAExB,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;"}
+{"version":3,"file":"FormBase.cjs","sources":["../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { type HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  useForm as useFormReactHookForm,\n  type UseFormProps,\n} from 'react-hook-form';\nimport type { ZodType, z } from 'zod';\nimport { cn } from '../../utils/cn';\n\ntype FormProps<T extends ZodType> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n};\n\nexport const Form = <T extends ZodType>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: T) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.errors.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex size-full flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodType>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema),\n    ...props,\n  });\n\n  const isSubmitting = form.formState.isSubmitting;\n  const isSubmitted = form.formState.isSubmitted;\n  const isLoading = form.formState.isLoading;\n  const isValid = form.formState.isValid;\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"names":["jsx","FormProvider","cn","useFormReactHookForm","zodResolver"],"mappings":";;;;;;;AAsBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,MAAI,MAAM,OAAO,GAAG,SAAS,YAAY;AAEjC,UAAA;AAAA,EAAA;AAGV;AAEO,MAAM,OAAO,CAAoB;AAAA,EACtC;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AACZ,QAAA,WAAW,OAAO,WAAc;AACpC,UAAM,eAAe,QAAQ,UAAU,MAAM,KAAK;AAAA,MAChD,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAGM,UAAA,cAAc,eAAe,MAAM,CAAC;AAE1C,QAAI,aAAa,SAAS;AACxB,YAAM,cAAc,sBAAsB,aAAa,IAAI,CAAC;AAAA,IAAA,OACvD;AACC,YAAA;AAAA,QACJ;AAAA,UACE,IAAI;AAAA,YACF,aAAa,MAAM,OAAO,IAAI,CAAC,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI;AAAA,UAAA;AAAA,QACnE;AAAA,MAEJ;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAA,2BAAA,IAACC,cAAc,cAAA,EAAA,GAAG,OAChB,UAAAD,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWE,SAAAA,GAAG,mCAAmC,SAAS;AAAA,MAC1D,UAAU,MAAM,aAAa,QAAQ;AAAA,MACrC,cAAc,eAAe,OAAO;AAAA,MAEnC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEa,MAAA,UAAU,CACrB,QACA,UACG;AACH,QAAM,OAAOC,cAAAA,QAAiC;AAAA,IAC5C,UAAUC,MAAY,MAAM;AAAA,IAC5B,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,eAAe,KAAK,UAAU;AAC9B,QAAA,cAAc,KAAK,UAAU;AAC7B,QAAA,YAAY,KAAK,UAAU;AAC3B,QAAA,UAAU,KAAK,UAAU;AAExB,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;"}

package/dist/components/Form/FormBase.d.ts

@@ -8,10 +8,7 @@ type FormProps<T extends ZodType> = HTMLAttributes<HTMLFormElement> & FormProvid
     onSubmitError?: (error: Error) => void | Promise<void>;
     autoComplete?: boolean;
 };
-export declare const Form: {
-    <T extends ZodType>({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const Form: <T extends ZodType>({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete, ...props }: FormProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const useForm: <T extends ZodType>(schema: T, props?: UseFormProps<z.infer<T>>) => {
     form: import('react-hook-form').UseFormReturn<z.TypeOf<T>, any, undefined>;
     isSubmitting: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"FormBase.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormBase.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGtC,KAAK,SAAS,CAAC,CAAC,SAAS,OAAO,IAAI,cAAc,CAAC,eAAe,CAAC,GACjE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG;IAC9B,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAYJ,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,OAAO,2JASnC,SAAS,CAAC,CAAC,CAAC;;CAkCd,CAAC;AAIF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,OAAO,UAC/B,CAAC,UACD,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;;;;CAmBjC,CAAC"}
+{"version":3,"file":"FormBase.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormBase.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGtC,KAAK,SAAS,CAAC,CAAC,SAAS,OAAO,IAAI,cAAc,CAAC,eAAe,CAAC,GACjE,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG;IAC9B,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAYJ,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,OAAO,2JASnC,SAAS,CAAC,CAAC,CAAC,4CAkCd,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,OAAO,UAC/B,CAAC,UACD,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;;;;;;CAmBjC,CAAC"}

package/dist/components/Form/FormBase.mjs

@@ -46,7 +46,6 @@ const Form = ({
     }
   ) });
 };
-Form.displayName = "Form";
 const useForm = (schema, props) => {
   const form = useForm$1({
     resolver: t(schema),

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

@@ -1 +1 @@
-{"version":3,"file":"FormBase.mjs","sources":["../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { type HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  useForm as useFormReactHookForm,\n  type UseFormProps,\n} from 'react-hook-form';\nimport type { ZodType, z } from 'zod';\nimport { cn } from '../../utils/cn';\n\ntype FormProps<T extends ZodType> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n};\n\nexport const Form = <T extends ZodType>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: T) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.errors.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex size-full flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nForm.displayName = 'Form';\n\nexport const useForm = <T extends ZodType>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema),\n    ...props,\n  });\n\n  const isSubmitting = form.formState.isSubmitting;\n  const isSubmitted = form.formState.isSubmitted;\n  const isLoading = form.formState.isLoading;\n  const isValid = form.formState.isValid;\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"names":["useFormReactHookForm","zodResolver"],"mappings":";;;;;AAsBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,MAAI,MAAM,OAAO,GAAG,SAAS,YAAY;AAEjC,UAAA;AAAA,EAAA;AAGV;AAEO,MAAM,OAAO,CAAoB;AAAA,EACtC;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AACZ,QAAA,WAAW,OAAO,WAAc;AACpC,UAAM,eAAe,QAAQ,UAAU,MAAM,KAAK;AAAA,MAChD,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAGM,UAAA,cAAc,eAAe,MAAM,CAAC;AAE1C,QAAI,aAAa,SAAS;AACxB,YAAM,cAAc,sBAAsB,aAAa,IAAI,CAAC;AAAA,IAAA,OACvD;AACC,YAAA;AAAA,QACJ;AAAA,UACE,IAAI;AAAA,YACF,aAAa,MAAM,OAAO,IAAI,CAAC,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI;AAAA,UAAA;AAAA,QACnE;AAAA,MAEJ;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAA,oBAAC,cAAc,EAAA,GAAG,OAChB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,MAC1D,UAAU,MAAM,aAAa,QAAQ;AAAA,MACrC,cAAc,eAAe,OAAO;AAAA,MAEnC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,KAAK,cAAc;AAEN,MAAA,UAAU,CACrB,QACA,UACG;AACH,QAAM,OAAOA,UAAiC;AAAA,IAC5C,UAAUC,EAAY,MAAM;AAAA,IAC5B,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,eAAe,KAAK,UAAU;AAC9B,QAAA,cAAc,KAAK,UAAU;AAC7B,QAAA,YAAY,KAAK,UAAU;AAC3B,QAAA,UAAU,KAAK,UAAU;AAExB,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}
+{"version":3,"file":"FormBase.mjs","sources":["../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { type HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  useForm as useFormReactHookForm,\n  type UseFormProps,\n} from 'react-hook-form';\nimport type { ZodType, z } from 'zod';\nimport { cn } from '../../utils/cn';\n\ntype FormProps<T extends ZodType> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n};\n\nexport const Form = <T extends ZodType>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: T) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.errors.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex size-full flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodType>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema),\n    ...props,\n  });\n\n  const isSubmitting = form.formState.isSubmitting;\n  const isSubmitted = form.formState.isSubmitted;\n  const isLoading = form.formState.isLoading;\n  const isValid = form.formState.isValid;\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"names":["useFormReactHookForm","zodResolver"],"mappings":";;;;;AAsBA,MAAM,gBAAgB,OAAO,OAAY;AAGvC,MAAI,MAAM,OAAO,GAAG,SAAS,YAAY;AAEjC,UAAA;AAAA,EAAA;AAGV;AAEO,MAAM,OAAO,CAAoB;AAAA,EACtC;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AACZ,QAAA,WAAW,OAAO,WAAc;AACpC,UAAM,eAAe,QAAQ,UAAU,MAAM,KAAK;AAAA,MAChD,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAGM,UAAA,cAAc,eAAe,MAAM,CAAC;AAE1C,QAAI,aAAa,SAAS;AACxB,YAAM,cAAc,sBAAsB,aAAa,IAAI,CAAC;AAAA,IAAA,OACvD;AACC,YAAA;AAAA,QACJ;AAAA,UACE,IAAI;AAAA,YACF,aAAa,MAAM,OAAO,IAAI,CAAC,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI;AAAA,UAAA;AAAA,QACnE;AAAA,MAEJ;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAA,oBAAC,cAAc,EAAA,GAAG,OAChB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,mCAAmC,SAAS;AAAA,MAC1D,UAAU,MAAM,aAAa,QAAQ;AAAA,MACrC,cAAc,eAAe,OAAO;AAAA,MAEnC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEa,MAAA,UAAU,CACrB,QACA,UACG;AACH,QAAM,OAAOA,UAAiC;AAAA,IAC5C,UAAUC,EAAY,MAAM;AAAA,IAC5B,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,eAAe,KAAK,UAAU;AAC9B,QAAA,cAAc,KAAK,UAAU;AAC7B,QAAA,YAAY,KAAK,UAAU;AAC3B,QAAA,UAAU,KAAK,UAAU;AAExB,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;"}

package/dist/components/Form/elements/EditableFieldInputElement.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import { EditableFieldInput } from '../../EditableField/EditableFieldInput';
 import { FormElementProps } from './FormElement';
-type EditableFieldInputElementProps = Omit<FormElementProps<typeof EditableFieldInput>, 'Element'> & Omit<ComponentProps<typeof EditableFieldInput>, 'onChange'> & {
+type EditableFieldInputElementProps = Omit<FormElementProps<typeof EditableFieldInput>, 'Element'> & ComponentProps<typeof EditableFieldInput> & {
     name: string;
     description?: ReactNode;
     placeholder?: string;

package/dist/components/Form/elements/EditableFieldInputElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInputElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,8BAA8B,GAAG,IAAI,CACxC,gBAAgB,CAAC,OAAO,kBAAkB,CAAC,EAC3C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,yBAAyB,UAC7B,8BAA8B,4CAQtC,CAAC"}
+{"version":3,"file":"EditableFieldInputElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldInputElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,8BAA8B,GAAG,IAAI,CACxC,gBAAgB,CAAC,OAAO,kBAAkB,CAAC,EAC3C,SAAS,CACV,GACC,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,yBAAyB,UAC7B,8BAA8B,4CAQtC,CAAC"}

package/dist/components/Form/elements/EditableFieldTextAreaElement.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import { EditableFieldTextArea } from '../../EditableField/EditableFieldTextArea';
 import { FormElementProps } from './FormElement';
-type EditableFieldTextAreaElementProps = Omit<FormElementProps<typeof EditableFieldTextArea>, 'Element'> & Omit<ComponentProps<typeof EditableFieldTextArea>, 'onChange'> & {
+type EditableFieldTextAreaElementProps = Omit<FormElementProps<typeof EditableFieldTextArea>, 'Element'> & ComponentProps<typeof EditableFieldTextArea> & {
     name: string;
     description?: ReactNode;
     placeholder?: string;

package/dist/components/Form/elements/EditableFieldTextAreaElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextAreaElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,iCAAiC,GAAG,IAAI,CAC3C,gBAAgB,CAAC,OAAO,qBAAqB,CAAC,EAC9C,SAAS,CACV,GACC,IAAI,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,4CAQzC,CAAC"}
+{"version":3,"file":"EditableFieldTextAreaElement.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/elements/EditableFieldTextAreaElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,KAAK,iCAAiC,GAAG,IAAI,CAC3C,gBAAgB,CAAC,OAAO,qBAAqB,CAAC,EAC9C,SAAS,CACV,GACC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEJ,eAAO,MAAM,4BAA4B,UAChC,iCAAiC,4CAQzC,CAAC"}

package/dist/components/Input/Checkbox.cjs

@@ -71,7 +71,6 @@ const Checkbox = ({
     /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, children: label })
   ] });
 };
-Checkbox.displayName = "Checkbox";
 exports.Checkbox = Checkbox;
 exports.checkboxVariants = checkboxVariants;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/Input/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary dark:accent-primary-dark',\n      secondary: 'accent-secondary dark:accent-secondary-dark',\n      destructive: 'accent-destructive dark:accent-destructive-dark',\n      neutral: 'accent-neutral dark:accent-neutral-dark',\n      light: 'accent-light dark:accent-light-dark',\n      text: 'accent-text dark:accent-text-dark',\n      dark: 'accent-dark dark:accent-dark-dark',\n      error: 'accent-error dark:accent-error-dark',\n      success: 'accent-success dark:accent-success-dark',\n      custom: 'accent-custom dark:accent-custom-dark',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["cva","useId","jsxs","Fragment","jsx"],"mappings":";;;;;AAQa,MAAA,mBAAmBA,2BAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKC,aAAAA,MAAM;AACjB,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACCA,2BAAA,IAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;AAEA,SAAS,cAAc;;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary dark:accent-primary-dark',\n      secondary: 'accent-secondary dark:accent-secondary-dark',\n      destructive: 'accent-destructive dark:accent-destructive-dark',\n      neutral: 'accent-neutral dark:accent-neutral-dark',\n      light: 'accent-light dark:accent-light-dark',\n      text: 'accent-text dark:accent-text-dark',\n      dark: 'accent-dark dark:accent-dark-dark',\n      error: 'accent-error dark:accent-error-dark',\n      success: 'accent-success dark:accent-success-dark',\n      custom: 'accent-custom dark:accent-custom-dark',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n"],"names":["cva","useId","jsxs","Fragment","jsx"],"mappings":";;;;;AAQa,MAAA,mBAAmBA,2BAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAKC,aAAAA,MAAM;AACjB,SAEIC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACCA,2BAAA,IAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;;;"}

package/dist/components/Input/Checkbox.mjs

@@ -69,7 +69,6 @@ const Checkbox = ({
     /* @__PURE__ */ jsx("label", { htmlFor: id, children: label })
   ] });
 };
-Checkbox.displayName = "Checkbox";
 export {
   Checkbox,
   checkboxVariants

package/dist/components/Input/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary dark:accent-primary-dark',\n      secondary: 'accent-secondary dark:accent-secondary-dark',\n      destructive: 'accent-destructive dark:accent-destructive-dark',\n      neutral: 'accent-neutral dark:accent-neutral-dark',\n      light: 'accent-light dark:accent-light-dark',\n      text: 'accent-text dark:accent-text-dark',\n      dark: 'accent-dark dark:accent-dark-dark',\n      error: 'accent-error dark:accent-error-dark',\n      success: 'accent-success dark:accent-success-dark',\n      custom: 'accent-custom dark:accent-custom-dark',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":";;;AAQa,MAAA,mBAAmB,IAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AACjB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACC,oBAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Input/Checkbox.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  useId,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const checkboxVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'pointer rounded border-2 bg-input-background text-input-text shadow-none outline-0 transition-all',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n        'checked:bg-checkbox-checked checked:border-checkbox-checked-border',\n        'disabled:opacity-50',\n      ],\n    },\n    size: {\n      sm: 'size-4',\n      md: 'size-5',\n      lg: 'size-6',\n    },\n    color: {\n      primary: 'accent-primary dark:accent-primary-dark',\n      secondary: 'accent-secondary dark:accent-secondary-dark',\n      destructive: 'accent-destructive dark:accent-destructive-dark',\n      neutral: 'accent-neutral dark:accent-neutral-dark',\n      light: 'accent-light dark:accent-light-dark',\n      text: 'accent-text dark:accent-text-dark',\n      dark: 'accent-dark dark:accent-dark-dark',\n      error: 'accent-error dark:accent-error-dark',\n      success: 'accent-success dark:accent-success-dark',\n      custom: 'accent-custom dark:accent-custom-dark',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled: 'valid:border-success invalid:border-error',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    color: 'primary',\n    validationStyleEnabled: 'disabled',\n    size: 'md',\n  },\n});\n\nexport type CheckboxProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  'size'\n> & {\n  validationStyleEnabled?: boolean;\n  label?: string;\n} & Omit<VariantProps<typeof checkboxVariants>, 'validationStyleEnabled'>;\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  validationStyleEnabled = false,\n  label,\n  size,\n  color,\n  variant,\n  className,\n  ...props\n}) => {\n  const id = useId();\n  return (\n    <>\n      <input\n        type=\"checkbox\"\n        className={checkboxVariants({\n          variant,\n          size,\n          color,\n          validationStyleEnabled: validationStyleEnabled\n            ? 'enabled'\n            : 'disabled',\n          className,\n        })}\n        id={id}\n        {...props}\n      />\n      <label htmlFor={id}>{label}</label>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;AAQa,MAAA,mBAAmB,IAAI,IAAI;AAAA,EACtC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,OAAO;AAAA,IACP,wBAAwB;AAAA,IACxB,MAAM;AAAA,EAAA;AAEV,CAAC;AAUM,MAAM,WAA8B,CAAC;AAAA,EAC1C,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,KAAK,MAAM;AACjB,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,iBAAiB;AAAA,UAC1B;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB,yBACpB,YACA;AAAA,UACJ;AAAA,QAAA,CACD;AAAA,QACD;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,IACC,oBAAA,SAAA,EAAM,SAAS,IAAK,UAAM,MAAA,CAAA;AAAA,EAAA,GAC7B;AAEJ;"}

package/dist/components/Input/Input.cjs

@@ -6,7 +6,7 @@ const inputVariants = classVarianceAuthority.cva("", {
   variants: {
     variant: {
       default: [
-        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
+        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
         "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
         "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
         "disabled:opacity-50"

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":["cva","jsx"],"mappings":";;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IAAA;AAAA,EAEN;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":["cva","jsx"],"mappings":";;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IAAA;AAAA,EAEN;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEC,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;;;"}

package/dist/components/Input/Input.mjs

@@ -4,7 +4,7 @@ const inputVariants = cva("", {
   variants: {
     variant: {
       default: [
-        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
+        "w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
         "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
         "aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark",
         "disabled:opacity-50"

package/dist/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IAAA;AAAA,EAEN;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type FC,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-base md:text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={inputVariants({\n      variant,\n      size,\n      validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      className,\n    })}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IAAA;AAAA,EAEN;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAAA;AAE5B,CAAC;AASM,MAAM,QAAwB,CAAC;AAAA,EACpC,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,cAAc;AAAA,MACvB;AAAA,MACA;AAAA,MACA,wBAAwB,yBAAyB,YAAY;AAAA,MAC7D;AAAA,IAAA,CACD;AAAA,IACA,GAAG;AAAA,EAAA;AACN;"}

package/dist/components/KeyboardScreenAdapter/index.cjs

@@ -0,0 +1,25 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const hooks_useKeyboardDetector = require("../../hooks/useKeyboardDetector.cjs");
+const utils_cn = require("../../utils/cn.cjs");
+const KeyboardScreenAdapter = ({ children, className, ...props }) => {
+  const { windowHeight } = hooks_useKeyboardDetector.useKeyboardDetector();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils_cn.cn(
+        "h-screen w-screen overflow-scroll scroll-smooth transition",
+        className
+      ),
+      style: {
+        maxHeight: windowHeight ? `${windowHeight}px` : void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+exports.KeyboardScreenAdapter = KeyboardScreenAdapter;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-scroll scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["useKeyboardDetector","jsx","cn"],"mappings":";;;;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAIA,8CAAoB;AAG3C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}

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

@@ -0,0 +1,3 @@
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+export declare const KeyboardScreenAdapter: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/KeyboardScreenAdapter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAInE,eAAO,MAAM,qBAAqB,EAAE,EAAE,CACpC,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAkBlD,CAAC"}

package/dist/components/KeyboardScreenAdapter/index.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useKeyboardDetector } from "../../hooks/useKeyboardDetector.mjs";
+import { cn } from "../../utils/cn.mjs";
+const KeyboardScreenAdapter = ({ children, className, ...props }) => {
+  const { windowHeight } = useKeyboardDetector();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "h-screen w-screen overflow-scroll scroll-smooth transition",
+        className
+      ),
+      style: {
+        maxHeight: windowHeight ? `${windowHeight}px` : void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+export {
+  KeyboardScreenAdapter
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-scroll scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAI,oBAAoB;AAG3C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/MaxHeightSmoother/index.cjs

@@ -14,11 +14,13 @@ const MaxHeightSmoother = ({
   "div",
   {
     "aria-hidden": isHidden,
+    tabIndex: isFocusable ? 0 : void 0,
+    role: isFocusable ? "button" : "none",
     className: utils_cn.cn(
       "group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out",
       typeof isHidden !== "undefined" && !isHidden && "grid-rows-[1fr] overflow-x-auto",
       isOverable && "hover:grid-rows-[1fr] hover:overflow-x-auto",
-      isFocusable && "focus:grid-rows-[1fr] focus:overflow-x-auto",
+      isFocusable && "focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto",
       className
     ),
     ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  isFocusable?: boolean;\n  minHeight?: number;\n}\n\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isHidden}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable && 'focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":["jsx","cn"],"mappings":";;;;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa;AAAA,IACb,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eAAe;AAAA,MACf;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QACzB;AAAA,QACA,WAAWC,SAAA;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QACF;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  isFocusable?: boolean;\n  minHeight?: number;\n}\n\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isHidden}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":["jsx","cn"],"mappings":";;;;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAM,cAAc,WAAW;AAAA,IAC/B,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eACE;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QACzB;AAAA,QACA,WAAWC,SAAA;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QACF;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}

package/dist/components/MaxHeightSmoother/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAmCxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAsCxD,CAAC"}

package/dist/components/MaxHeightSmoother/index.mjs

@@ -12,11 +12,13 @@ const MaxHeightSmoother = ({
   "div",
   {
     "aria-hidden": isHidden,
+    tabIndex: isFocusable ? 0 : void 0,
+    role: isFocusable ? "button" : "none",
     className: cn(
       "group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out",
       typeof isHidden !== "undefined" && !isHidden && "grid-rows-[1fr] overflow-x-auto",
       isOverable && "hover:grid-rows-[1fr] hover:overflow-x-auto",
-      isFocusable && "focus:grid-rows-[1fr] focus:overflow-x-auto",
+      isFocusable && "focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto",
       className
     ),
     ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  isFocusable?: boolean;\n  minHeight?: number;\n}\n\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isHidden}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable && 'focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa;AAAA,IACb,WAAW;AAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eAAe;AAAA,MACf;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QACF;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  isFocusable?: boolean;\n  minHeight?: number;\n}\n\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isHidden}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa;AAAA,IACb,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAM,cAAc,WAAW;AAAA,IAC/B,WAAW;AAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eACE;AAAA,MACF;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QACF;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}

package/dist/components/Modal/Modal.cjs

@@ -20,19 +20,19 @@ const components_Button_Button = require("../Button/Button.cjs");
 const components_Container_index = require("../Container/index.cjs");
 const components_Headers_index = require("../Headers/index.cjs");
 const modalVariants = classVarianceAuthority.cva(
-  "cursor-default overflow-auto p-3 shadow justify-center",
+  "cursor-default overflow-auto py-3 shadow justify-center",
   {
     variants: {
-      variant: {
-        sm: "max-h-[30vh] w-[95vw] max-w-xl",
-        md: "max-h-[50vh] w-[95vw] max-w-xl",
-        lg: "max-h-[70vh] w-[95vw] max-w-2xl",
-        xl: "max-h-[95vh] w-[95vw] max-w-3xl",
-        unset: "max-h-[95vh] w-[95vw]"
+      size: {
+        sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
+        md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
+        lg: "h-auto max-h-[70vh] w-[95vw] max-w-2xl",
+        xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
+        unset: "h-auto max-h-[95vh] w-[95vw]"
       }
     },
     defaultVariants: {
-      variant: "unset"
+      size: "unset"
     }
   }
 );
@@ -46,6 +46,7 @@ const Modal = ({
   hasCloseButton = false,
   title,
   size = "md",
+  className,
   ...props
 }) => {
   const containerElement = hooks_useGetElementOrWindow.useGetElementOrWindow(container);
@@ -75,7 +76,7 @@ const Modal = ({
           onClose?.();
         },
         "aria-hidden": !isOpen,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
           MotionModal,
           {
             onClick: (e) => e.stopPropagation(),
@@ -83,7 +84,8 @@ const Modal = ({
             animate: { scale: isOpen ? 1 : 0.5 },
             transition: { duration: 0.3 },
             className: modalVariants({
-              variant: size
+              size,
+              className
             }),
             role: "dialog",
             "aria-modal": true,
@@ -94,11 +96,11 @@ const Modal = ({
                 "div",
                 {
                   className: utils_cn.cn(
-                    "cursor-default",
+                    "cursor-default px-4",
                     hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`
                   ),
                   children: [
-                    hasTitle && /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H3, { className: "flex items-center justify-center text-lg font-bold", children: title }),
+                    hasTitle && /* @__PURE__ */ jsxRuntime.jsx(components_Headers_index.H3, { className: "ml-4 flex items-center justify-center text-lg font-bold", children: title }),
                     hasCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
                       components_Button_Button.Button,
                       {
@@ -120,7 +122,7 @@ const Modal = ({
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center overflow-auto", children })
             ]
           }
-        )
+        ) })
       }
     ),
     containerElement

package/dist/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto p-3 shadow justify-center',\n  {\n    variants: {\n      variant: {\n        sm: 'max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'max-h-[95vh] w-[95vw] max-w-3xl',\n        unset: 'max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      variant: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = m.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"bg-background/40 dark:bg-background-dark/40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          variant: size,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            'cursor-default',\n            hasCloseButton && hasTitle\n              ? `flex items-center justify-center`\n              : hasCloseButton\n                ? `flex items-center justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant=\"hoverable\"\n              color=\"text\"\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size=\"icon-md\"\n            />\n          )}\n        </div>\n        <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"names":["cva","m","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","jsxs","cn","H3","Button","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgBA,uBAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAIA,MAAM,cAAcC,aAAAA,OAAE,OAAOC,oCAAS;AAU/B,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACE,QAAA,mBAAmBC,kDAAsB,SAAS;AAExDC,gCAAA,kBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASC,+BAAAC,WAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAAC,SAAA;AAAA,IACLF,2BAAA;AAAA,MAACJ,aAAAA,OAAE;AAAA,MAAF;AAAA,QACC,WAAU;AAAA,QACV,SAAS,SAAS,YAAY;AAAA,QAC9B,UAAU;AAAA,UACR,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY,EAAE,UAAU,KAAK,MAAM,iBAAiB;AAAA,UACtD;AAAA,UACA,WAAW;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY,EAAE,UAAU,KAAK,MAAM,gBAAgB;AAAA,UAAA;AAAA,QAEvD;AAAA,QACA,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACR,oBAAA;AAAA,QACZ;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAO,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB,SAAS;AAAA,YAAA,CACV;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,2BAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC,SAAA;AAAA,oBACT;AAAA,oBACA,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEJ,2BAAA,IAAAK,6BAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCL,2BAAA;AAAA,sBAACM,yBAAA;AAAA,sBAAA;AAAA,wBACC,SAAQ;AAAA,wBACR,OAAM;AAAA,wBACN,OAAM;AAAA,wBACN,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACR,oCAAA;AAAA,wBACZ;AAAA,wBACA,MAAMC,YAAA;AAAA,wBACN,MAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACP;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCP,2BAAAA,IAAA,OAAA,EAAI,WAAU,mDACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\ntype ModalProps = {\n  children: React.ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: Size;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = m.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = false,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"bg-background/40 dark:bg-background-dark/40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <div className=\"flex justify-center p-4\">\n        <MotionModal\n          onClick={(e) => e.stopPropagation()}\n          initial={{ scale: isOpen ? 0.5 : 1 }}\n          animate={{ scale: isOpen ? 1 : 0.5 }}\n          transition={{ duration: 0.3 }}\n          className={modalVariants({\n            size,\n            className,\n          })}\n          role=\"dialog\"\n          aria-modal\n          roundedSize=\"2xl\"\n          {...props}\n        >\n          <div\n            className={cn(\n              'cursor-default px-4',\n              hasCloseButton && hasTitle\n                ? `flex items-center justify-center`\n                : hasCloseButton\n                  ? `flex items-center justify-end`\n                  : hasTitle\n                    ? `items-center`\n                    : `hidden`\n            )}\n          >\n            {hasTitle && (\n              <H3 className=\"ml-4 flex items-center justify-center text-lg font-bold\">\n                {title}\n              </H3>\n            )}\n            {hasCloseButton && (\n              <Button\n                variant=\"hoverable\"\n                color=\"text\"\n                label=\"Close modal\"\n                className=\"ml-auto\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onClose?.();\n                }}\n                Icon={X}\n                size=\"icon-md\"\n              />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n            {children}\n          </div>\n        </MotionModal>\n      </div>\n    </m.div>,\n    containerElement\n  );\n};\n"],"names":["cva","m","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","jsxs","cn","H3","Button","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgBA,uBAAA;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAIA,MAAM,cAAcC,aAAAA,OAAE,OAAOC,oCAAS;AAU/B,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,mBAAmBC,kDAAsB,SAAS;AAExDC,gCAAA,kBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASC,+BAAAC,WAAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAAC,SAAA;AAAA,IACLF,2BAAA;AAAA,MAACJ,aAAAA,OAAE;AAAA,MAAF;AAAA,QACC,WAAU;AAAA,QACV,SAAS,SAAS,YAAY;AAAA,QAC9B,UAAU;AAAA,UACR,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY,EAAE,UAAU,KAAK,MAAM,iBAAiB;AAAA,UACtD;AAAA,UACA,WAAW;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY,EAAE,UAAU,KAAK,MAAM,gBAAgB;AAAA,UAAA;AAAA,QAEvD;AAAA,QACA,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACR,oBAAA;AAAA,QACZ;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAI,2BAAA,IAAC,OAAI,EAAA,WAAU,2BACb,UAAAG,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,YAClC,SAAS,EAAE,OAAO,SAAS,MAAM,EAAE;AAAA,YACnC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAI;AAAA,YACnC,YAAY,EAAE,UAAU,IAAI;AAAA,YAC5B,WAAW,cAAc;AAAA,cACvB;AAAA,cACA;AAAA,YAAA,CACD;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAAA,2BAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWC,SAAA;AAAA,oBACT;AAAA,oBACA,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEJ,2BAAA,IAAAK,6BAAA,EAAG,WAAU,2DACX,UACH,OAAA;AAAA,oBAED,kBACCL,2BAAA;AAAA,sBAACM,yBAAA;AAAA,sBAAA;AAAA,wBACC,SAAQ;AAAA,wBACR,OAAM;AAAA,wBACN,OAAM;AAAA,wBACN,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACR,oCAAA;AAAA,wBACZ;AAAA,wBACA,MAAMC,YAAA;AAAA,wBACN,MAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACP;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCP,2BAAAA,IAAA,OAAA,EAAI,WAAU,mDACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;"}

package/dist/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CACN,cAAc,EACZ,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,aAAa,GACb,SAAS,GACT,WAAW,GACX,KAAK,CACR,CAAC;AAoBF,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAIhD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA6FhC,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,IAAI,CACN,cAAc,EACZ,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,aAAa,GACb,SAAS,GACT,WAAW,GACX,KAAK,CACR,CAAC;AAoBF,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAIhD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAiGhC,CAAC"}

package/dist/components/Modal/Modal.mjs

@@ -18,19 +18,19 @@ import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 const modalVariants = cva(
-  "cursor-default overflow-auto p-3 shadow justify-center",
+  "cursor-default overflow-auto py-3 shadow justify-center",
   {
     variants: {
-      variant: {
-        sm: "max-h-[30vh] w-[95vw] max-w-xl",
-        md: "max-h-[50vh] w-[95vw] max-w-xl",
-        lg: "max-h-[70vh] w-[95vw] max-w-2xl",
-        xl: "max-h-[95vh] w-[95vw] max-w-3xl",
-        unset: "max-h-[95vh] w-[95vw]"
+      size: {
+        sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
+        md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
+        lg: "h-auto max-h-[70vh] w-[95vw] max-w-2xl",
+        xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
+        unset: "h-auto max-h-[95vh] w-[95vw]"
       }
     },
     defaultVariants: {
-      variant: "unset"
+      size: "unset"
     }
   }
 );
@@ -44,6 +44,7 @@ const Modal = ({
   hasCloseButton = false,
   title,
   size = "md",
+  className,
   ...props
 }) => {
   const containerElement = useGetElementOrWindow(container);
@@ -73,7 +74,7 @@ const Modal = ({
           onClose?.();
         },
         "aria-hidden": !isOpen,
-        children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx("div", { className: "flex justify-center p-4", children: /* @__PURE__ */ jsxs(
           MotionModal,
           {
             onClick: (e) => e.stopPropagation(),
@@ -81,7 +82,8 @@ const Modal = ({
             animate: { scale: isOpen ? 1 : 0.5 },
             transition: { duration: 0.3 },
             className: modalVariants({
-              variant: size
+              size,
+              className
             }),
             role: "dialog",
             "aria-modal": true,
@@ -92,11 +94,11 @@ const Modal = ({
                 "div",
                 {
                   className: cn(
-                    "cursor-default",
+                    "cursor-default px-4",
                     hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`
                   ),
                   children: [
-                    hasTitle && /* @__PURE__ */ jsx(H3, { className: "flex items-center justify-center text-lg font-bold", children: title }),
+                    hasTitle && /* @__PURE__ */ jsx(H3, { className: "ml-4 flex items-center justify-center text-lg font-bold", children: title }),
                     hasCloseButton && /* @__PURE__ */ jsx(
                       Button,
                       {
@@ -118,7 +120,7 @@ const Modal = ({
               /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-auto", children })
             ]
           }
-        )
+        ) })
       }
     ),
     containerElement