@intlayer/design-system 2.0.12 → 3.0.0

package/dist/components/MarkDownRender/index.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import Markdown from "markdown-to-jsx";
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { H1, H2, H3 } from "../Headers/index.mjs";
+import { SectionScroller } from "../Headers/SectionScroller.mjs";
+import { Code } from "../IDE/CodeRender.mjs";
+const MarkdownRenderer = ({
+  children,
+  isDarkMode
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Markdown,
+  {
+    options: {
+      overrides: {
+        h1: {
+          component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H1, { isClickable: true, ...props })
+        },
+        h2: {
+          component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H2, { isClickable: true, ...props })
+        },
+        h3: {
+          component: (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(H3, { isClickable: true, ...props })
+        },
+        code: {
+          component: (props) => typeof props.className === "undefined" ? /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { className: "bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", children: props.children }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Code,
+            {
+              isDarkMode,
+              showLineNumbers: false,
+              ...props
+            }
+          ) })
+        },
+        blockquote: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "blockquote",
+          {
+            className: cn(
+              "border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5",
+              className
+            ),
+            ...props
+          }
+        ),
+        ul: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "ul",
+          {
+            className: cn("mt-5 flex flex-col gap-3 pl-5", className),
+            ...props
+          }
+        ),
+        ol: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "ol",
+          {
+            className: cn("mt-5 flex flex-col gap-3 pl-5", className),
+            ...props
+          }
+        ),
+        img: ({ className, ...props }) => (
+          // eslint-disable-next-line jsx-a11y/alt-text
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "img",
+            {
+              ...props,
+              loading: "lazy",
+              className: cn("max-w-full rounded-md", className),
+              src: `${props.src}?raw=true`
+            }
+          )
+        ),
+        a: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "a",
+          {
+            className: cn(
+              "text-neutral dark:text-neutral-dark underline",
+              className
+            ),
+            ...props
+          }
+        ),
+        pre: (props) => props.children
+      },
+      wrapper: ({ className, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SectionScroller, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              "text-text dark:text-text-dark flex flex-col gap-6 p-10",
+              className
+            ),
+            ...props
+          }
+        )
+      ] })
+    },
+    children: children ?? ""
+  }
+);
+export {
+  MarkdownRenderer
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/anchor-has-content */\n'use client';\n\nimport Markdown from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { H1, H2, H3 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/CodeRender';\n\ntype MarkdownRendererProps = {\n  isDarkMode?: boolean;\n  children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n}) => (\n  <Markdown\n    options={{\n      overrides: {\n        h1: {\n          component: (props) => <H1 isClickable={true} {...props} />,\n        },\n        h2: {\n          component: (props) => <H2 isClickable={true} {...props} />,\n        },\n        h3: {\n          component: (props) => <H3 isClickable={true} {...props} />,\n        },\n        code: {\n          component: (props) =>\n            typeof props.className === 'undefined' ? (\n              <strong className=\"bg-card/60 dark:bg-card-dark/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                {props.children}\n              </strong>\n            ) : (\n              <Container>\n                <Code\n                  isDarkMode={isDarkMode}\n                  showLineNumbers={false}\n                  {...props}\n                />\n              </Container>\n            ),\n        },\n        blockquote: ({ className, ...props }) => (\n          <blockquote\n            className={cn(\n              'border-card dark:border-card-dark text-neutral dark:text-neutral-dark mt-5 flex flex-col gap-3 border-l-4 pl-5',\n              className\n            )}\n            {...props}\n          />\n        ),\n        ul: ({ className, ...props }) => (\n          <ul\n            className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n            {...props}\n          />\n        ),\n        ol: ({ className, ...props }) => (\n          <ol\n            className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n            {...props}\n          />\n        ),\n        img: ({ className, ...props }) => (\n          // eslint-disable-next-line jsx-a11y/alt-text\n          <img\n            {...props}\n            loading=\"lazy\"\n            className={cn('max-w-full rounded-md', className)}\n            src={`${props.src}?raw=true`}\n          />\n        ),\n        a: ({ className, ...props }) => (\n          <a\n            className={cn(\n              'text-neutral dark:text-neutral-dark underline',\n              className\n            )}\n            {...props}\n          />\n        ),\n        pre: (props) => props.children,\n      },\n      wrapper: ({ className, ...props }) => (\n        <>\n          <SectionScroller />\n          <div\n            className={cn(\n              'text-text dark:text-text-dark flex flex-col gap-6 p-10',\n              className\n            )}\n            {...props}\n          />\n        </>\n      ),\n    }}\n  >\n    {children ?? ''}\n  </Markdown>\n);\n"],"names":["jsx","jsxs","Fragment"],"mappings":";;;;;;;;AAgBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QAC1D;AAAA,QACA,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QAC1D;AAAA,QACA,IAAI;AAAA,UACF,WAAW,CAAC,UAAUA,sCAAC,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,QAC1D;AAAA,QACA,MAAM;AAAA,UACJ,WAAW,CAAC,UACV,OAAO,MAAM,cAAc,cACxBA,kCAAAA,IAAA,UAAA,EAAO,WAAU,qGACf,UAAA,MAAM,SACT,CAAA,0CAEC,WACC,EAAA,UAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,iBAAiB;AAAA,cAChB,GAAG;AAAA,YAAA;AAAA,UAAA,GAER;AAAA,QAEN;AAAA,QACA,YAAY,CAAC,EAAE,WAAW,GAAG,MAC3B,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,iCAAiC,SAAS;AAAA,YACvD,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM;AAAA;AAAA,UAE1BA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,SAAQ;AAAA,cACR,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,KAAK,GAAG,MAAM,GAAG;AAAA,YAAA;AAAA,UACnB;AAAA;AAAA,QAEF,GAAG,CAAC,EAAE,WAAW,GAAG,MAClB,MAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QAEF,KAAK,CAAC,UAAU,MAAM;AAAA,MACxB;AAAA,MACA,SAAS,CAAC,EAAE,WAAW,GAAG,YAEtBC,uCAAAC,kBAAAA,UAAA,EAAA,UAAA;AAAA,QAAAF,kCAAA,IAAC,iBAAgB,EAAA;AAAA,QACjBA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YACF;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,MAAA,GACF;AAAA,IAEJ;AAAA,IAEC,UAAY,YAAA;AAAA,EAAA;AACf;"}

package/dist/components/MaxHeightSmoother/index.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const utils_cn = require("../../utils/cn.cjs");
+const MaxHeightSmoother = ({
+  children,
+  isHidden,
+  className = "",
+  isOverable = false,
+  isFocusable = false,
+  minHeight = 0,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  "div",
+  {
+    "aria-hidden": isHidden,
+    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",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          minHeight: `${minHeight}px`
+        },
+        className: utils_cn.cn(
+          isOverable && "group-hover/height-smoother:visible",
+          isFocusable && "group-focus/height-smoother:visible",
+          className
+        ),
+        children
+      }
+    )
+  }
+);
+exports.MaxHeightSmoother = MaxHeightSmoother;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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,kBAAA;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,kBAAA;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,IACH;AAAA,EAAA;AACF;;"}

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

