@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type RenderMarkdownProps,\n  renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions: (\n  isDarkMode: boolean\n) => RenderMarkdownProps = (isDarkMode) => ({\n  components: {\n    h1: (props) => <H1 isClickable={true} {...props} />,\n    h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n    h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n    h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n    h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n    h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n\n    code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n      // Ensure children is a string (Markdown renderer might pass ReactNodes)\n      const content = String(children ?? '').replace(/\\n$/, '');\n\n      // Determine if it is inline code or a code block\n      // Code blocks usually have a className like 'language-ts'\n      const isBlock = !!className;\n\n      if (!isBlock) {\n        return (\n          <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n            {content}\n          </strong>\n        );\n      }\n\n      // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n      const language = (className?.replace(/lang(?:uage)?-/, '') ||\n        'plaintext') as BundledLanguage;\n\n      console.log({ rest });\n\n      return (\n        <Code\n          {...rest}\n          language={language}\n          showHeader={true}\n          isDarkMode={isDarkMode} // Ensure this variable is available in scope\n        >\n          {content}\n        </Code>\n      );\n    },\n\n    blockquote: ({ className, ...props }) => (\n      <blockquote\n        className={cn(\n          'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ul: ({ className, ...props }) => (\n      <ul\n        className={cn('mt-5 flex list-disc flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    ol: ({ className, ...props }) => (\n      <ol\n        className={cn('mt-5 flex list-decimal flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    img: ({ className, ...props }) => (\n      <img\n        {...props}\n        alt={props.alt ?? ''}\n        loading=\"lazy\"\n        className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n        src={`${props.src}?raw=true`}\n      />\n    ),\n    a: (props) => (\n      // @ts-expect-error - label is not required in LinkProps\n      <Link\n        isExternalLink={props.href?.startsWith('http')}\n        underlined={true}\n        // locale={locale}\n        {...props}\n        color=\"neutral\"\n      />\n    ),\n    pre: (props) => props.children,\n\n    table: (props: ComponentProps<typeof Table>) => (\n      <Table isRollable={true} {...props} />\n    ),\n    th: ({ className, ...props }) => (\n      <th\n        className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n        {...props}\n      />\n    ),\n    tr: ({ className, ...props }) => (\n      <tr\n        className={cn('hover:/10 hover:bg-neutral/10', className)}\n        {...props}\n      />\n    ),\n    td: ({ className, ...props }) => (\n      <td\n        className={cn('border-neutral-500/50 border-b p-4', className)}\n        {...props}\n      />\n    ),\n    hr: ({ className, ...props }) => (\n      <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n    ),\n    Tabs: (props: ComponentProps<typeof Tab>) => (\n      <Tab\n        {...props}\n        className=\"rounded-xl border border-card\"\n        headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n      />\n    ),\n    Tab: Tab.Item,\n    Columns: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n    ),\n    Column: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex-1', className)} {...props} />\n    ),\n  },\n});\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownOptions = getIntlayerMarkdownOptions(isDarkMode ?? false);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownOptions.components,\n      // Pass dynamic props to components\n      code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n        // Ensure children is a string (Markdown renderer might pass ReactNodes)\n        const content = String(children ?? '').replace(/\\n$/, '');\n\n        // Determine if it is inline code or a code block\n        // Code blocks usually have a className like 'language-ts'\n        const isBlock = !!className;\n\n        if (!isBlock) {\n          return (\n            <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n              {content}\n            </strong>\n          );\n        }\n\n        // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n        const language = (className?.replace(/lang(?:uage)?-/, '') ||\n          'plaintext') as BundledLanguage;\n\n        return (\n          <Code\n            {...rest}\n            language={language}\n            showHeader={true}\n            isDarkMode={isDarkMode} // Ensure this variable is available in scope\n          >\n            {content}\n          </Code>\n        );\n      },\n\n      a: (props) => (\n        // @ts-expect-error - label is not required in LinkProps\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n    wrapper: wrapper ?? markdownOptions.wrapper,\n    forceBlock: forceBlock ?? markdownOptions.forceBlock,\n    preserveFrontmatter:\n      preserveFrontmatter ?? markdownOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? markdownOptions.tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type RenderMarkdownProps,\n  renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions: (\n  isDarkMode: boolean\n) => RenderMarkdownProps = (isDarkMode) => ({\n  components: {\n    h1: (props) => <H1 isClickable={true} {...props} />,\n    h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n    h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n    h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n    h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n    h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n\n    code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n      // Ensure children is a string (Markdown renderer might pass ReactNodes)\n      const content = String(children ?? '').replace(/\\n$/, '');\n\n      // Determine if it is inline code or a code block\n      // Code blocks usually have a className like 'language-ts'\n      const isBlock = !!className;\n\n      if (!isBlock) {\n        return (\n          <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n            {content}\n          </strong>\n        );\n      }\n\n      // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n      const language = (className?.replace(/lang(?:uage)?-/, '') ||\n        'plaintext') as BundledLanguage;\n\n      console.log({ rest });\n\n      return (\n        <Code\n          {...rest}\n          language={language}\n          showHeader={true}\n          isDarkMode={isDarkMode} // Ensure this variable is available in scope\n        >\n          {content}\n        </Code>\n      );\n    },\n\n    blockquote: ({ className, ...props }) => (\n      <blockquote\n        className={cn(\n          'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ul: ({ className, ...props }) => (\n      <ul\n        className={cn('mt-5 flex list-disc flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    ol: ({ className, ...props }) => (\n      <ol\n        className={cn('mt-5 flex list-decimal flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    img: ({ className, ...props }) => (\n      <img\n        {...props}\n        alt={props.alt ?? ''}\n        loading=\"lazy\"\n        className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n        src={`${props.src}?raw=true`}\n      />\n    ),\n    a: (props) => (\n      // @ts-expect-error - label is not required in LinkProps\n      <Link\n        isExternalLink={props.href?.startsWith('http')}\n        underlined={true}\n        // locale={locale}\n        {...props}\n        color=\"neutral\"\n      />\n    ),\n    pre: (props) => props.children,\n\n    table: (props: ComponentProps<typeof Table>) => (\n      <Table isRollable={true} {...props} />\n    ),\n    th: ({ className, ...props }) => (\n      <th\n        className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n        {...props}\n      />\n    ),\n    tr: ({ className, ...props }) => (\n      <tr\n        className={cn('hover:/10 hover:bg-neutral/10', className)}\n        {...props}\n      />\n    ),\n    td: ({ className, ...props }) => (\n      <td\n        className={cn('border-neutral-500/50 border-b p-4', className)}\n        {...props}\n      />\n    ),\n    hr: ({ className, ...props }) => (\n      <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n    ),\n    Tabs: (props: ComponentProps<typeof Tab>) => (\n      <Tab\n        {...props}\n        className=\"rounded-xl border border-card\"\n        headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n      />\n    ),\n    Tab: Tab.Item,\n    Columns: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n    ),\n    Column: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex-1', className)} {...props} />\n    ),\n  },\n});\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownOptions = getIntlayerMarkdownOptions(isDarkMode ?? false);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownOptions.components,\n      // Pass dynamic props to components\n      code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n        // Ensure children is a string (Markdown renderer might pass ReactNodes)\n        const content = String(children ?? '').replace(/\\n$/, '');\n\n        // Determine if it is inline code or a code block\n        // Code blocks usually have a className like 'language-ts'\n        const isBlock = !!className;\n\n        if (!isBlock) {\n          return (\n            <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n              {content}\n            </strong>\n          );\n        }\n\n        // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n        const language = (className?.replace(/lang(?:uage)?-/, '') ||\n          'plaintext') as BundledLanguage;\n\n        return (\n          <Code\n            {...rest}\n            language={language}\n            showHeader={true}\n            isDarkMode={isDarkMode} // Ensure this variable is available in scope\n          >\n            {content}\n          </Code>\n        );\n      },\n\n      a: (props) => (\n        // @ts-expect-error - label is not required in LinkProps\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n    wrapper: wrapper ?? markdownOptions.wrapper,\n    forceBlock: forceBlock ?? markdownOptions.forceBlock,\n    preserveFrontmatter:\n      preserveFrontmatter ?? markdownOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? markdownOptions.tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,3 +1 @@
-import { MarkdownRenderer, getIntlayerMarkdownOptions } from "./MarkDownRender.mjs";
-
-export { MarkdownRenderer, getIntlayerMarkdownOptions };
+import{MarkdownRenderer as e,getIntlayerMarkdownOptions as t}from"./MarkDownRender.mjs";export{e as MarkdownRenderer,t as getIntlayerMarkdownOptions};

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

@@ -1,164 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/MaxHeightSmoother/index.tsx
-/**
-* MaxHeightSmoother Component
-*
-* A sophisticated container component that provides smooth height transitions
-* for collapsible content. Uses CSS Grid's fractional rows to create fluid
-* animations without JavaScript height calculations, making it performant
-* and smooth across all devices and screen sizes.
-*
-* @component
-* @example
-* Basic controlled usage:
-* ```tsx
-* const [isCollapsed, setIsCollapsed] = useState(true);
-*
-* <MaxHeightSmoother isHidden={isCollapsed}>
-*   <div>Your collapsible content here</div>
-* </MaxHeightSmoother>
-* ```
-*
-* @example
-* Hover-triggered expansion:
-* ```tsx
-* <MaxHeightSmoother isOverable={true}>
-*   <div>
-*     <p>This content expands when you hover over the container.</p>
-*     <p>Perfect for preview cards or tooltips.</p>
-*   </div>
-* </MaxHeightSmoother>
-* ```
-*
-* @example
-* Accessible focus-triggered expansion:
-* ```tsx
-* <MaxHeightSmoother isFocusable={true}>
-*   <div>
-*     <h3>Expandable Section</h3>
-*     <p>Tab to focus this container to expand the content.</p>
-*     <p>Great for accessible progressive disclosure.</p>
-*   </div>
-* </MaxHeightSmoother>
-* ```
-*
-* @example
-* With minimum height for preview:
-* ```tsx
-* <MaxHeightSmoother
-*   isOverable={true}
-*   minHeight={100}
-*   className="border rounded-lg p-4"
-* >
-*   <div>
-*     <h3>Article Preview</h3>
-*     <p>This article preview shows the first few lines...</p>
-*     <p>Hover to see the full content with smooth expansion.</p>
-*     <p>The minHeight ensures some content is always visible.</p>
-*   </div>
-* </MaxHeightSmoother>
-* ```
-*
-* @example
-* Combined hover and focus behavior:
-* ```tsx
-* <MaxHeightSmoother
-*   isOverable={true}
-*   isFocusable={true}
-*   minHeight={80}
-* >
-*   <div>
-*     <h4>Interactive Card</h4>
-*     <p>Expands on both hover and keyboard focus.</p>
-*     <p>Accessible to both mouse and keyboard users.</p>
-*   </div>
-* </MaxHeightSmoother>
-* ```
-*
-* Features:
-* - Smooth CSS Grid-based height transitions (700ms duration)
-* - Three interaction modes: controlled, hover, and focus
-* - Configurable minimum height for collapsed state
-* - Accessible keyboard navigation support
-* - Overflow handling with smooth scrolling
-* - ARIA attributes for screen reader compatibility
-* - Performance-optimized with CSS-only animations
-* - Responsive design that works on all screen sizes
-*
-* Animation Technique:
-* Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions
-* instead of height animations, which provides:
-* - Smooth animations without knowing content height
-* - Better performance (no layout recalculations)
-* - More reliable across different content types
-* - Automatic adaptation to dynamic content changes
-*
-* Interaction Modes:
-* 1. **Controlled**: Use `isHidden` prop for external state control
-* 2. **Hover**: Set `isOverable={true}` for mouse hover expansion
-* 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion
-* 4. **Combined**: Use both `isOverable` and `isFocusable` together
-*
-* Accessibility Features:
-* - `role="button"` when focusable for proper screen reader context
-* - `tabIndex={0}` for keyboard navigation when focusable
-* - `aria-hidden` attribute for screen reader control
-* - Semantic focus management with focus-within pseudo-class
-* - High contrast focus indicators
-* - Respects prefers-reduced-motion settings
-*
-* Use Cases:
-* - FAQ accordions and expandable sections
-* - Article previews and read-more functionality
-* - Card hover effects and content previews
-* - Progressive disclosure for complex forms
-* - Tooltip and popover content containers
-* - Mobile-friendly collapsible navigation
-* - Dashboard widget expansion
-* - Email preview in mail clients
-*
-* Performance Considerations:
-* - Pure CSS animations (no JavaScript timer overhead)
-* - GPU acceleration through transform-based animations
-* - Minimal repaints and layout shifts
-* - Efficient event handling with CSS pseudo-classes
-* - No DOM measurements or calculations required
-*
-* @param props - Component props extending HTML div attributes
-* @param props.children - Content to render within the container
-* @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)
-* @param props.isOverable - Enable hover-to-expand behavior
-* @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation
-* @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)
-* @param props.className - Additional CSS classes for styling
-* @param props.style - Inline styles (note: minHeight style will be applied)
-* @param props.role - ARIA role (automatically set to "button" when focusable)
-* @param props.tabIndex - Tab index (automatically set to 0 when focusable)
-* @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)
-* @param props.onClick - Click event handler
-* @param props.onMouseEnter - Mouse enter event handler
-* @param props.onMouseLeave - Mouse leave event handler
-* @param props.onFocus - Focus event handler
-* @param props.onBlur - Blur event handler
-* @param props...rest - All other standard HTML div attributes
-*
-* @returns A smooth height-transitioning container with configurable interaction modes
-*/
-const MaxHeightSmoother = ({ children, isHidden, className = "", isOverable = false, isFocusable = false, minHeight = 0, ...props }) => /* @__PURE__ */ jsx("div", {
-	"aria-hidden": isFocusable ? isHidden : void 0,
-	tabIndex: isFocusable ? 0 : void 0,
-	role: isFocusable ? "button" : "none",
-	className: cn("group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out", typeof isHidden !== "undefined" && !isHidden && "grid-rows-[1fr] overflow-x-auto", isOverable && "hover:grid-rows-[1fr] hover:overflow-x-auto", isFocusable && "focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto", className),
-	...props,
-	children: /* @__PURE__ */ jsx("div", {
-		style: { minHeight: `${minHeight}px` },
-		className: cn(isOverable && "group-hover/height-smoother:visible", isFocusable && "group-focus/height-smoother:visible", className),
-		children
-	})
-});
-
-//#endregion
-export { MaxHeightSmoother };
+import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,className:i=``,isOverable:a=!1,isFocusable:o=!1,minHeight:s=0,...c})=>t(`div`,{"aria-hidden":o?r:void 0,tabIndex:o?0:void 0,role:o?`button`:`none`,className:e(`group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out`,r!==void 0&&!r&&`grid-rows-[1fr] overflow-x-auto`,a&&`hover:grid-rows-[1fr] hover:overflow-x-auto`,o&&`focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto`,i),...c,children:t(`div`,{style:{minHeight:`${s}px`},className:e(a&&`group-hover/height-smoother:visible`,o&&`group-focus/height-smoother:visible`,i),children:n})});export{n as MaxHeightSmoother};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Content to render within the smoother container */\n  children: ReactNode;\n  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n  isHidden?: boolean;\n  /** Enable expand-on-hover behavior */\n  isOverable?: boolean;\n  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n  isFocusable?: boolean;\n  /** Minimum height in pixels for the collapsed state */\n  minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Uses CSS Grid's fractional rows to create fluid\n * animations without JavaScript height calculations, making it performant\n * and smooth across all devices and screen sizes.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n *   <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable={true}>\n *   <div>\n *     <p>This content expands when you hover over the container.</p>\n *     <p>Perfect for preview cards or tooltips.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Accessible focus-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable={true}>\n *   <div>\n *     <h3>Expandable Section</h3>\n *     <p>Tab to focus this container to expand the content.</p>\n *     <p>Great for accessible progressive disclosure.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   minHeight={100}\n *   className=\"border rounded-lg p-4\"\n * >\n *   <div>\n *     <h3>Article Preview</h3>\n *     <p>This article preview shows the first few lines...</p>\n *     <p>Hover to see the full content with smooth expansion.</p>\n *     <p>The minHeight ensures some content is always visible.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus behavior:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   isFocusable={true}\n *   minHeight={80}\n * >\n *   <div>\n *     <h4>Interactive Card</h4>\n *     <p>Expands on both hover and keyboard focus.</p>\n *     <p>Accessible to both mouse and keyboard users.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * Features:\n * - Smooth CSS Grid-based height transitions (700ms duration)\n * - Three interaction modes: controlled, hover, and focus\n * - Configurable minimum height for collapsed state\n * - Accessible keyboard navigation support\n * - Overflow handling with smooth scrolling\n * - ARIA attributes for screen reader compatibility\n * - Performance-optimized with CSS-only animations\n * - Responsive design that works on all screen sizes\n *\n * Animation Technique:\n * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions\n * instead of height animations, which provides:\n * - Smooth animations without knowing content height\n * - Better performance (no layout recalculations)\n * - More reliable across different content types\n * - Automatic adaptation to dynamic content changes\n *\n * Interaction Modes:\n * 1. **Controlled**: Use `isHidden` prop for external state control\n * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion\n * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion\n * 4. **Combined**: Use both `isOverable` and `isFocusable` together\n *\n * Accessibility Features:\n * - `role=\"button\"` when focusable for proper screen reader context\n * - `tabIndex={0}` for keyboard navigation when focusable\n * - `aria-hidden` attribute for screen reader control\n * - Semantic focus management with focus-within pseudo-class\n * - High contrast focus indicators\n * - Respects prefers-reduced-motion settings\n *\n * Use Cases:\n * - FAQ accordions and expandable sections\n * - Article previews and read-more functionality\n * - Card hover effects and content previews\n * - Progressive disclosure for complex forms\n * - Tooltip and popover content containers\n * - Mobile-friendly collapsible navigation\n * - Dashboard widget expansion\n * - Email preview in mail clients\n *\n * Performance Considerations:\n * - Pure CSS animations (no JavaScript timer overhead)\n * - GPU acceleration through transform-based animations\n * - Minimal repaints and layout shifts\n * - Efficient event handling with CSS pseudo-classes\n * - No DOM measurements or calculations required\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand behavior\n * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes for styling\n * @param props.style - Inline styles (note: minHeight style will be applied)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\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={isFocusable ? isHidden : undefined}\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAa,qBAAiD,EAC5D,UACA,UACA,YAAY,IACZ,aAAa,OACb,cAAc,OACd,YAAY,GACZ,GAAG,YAEH,oBAAC;CACC,eAAa,cAAc,WAAW;CACtC,UAAU,cAAc,IAAI;CAC5B,MAAM,cAAc,WAAW;CAC/B,WAAW,GACT,sHACA,OAAO,aAAa,eAClB,CAAC,YACD,mCACF,cAAc,+CACd,eACE,yGACF,UACD;CACD,GAAI;WAEJ,oBAAC;EACC,OAAO,EACL,WAAW,GAAG,UAAU,KACzB;EACD,WAAW,GACT,cAAc,uCACd,eAAe,uCACf,UACD;EAEA;GACG;EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Content to render within the smoother container */\n  children: ReactNode;\n  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n  isHidden?: boolean;\n  /** Enable expand-on-hover behavior */\n  isOverable?: boolean;\n  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n  isFocusable?: boolean;\n  /** Minimum height in pixels for the collapsed state */\n  minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Uses CSS Grid's fractional rows to create fluid\n * animations without JavaScript height calculations, making it performant\n * and smooth across all devices and screen sizes.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n *   <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable={true}>\n *   <div>\n *     <p>This content expands when you hover over the container.</p>\n *     <p>Perfect for preview cards or tooltips.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Accessible focus-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable={true}>\n *   <div>\n *     <h3>Expandable Section</h3>\n *     <p>Tab to focus this container to expand the content.</p>\n *     <p>Great for accessible progressive disclosure.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   minHeight={100}\n *   className=\"border rounded-lg p-4\"\n * >\n *   <div>\n *     <h3>Article Preview</h3>\n *     <p>This article preview shows the first few lines...</p>\n *     <p>Hover to see the full content with smooth expansion.</p>\n *     <p>The minHeight ensures some content is always visible.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus behavior:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   isFocusable={true}\n *   minHeight={80}\n * >\n *   <div>\n *     <h4>Interactive Card</h4>\n *     <p>Expands on both hover and keyboard focus.</p>\n *     <p>Accessible to both mouse and keyboard users.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * Features:\n * - Smooth CSS Grid-based height transitions (700ms duration)\n * - Three interaction modes: controlled, hover, and focus\n * - Configurable minimum height for collapsed state\n * - Accessible keyboard navigation support\n * - Overflow handling with smooth scrolling\n * - ARIA attributes for screen reader compatibility\n * - Performance-optimized with CSS-only animations\n * - Responsive design that works on all screen sizes\n *\n * Animation Technique:\n * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions\n * instead of height animations, which provides:\n * - Smooth animations without knowing content height\n * - Better performance (no layout recalculations)\n * - More reliable across different content types\n * - Automatic adaptation to dynamic content changes\n *\n * Interaction Modes:\n * 1. **Controlled**: Use `isHidden` prop for external state control\n * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion\n * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion\n * 4. **Combined**: Use both `isOverable` and `isFocusable` together\n *\n * Accessibility Features:\n * - `role=\"button\"` when focusable for proper screen reader context\n * - `tabIndex={0}` for keyboard navigation when focusable\n * - `aria-hidden` attribute for screen reader control\n * - Semantic focus management with focus-within pseudo-class\n * - High contrast focus indicators\n * - Respects prefers-reduced-motion settings\n *\n * Use Cases:\n * - FAQ accordions and expandable sections\n * - Article previews and read-more functionality\n * - Card hover effects and content previews\n * - Progressive disclosure for complex forms\n * - Tooltip and popover content containers\n * - Mobile-friendly collapsible navigation\n * - Dashboard widget expansion\n * - Email preview in mail clients\n *\n * Performance Considerations:\n * - Pure CSS animations (no JavaScript timer overhead)\n * - GPU acceleration through transform-based animations\n * - Minimal repaints and layout shifts\n * - Efficient event handling with CSS pseudo-classes\n * - No DOM measurements or calculations required\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand behavior\n * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes for styling\n * @param props.style - Inline styles (note: minHeight style will be applied)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\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={isFocusable ? isHidden : undefined}\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"],"mappings":"gFAmKA,MAAa,GAAiD,CAC5D,WACA,WACA,YAAY,GACZ,aAAa,GACb,cAAc,GACd,YAAY,EACZ,GAAG,KAEH,EAAC,MAAA,CACC,cAAa,EAAc,EAAW,IAAA,GACtC,SAAU,EAAc,EAAI,IAAA,GAC5B,KAAM,EAAc,SAAW,OAC/B,UAAW,EACT,qHACO,IAAa,QAClB,CAAC,GACD,kCACF,GAAc,8CACd,GACE,wGACF,EACD,CACD,GAAI,WAEJ,EAAC,MAAA,CACC,MAAO,CACL,UAAW,GAAG,EAAU,IACzB,CACD,UAAW,EACT,GAAc,sCACd,GAAe,sCACf,EACD,CAEA,YACG,EACF"}

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

