@intlayer/design-system 5.1.4 → 5.1.5

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,6 +14,8 @@ 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",

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 &&\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,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;;"}
+{"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,CAoCxD,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,6 +12,8 @@ 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",

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 &&\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,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;"}
+{"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":"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"}

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

package/dist/components/Modal/Modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","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":["m"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB;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,cAAcA,OAAE,OAAO,SAAS;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,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAAS,oBAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACL;AAAA,MAACA,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,UAAA;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,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACE,oBAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACC;AAAA,sBAAC;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,MAAM;AAAA,wBACN,MAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACP;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACC,oBAAA,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.mjs","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":["m"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,MAAM,gBAAgB;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,cAAcA,OAAE,OAAO,SAAS;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,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAAS,oBAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACL;AAAA,MAACA,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,UAAA,oBAAC,OAAI,EAAA,WAAU,2BACb,UAAA;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,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACE,oBAAA,IAAA,EAAG,WAAU,2DACX,UACH,OAAA;AAAA,oBAED,kBACC;AAAA,sBAAC;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,MAAM;AAAA,wBACN,MAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACP;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACC,oBAAA,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/RightDrawer/RightDrawer.cjs

@@ -112,7 +112,7 @@ const RightDrawer = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex-1",
+            className: "flex flex-1 flex-col",
             onClick: handleSpareSpaceClick,
             ref: childrenContainerRef,
             children

package/dist/components/RightDrawer/RightDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":";;;;;;;;;;;;;AAsCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAaA,gBAAA,UAAU,IAAI;AAC7B,QAAA,WAAWC,oBAAuB,IAAI;AACtC,QAAA,uBAAuBA,oBAAuB,IAAI;AACxD,QAAM,EAAE,OAAO,MAAM,OAAW,IAAAC,2CAAA;AAAA,IAC9BC,8BAAA,WAAW,CAAC,OAAO;AAAA,MACjB,OAAO,MAAM,EAAE,MAAM,UAAU;AAAA,MAC/B,MAAM,MAAM,EAAE,KAAK,UAAU;AAAA,MAC7B,QAAQ,EAAE,OAAO,UAAU;AAAA,IAAA,EAC3B;AAAA,EACJ;AAEkBC,kDAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,gBAAgB,UAAU,KAAK;AAAA,EAAA,CAClD;AAEDC,eAAAA,UAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,UAAsB;AAC5C,UAAA;AACE,YAAA,CAAC,SAAS,QAAS;AAGvB,cAAM,cAAc,UAAU;AAGxB,cAAA,iBACJ,MAAM,UAAU,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAG3D,cAAA,oBAAoBC,kCAAAA,4BAA4B,SAAS,OAAO;AAEtE,YACG,eAAe,kBAAkB,qBAClC,CAAC,MAAM,QACP;AACM,gBAAA;AACI,oBAAA;AAAA,QAAA;AAAA,eAEL,IAAI;AACL,cAAA;AACI,kBAAA;AAAA,MAAA;AAAA,IAEd;AAEO,WAAA,iBAAiB,aAAa,kBAAkB;AACvD,WAAO,MAAM,OAAO,oBAAoB,aAAa,kBAAkB;AAAA,EAAA,GACtE,CAAC,QAAQ,OAAO,SAAS,qBAAqB,UAAU,CAAC;AAE5DD,eAAAA,UAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,UAAI,YAAY;AACT,aAAA;AAAA,MAAA,OACA;AACC,cAAA;AACI,kBAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,GACC,CAAC,OAAO,MAAM,SAAS,YAAY,UAAU,CAAC;AAE3C,QAAA,wBAA2D,CAAC,MAAM;AAElE,QAAA,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IAAA;AAGF,QAAI,UAAU;AACN,YAAA;AACI,gBAAA;AAAA,IAAA;AAAA,EAEd;AAGE,SAAAE,2BAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,2BAAA,IAACC,sDAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAAC,2BAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAACD,2BAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAACA,2BAAAA,KAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAAF,2BAAAA,IAAC,SACE,UACC,cAAAA,2BAAA;AAAA,cAACI,yBAAA;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,OAAO,WAAW,QAAQ;AAAA,gBAC1B,SAAS,WAAW;AAAA,gBACpB,MAAMC,YAAA;AAAA,gBAEL,UAAY,YAAA;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,2CACC,OACC,EAAA,UAAAL,2BAAA;AAAA,cAACI,yBAAA;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,MAAME,YAAA;AAAA,gBACN,MAAK;AAAA,cAAA;AAAA,YAAA,EAET,CAAA;AAAA,UAAA,GACF;AAAA,UACC,SACCN,2BAAA,IAAC,MAAG,EAAA,WAAU,sDACX,UACH,OAAA;AAAA,UAED;AAAA,QAAA,GACH;AAAA,QAEAA,2BAAAA,IAAC,OAAI,EAAA,WAAU,4CACb,UAAAA,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,KAEJ,EACF,CAAA;AAEJ;;"}
+{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":"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"}

package/dist/components/RightDrawer/RightDrawer.mjs

@@ -110,7 +110,7 @@ const RightDrawer = ({
         /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex-1",
+            className: "flex flex-1 flex-col",
             onClick: handleSpareSpaceClick,
             ref: childrenContainerRef,
             children

package/dist/components/RightDrawer/RightDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,UAAU,IAAI;AAC7B,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,uBAAuB,OAAuB,IAAI;AACxD,QAAM,EAAE,OAAO,MAAM,OAAW,IAAA;AAAA,IAC9B,WAAW,CAAC,OAAO;AAAA,MACjB,OAAO,MAAM,EAAE,MAAM,UAAU;AAAA,MAC/B,MAAM,MAAM,EAAE,KAAK,UAAU;AAAA,MAC7B,QAAQ,EAAE,OAAO,UAAU;AAAA,IAAA,EAC3B;AAAA,EACJ;AAEkB,oBAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,gBAAgB,UAAU,KAAK;AAAA,EAAA,CAClD;AAED,YAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,UAAsB;AAC5C,UAAA;AACE,YAAA,CAAC,SAAS,QAAS;AAGvB,cAAM,cAAc,UAAU;AAGxB,cAAA,iBACJ,MAAM,UAAU,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAG3D,cAAA,oBAAoB,4BAA4B,SAAS,OAAO;AAEtE,YACG,eAAe,kBAAkB,qBAClC,CAAC,MAAM,QACP;AACM,gBAAA;AACI,oBAAA;AAAA,QAAA;AAAA,eAEL,IAAI;AACL,cAAA;AACI,kBAAA;AAAA,MAAA;AAAA,IAEd;AAEO,WAAA,iBAAiB,aAAa,kBAAkB;AACvD,WAAO,MAAM,OAAO,oBAAoB,aAAa,kBAAkB;AAAA,EAAA,GACtE,CAAC,QAAQ,OAAO,SAAS,qBAAqB,UAAU,CAAC;AAE5D,YAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,UAAI,YAAY;AACT,aAAA;AAAA,MAAA,OACA;AACC,cAAA;AACI,kBAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,GACC,CAAC,OAAO,MAAM,SAAS,YAAY,UAAU,CAAC;AAE3C,QAAA,wBAA2D,CAAC,MAAM;AAElE,QAAA,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IAAA;AAGF,QAAI,UAAU;AACN,YAAA;AACI,gBAAA;AAAA,IAAA;AAAA,EAEd;AAGE,SAAA,oBAAC,OAAI,EAAA,WAAU,oDACb,UAAA,oBAAC,oBAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,oBAAC,SACE,UACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,OAAO,WAAW,QAAQ;AAAA,gBAC1B,SAAS,WAAW;AAAA,gBACpB,MAAM;AAAA,gBAEL,UAAY,YAAA;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,gCACC,OACC,EAAA,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,MAAM;AAAA,gBACN,MAAK;AAAA,cAAA;AAAA,YAAA,EAET,CAAA;AAAA,UAAA,GACF;AAAA,UACC,SACC,oBAAC,MAAG,EAAA,WAAU,sDACX,UACH,OAAA;AAAA,UAED;AAAA,QAAA,GACH;AAAA,QAEA,oBAAC,OAAI,EAAA,WAAU,4CACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,EAEL,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,KAEJ,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Select/Multiselect.cjs

@@ -317,7 +317,6 @@ const MultiSelectItem = ({ className, value, children, ...props }) => {
     }
   );
 };
-MultiSelectItem.displayName = "MultiSelectItem";
 const MultiSelect = MultiSelectRoot;
 MultiSelect.Trigger = MultiSelectTrigger;
 MultiSelect.Input = MultiSelectInput;