@@ -9,3 +9,4 @@ interface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {
 }
 export declare const MaxHeightSmoother: FC<MaxHeightSmootherProps>;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/MaxHeightSmoother/index.mjs

@@ -0,0 +1,42 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { cn } from "../../utils/cn.mjs";
+const MaxHeightSmoother = ({
+  children,
+  isHidden,
+  className = "",
+  isOverable = false,
+  isFocusable = false,
+  minHeight = 0,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    "aria-hidden": isHidden,
+    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",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          minHeight: `${minHeight}px`
+        },
+        className: cn(
+          isOverable && "group-hover/height-smoother:visible",
+          isFocusable && "group-focus/height-smoother:visible",
+          className
+        ),
+        children
+      }
+    )
+  }
+);
+export {
+  MaxHeightSmoother
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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":["jsx"],"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,kCAAA;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,UAAAA,kCAAA;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,IACH;AAAA,EAAA;AACF;"}

package/dist/components/MaxWidthSmoother/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const utils_cn = require("../../utils/cn.cjs");
+const MaxWidthSmoother = ({
+  children,
+  isHidden,
+  minWidth = 0,
+  align = "left",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  "div",
+  {
+    className: utils_cn.cn(
+      "relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out",
+      isHidden ? "" : "grid-cols-[1fr]",
+      className
+    ),
+    "aria-hidden": isHidden,
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          minWidth: `${minWidth}px`
+        },
+        tabIndex: isHidden !== false ? void 0 : -1,
+        className: utils_cn.cn(align === "right" && "ml-auto"),
+        children
+      }
+    )
+  }
+);
+exports.MaxWidthSmoother = MaxWidthSmoother;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype Align = 'left' | 'right';\n\ntype MaxHeightSmootherProps = HTMLAttributes<HTMLDivElement> & {\n  isHidden: boolean;\n  minWidth?: number;\n  align?: Align;\n};\n\nexport const MaxWidthSmoother = ({\n  children,\n  isHidden,\n  minWidth = 0,\n  align = 'left',\n  className,\n  ...props\n}: MaxHeightSmootherProps) => (\n  <div\n    className={cn(\n      'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n      isHidden ? '' : 'grid-cols-[1fr]',\n      className\n    )}\n    aria-hidden={isHidden}\n    {...props}\n  >\n    <div\n      style={{\n        minWidth: `${minWidth}px`,\n      }}\n      tabIndex={isHidden !== false ? undefined : -1}\n      className={cn(align === 'right' && 'ml-auto')}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":["jsx","cn"],"mappings":";;;;AAWO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,WAAW,KAAK;AAAA,MAChB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAAD,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU,GAAG,QAAQ;AAAA,QACvB;AAAA,QACA,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C,WAAWC,SAAA,GAAG,UAAU,WAAW,SAAS;AAAA,QAE3C;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;;"}

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

@@ -1,11 +1,11 @@
-import { default as React } from 'react';
+import { HTMLAttributes } from 'react';
 
 type Align = 'left' | 'right';
-type MaxHeightSmootherProps = {
-    children: React.ReactNode;
+type MaxHeightSmootherProps = HTMLAttributes<HTMLDivElement> & {
     isHidden: boolean;
     minWidth?: number;
     align?: Align;
 };
-export declare const MaxWidthSmoother: ({ children, isHidden, minWidth, align, }: MaxHeightSmootherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MaxWidthSmoother: ({ children, isHidden, minWidth, align, className, ...props }: MaxHeightSmootherProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MaxWidthSmoother/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9B,KAAK,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC7D,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,gBAAgB,iEAO1B,sBAAsB,4CAoBxB,CAAC"}

package/dist/components/MaxWidthSmoother/index.mjs

@@ -0,0 +1,36 @@
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { cn } from "../../utils/cn.mjs";
+const MaxWidthSmoother = ({
+  children,
+  isHidden,
+  minWidth = 0,
+  align = "left",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "div",
+  {
+    className: cn(
+      "relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out",
+      isHidden ? "" : "grid-cols-[1fr]",
+      className
+    ),
+    "aria-hidden": isHidden,
+    ...props,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        style: {
+          minWidth: `${minWidth}px`
+        },
+        tabIndex: isHidden !== false ? void 0 : -1,
+        className: cn(align === "right" && "ml-auto"),
+        children
+      }
+    )
+  }
+);
+export {
+  MaxWidthSmoother
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype Align = 'left' | 'right';\n\ntype MaxHeightSmootherProps = HTMLAttributes<HTMLDivElement> & {\n  isHidden: boolean;\n  minWidth?: number;\n  align?: Align;\n};\n\nexport const MaxWidthSmoother = ({\n  children,\n  isHidden,\n  minWidth = 0,\n  align = 'left',\n  className,\n  ...props\n}: MaxHeightSmootherProps) => (\n  <div\n    className={cn(\n      'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n      isHidden ? '' : 'grid-cols-[1fr]',\n      className\n    )}\n    aria-hidden={isHidden}\n    {...props}\n  >\n    <div\n      style={{\n        minWidth: `${minWidth}px`,\n      }}\n      tabIndex={isHidden !== false ? undefined : -1}\n      className={cn(align === 'right' && 'ml-auto')}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":["jsx"],"mappings":";;AAWO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,WAAW,KAAK;AAAA,MAChB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU,GAAG,QAAQ;AAAA,QACvB;AAAA,QACA,UAAU,aAAa,QAAQ,SAAY;AAAA,QAC3C,WAAW,GAAG,UAAU,WAAW,SAAS;AAAA,QAE3C;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF;"}

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,119 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../jsx-runtime-DvCoRj5u.cjs");
+const classVarianceAuthority = require("class-variance-authority");
+const framerMotion = require("framer-motion");
+const lucideReact = require("lucide-react");
+const reactDom = require("react-dom");
+require("react");
+const hooks_useGetElementOrWindow = require("../../hooks/useGetElementOrWindow.cjs");
+const hooks_useScrollBlockage_index = require("../../hooks/useScrollBlockage/index.cjs");
+require("../../hooks/useAsync/useAsyncStateStore.cjs");
+require("../Auth/AuthProvider/index.cjs");
+require("../../libs/intlayer-api/auth.cjs");
+require("../../libs/intlayer-api/dictionary.cjs");
+require("../../libs/intlayer-api/organization.cjs");
+require("../../libs/intlayer-api/project.cjs");
+require("../../libs/intlayer-api/user.cjs");
+require("@intlayer/dictionaries-entry");
+require("deepmerge");
+const utils_cn = require("../../utils/cn.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", {
+  variants: {
+    variant: {
+      sm: "w-full max-h-[30vh] max-w-[30vw]",
+      md: "w-full max-h-[50vh] max-w-[50vw]",
+      lg: "w-full max-h-[70vh] max-w-[70vw]",
+      xl: "w-full max-h-[95vh] max-w-[95vw]",
+      unset: "max-h-[95vh] max-w-[95vw]"
+    }
+  },
+  defaultVariants: {
+    variant: "unset"
+  }
+});
+const MotionModal = framerMotion.motion.create(components_Container_index.Container);
+const Modal = ({
+  children,
+  isOpen,
+  container,
+  disableScroll = false,
+  onClose,
+  hasCloseButton = false,
+  title,
+  size = "unset"
+}) => {
+  const containerElement = hooks_useGetElementOrWindow.useGetElementOrWindow(container);
+  hooks_useScrollBlockage_index.useScrollBlockage({ key: "modal", disableScroll: isOpen && disableScroll });
+  if (!containerElement) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {});
+  const hasTitle = typeof title === "string";
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      framerMotion.motion.div,
+      {
+        className: utils_cn.cn(
+          "bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur",
+          isOpen ? "visible" : "hidden"
+        ),
+        initial: { opacity: isOpen ? 0 : 1 },
+        animate: { opacity: isOpen ? 1 : 0 },
+        transition: { duration: 0.1 },
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose();
+        },
+        "aria-hidden": !isOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+          MotionModal,
+          {
+            onClick: (e) => e.stopPropagation(),
+            initial: { scale: isOpen ? 0.5 : 1 },
+            animate: { scale: isOpen ? 1 : 0.5 },
+            transition: { duration: 0.3 },
+            className: utils_cn.cn(
+              modalVariants({
+                variant: size
+              })
+            ),
+            role: "dialog",
+            "aria-modal": true,
+            roundedSize: "2xl",
+            transparency: "sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: utils_cn.cn(
+                    hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`
+                  ),
+                  children: [
+                    hasTitle && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Headers_index.H3, { className: "flex items-center justify-center text-lg font-bold", children: title }),
+                    hasCloseButton && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                      lucideReact.X,
+                      {
+                        role: "button",
+                        "aria-label": "Close modal",
+                        className: "right-2 top-2 ml-auto cursor-pointer",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onClose();
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "mx-2 my-4 flex flex-1 flex-col items-center justify-center overflow-auto", children })
+            ]
+          }
+        )
+      }
+    ),
+    containerElement
+  );
+};
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } 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 { Container } from '../Container';\nimport { H3 } from '../Headers';\n\ninterface 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}\n\nconst modalVariants = cva('cursor-default overflow-auto p-3 shadow', {\n  variants: {\n    variant: {\n      sm: 'w-full max-h-[30vh] max-w-[30vw]',\n      md: 'w-full max-h-[50vh] max-w-[50vw]',\n      lg: 'w-full max-h-[70vh] max-w-[70vw]',\n      xl: 'w-full max-h-[95vh] max-w-[95vw]',\n      unset: 'max-h-[95vh] max-w-[95vw]',\n    },\n  },\n  defaultVariants: {\n    variant: 'unset',\n  },\n});\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.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 = 'unset',\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    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\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={cn(\n          modalVariants({\n            variant: size,\n          })\n        )}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        transparency=\"sm\"\n      >\n        <div\n          className={cn(\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            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center justify-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["cva","motion","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","cn","jsxs","H3","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgBA,2BAAI,2CAA2C;AAAA,EACnE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAID,MAAM,cAAcC,aAAO,OAAA,OAAOC,2BAAAA,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AACT,MAAM;AACE,QAAA,mBAAmBC,kDAAsB,SAAS;AAExDC,gCAAA,kBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASC,2BAAA,kBAAA,IAAAC,WAAA,kBAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAAC,SAAA;AAAA,IACLF,2BAAA,kBAAA;AAAA,MAACJ,aAAAA,OAAO;AAAA,MAAP;AAAA,QACC,WAAWO,SAAA;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV;QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAC,2BAAA,kBAAA;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,WAAWD,SAAA;AAAA,cACT,cAAc;AAAA,gBACZ,SAAS;AAAA,cAAA,CACV;AAAA,YACH;AAAA,YACA,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACZ,cAAa;AAAA,YAEb,UAAA;AAAA,cAAAC,2BAAA,kBAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,SAAA;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEH,2BAAA,kBAAA,IAAAK,6BAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCL,2BAAA,kBAAA;AAAA,sBAACM,YAAA;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV;wBACV;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCN,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,WAAU,4EACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+
+interface ModalProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    container?: HTMLElement;
+    disableScroll?: boolean;
+    hasCloseButton?: boolean;
+    title?: string;
+    size?: Size;
+}
+type Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';
+/**
+ * Usage example:
+ * ```jsx
+ * <Modal isOpen={isOpen} onClose={onClose}>
+ *   Modal content
+ * </Modal>
+ * ```
+ */
+export declare const Modal: FC<ModalProps>;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOhC,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,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;AAiBD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAIhD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmFhC,CAAC"}

package/dist/components/Modal/Modal.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { j as jsxRuntimeExports } from "../../jsx-runtime-BgSF1HG2.js";
+import { cva } from "class-variance-authority";
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+import "react";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import "../../hooks/useAsync/useAsyncStateStore.mjs";
+import "../Auth/AuthProvider/index.mjs";
+import "../../libs/intlayer-api/auth.mjs";
+import "../../libs/intlayer-api/dictionary.mjs";
+import "../../libs/intlayer-api/organization.mjs";
+import "../../libs/intlayer-api/project.mjs";
+import "../../libs/intlayer-api/user.mjs";
+import "@intlayer/dictionaries-entry";
+import "deepmerge";
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { H3 } from "../Headers/index.mjs";
+const modalVariants = cva("cursor-default overflow-auto p-3 shadow", {
+  variants: {
+    variant: {
+      sm: "w-full max-h-[30vh] max-w-[30vw]",
+      md: "w-full max-h-[50vh] max-w-[50vw]",
+      lg: "w-full max-h-[70vh] max-w-[70vw]",
+      xl: "w-full max-h-[95vh] max-w-[95vw]",
+      unset: "max-h-[95vh] max-w-[95vw]"
+    }
+  },
+  defaultVariants: {
+    variant: "unset"
+  }
+});
+const MotionModal = motion.create(Container);
+const Modal = ({
+  children,
+  isOpen,
+  container,
+  disableScroll = false,
+  onClose,
+  hasCloseButton = false,
+  title,
+  size = "unset"
+}) => {
+  const containerElement = useGetElementOrWindow(container);
+  useScrollBlockage({ key: "modal", disableScroll: isOpen && disableScroll });
+  if (!containerElement) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+  const hasTitle = typeof title === "string";
+  return createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      motion.div,
+      {
+        className: cn(
+          "bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur",
+          isOpen ? "visible" : "hidden"
+        ),
+        initial: { opacity: isOpen ? 0 : 1 },
+        animate: { opacity: isOpen ? 1 : 0 },
+        transition: { duration: 0.1 },
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose();
+        },
+        "aria-hidden": !isOpen,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          MotionModal,
+          {
+            onClick: (e) => e.stopPropagation(),
+            initial: { scale: isOpen ? 0.5 : 1 },
+            animate: { scale: isOpen ? 1 : 0.5 },
+            transition: { duration: 0.3 },
+            className: cn(
+              modalVariants({
+                variant: size
+              })
+            ),
+            role: "dialog",
+            "aria-modal": true,
+            roundedSize: "2xl",
+            transparency: "sm",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: cn(
+                    hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`
+                  ),
+                  children: [
+                    hasTitle && /* @__PURE__ */ jsxRuntimeExports.jsx(H3, { className: "flex items-center justify-center text-lg font-bold", children: title }),
+                    hasCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      X,
+                      {
+                        role: "button",
+                        "aria-label": "Close modal",
+                        className: "right-2 top-2 ml-auto cursor-pointer",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onClose();
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-2 my-4 flex flex-1 flex-col items-center justify-center overflow-auto", children })
+            ]
+          }
+        )
+      }
+    ),
+    containerElement
+  );
+};
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion } 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 { Container } from '../Container';\nimport { H3 } from '../Headers';\n\ninterface 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}\n\nconst modalVariants = cva('cursor-default overflow-auto p-3 shadow', {\n  variants: {\n    variant: {\n      sm: 'w-full max-h-[30vh] max-w-[30vw]',\n      md: 'w-full max-h-[50vh] max-w-[50vw]',\n      lg: 'w-full max-h-[70vh] max-w-[70vw]',\n      xl: 'w-full max-h-[95vh] max-w-[95vw]',\n      unset: 'max-h-[95vh] max-w-[95vw]',\n    },\n  },\n  defaultVariants: {\n    variant: 'unset',\n  },\n});\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\nconst MotionModal = motion.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 = 'unset',\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    <motion.div\n      className={cn(\n        'bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur',\n        isOpen ? 'visible' : 'hidden'\n      )}\n      initial={{ opacity: isOpen ? 0 : 1 }}\n      animate={{ opacity: isOpen ? 1 : 0 }}\n      transition={{ duration: 0.1 }}\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={cn(\n          modalVariants({\n            variant: size,\n          })\n        )}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        transparency=\"sm\"\n      >\n        <div\n          className={cn(\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            <X\n              role=\"button\"\n              aria-label=\"Close modal\"\n              className=\"right-2 top-2 ml-auto cursor-pointer\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n              }}\n            />\n          )}\n        </div>\n        <div className=\"mx-2 my-4 flex flex-1 flex-col items-center justify-center overflow-auto\">\n          {children}\n        </div>\n      </MotionModal>\n    </motion.div>,\n    containerElement\n  );\n};\n"],"names":["jsx","Fragment","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,gBAAgB,IAAI,2CAA2C;AAAA,EACnE,UAAU;AAAA,IACR,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,EACX;AACF,CAAC;AAID,MAAM,cAAc,OAAO,OAAO,SAAS;AAUpC,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AACT,MAAM;AACE,QAAA,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAEtE,MAAA,CAAC,iBAAkB,QAASA,kCAAA,IAAAC,kBAAA,UAAA,CAAA,CAAA;AAE1B,QAAA,WAAW,OAAO,UAAU;AAE3B,SAAA;AAAA,IACLD,kCAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,SAAS,YAAY;AAAA,QACvB;AAAA,QACA,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,SAAS,EAAE,SAAS,SAAS,IAAI,EAAE;AAAA,QACnC,YAAY,EAAE,UAAU,IAAI;AAAA,QAC5B,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AACV;QACV;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAAE,kCAAA;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;AAAA,cACT,cAAc;AAAA,gBACZ,SAAS;AAAA,cAAA,CACV;AAAA,YACH;AAAA,YACA,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACZ,cAAa;AAAA,YAEb,UAAA;AAAA,cAAAA,kCAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBACV;AAAA,kBAEC,UAAA;AAAA,oBAAA,YACEF,kCAAA,IAAA,IAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,oBAED,kBACCA,kCAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AACV;wBACV;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,cACCA,kCAAAA,IAAA,OAAA,EAAI,WAAU,4EACZ,SACH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/components/Modal/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_Modal_Modal = require("./Modal.cjs");
+exports.Modal = components_Modal_Modal.Modal;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}