@@ -1,19 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/MaxWidthSmoother/index.tsx
-const MaxWidthSmoother = ({ children, isHidden, minWidth = 0, align = "left", className, ...props }) => /* @__PURE__ */ 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,
-	inert: isHidden ? true : void 0,
-	...props,
-	children: /* @__PURE__ */ jsx("div", {
-		style: { minWidth: `${minWidth}px` },
-		className: cn(align === "right" && "ml-auto"),
-		children
-	})
-});
-
-//#endregion
-export { MaxWidthSmoother };
+import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,minWidth:i=0,align:a=`left`,className:o,...s})=>t(`div`,{className:e(`relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out`,r?``:`grid-cols-[1fr]`,o),"aria-hidden":r,inert:r?!0:void 0,...s,children:t(`div`,{style:{minWidth:`${i}px`},className:e(a===`right`&&`ml-auto`),children:n})});export{n as MaxWidthSmoother};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\ntype Align = 'left' | 'right';\n\ntype MaxWidthSmootherProps = 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}: MaxWidthSmootherProps) => (\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    inert={isHidden ? true : undefined}\n    {...props}\n  >\n    <div\n      style={{\n        minWidth: `${minWidth}px`,\n      }}\n      className={cn(align === 'right' && 'ml-auto')}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":";;;;AAWA,MAAa,oBAAoB,EAC/B,UACA,UACA,WAAW,GACX,QAAQ,QACR,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,oHACA,WAAW,KAAK,mBAChB,UACD;CACD,eAAa;CACb,OAAO,WAAW,OAAO;CACzB,GAAI;WAEJ,oBAAC;EACC,OAAO,EACL,UAAU,GAAG,SAAS,KACvB;EACD,WAAW,GAAG,UAAU,WAAW,UAAU;EAE5C;GACG;EACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\ntype Align = 'left' | 'right';\n\ntype MaxWidthSmootherProps = 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}: MaxWidthSmootherProps) => (\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    inert={isHidden ? true : undefined}\n    {...props}\n  >\n    <div\n      style={{\n        minWidth: `${minWidth}px`,\n      }}\n      className={cn(align === 'right' && 'ml-auto')}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":"gFAWA,MAAa,GAAoB,CAC/B,WACA,WACA,WAAW,EACX,QAAQ,OACR,YACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,mHACA,EAAW,GAAK,kBAChB,EACD,CACD,cAAa,EACb,MAAO,EAAW,GAAO,IAAA,GACzB,GAAI,WAEJ,EAAC,MAAA,CACC,MAAO,CACL,SAAU,GAAG,EAAS,IACvB,CACD,UAAW,EAAG,IAAU,SAAW,UAAU,CAE5C,YACG,EACF"}

package/dist/esm/components/Modal/Modal.mjs

@@ -1,202 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { H3 } from "../Headers/index.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
-import { X } from "lucide-react";
-import { useEffect } from "react";
-import { cva } from "class-variance-authority";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { createPortal } from "react-dom";
-
-//#region src/components/Modal/Modal.tsx
-/**
-* Enumeration of available modal sizes
-*/
-let ModalSize = /* @__PURE__ */ function(ModalSize) {
-	ModalSize["SM"] = "sm";
-	ModalSize["MD"] = "md";
-	ModalSize["LG"] = "lg";
-	ModalSize["XL"] = "xl";
-	ModalSize["UNSET"] = "unset";
-	return ModalSize;
-}({});
-const modalVariants = cva("flex cursor-default flex-col overflow-hidden shadow-sm", {
-	variants: { 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-4xl",
-		xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
-		unset: "h-auto max-h-[95vh] w-[95vw]"
-	} },
-	defaultVariants: { size: "unset" }
-});
-const contentPaddingVariants = {
-	none: "p-0",
-	sm: "px-2 py-4",
-	md: "px-4 py-6",
-	lg: "px-6 py-8",
-	xl: "px-8 py-10",
-	"2xl": "px-10 py-12"
-};
-const MotionModal = motion.create(Container);
-/**
-* Modal Component
-*
-* A highly customizable modal dialog component with portal rendering, Framer Motion animations,
-* and comprehensive accessibility features. Supports multiple size variants and scroll management.
-*
-* Features:
-* - Portal rendering to any container element (defaults to document.body)
-* - Smooth animations with Framer Motion
-* - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
-* - Optional title and close button
-* - Background scroll prevention
-* - Click-outside-to-close functionality
-* - Full accessibility support with ARIA attributes
-* - Keyboard navigation support (ESC to close)
-* - Extensible styling with Container props
-*
-* @example
-* Basic usage:
-* ```jsx
-* <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
-*   <p>Modal content goes here</p>
-* </Modal>
-* ```
-*
-* @example
-* With title and close button:
-* ```jsx
-* <Modal
-*   isOpen={isOpen}
-*   onClose={onClose}
-*   title="Confirm Action"
-*   hasCloseButton
-*   size={ModalSize.LG}
-* >
-*   <div>
-*     <p>Are you sure you want to continue?</p>
-*     <Button onClick={onConfirm}>Confirm</Button>
-*   </div>
-* </Modal>
-* ```
-*
-* @example
-* Custom container and styling:
-* ```jsx
-* <Modal
-*   isOpen={isOpen}
-*   onClose={onClose}
-*   container={customContainer}
-*   background="card"
-*   padding="lg"
-*   border="default"
-* >
-*   Content with custom styling
-* </Modal>
-* ```
-*
-* Accessibility Notes:
-* - Modal receives focus when opened
-* - Background content is hidden from screen readers when modal is open
-* - ESC key closes modal (handled by browser for role="dialog")
-* - Click outside modal closes it
-* - Close button has descriptive label for screen readers
-*
-* @param props - Modal component props
-* @returns JSX element rendered via createPortal
-*/
-const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, isScrollable = false, disableScroll = true, padding = "none", ...props }) => {
-	const containerElement = useGetElementOrWindow(container);
-	useScrollBlockage({
-		key: "modal",
-		disableScroll: isOpen && disableScroll
-	});
-	useEffect(() => {
-		const handleEscape = (event) => {
-			if (event.key === "Escape" && isOpen && onClose) onClose();
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => {
-			document.removeEventListener("keydown", handleEscape);
-		};
-	}, [isOpen, onClose]);
-	if (!containerElement) return /* @__PURE__ */ jsx(Fragment$1, {});
-	const hasTitle = Boolean(title);
-	const contentPaddingClass = contentPaddingVariants[padding || "none"];
-	return createPortal(/* @__PURE__ */ jsx(motion.div, {
-		className: "invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur",
-		animate: isOpen ? "visible" : "invisible",
-		variants: {
-			visible: {
-				opacity: 1,
-				visibility: "visible",
-				transition: {
-					duration: .1,
-					when: "beforeChildren"
-				}
-			},
-			invisible: {
-				opacity: 0,
-				visibility: "hidden",
-				transition: {
-					duration: .1,
-					when: "afterChildren"
-				}
-			}
-		},
-		onClick: (e) => {
-			e.stopPropagation();
-			onClose?.();
-		},
-		"aria-hidden": !isOpen,
-		children: /* @__PURE__ */ jsxs(MotionModal, {
-			onClick: (e) => e.stopPropagation(),
-			initial: { scale: isOpen ? .5 : 1 },
-			animate: { scale: isOpen ? 1 : .5 },
-			transition: { duration: .3 },
-			className: modalVariants({
-				size,
-				className
-			}),
-			role: "dialog",
-			"aria-modal": true,
-			roundedSize: "4xl",
-			padding: "none",
-			...props,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cn("relative flex-none px-4 pt-4", hasCloseButton && hasTitle ? `flex items-start` : hasCloseButton ? `flex justify-end` : hasTitle ? `items-center` : `hidden`),
-				children: [hasTitle && /* @__PURE__ */ jsx(H3, {
-					className: "mb-2 ml-1 flex items-center justify-center font-bold text-lg",
-					children: title
-				}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
-					variant: ButtonVariant.HOVERABLE,
-					color: ButtonColor.TEXT,
-					label: "Close modal",
-					className: "ml-auto",
-					onClick: (e) => {
-						e.stopPropagation();
-						onClose?.();
-					},
-					Icon: X,
-					size: ButtonSize.ICON_MD
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				className: cn("flex min-h-0 w-full flex-1 flex-col", isScrollable === true && "overflow-auto", isScrollable === "y" && "overflow-y-auto overflow-x-hidden", isScrollable === "x" && "overflow-x-auto overflow-y-hidden", !isScrollable && "overflow-visible"),
-				children: /* @__PURE__ */ jsx("div", {
-					className: cn("flex h-full w-full flex-1 flex-col", contentPaddingClass),
-					children
-				})
-			})]
-		})
-	}), containerElement);
-};
-
-//#endregion
-export { Modal, ModalSize };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{Button as n,ButtonColor as r,ButtonSize as i,ButtonVariant as a}from"../Button/Button.mjs";import{H3 as o}from"../Headers/index.mjs";import{useGetElementOrWindow as s}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as c}from"../../hooks/useScrollBlockage/index.mjs";import{X as l}from"lucide-react";import{useEffect as u}from"react";import{cva as d}from"class-variance-authority";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{motion as h}from"framer-motion";import{createPortal as g}from"react-dom";let _=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.UNSET=`unset`,e}({});const v=d(`flex cursor-default flex-col overflow-hidden shadow-sm`,{variants:{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-4xl`,xl:`h-auto max-h-[95vh] w-[95vw] max-w-6xl`,unset:`h-auto max-h-[95vh] w-[95vw]`}},defaultVariants:{size:`unset`}}),y={none:`p-0`,sm:`px-2 py-4`,md:`px-4 py-6`,lg:`px-6 py-8`,xl:`px-8 py-10`,"2xl":`px-10 py-12`},b=h.create(t),x=({children:t,isOpen:d,container:x,onClose:S,hasCloseButton:C=!1,title:w,size:T=_.MD,className:E,isScrollable:D=!1,disableScroll:O=!0,padding:k=`none`,...A})=>{let j=s(x);if(c({key:`modal`,disableScroll:d&&O}),u(()=>{let e=e=>{e.key===`Escape`&&d&&S&&S()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[d,S]),!j)return p(f,{});let M=!!w,N=y[k||`none`];return g(p(h.div,{className:`invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur`,animate:d?`visible`:`invisible`,variants:{visible:{opacity:1,visibility:`visible`,transition:{duration:.1,when:`beforeChildren`}},invisible:{opacity:0,visibility:`hidden`,transition:{duration:.1,when:`afterChildren`}}},onClick:e=>{e.stopPropagation(),S?.()},"aria-hidden":!d,children:m(b,{onClick:e=>e.stopPropagation(),initial:{scale:d?.5:1},animate:{scale:d?1:.5},transition:{duration:.3},className:v({size:T,className:E}),role:`dialog`,"aria-modal":!0,roundedSize:`4xl`,padding:`none`,...A,children:[m(`div`,{className:e(`relative flex-none px-4 pt-4`,C&&M?`flex items-start`:C?`flex justify-end`:M?`items-center`:`hidden`),children:[M&&p(o,{className:`mb-2 ml-1 flex items-center justify-center font-bold text-lg`,children:w}),C&&p(n,{variant:a.HOVERABLE,color:r.TEXT,label:`Close modal`,className:`ml-auto`,onClick:e=>{e.stopPropagation(),S?.()},Icon:l,size:i.ICON_MD})]}),p(`div`,{className:e(`flex min-h-0 w-full flex-1 flex-col`,D===!0&&`overflow-auto`,D===`y`&&`overflow-y-auto overflow-x-hidden`,D===`x`&&`overflow-x-auto overflow-y-hidden`,!D&&`overflow-visible`),children:p(`div`,{className:e(`flex h-full w-full flex-1 flex-col`,N),children:t})})]})}),j)};export{x as Modal,_ as ModalSize};
 //# sourceMappingURL=Modal.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\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  'flex cursor-default flex-col overflow-hidden shadow-sm',\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-4xl',\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\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 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({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={ButtonVariant.HOVERABLE}\n              color={ButtonColor.TEXT}\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size={ButtonSize.ICON_MD}\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex h-full w-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,gDAAL;AACL;AACA;AACA;AACA;AACA;;;AA6BF,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAGD,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAGb,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,mCAAK;CAEnC,MAAM,WAAW,QAAQ,MAAM;CAG/B,MAAM,sBACJ,uBACG,WAAmD;AAGxD,QAAO,aACL,oBAACA,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC;GACC,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IAAE;IAAM;IAAW,CAAC;GAC7C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;cAGJ,qBAAC;IACC,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;eAEA,YACC,oBAAC;KAAG,WAAU;eACX;MACE,EAEN,kBACC,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;MACjB;KAEA,EAGN,oBAAC;IACC,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,mBAClB;cAID,oBAAC;KACC,WAAW,GACT,sCACA,oBACD;KAEA;MACG;KACF;IACM;GACR,EACR,iBACD"}
+{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\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  'flex cursor-default flex-col overflow-hidden shadow-sm',\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-4xl',\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\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 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({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={ButtonVariant.HOVERABLE}\n              color={ButtonColor.TEXT}\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size={ButtonSize.ICON_MD}\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex h-full w-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":"gpBAgBA,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,MAAA,eA6BF,MAAM,EAAgB,EACpB,yDACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,wCACJ,GAAI,wCACJ,GAAI,yCACJ,GAAI,yCACJ,MAAO,+BACR,CACF,CACD,gBAAiB,CACf,KAAM,QACP,CACF,CACF,CAGK,EAAyB,CAC7B,KAAM,MACN,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,aACJ,MAAO,cACR,CAEK,EAAcA,EAAE,OAAO,EAAU,CAqE1B,GAAyB,CACpC,WACA,SACA,YACA,UACA,iBAAiB,GACjB,QACA,OAAO,EAAU,GACjB,YACA,eAAe,GACf,gBAAgB,GAChB,UAAU,OACV,GAAG,KACC,CACJ,IAAM,EAAmB,EAAsB,EAAU,CAgBzD,GAdA,EAAkB,CAAE,IAAK,QAAS,cAAe,GAAU,EAAe,CAAC,CAE3E,MAAgB,CACd,IAAM,EAAgB,GAAyB,CACzC,EAAM,MAAQ,UAAY,GAAU,GACtC,GAAS,EAIb,OADA,SAAS,iBAAiB,UAAW,EAAa,KACrC,CACX,SAAS,oBAAoB,UAAW,EAAa,GAEtD,CAAC,EAAQ,EAAQ,CAAC,CAEjB,CAAC,EAAkB,OAAO,EAAA,EAAA,EAAA,CAAK,CAEnC,IAAM,EAAW,EAAQ,EAGnB,EACJ,EACG,GAAmD,QAGxD,OAAO,EACL,EAACA,EAAE,IAAA,CACD,UAAU,6IACV,QAAS,EAAS,UAAY,YAC9B,SAAU,CACR,QAAS,CACP,QAAS,EACT,WAAY,UACZ,WAAY,CAAE,SAAU,GAAK,KAAM,iBAAkB,CACtD,CACD,UAAW,CACT,QAAS,EACT,WAAY,SACZ,WAAY,CAAE,SAAU,GAAK,KAAM,gBAAiB,CACrD,CACF,CACD,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,KAAW,EAEb,cAAa,CAAC,WAEd,EAAC,EAAA,CACC,QAAU,GAAM,EAAE,iBAAiB,CACnC,QAAS,CAAE,MAAO,EAAS,GAAM,EAAG,CACpC,QAAS,CAAE,MAAO,EAAS,EAAI,GAAK,CACpC,WAAY,CAAE,SAAU,GAAK,CAC7B,UAAW,EAAc,CAAE,OAAM,YAAW,CAAC,CAC7C,KAAK,SACL,aAAA,GACA,YAAY,MAEZ,QAAQ,OACR,GAAI,YAGJ,EAAC,MAAA,CACC,UAAW,EACT,+BACA,GAAkB,EACd,mBACA,EACE,mBACA,EACE,eACA,SACT,WAEA,GACC,EAAC,EAAA,CAAG,UAAU,wEACX,GACE,CAEN,GACC,EAAC,EAAA,CACC,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,MAAM,cACN,UAAU,UACV,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,KAAW,EAEb,KAAM,EACN,KAAM,EAAW,SACjB,CAAA,EAEA,CAGN,EAAC,MAAA,CACC,UAAW,EACT,sCAEA,IAAiB,IAAQ,gBACzB,IAAiB,KAAO,oCACxB,IAAiB,KAAO,oCACxB,CAAC,GAAgB,mBAClB,UAID,EAAC,MAAA,CACC,UAAW,EACT,qCACA,EACD,CAEA,YACG,EACF,CAAA,EACM,EACR,CACR,EACD"}

package/dist/esm/components/Modal/index.mjs

@@ -1,3 +1 @@
-import { Modal, ModalSize } from "./Modal.mjs";
-
-export { Modal, ModalSize };
+import{Modal as e,ModalSize as t}from"./Modal.mjs";export{e as Modal,t as ModalSize};