@intlayer/design-system 3.5.6 → 3.5.7

package/dist/components/Button/Button.cjs

@@ -3,19 +3,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
 const classVarianceAuthority = require("class-variance-authority");
 const require$$0 = require("react");
-const utils_cn = require("../../utils/cn.cjs");
 const components_Loader_index = require("../Loader/index.cjs");
-const buttonIconVariants = classVarianceAuthority.cva("size-4", {
+const buttonIconVariants = classVarianceAuthority.cva("", {
   variants: {
     size: {
-      sm: "w-4",
-      md: "w-6",
-      lg: "w-7",
-      xl: "w-9",
+      sm: "size-3 absolute top-1/2 -translate-y-1/2",
+      md: "size-4 absolute top-1/2 -translate-y-1/2",
+      lg: "size-5 absolute top-1/2 -translate-y-1/2",
+      xl: "size-6 absolute top-1/2 -translate-y-1/2",
       "icon-sm": "size-6 p-1",
       "icon-md": "size-7 p-1",
       "icon-lg": "size-9 p-1",
       "icon-xl": "size-10 p-1"
+    },
+    position: {
+      left: "left-3",
+      right: "right-3"
     }
   },
   defaultVariants: {
@@ -23,7 +26,7 @@ const buttonIconVariants = classVarianceAuthority.cva("size-4", {
   }
 });
 const buttonVariants = classVarianceAuthority.cva(
-  "flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  "relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {
@@ -71,6 +74,14 @@ const buttonVariants = classVarianceAuthority.cva(
       isFullWidth: {
         true: "w-full",
         false: ""
+      },
+      hasIconLeft: {
+        true: "pl-12",
+        false: ""
+      },
+      hasIconRight: {
+        true: "pr-12",
+        false: ""
       }
     },
     defaultVariants: {
@@ -78,7 +89,9 @@ const buttonVariants = classVarianceAuthority.cva(
       size: "md",
       color: "primary",
       textAlign: "center",
-      isFullWidth: false
+      isFullWidth: false,
+      hasIconRight: false,
+      hasIconLeft: false
     }
   }
 );
@@ -91,10 +104,10 @@ const Button = require$$0.forwardRef(
     Icon,
     IconRight,
     iconClassName,
-    isLoading = false,
+    isLoading,
     isActive,
     isFullWidth = false,
-    textAlign = IconRight ? "left" : "center",
+    textAlign,
     disabled,
     label,
     className,
@@ -117,7 +130,13 @@ const Button = require$$0.forwardRef(
           size,
           color,
           isFullWidth,
-          textAlign,
+          textAlign: textAlign ?? (IconRight ? "left" : "center"),
+          hasIconLeft: Boolean(
+            typeof children !== "undefined" && (typeof Icon !== "undefined" || typeof isLoading !== "undefined")
+          ),
+          hasIconRight: Boolean(
+            typeof children !== "undefined" && typeof IconRight !== "undefined"
+          ),
           className
         }),
         ...props,
@@ -125,30 +144,33 @@ const Button = require$$0.forwardRef(
           Icon && !isLoading && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             Icon,
             {
-              className: utils_cn.cn(
-                buttonIconVariants({ size, className: iconClassName }),
-                "float-start"
-              )
+              className: buttonIconVariants({
+                size,
+                className: iconClassName,
+                position: "left"
+              })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             components_Loader_index.Loader,
             {
-              className: utils_cn.cn(
-                buttonIconVariants({ size, className: iconClassName }),
-                "float-start"
-              ),
-              isLoading
+              className: buttonIconVariants({
+                size,
+                className: iconClassName,
+                position: "left"
+              }),
+              isLoading: isLoading ?? false
             }
           ),
-          typeof children !== "undefined" && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 truncate", children }),
+          children,
           IconRight && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             IconRight,
             {
-              className: utils_cn.cn(
-                buttonIconVariants({ size, className: iconClassName }),
-                ""
-              )
+              className: buttonIconVariants({
+                size,
+                className: iconClassName,
+                position: "right"
+              })
             }
           )
         ]

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0.5',\n        'icon-md': 'p-1',\n        'icon-lg': 'p-1.5',\n        'icon-xl': 'p-2',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive ? 'page' : undefined}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1 truncate\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["cva","forwardRef","jsxs","jsx","cn","Loader"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'size-3 absolute top-1/2 -translate-y-1/2',\n      md: 'size-4 absolute top-1/2 -translate-y-1/2',\n      lg: 'size-5 absolute top-1/2 -translate-y-1/2',\n      xl: 'size-6 absolute top-1/2 -translate-y-1/2',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n    position: {\n      left: 'left-3',\n      right: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0.5',\n        'icon-md': 'p-1',\n        'icon-lg': 'p-1.5',\n        'icon-xl': 'p-2',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'pl-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-12',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading,\n      isActive,\n      isFullWidth = false,\n      textAlign,\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive ? 'page' : undefined}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n          hasIconLeft: Boolean(\n            typeof children !== 'undefined' &&\n              (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n          ),\n          hasIconRight: Boolean(\n            typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n          ),\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={buttonIconVariants({\n              size,\n              className: iconClassName,\n              position: 'left',\n            })}\n          />\n        )}\n\n        <Loader\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'left',\n          })}\n          isLoading={isLoading ?? false}\n        />\n\n        {children}\n\n        {IconRight && (\n          <IconRight\n            className={buttonIconVariants({\n              size,\n              className: iconClassName,\n              position: 'right',\n            })}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["cva","forwardRef","jsxs","jsx","Loader"],"mappings":"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"}

package/dist/components/Button/Button.d.ts

@@ -7,6 +7,8 @@ declare const buttonVariants: (props?: ({
     color?: "text" | "light" | "dark" | "success" | "error" | "primary" | "secondary" | "destructive" | "neutral" | "text-inverse" | "custom" | null | undefined;
     textAlign?: "center" | "right" | "left" | null | undefined;
     isFullWidth?: boolean | null | undefined;
+    hasIconLeft?: boolean | null | undefined;
+    hasIconRight?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAsBf,QAAA,MAAM,cAAc;;;;;;8EAuEnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,MAAM,wHA2ElB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAyBf,QAAA,MAAM,cAAc;;;;;;;;8EAkFnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,MAAM,wHAmFlB,CAAC"}

package/dist/components/Button/Button.mjs

@@ -1,19 +1,22 @@
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
-import { cn } from "../../utils/cn.mjs";
 import { Loader } from "../Loader/index.mjs";
-const buttonIconVariants = cva("size-4", {
+const buttonIconVariants = cva("", {
   variants: {
     size: {
-      sm: "w-4",
-      md: "w-6",
-      lg: "w-7",
-      xl: "w-9",
+      sm: "size-3 absolute top-1/2 -translate-y-1/2",
+      md: "size-4 absolute top-1/2 -translate-y-1/2",
+      lg: "size-5 absolute top-1/2 -translate-y-1/2",
+      xl: "size-6 absolute top-1/2 -translate-y-1/2",
       "icon-sm": "size-6 p-1",
       "icon-md": "size-7 p-1",
       "icon-lg": "size-9 p-1",
       "icon-xl": "size-10 p-1"
+    },
+    position: {
+      left: "left-3",
+      right: "right-3"
     }
   },
   defaultVariants: {
@@ -21,7 +24,7 @@ const buttonIconVariants = cva("size-4", {
   }
 });
 const buttonVariants = cva(
-  "flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  "relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {
@@ -69,6 +72,14 @@ const buttonVariants = cva(
       isFullWidth: {
         true: "w-full",
         false: ""
+      },
+      hasIconLeft: {
+        true: "pl-12",
+        false: ""
+      },
+      hasIconRight: {
+        true: "pr-12",
+        false: ""
       }
     },
     defaultVariants: {
@@ -76,7 +87,9 @@ const buttonVariants = cva(
       size: "md",
       color: "primary",
       textAlign: "center",
-      isFullWidth: false
+      isFullWidth: false,
+      hasIconRight: false,
+      hasIconLeft: false
     }
   }
 );
@@ -89,10 +102,10 @@ const Button = forwardRef(
     Icon,
     IconRight,
     iconClassName,
-    isLoading = false,
+    isLoading,
     isActive,
     isFullWidth = false,
-    textAlign = IconRight ? "left" : "center",
+    textAlign,
     disabled,
     label,
     className,
@@ -115,7 +128,13 @@ const Button = forwardRef(
           size,
           color,
           isFullWidth,
-          textAlign,
+          textAlign: textAlign ?? (IconRight ? "left" : "center"),
+          hasIconLeft: Boolean(
+            typeof children !== "undefined" && (typeof Icon !== "undefined" || typeof isLoading !== "undefined")
+          ),
+          hasIconRight: Boolean(
+            typeof children !== "undefined" && typeof IconRight !== "undefined"
+          ),
           className
         }),
         ...props,
@@ -123,30 +142,33 @@ const Button = forwardRef(
           Icon && !isLoading && /* @__PURE__ */ jsxRuntimeExports.jsx(
             Icon,
             {
-              className: cn(
-                buttonIconVariants({ size, className: iconClassName }),
-                "float-start"
-              )
+              className: buttonIconVariants({
+                size,
+                className: iconClassName,
+                position: "left"
+              })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Loader,
             {
-              className: cn(
-                buttonIconVariants({ size, className: iconClassName }),
-                "float-start"
-              ),
-              isLoading
+              className: buttonIconVariants({
+                size,
+                className: iconClassName,
+                position: "left"
+              }),
+              isLoading: isLoading ?? false
             }
           ),
-          typeof children !== "undefined" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 truncate", children }),
+          children,
           IconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(
             IconRight,
             {
-              className: cn(
-                buttonIconVariants({ size, className: iconClassName }),
-                ""
-              )
+              className: buttonIconVariants({
+                size,
+                className: iconClassName,
+                position: "right"
+              })
             }
           )
         ]

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0.5',\n        'icon-md': 'p-1',\n        'icon-lg': 'p-1.5',\n        'icon-xl': 'p-2',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive ? 'page' : undefined}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1 truncate\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["jsxs","jsx"],"mappings":";;;;;AAWA,MAAM,qBAAqB,IAAI,UAAU;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAED,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,QACF,MAAM;AAAA,QACN,kBACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAEJ;AAAA,MACA,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,gBACE;AAAA,QACF,OACE;AAAA,QACF,SACE;AAAA,QACF,QAAQ;AAAA,MACV;AAAA,MAEA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AAmBO,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,IACd,YAAY,YAAY,SAAS;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,KAEL,QACG;AACG,UAAA,SAAS,YAAY,UAAU,YAAY;AAG/C,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa;AAAA,QACvB,gBAAc,WAAW,SAAS;AAAA,QAClC,cAAY;AAAA,QACZ,aAAW;AAAA,QACX,MAAM,SAAS,SAAS;AAAA,QACxB;AAAA,QACA,WAAW,eAAe;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,QAAQ,CAAC,aACRC,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cAAA;AAAA,YACF;AAAA,UACF;AAAA,UAGFA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cACF;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,OAAO,aAAa,qDAClB,OAAI,EAAA,WAAU,mBAAmB,UAAS;AAAA,UAG5C,aACCA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAEA,OAAO,cAAc;"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'size-3 absolute top-1/2 -translate-y-1/2',\n      md: 'size-4 absolute top-1/2 -translate-y-1/2',\n      lg: 'size-5 absolute top-1/2 -translate-y-1/2',\n      xl: 'size-6 absolute top-1/2 -translate-y-1/2',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n    position: {\n      left: 'left-3',\n      right: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'relative truncate whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0.5',\n        'icon-md': 'p-1',\n        'icon-lg': 'p-1.5',\n        'icon-xl': 'p-2',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'pl-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-12',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading,\n      isActive,\n      isFullWidth = false,\n      textAlign,\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive ? 'page' : undefined}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign: textAlign ?? (IconRight ? 'left' : 'center'),\n          hasIconLeft: Boolean(\n            typeof children !== 'undefined' &&\n              (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n          ),\n          hasIconRight: Boolean(\n            typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n          ),\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={buttonIconVariants({\n              size,\n              className: iconClassName,\n              position: 'left',\n            })}\n          />\n        )}\n\n        <Loader\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: 'left',\n          })}\n          isLoading={isLoading ?? false}\n        />\n\n        {children}\n\n        {IconRight && (\n          <IconRight\n            className={buttonIconVariants({\n              size,\n              className: iconClassName,\n              position: 'right',\n            })}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/components/Container/index.cjs

@@ -50,7 +50,7 @@ const containerVariants = classVarianceAuthority.cva(
         text: "border-text dark:border-text-dark"
       },
       background: {
-        none: "bg-none",
+        none: "bg-inherit	",
         with: ""
       },
       gap: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: 'bg-card dark:bg-card-dark',\n        full: '',\n        sm: 'bg-card/90 dark:bg-card-dark/90',\n        md: 'bg-card/70 dark:bg-card-dark/70',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n      },\n      background: {\n        none: 'bg-none',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      borderColor,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          borderColor,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAUO,MAAM,YAAYC,WAAA;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,SAAA;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,UACA;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,UAAU,cAAc;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: 'bg-card dark:bg-card-dark',\n        full: '',\n        sm: 'bg-card/90 dark:bg-card-dark/90',\n        md: 'bg-card/70 dark:bg-card-dark/70',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n      },\n      background: {\n        none: 'bg-inherit\t',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      borderColor,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          borderColor,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["cva","forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,MAAM,oBAAoBA,uBAAA;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAUO,MAAM,YAAYC,WAAA;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,SAAA;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,UACA;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,UAAU,cAAc;;"}

package/dist/components/Container/index.mjs

@@ -48,7 +48,7 @@ const containerVariants = cva(
         text: "border-text dark:border-text-dark"
       },
       background: {
-        none: "bg-none",
+        none: "bg-inherit	",
         with: ""
       },
       gap: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: 'bg-card dark:bg-card-dark',\n        full: '',\n        sm: 'bg-card/90 dark:bg-card-dark/90',\n        md: 'bg-card/70 dark:bg-card-dark/70',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n      },\n      background: {\n        none: 'bg-none',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      borderColor,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          borderColor,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["jsx"],"mappings":";;;;AAIA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAUO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,UACA;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,UAAU,cAAc;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { type PropsWithChildren, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nconst containerVariants = cva(\n  'flex flex-col p-10 text-text backdrop-blur dark:text-text-dark',\n  {\n    variants: {\n      roundedSize: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      transparency: {\n        none: 'bg-card dark:bg-card-dark',\n        full: '',\n        sm: 'bg-card/90 dark:bg-card-dark/90',\n        md: 'bg-card/70 dark:bg-card-dark/70',\n        lg: 'bg-card/40 dark:bg-card-dark/40',\n        xl: 'bg-card/20 dark:bg-card-dark/20',\n      },\n      padding: {\n        none: 'p-0',\n        sm: 'p-1',\n        md: 'p-2',\n        lg: 'p-3',\n        xl: 'p-4',\n      },\n      separator: {\n        without: '',\n        x: 'divide-x divide-dashed divide-text/20 dark:divide-text-dark/20',\n        y: 'divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n        both: 'divide-x divide-y divide-dashed divide-text/20 dark:divide-text-dark/20',\n      },\n      border: {\n        none: '',\n        with: 'border-[1.5px]',\n      },\n      borderColor: {\n        primary: 'border-primary dark:border-primary-dark',\n        secondary: 'border-secondary dark:border-secondary-dark',\n        neutral: 'border-neutral dark:border-neutral-dark',\n        text: 'border-text dark:border-text-dark',\n      },\n      background: {\n        none: 'bg-inherit\t',\n        with: '',\n      },\n      gap: {\n        none: 'gap-0',\n        sm: 'gap-1',\n        md: 'gap-3',\n        lg: 'gap-5',\n        xl: 'gap-8',\n        '2xl': 'gap-10',\n      },\n    },\n\n    defaultVariants: {\n      roundedSize: 'md',\n      border: 'none',\n      borderColor: 'text',\n      transparency: 'md',\n      padding: 'none',\n      separator: 'without',\n      gap: 'none',\n    },\n  }\n);\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border' | 'background'>\n> &\n  HTMLAttributes<HTMLDivElement> & {\n    border?: boolean;\n    background?: boolean;\n  };\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (\n    {\n      children,\n      roundedSize,\n      padding,\n      transparency,\n      separator,\n      className,\n      border,\n      borderColor,\n      background,\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        containerVariants({\n          roundedSize,\n          transparency,\n          padding,\n          separator,\n          border:\n            typeof border === 'boolean'\n              ? border\n                ? 'with'\n                : 'none'\n              : undefined,\n          background:\n            typeof background === 'boolean'\n              ? background\n                ? 'with'\n                : 'none'\n              : undefined,\n          borderColor,\n          className,\n        })\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nContainer.displayName = 'Container';\n"],"names":["jsx"],"mappings":";;;;AAIA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,aAAa;AAAA,QACX,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,KAAK;AAAA,QACH,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IAEA,iBAAiB;AAAA,MACf,aAAa;AAAA,MACb,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,WAAW;AAAA,MACX,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AAUO,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,kBAAkB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,QACE,OAAO,WAAW,YACd,SACE,SACA,SACF;AAAA,UACN,YACE,OAAO,eAAe,YAClB,aACE,SACA,SACF;AAAA,UACN;AAAA,UACA;AAAA,QACD,CAAA;AAAA,MACH;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,UAAU,cAAc;"}

package/dist/components/CopyToClipboard/index.cjs

@@ -2,8 +2,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
-const require$$0 = require("react");
 const lucideReact = require("lucide-react");
+const require$$0 = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const CopyToClipboard = ({
   text,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { FC, PropsWithChildren, useState } from 'react';\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span className={cn('gap-2', className)}>\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              onClick={handleCopy}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":["useState","cn","jsx","CopyCheck","CopyIcon"],"mappings":";;;;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,WAAAA,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAAA,CAC1C;AAAA,EACH;AAEA,2DACG,QAAK,EAAA,WAAWC,SAAG,GAAA,SAAS,SAAS,GACnC,UAAA;AAAA,IAAA;AAAA,IAEAC,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,eACb,mBACE,WACCA,2BAAA,kBAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAGZD,2BAAA,kBAAA;AAAA,MAACE,YAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,GAGlB,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { FC, PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span className={cn('gap-2', className)}>\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              onClick={handleCopy}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":["useState","cn","jsx","CopyCheck","CopyIcon"],"mappings":";;;;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAIA,WAAAA,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAAA,CAC1C;AAAA,EACH;AAEA,2DACG,QAAK,EAAA,WAAWC,SAAG,GAAA,SAAS,SAAS,GACnC,UAAA;AAAA,IAAA;AAAA,IAEAC,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,eACb,mBACE,WACCA,2BAAA,kBAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAGZD,2BAAA,kBAAA;AAAA,MAACE,YAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,GAGlB,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyToClipboard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAyCpD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CopyToClipboard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAGxD,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAyCpD,CAAC"}

package/dist/components/CopyToClipboard/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
-import { useState } from "react";
 import { CopyCheck, CopyIcon } from "lucide-react";
+import { useState } from "react";
 import { cn } from "../../utils/cn.mjs";
 const CopyToClipboard = ({
   text,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { FC, PropsWithChildren, useState } from 'react';\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span className={cn('gap-2', className)}>\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              onClick={handleCopy}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAAA,CAC1C;AAAA,EACH;AAEA,gDACG,QAAK,EAAA,WAAW,GAAG,SAAS,SAAS,GACnC,UAAA;AAAA,IAAA;AAAA,IAEAA,kCAAA,IAAA,QAAA,EAAK,WAAU,eACb,mBACE,WACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAGZA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,GAGlB,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/CopyToClipboard/index.tsx"],"sourcesContent":["'use client';\n\nimport { CopyCheck, CopyIcon } from 'lucide-react';\nimport { FC, PropsWithChildren, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type CopyToClipboardProps = PropsWithChildren<{\n  text: string;\n  className?: string;\n}>;\n\nexport const CopyToClipboard: FC<CopyToClipboardProps> = ({\n  text,\n  children,\n  className,\n}) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text).then(() => {\n      setIsCopied(true);\n      setTimeout(() => setIsCopied(false), 1000);\n    });\n  };\n\n  return (\n    <span className={cn('gap-2', className)}>\n      {children}\n\n      <span className=\"inline-flex\">\n        {text &&\n          (isCopied ? (\n            <CopyCheck\n              size={12}\n              aria-label=\"copied\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1\"\n            />\n          ) : (\n            <CopyIcon\n              size={12}\n              onClick={handleCopy}\n              aria-label=\"copy\"\n              role=\"button\"\n              data-testid=\"copy-to-clipboard\"\n              className=\"ml-1 mt-1 cursor-pointer\"\n            />\n          ))}\n      </span>\n    </span>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;AAWO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,IAAI,EAAE,KAAK,MAAM;AAC7C,kBAAY,IAAI;AAChB,iBAAW,MAAM,YAAY,KAAK,GAAG,GAAI;AAAA,IAAA,CAC1C;AAAA,EACH;AAEA,gDACG,QAAK,EAAA,WAAW,GAAG,SAAS,SAAS,GACnC,UAAA;AAAA,IAAA;AAAA,IAEAA,kCAAA,IAAA,QAAA,EAAK,WAAU,eACb,mBACE,WACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,IAGZA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS;AAAA,QACT,cAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA,GAGlB,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/DictionaryEditor/ItemLayout.cjs

@@ -27,7 +27,6 @@ const ItemLayout = ({
       {
         isOpen: isSelected,
         label: title,
-        identifier: `accordion_${title}`,
         header: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(

package/dist/components/DictionaryEditor/ItemLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.cjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      identifier={`accordion_${title}`}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","cn","Accordion","jsxs"],"mappings":";;;;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA,kBAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY,aAAa,KAAK;AAAA,QAC9B,QACEC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAH,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC,SAAA;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCD,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,2BAAA,kBAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}
+{"version":3,"file":"ItemLayout.cjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","cn","Accordion","jsxs"],"mappings":";;;;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAD,2BAAA,kBAAA;AAAA,MAACE,+BAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QACEC,2BAAA,kBAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAH,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC,SAAA;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCD,2BAAA,kBAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,2BAAA,kBAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}

package/dist/components/DictionaryEditor/ItemLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3D,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAmD3C,CAAC"}
+{"version":3,"file":"ItemLayout.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3D,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,gBAAgB,CAkD3C,CAAC"}

package/dist/components/DictionaryEditor/ItemLayout.mjs

@@ -25,7 +25,6 @@ const ItemLayout = ({
       {
         isOpen: isSelected,
         label: title,
-        identifier: `accordion_${title}`,
         header: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(

package/dist/components/DictionaryEditor/ItemLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemLayout.mjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      identifier={`accordion_${title}`}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","jsxs"],"mappings":";;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY,aAAa,KAAK;AAAA,QAC9B,QACEC,kCAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAD,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCA,kCAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,kCAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}
+{"version":3,"file":"ItemLayout.mjs","sources":["../../../src/components/DictionaryEditor/ItemLayout.tsx"],"sourcesContent":["import type { ReactNode, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Accordion } from '../Accordion';\n\ninterface ItemWrapperProps extends HTMLAttributes<HTMLDivElement> {\n  level: number;\n  children: ReactNode;\n  title: string;\n  description: string;\n  rightParam?: ReactNode;\n  isSelected: boolean;\n}\n\nexport const ItemLayout: FC<ItemWrapperProps> = ({\n  level,\n  title,\n  description,\n  children,\n  rightParam,\n  isSelected,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'rounded-md p-2 transition',\n      'hover:bg-card/30 dark:hover:bg-card-dark/30 [&:has(.section:hover)]:bg-transparent',\n      level === 2 && 'hover:bg-card/30 dark:hover:bg-card-dark/30',\n      level >= 3 && '',\n      isSelected === true && 'bg-card/40 dark:bg-card-dark/40'\n    )}\n    {...props}\n  >\n    <Accordion\n      isOpen={isSelected}\n      label={title}\n      header={\n        <div className=\"flex w-full\">\n          <div className=\"flex w-full items-center justify-between\">\n            <span\n              className={cn(\n                level === 0 && 'text-2xl',\n                level === 1 && 'text-xl',\n                level === 2 && 'text-lg',\n                level >= 3 && 'text-base'\n              )}\n            >\n              {title}\n            </span>\n            {rightParam && (\n              <div className=\"flex w-auto items-center justify-between p-3\">\n                {rightParam}\n              </div>\n            )}\n          </div>\n          {description && (\n            <p className=\"text-card pl-3 text-sm\">{description}</p>\n          )}\n        </div>\n      }\n    >\n      {children}\n    </Accordion>\n  </div>\n);\n"],"names":["jsx","jsxs"],"mappings":";;;AAaO,MAAM,aAAmC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA,MACd,eAAe,QAAQ;AAAA,IACzB;AAAA,IACC,GAAG;AAAA,IAEJ,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QACEC,kCAAA,KAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,4CACb,UAAA;AAAA,YAAAD,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,UAAU,KAAK;AAAA,kBACf,SAAS,KAAK;AAAA,gBAChB;AAAA,gBAEC,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,YACC,cACCA,kCAAA,IAAC,OAAI,EAAA,WAAU,gDACZ,UACH,WAAA,CAAA;AAAA,UAAA,GAEJ;AAAA,UACC,eACCA,kCAAA,IAAC,KAAE,EAAA,WAAU,0BAA0B,UAAY,YAAA,CAAA;AAAA,QAAA,GAEvD;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}

package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.cjs

@@ -13,7 +13,7 @@ require("@intlayer/dictionaries-entry");
 require("deepmerge");
 const components_Form_FormBase = require("../Form/FormBase.cjs");
 require("../Form/FormField.cjs");
-const components_Form_layout_FormItemLayout = require("../../Form-BDcoNTLV.cjs");
+const components_Form_layout_FormItemLayout = require("../../Form-7BqwvjVI.cjs");
 const components_DictionaryEditor_useEditedContentStore = require("./useEditedContentStore.cjs");
 const components_DictionaryEditor_validDictionaryChangeButtons_content = require("./validDictionaryChangeButtons.content.cjs");
 const components_DictionaryEditor_validDictionaryChangeButtonsSchema = require("./validDictionaryChangeButtonsSchema.cjs");

package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.mjs

@@ -11,7 +11,7 @@ import "@intlayer/dictionaries-entry";
 import "deepmerge";
 import { useForm } from "../Form/FormBase.mjs";
 import "../Form/FormField.mjs";
-import { F as Form } from "../../Form-DhsgC7kB.js";
+import { F as Form } from "../../Form-OK9zfg6E.js";
 import { useEditedContentStore } from "./useEditedContentStore.mjs";
 import { validDictionaryChangeButtonsContent } from "./validDictionaryChangeButtons.content.mjs";
 import { getValidDictionaryChangeButtonsSchemaSchema } from "./validDictionaryChangeButtonsSchema.mjs";