@intlayer/design-system 3.3.4 → 3.3.6

package/dist/components/DictionaryFieldEditor/NodeTypeSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTypeSelector.cjs","sources":["../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type DictionaryValue,\n  type EnumerationContent,\n  type KeyPath,\n  NodeType,\n  type TranslationContent,\n} from '@intlayer/core';\nimport { type FC, useEffect, useState } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { getSectionType } from '../../utils/dictionary';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { Select } from '../Select';\nimport { nodeTypeSelectorContent } from './nodeTypeSelector.content';\n\ntype NodeTypeSelectorProps = {\n  keyPath: KeyPath[];\n  dictionaryKey: string;\n  section: DictionaryValue;\n};\n\nexport const NodeTypeSelector: FC<NodeTypeSelectorProps> = ({\n  keyPath,\n  dictionaryKey,\n  section,\n}) => {\n  const {\n    multilingualText,\n    text,\n    node,\n    array,\n    enumeration,\n    triggerPlaceHolder,\n  } = useDictionary(nodeTypeSelectorContent);\n  const nodeType = getSectionType(section);\n  const [keyType, setKeyType] = useState<NodeType>(nodeType);\n  const { addEditedContent } = useEditedContentStore((s) => ({\n    addEditedContent: s.addEditedContent,\n  }));\n  const { locales } = getConfiguration().internationalization;\n\n  const onValueChange = (keyType: NodeType) => {\n    setKeyType(keyType);\n\n    switch (keyType) {\n      case NodeType.Translation:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Translation,\n            [NodeType.Translation]: Object.assign(\n              {},\n              ...locales.map((locale) => ({\n                [locale]: '',\n              }))\n            ),\n          } as TranslationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Enumeration:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Enumeration,\n            [NodeType.Enumeration]: {\n              '1': '',\n              '>1': '',\n            },\n          } as EnumerationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Object:\n        addEditedContent(dictionaryKey, {}, keyPath);\n        break;\n      case NodeType.Array:\n        addEditedContent(dictionaryKey, [''], keyPath);\n        break;\n      case NodeType.Text:\n        addEditedContent(dictionaryKey, '', keyPath);\n        break;\n      default:\n        addEditedContent(dictionaryKey, {}, keyPath);\n    }\n  };\n\n  useEffect(() => {\n    setKeyType(nodeType);\n  }, [nodeType]);\n\n  return (\n    <Select value={keyType} onValueChange={onValueChange}>\n      <Select.Trigger className=\"w-40\">\n        <Select.Value placeholder={triggerPlaceHolder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value={NodeType.Translation}>\n          {multilingualText}\n        </Select.Item>\n        <Select.Item value={NodeType.Text}>{text}</Select.Item>\n        <Select.Item value={NodeType.Object}>{node}</Select.Item>\n        <Select.Item value={NodeType.Array}>{array}</Select.Item>\n        <Select.Item value={NodeType.Enumeration}>{enumeration}</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["useDictionary","nodeTypeSelectorContent","getSectionType","useState","useEditedContentStore","getConfiguration","keyType","NodeType","useEffect","jsxs","Select","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEA,cAAAA,cAAcC,0DAAAA,uBAAuB;AACnC,QAAA,WAAWC,gCAAe,OAAO;AACvC,QAAM,CAAC,SAAS,UAAU,IAAIC,oBAAmB,QAAQ;AACzD,QAAM,EAAE,iBAAA,IAAqBC,kDAAA,sBAAsB,CAAC,OAAO;AAAA,IACzD,kBAAkB,EAAE;AAAA,EACpB,EAAA;AACF,QAAM,EAAE,QAAA,IAAYC,OAAA,iBAAA,EAAmB;AAEjC,QAAA,gBAAgB,CAACC,aAAsB;AAC3C,eAAWA,QAAO;AAElB,YAAQA,UAAS;AAAA,MACf,KAAKC,KAAS,SAAA;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAUA,KAAS,SAAA;AAAA,YACnB,CAACA,KAAA,SAAS,WAAW,GAAG,OAAO;AAAA,cAC7B,CAAC;AAAA,cACD,GAAG,QAAQ,IAAI,CAAC,YAAY;AAAA,gBAC1B,CAAC,MAAM,GAAG;AAAA,cAAA,EACV;AAAA,YACJ;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAKA,KAAS,SAAA;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAUA,KAAS,SAAA;AAAA,YACnB,CAACA,KAAAA,SAAS,WAAW,GAAG;AAAA,cACtB,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAKA,KAAS,SAAA;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF,KAAKA,KAAS,SAAA;AACZ,yBAAiB,eAAe,CAAC,EAAE,GAAG,OAAO;AAC7C;AAAA,MACF,KAAKA,KAAS,SAAA;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF;AACmB,yBAAA,eAAe,IAAI,OAAO;AAAA,IAC/C;AAAA,EAAA;AAGFC,aAAAA,UAAU,MAAM;AACd,eAAW,QAAQ;AAAA,EAAA,GAClB,CAAC,QAAQ,CAAC;AAEb,SACGC,2BAAAA,kBAAAA,KAAAC,yBAAAA,QAAA,EAAO,OAAO,SAAS,eACtB,UAAA;AAAA,IAAAC,2BAAA,kBAAA,IAACD,yBAAO,OAAA,SAAP,EAAe,WAAU,QACxB,UAAAC,2BAAAA,kBAAAA,IAACD,yBAAAA,OAAO,OAAP,EAAa,aAAa,mBAAmB,MAAA,CAAO,EACvD,CAAA;AAAA,IACAD,2BAAAA,kBAAAA,KAACC,yBAAO,OAAA,SAAP,EACC,UAAA;AAAA,MAAAC,iDAACD,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,aAC1B,UACH,kBAAA;AAAA,uDACCG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,MAAO,UAAK,MAAA;AAAA,uDACxCG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,QAAS,UAAK,MAAA;AAAA,uDAC1CG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,OAAQ,UAAM,OAAA;AAAA,uDAC1CG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,aAAc,UAAY,aAAA;AAAA,IAAA,GACzD;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"NodeTypeSelector.cjs","sources":["../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type DictionaryValue,\n  type EnumerationContent,\n  type KeyPath,\n  NodeType,\n  type TranslationContent,\n} from '@intlayer/core';\nimport { type FC, useEffect, useState } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { getSectionType } from '../../utils/dictionary';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { Select } from '../Select';\nimport { nodeTypeSelectorContent } from './nodeTypeSelector.content';\n\ntype NodeTypeSelectorProps = {\n  keyPath: KeyPath[];\n  dictionaryKey: string;\n  section: DictionaryValue;\n};\n\nexport const NodeTypeSelector: FC<NodeTypeSelectorProps> = ({\n  keyPath,\n  dictionaryKey,\n  section,\n}) => {\n  const {\n    multilingualText,\n    text,\n    node,\n    array,\n    enumeration,\n    triggerPlaceHolder,\n  } = useDictionary(nodeTypeSelectorContent);\n  const nodeType = getSectionType(section);\n  const [keyType, setKeyType] = useState<NodeType>(nodeType);\n  const { addEditedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      addEditedContent: s.addEditedContent,\n    }))\n  );\n  const { locales } = getConfiguration().internationalization;\n\n  const onValueChange = (keyType: NodeType) => {\n    setKeyType(keyType);\n\n    switch (keyType) {\n      case NodeType.Translation:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Translation,\n            [NodeType.Translation]: Object.assign(\n              {},\n              ...locales.map((locale) => ({\n                [locale]: '',\n              }))\n            ),\n          } as TranslationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Enumeration:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Enumeration,\n            [NodeType.Enumeration]: {\n              '1': '',\n              '>1': '',\n            },\n          } as EnumerationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Object:\n        addEditedContent(dictionaryKey, {}, keyPath);\n        break;\n      case NodeType.Array:\n        addEditedContent(dictionaryKey, [''], keyPath);\n        break;\n      case NodeType.Text:\n        addEditedContent(dictionaryKey, '', keyPath);\n        break;\n      default:\n        addEditedContent(dictionaryKey, {}, keyPath);\n    }\n  };\n\n  useEffect(() => {\n    setKeyType(nodeType);\n  }, [nodeType]);\n\n  return (\n    <Select value={keyType} onValueChange={onValueChange}>\n      <Select.Trigger className=\"w-40\">\n        <Select.Value placeholder={triggerPlaceHolder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value={NodeType.Translation}>\n          {multilingualText}\n        </Select.Item>\n        <Select.Item value={NodeType.Text}>{text}</Select.Item>\n        <Select.Item value={NodeType.Object}>{node}</Select.Item>\n        <Select.Item value={NodeType.Array}>{array}</Select.Item>\n        <Select.Item value={NodeType.Enumeration}>{enumeration}</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["useDictionary","nodeTypeSelectorContent","getSectionType","useState","useEditedContentStore","useShallow","getConfiguration","keyType","NodeType","useEffect","jsxs","Select","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACEA,cAAAA,cAAcC,0DAAAA,uBAAuB;AACnC,QAAA,WAAWC,gCAAe,OAAO;AACvC,QAAM,CAAC,SAAS,UAAU,IAAIC,oBAAmB,QAAQ;AACnD,QAAA,EAAE,qBAAqBC,kDAAA;AAAA,IAC3BC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EAAA;AAEJ,QAAM,EAAE,QAAA,IAAYC,OAAA,iBAAA,EAAmB;AAEjC,QAAA,gBAAgB,CAACC,aAAsB;AAC3C,eAAWA,QAAO;AAElB,YAAQA,UAAS;AAAA,MACf,KAAKC,KAAS,SAAA;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAUA,KAAS,SAAA;AAAA,YACnB,CAACA,KAAA,SAAS,WAAW,GAAG,OAAO;AAAA,cAC7B,CAAC;AAAA,cACD,GAAG,QAAQ,IAAI,CAAC,YAAY;AAAA,gBAC1B,CAAC,MAAM,GAAG;AAAA,cAAA,EACV;AAAA,YACJ;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAKA,KAAS,SAAA;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAUA,KAAS,SAAA;AAAA,YACnB,CAACA,KAAAA,SAAS,WAAW,GAAG;AAAA,cACtB,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAKA,KAAS,SAAA;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF,KAAKA,KAAS,SAAA;AACZ,yBAAiB,eAAe,CAAC,EAAE,GAAG,OAAO;AAC7C;AAAA,MACF,KAAKA,KAAS,SAAA;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF;AACmB,yBAAA,eAAe,IAAI,OAAO;AAAA,IAC/C;AAAA,EAAA;AAGFC,aAAAA,UAAU,MAAM;AACd,eAAW,QAAQ;AAAA,EAAA,GAClB,CAAC,QAAQ,CAAC;AAEb,SACGC,2BAAAA,kBAAAA,KAAAC,yBAAAA,QAAA,EAAO,OAAO,SAAS,eACtB,UAAA;AAAA,IAAAC,2BAAA,kBAAA,IAACD,yBAAO,OAAA,SAAP,EAAe,WAAU,QACxB,UAAAC,2BAAAA,kBAAAA,IAACD,yBAAAA,OAAO,OAAP,EAAa,aAAa,mBAAmB,MAAA,CAAO,EACvD,CAAA;AAAA,IACAD,2BAAAA,kBAAAA,KAACC,yBAAO,OAAA,SAAP,EACC,UAAA;AAAA,MAAAC,iDAACD,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,aAC1B,UACH,kBAAA;AAAA,uDACCG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,MAAO,UAAK,MAAA;AAAA,uDACxCG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,QAAS,UAAK,MAAA;AAAA,uDAC1CG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,OAAQ,UAAM,OAAA;AAAA,uDAC1CG,yBAAAA,OAAO,MAAP,EAAY,OAAOH,KAAAA,SAAS,aAAc,UAAY,aAAA;AAAA,IAAA,GACzD;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/components/DictionaryFieldEditor/NodeTypeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,OAAO,EAGb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAQrD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAsFtD,CAAC"}
+{"version":3,"file":"NodeTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,OAAO,EAGb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AASrD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAwFtD,CAAC"}

package/dist/components/DictionaryFieldEditor/NodeTypeSelector.mjs

@@ -4,6 +4,7 @@ import { getConfiguration } from "@intlayer/config/client";
 import { NodeType } from "@intlayer/core";
 import { useState, useEffect } from "react";
 import { useDictionary } from "react-intlayer";
+import { u as useShallow } from "../../shallow-m9BpCkKh.js";
 import { getSectionType } from "../../utils/dictionary.mjs";
 import { useEditedContentStore } from "../DictionaryEditor/useEditedContentStore.mjs";
 import "../DictionaryEditor/useEditionPanelStore.mjs";
@@ -42,9 +43,11 @@ const NodeTypeSelector = ({
   } = useDictionary(nodeTypeSelectorContent);
   const nodeType = getSectionType(section);
   const [keyType, setKeyType] = useState(nodeType);
-  const { addEditedContent } = useEditedContentStore((s) => ({
-    addEditedContent: s.addEditedContent
-  }));
+  const { addEditedContent } = useEditedContentStore(
+    useShallow((s) => ({
+      addEditedContent: s.addEditedContent
+    }))
+  );
   const { locales } = getConfiguration().internationalization;
   const onValueChange = (keyType2) => {
     setKeyType(keyType2);

package/dist/components/DictionaryFieldEditor/NodeTypeSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTypeSelector.mjs","sources":["../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type DictionaryValue,\n  type EnumerationContent,\n  type KeyPath,\n  NodeType,\n  type TranslationContent,\n} from '@intlayer/core';\nimport { type FC, useEffect, useState } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { getSectionType } from '../../utils/dictionary';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { Select } from '../Select';\nimport { nodeTypeSelectorContent } from './nodeTypeSelector.content';\n\ntype NodeTypeSelectorProps = {\n  keyPath: KeyPath[];\n  dictionaryKey: string;\n  section: DictionaryValue;\n};\n\nexport const NodeTypeSelector: FC<NodeTypeSelectorProps> = ({\n  keyPath,\n  dictionaryKey,\n  section,\n}) => {\n  const {\n    multilingualText,\n    text,\n    node,\n    array,\n    enumeration,\n    triggerPlaceHolder,\n  } = useDictionary(nodeTypeSelectorContent);\n  const nodeType = getSectionType(section);\n  const [keyType, setKeyType] = useState<NodeType>(nodeType);\n  const { addEditedContent } = useEditedContentStore((s) => ({\n    addEditedContent: s.addEditedContent,\n  }));\n  const { locales } = getConfiguration().internationalization;\n\n  const onValueChange = (keyType: NodeType) => {\n    setKeyType(keyType);\n\n    switch (keyType) {\n      case NodeType.Translation:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Translation,\n            [NodeType.Translation]: Object.assign(\n              {},\n              ...locales.map((locale) => ({\n                [locale]: '',\n              }))\n            ),\n          } as TranslationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Enumeration:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Enumeration,\n            [NodeType.Enumeration]: {\n              '1': '',\n              '>1': '',\n            },\n          } as EnumerationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Object:\n        addEditedContent(dictionaryKey, {}, keyPath);\n        break;\n      case NodeType.Array:\n        addEditedContent(dictionaryKey, [''], keyPath);\n        break;\n      case NodeType.Text:\n        addEditedContent(dictionaryKey, '', keyPath);\n        break;\n      default:\n        addEditedContent(dictionaryKey, {}, keyPath);\n    }\n  };\n\n  useEffect(() => {\n    setKeyType(nodeType);\n  }, [nodeType]);\n\n  return (\n    <Select value={keyType} onValueChange={onValueChange}>\n      <Select.Trigger className=\"w-40\">\n        <Select.Value placeholder={triggerPlaceHolder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value={NodeType.Translation}>\n          {multilingualText}\n        </Select.Item>\n        <Select.Item value={NodeType.Text}>{text}</Select.Item>\n        <Select.Item value={NodeType.Object}>{node}</Select.Item>\n        <Select.Item value={NodeType.Array}>{array}</Select.Item>\n        <Select.Item value={NodeType.Enumeration}>{enumeration}</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["keyType","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,cAAc,uBAAuB;AACnC,QAAA,WAAW,eAAe,OAAO;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmB,QAAQ;AACzD,QAAM,EAAE,iBAAA,IAAqB,sBAAsB,CAAC,OAAO;AAAA,IACzD,kBAAkB,EAAE;AAAA,EACpB,EAAA;AACF,QAAM,EAAE,QAAA,IAAY,iBAAA,EAAmB;AAEjC,QAAA,gBAAgB,CAACA,aAAsB;AAC3C,eAAWA,QAAO;AAElB,YAAQA,UAAS;AAAA,MACf,KAAK,SAAS;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAU,SAAS;AAAA,YACnB,CAAC,SAAS,WAAW,GAAG,OAAO;AAAA,cAC7B,CAAC;AAAA,cACD,GAAG,QAAQ,IAAI,CAAC,YAAY;AAAA,gBAC1B,CAAC,MAAM,GAAG;AAAA,cAAA,EACV;AAAA,YACJ;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAK,SAAS;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAU,SAAS;AAAA,YACnB,CAAC,SAAS,WAAW,GAAG;AAAA,cACtB,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAK,SAAS;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF,KAAK,SAAS;AACZ,yBAAiB,eAAe,CAAC,EAAE,GAAG,OAAO;AAC7C;AAAA,MACF,KAAK,SAAS;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF;AACmB,yBAAA,eAAe,IAAI,OAAO;AAAA,IAC/C;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,eAAW,QAAQ;AAAA,EAAA,GAClB,CAAC,QAAQ,CAAC;AAEb,SACGC,kCAAAA,KAAA,QAAA,EAAO,OAAO,SAAS,eACtB,UAAA;AAAA,IAAAC,kCAAA,IAAC,OAAO,SAAP,EAAe,WAAU,QACxB,UAAAA,kCAAAA,IAAC,OAAO,OAAP,EAAa,aAAa,mBAAmB,MAAA,CAAO,EACvD,CAAA;AAAA,IACAD,kCAAAA,KAAC,OAAO,SAAP,EACC,UAAA;AAAA,MAAAC,sCAAC,OAAO,MAAP,EAAY,OAAO,SAAS,aAC1B,UACH,kBAAA;AAAA,4CACC,OAAO,MAAP,EAAY,OAAO,SAAS,MAAO,UAAK,MAAA;AAAA,4CACxC,OAAO,MAAP,EAAY,OAAO,SAAS,QAAS,UAAK,MAAA;AAAA,4CAC1C,OAAO,MAAP,EAAY,OAAO,SAAS,OAAQ,UAAM,OAAA;AAAA,4CAC1C,OAAO,MAAP,EAAY,OAAO,SAAS,aAAc,UAAY,aAAA;AAAA,IAAA,GACzD;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"NodeTypeSelector.mjs","sources":["../../../src/components/DictionaryFieldEditor/NodeTypeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { getConfiguration } from '@intlayer/config/client';\nimport {\n  type DictionaryValue,\n  type EnumerationContent,\n  type KeyPath,\n  NodeType,\n  type TranslationContent,\n} from '@intlayer/core';\nimport { type FC, useEffect, useState } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { getSectionType } from '../../utils/dictionary';\nimport { useEditedContentStore } from '../DictionaryEditor';\nimport { Select } from '../Select';\nimport { nodeTypeSelectorContent } from './nodeTypeSelector.content';\n\ntype NodeTypeSelectorProps = {\n  keyPath: KeyPath[];\n  dictionaryKey: string;\n  section: DictionaryValue;\n};\n\nexport const NodeTypeSelector: FC<NodeTypeSelectorProps> = ({\n  keyPath,\n  dictionaryKey,\n  section,\n}) => {\n  const {\n    multilingualText,\n    text,\n    node,\n    array,\n    enumeration,\n    triggerPlaceHolder,\n  } = useDictionary(nodeTypeSelectorContent);\n  const nodeType = getSectionType(section);\n  const [keyType, setKeyType] = useState<NodeType>(nodeType);\n  const { addEditedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      addEditedContent: s.addEditedContent,\n    }))\n  );\n  const { locales } = getConfiguration().internationalization;\n\n  const onValueChange = (keyType: NodeType) => {\n    setKeyType(keyType);\n\n    switch (keyType) {\n      case NodeType.Translation:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Translation,\n            [NodeType.Translation]: Object.assign(\n              {},\n              ...locales.map((locale) => ({\n                [locale]: '',\n              }))\n            ),\n          } as TranslationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Enumeration:\n        addEditedContent(\n          dictionaryKey,\n          {\n            nodeType: NodeType.Enumeration,\n            [NodeType.Enumeration]: {\n              '1': '',\n              '>1': '',\n            },\n          } as EnumerationContent<DictionaryValue>,\n          keyPath\n        );\n        break;\n      case NodeType.Object:\n        addEditedContent(dictionaryKey, {}, keyPath);\n        break;\n      case NodeType.Array:\n        addEditedContent(dictionaryKey, [''], keyPath);\n        break;\n      case NodeType.Text:\n        addEditedContent(dictionaryKey, '', keyPath);\n        break;\n      default:\n        addEditedContent(dictionaryKey, {}, keyPath);\n    }\n  };\n\n  useEffect(() => {\n    setKeyType(nodeType);\n  }, [nodeType]);\n\n  return (\n    <Select value={keyType} onValueChange={onValueChange}>\n      <Select.Trigger className=\"w-40\">\n        <Select.Value placeholder={triggerPlaceHolder.value} />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value={NodeType.Translation}>\n          {multilingualText}\n        </Select.Item>\n        <Select.Item value={NodeType.Text}>{text}</Select.Item>\n        <Select.Item value={NodeType.Object}>{node}</Select.Item>\n        <Select.Item value={NodeType.Array}>{array}</Select.Item>\n        <Select.Item value={NodeType.Enumeration}>{enumeration}</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"names":["keyType","jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,cAAc,uBAAuB;AACnC,QAAA,WAAW,eAAe,OAAO;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmB,QAAQ;AACnD,QAAA,EAAE,qBAAqB;AAAA,IAC3B,WAAW,CAAC,OAAO;AAAA,MACjB,kBAAkB,EAAE;AAAA,IAAA,EACpB;AAAA,EAAA;AAEJ,QAAM,EAAE,QAAA,IAAY,iBAAA,EAAmB;AAEjC,QAAA,gBAAgB,CAACA,aAAsB;AAC3C,eAAWA,QAAO;AAElB,YAAQA,UAAS;AAAA,MACf,KAAK,SAAS;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAU,SAAS;AAAA,YACnB,CAAC,SAAS,WAAW,GAAG,OAAO;AAAA,cAC7B,CAAC;AAAA,cACD,GAAG,QAAQ,IAAI,CAAC,YAAY;AAAA,gBAC1B,CAAC,MAAM,GAAG;AAAA,cAAA,EACV;AAAA,YACJ;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAK,SAAS;AACZ;AAAA,UACE;AAAA,UACA;AAAA,YACE,UAAU,SAAS;AAAA,YACnB,CAAC,SAAS,WAAW,GAAG;AAAA,cACtB,KAAK;AAAA,cACL,MAAM;AAAA,YACR;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAEF;AAAA,MACF,KAAK,SAAS;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF,KAAK,SAAS;AACZ,yBAAiB,eAAe,CAAC,EAAE,GAAG,OAAO;AAC7C;AAAA,MACF,KAAK,SAAS;AACK,yBAAA,eAAe,IAAI,OAAO;AAC3C;AAAA,MACF;AACmB,yBAAA,eAAe,IAAI,OAAO;AAAA,IAC/C;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,eAAW,QAAQ;AAAA,EAAA,GAClB,CAAC,QAAQ,CAAC;AAEb,SACGC,kCAAAA,KAAA,QAAA,EAAO,OAAO,SAAS,eACtB,UAAA;AAAA,IAAAC,kCAAA,IAAC,OAAO,SAAP,EAAe,WAAU,QACxB,UAAAA,kCAAAA,IAAC,OAAO,OAAP,EAAa,aAAa,mBAAmB,MAAA,CAAO,EACvD,CAAA;AAAA,IACAD,kCAAAA,KAAC,OAAO,SAAP,EACC,UAAA;AAAA,MAAAC,sCAAC,OAAO,MAAP,EAAY,OAAO,SAAS,aAC1B,UACH,kBAAA;AAAA,4CACC,OAAO,MAAP,EAAY,OAAO,SAAS,MAAO,UAAK,MAAA;AAAA,4CACxC,OAAO,MAAP,EAAY,OAAO,SAAS,QAAS,UAAK,MAAA;AAAA,4CAC1C,OAAO,MAAP,EAAY,OAAO,SAAS,OAAQ,UAAM,OAAA;AAAA,4CAC1C,OAAO,MAAP,EAAY,OAAO,SAAS,aAAc,UAAY,aAAA;AAAA,IAAA,GACzD;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs

@@ -5,6 +5,7 @@ const jsxRuntime = require("../../../jsx-runtime-XHKiWCTo.cjs");
 const lucideReact = require("lucide-react");
 const require$$0 = require("react");
 const reactIntlayer = require("react-intlayer");
+const shallow = require("../../../shallow-lhDIFtEp.cjs");
 require("../../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
 require("../../../hooks/useAsync/useAsyncStateStore.cjs");
 const hooks_intlayerAPIHooks = require("../../../hooks/intlayerAPIHooks.cjs");
@@ -29,10 +30,10 @@ const SaveForm = ({ dictionary }) => {
   const SaveFormSchema = components_DictionaryFieldEditor_SaveForm_SaveFormSchema.getSaveFormSchema();
   const { online } = hooks_useGetAllDictionaries.useGetAllDictionaries();
   const { editedContent, restoreEditedContent } = components_DictionaryEditor_useEditedContentStore.useEditedContentStore(
-    (s) => ({
+    shallow.useShallow((s) => ({
       editedContent: s.editedContent,
       restoreEditedContent: s.restoreEditedContent
-    })
+    }))
   );
   const { form, isSubmitting } = components_Form_FormBase.useForm(SaveFormSchema);
   const { resetButton, saveButton, publishButton } = reactIntlayer.useDictionary(

package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SaveForm.cjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowUpFromLine, RotateCcw, Save } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useGetAllDictionaries, usePushDictionaries } from '../../../hooks';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { Form, useForm } from '../../Form';\nimport { saveDictionaryContent } from './saveForm.content';\nimport { getSaveFormSchema } from './SaveFormSchema';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n};\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({ dictionary }) => {\n  const { pushDictionaries } = usePushDictionaries();\n  const SaveFormSchema = getSaveFormSchema();\n  const { online } = useGetAllDictionaries();\n\n  const { editedContent, restoreEditedContent } = useEditedContentStore(\n    (s) => ({\n      editedContent: s.editedContent,\n      restoreEditedContent: s.restoreEditedContent,\n    })\n  );\n  const { form, isSubmitting } = useForm(SaveFormSchema);\n  const { resetButton, saveButton, publishButton } = useDictionary(\n    saveDictionaryContent\n  );\n\n  const editedDictionary = useMemo(\n    () => editedContent[dictionary.key],\n    [editedContent, dictionary.key]\n  );\n\n  const onlineDictionary = useMemo(() => {\n    return online?.[dictionary.key];\n  }, [online, dictionary.key]);\n\n  const isEdited = useMemo(\n    () =>\n      editedDictionary &&\n      onlineDictionary &&\n      JSON.stringify(editedDictionary.content) !==\n        JSON.stringify(onlineDictionary.content),\n    [onlineDictionary, editedDictionary]\n  );\n\n  const isLocalDictionary = useMemo(\n    () => typeof (dictionary as DistantDictionary)?._id === 'undefined',\n    [dictionary]\n  );\n\n  const onSubmitSuccess = async () => {\n    await pushDictionaries([\n      {\n        ...dictionary,\n        ...editedContent[dictionary.key],\n      },\n    ]);\n  };\n\n  return (\n    <Form\n      className=\"flex w-full flex-1 flex-row justify-end gap-3\"\n      {...form}\n      schema={SaveFormSchema}\n      onSubmitSuccess={onSubmitSuccess}\n    >\n      {isEdited && (\n        <Form.Button\n          type=\"button\"\n          label={resetButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          className=\"ml-auto\"\n          Icon={RotateCcw}\n          variant=\"outline\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          onClick={() => {\n            restoreEditedContent(dictionary.key);\n          }}\n        >\n          {resetButton.text}\n        </Form.Button>\n      )}\n      {isLocalDictionary ? (\n        <Form.Button\n          type=\"submit\"\n          label={publishButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          Icon={ArrowUpFromLine}\n          color=\"text\"\n          isLoading={isSubmitting}\n        >\n          {publishButton.text}\n        </Form.Button>\n      ) : (\n        isEdited && (\n          <Form.Button\n            type=\"submit\"\n            label={saveButton.label.value}\n            disabled={!isEdited || isSubmitting}\n            Icon={Save}\n            color=\"text\"\n            isLoading={isSubmitting}\n          >\n            {saveButton.text}\n          </Form.Button>\n        )\n      )}\n    </Form>\n  );\n};\n"],"names":["usePushDictionaries","getSaveFormSchema","useGetAllDictionaries","useEditedContentStore","useForm","useDictionary","saveDictionaryContent","useMemo","jsxs","Form","jsx","RotateCcw","ArrowUpFromLine","Save"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,WAAuC,CAAC,EAAE,iBAAiB;AAChE,QAAA,EAAE,qBAAqBA,uBAAAA;AAC7B,QAAM,iBAAiBC,yDAAAA;AACjB,QAAA,EAAE,WAAWC,4BAAAA;AAEb,QAAA,EAAE,eAAe,qBAAA,IAAyBC,kDAAA;AAAA,IAC9C,CAAC,OAAO;AAAA,MACN,eAAe,EAAE;AAAA,MACjB,sBAAsB,EAAE;AAAA,IAAA;AAAA,EAC1B;AAEF,QAAM,EAAE,MAAM,aAAa,IAAIC,iCAAQ,cAAc;AACrD,QAAM,EAAE,aAAa,YAAY,cAAkB,IAAAC,cAAA;AAAA,IACjDC,2DAAA;AAAA,EAAA;AAGF,QAAM,mBAAmBC,WAAA;AAAA,IACvB,MAAM,cAAc,WAAW,GAAG;AAAA,IAClC,CAAC,eAAe,WAAW,GAAG;AAAA,EAAA;AAG1B,QAAA,mBAAmBA,WAAAA,QAAQ,MAAM;AAC9B,WAAA,SAAS,WAAW,GAAG;AAAA,EAC7B,GAAA,CAAC,QAAQ,WAAW,GAAG,CAAC;AAE3B,QAAM,WAAWA,WAAA;AAAA,IACf,MACE,oBACA,oBACA,KAAK,UAAU,iBAAiB,OAAO,MACrC,KAAK,UAAU,iBAAiB,OAAO;AAAA,IAC3C,CAAC,kBAAkB,gBAAgB;AAAA,EAAA;AAGrC,QAAM,oBAAoBA,WAAA;AAAA,IACxB,MAAM,OAAQ,YAAkC,QAAQ;AAAA,IACxD,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,kBAAkB,YAAY;AAClC,UAAM,iBAAiB;AAAA,MACrB;AAAA,QACE,GAAG;AAAA,QACH,GAAG,cAAc,WAAW,GAAG;AAAA,MACjC;AAAA,IAAA,CACD;AAAA,EAAA;AAID,SAAAC,2BAAA,kBAAA;AAAA,IAACC,sCAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR;AAAA,MAEC,UAAA;AAAA,QACC,YAAAC,2BAAA,kBAAA;AAAA,UAACD,sCAAAA,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,YAAY,MAAM;AAAA,YACzB,UAAU,CAAC,YAAY;AAAA,YACvB,WAAU;AAAA,YACV,MAAME,YAAA;AAAA,YACN,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,MAAM;AACb,mCAAqB,WAAW,GAAG;AAAA,YACrC;AAAA,YAEC,UAAY,YAAA;AAAA,UAAA;AAAA,QACf;AAAA,QAED,oBACCD,2BAAA,kBAAA;AAAA,UAACD,sCAAAA,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,cAAc,MAAM;AAAA,YAC3B,UAAU,CAAC,YAAY;AAAA,YACvB,MAAMG,YAAA;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAc,cAAA;AAAA,UAAA;AAAA,YAGjB,YACEF,2BAAA,kBAAA;AAAA,UAACD,sCAAAA,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,WAAW,MAAM;AAAA,YACxB,UAAU,CAAC,YAAY;AAAA,YACvB,MAAMI,YAAA;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAW,WAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKV;;"}
+{"version":3,"file":"SaveForm.cjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowUpFromLine, RotateCcw, Save } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useGetAllDictionaries, usePushDictionaries } from '../../../hooks';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { Form, useForm } from '../../Form';\nimport { saveDictionaryContent } from './saveForm.content';\nimport { getSaveFormSchema } from './SaveFormSchema';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n};\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({ dictionary }) => {\n  const { pushDictionaries } = usePushDictionaries();\n  const SaveFormSchema = getSaveFormSchema();\n  const { online } = useGetAllDictionaries();\n\n  const { editedContent, restoreEditedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      restoreEditedContent: s.restoreEditedContent,\n    }))\n  );\n  const { form, isSubmitting } = useForm(SaveFormSchema);\n  const { resetButton, saveButton, publishButton } = useDictionary(\n    saveDictionaryContent\n  );\n\n  const editedDictionary = useMemo(\n    () => editedContent[dictionary.key],\n    [editedContent, dictionary.key]\n  );\n\n  const onlineDictionary = useMemo(() => {\n    return online?.[dictionary.key];\n  }, [online, dictionary.key]);\n\n  const isEdited = useMemo(\n    () =>\n      editedDictionary &&\n      onlineDictionary &&\n      JSON.stringify(editedDictionary.content) !==\n        JSON.stringify(onlineDictionary.content),\n    [onlineDictionary, editedDictionary]\n  );\n\n  const isLocalDictionary = useMemo(\n    () => typeof (dictionary as DistantDictionary)?._id === 'undefined',\n    [dictionary]\n  );\n\n  const onSubmitSuccess = async () => {\n    await pushDictionaries([\n      {\n        ...dictionary,\n        ...editedContent[dictionary.key],\n      },\n    ]);\n  };\n\n  return (\n    <Form\n      className=\"flex w-full flex-1 flex-row justify-end gap-3\"\n      {...form}\n      schema={SaveFormSchema}\n      onSubmitSuccess={onSubmitSuccess}\n    >\n      {isEdited && (\n        <Form.Button\n          type=\"button\"\n          label={resetButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          className=\"ml-auto\"\n          Icon={RotateCcw}\n          variant=\"outline\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          onClick={() => {\n            restoreEditedContent(dictionary.key);\n          }}\n        >\n          {resetButton.text}\n        </Form.Button>\n      )}\n      {isLocalDictionary ? (\n        <Form.Button\n          type=\"submit\"\n          label={publishButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          Icon={ArrowUpFromLine}\n          color=\"text\"\n          isLoading={isSubmitting}\n        >\n          {publishButton.text}\n        </Form.Button>\n      ) : (\n        isEdited && (\n          <Form.Button\n            type=\"submit\"\n            label={saveButton.label.value}\n            disabled={!isEdited || isSubmitting}\n            Icon={Save}\n            color=\"text\"\n            isLoading={isSubmitting}\n          >\n            {saveButton.text}\n          </Form.Button>\n        )\n      )}\n    </Form>\n  );\n};\n"],"names":["usePushDictionaries","getSaveFormSchema","useGetAllDictionaries","useEditedContentStore","useShallow","useForm","useDictionary","saveDictionaryContent","useMemo","jsxs","Form","jsx","RotateCcw","ArrowUpFromLine","Save"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,WAAuC,CAAC,EAAE,iBAAiB;AAChE,QAAA,EAAE,qBAAqBA,uBAAAA;AAC7B,QAAM,iBAAiBC,yDAAAA;AACjB,QAAA,EAAE,WAAWC,4BAAAA;AAEb,QAAA,EAAE,eAAe,qBAAA,IAAyBC,kDAAA;AAAA,IAC9CC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,sBAAsB,EAAE;AAAA,IAAA,EACxB;AAAA,EAAA;AAEJ,QAAM,EAAE,MAAM,aAAa,IAAIC,iCAAQ,cAAc;AACrD,QAAM,EAAE,aAAa,YAAY,cAAkB,IAAAC,cAAA;AAAA,IACjDC,2DAAA;AAAA,EAAA;AAGF,QAAM,mBAAmBC,WAAA;AAAA,IACvB,MAAM,cAAc,WAAW,GAAG;AAAA,IAClC,CAAC,eAAe,WAAW,GAAG;AAAA,EAAA;AAG1B,QAAA,mBAAmBA,WAAAA,QAAQ,MAAM;AAC9B,WAAA,SAAS,WAAW,GAAG;AAAA,EAC7B,GAAA,CAAC,QAAQ,WAAW,GAAG,CAAC;AAE3B,QAAM,WAAWA,WAAA;AAAA,IACf,MACE,oBACA,oBACA,KAAK,UAAU,iBAAiB,OAAO,MACrC,KAAK,UAAU,iBAAiB,OAAO;AAAA,IAC3C,CAAC,kBAAkB,gBAAgB;AAAA,EAAA;AAGrC,QAAM,oBAAoBA,WAAA;AAAA,IACxB,MAAM,OAAQ,YAAkC,QAAQ;AAAA,IACxD,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,kBAAkB,YAAY;AAClC,UAAM,iBAAiB;AAAA,MACrB;AAAA,QACE,GAAG;AAAA,QACH,GAAG,cAAc,WAAW,GAAG;AAAA,MACjC;AAAA,IAAA,CACD;AAAA,EAAA;AAID,SAAAC,2BAAA,kBAAA;AAAA,IAACC,sCAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR;AAAA,MAEC,UAAA;AAAA,QACC,YAAAC,2BAAA,kBAAA;AAAA,UAACD,sCAAAA,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,YAAY,MAAM;AAAA,YACzB,UAAU,CAAC,YAAY;AAAA,YACvB,WAAU;AAAA,YACV,MAAME,YAAA;AAAA,YACN,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,MAAM;AACb,mCAAqB,WAAW,GAAG;AAAA,YACrC;AAAA,YAEC,UAAY,YAAA;AAAA,UAAA;AAAA,QACf;AAAA,QAED,oBACCD,2BAAA,kBAAA;AAAA,UAACD,sCAAAA,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,cAAc,MAAM;AAAA,YAC3B,UAAU,CAAC,YAAY;AAAA,YACvB,MAAMG,YAAA;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAc,cAAA;AAAA,UAAA;AAAA,YAGjB,YACEF,2BAAA,kBAAA;AAAA,UAACD,sCAAAA,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,WAAW,MAAM;AAAA,YACxB,UAAU,CAAC,YAAY;AAAA,YACvB,MAAMI,YAAA;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAW,WAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKV;;"}

package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveForm.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AASzC,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAmG/C,CAAC"}
+{"version":3,"file":"SaveForm.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAW,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAUzC,KAAK,sBAAsB,GAAG;IAC5B,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,sBAAsB,CAmG/C,CAAC"}

package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs

@@ -3,6 +3,7 @@ import { j as jsxRuntimeExports } from "../../../jsx-runtime-DaNGiM0W.js";
 import { RotateCcw, ArrowUpFromLine, Save } from "lucide-react";
 import { useMemo } from "react";
 import { useDictionary } from "react-intlayer";
+import { u as useShallow } from "../../../shallow-m9BpCkKh.js";
 import "../../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
 import "../../../hooks/useAsync/useAsyncStateStore.mjs";
 import { usePushDictionaries } from "../../../hooks/intlayerAPIHooks.mjs";
@@ -27,10 +28,10 @@ const SaveForm = ({ dictionary }) => {
   const SaveFormSchema = getSaveFormSchema();
   const { online } = useGetAllDictionaries();
   const { editedContent, restoreEditedContent } = useEditedContentStore(
-    (s) => ({
+    useShallow((s) => ({
       editedContent: s.editedContent,
       restoreEditedContent: s.restoreEditedContent
-    })
+    }))
   );
   const { form, isSubmitting } = useForm(SaveFormSchema);
   const { resetButton, saveButton, publishButton } = useDictionary(

package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SaveForm.mjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowUpFromLine, RotateCcw, Save } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useGetAllDictionaries, usePushDictionaries } from '../../../hooks';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { Form, useForm } from '../../Form';\nimport { saveDictionaryContent } from './saveForm.content';\nimport { getSaveFormSchema } from './SaveFormSchema';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n};\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({ dictionary }) => {\n  const { pushDictionaries } = usePushDictionaries();\n  const SaveFormSchema = getSaveFormSchema();\n  const { online } = useGetAllDictionaries();\n\n  const { editedContent, restoreEditedContent } = useEditedContentStore(\n    (s) => ({\n      editedContent: s.editedContent,\n      restoreEditedContent: s.restoreEditedContent,\n    })\n  );\n  const { form, isSubmitting } = useForm(SaveFormSchema);\n  const { resetButton, saveButton, publishButton } = useDictionary(\n    saveDictionaryContent\n  );\n\n  const editedDictionary = useMemo(\n    () => editedContent[dictionary.key],\n    [editedContent, dictionary.key]\n  );\n\n  const onlineDictionary = useMemo(() => {\n    return online?.[dictionary.key];\n  }, [online, dictionary.key]);\n\n  const isEdited = useMemo(\n    () =>\n      editedDictionary &&\n      onlineDictionary &&\n      JSON.stringify(editedDictionary.content) !==\n        JSON.stringify(onlineDictionary.content),\n    [onlineDictionary, editedDictionary]\n  );\n\n  const isLocalDictionary = useMemo(\n    () => typeof (dictionary as DistantDictionary)?._id === 'undefined',\n    [dictionary]\n  );\n\n  const onSubmitSuccess = async () => {\n    await pushDictionaries([\n      {\n        ...dictionary,\n        ...editedContent[dictionary.key],\n      },\n    ]);\n  };\n\n  return (\n    <Form\n      className=\"flex w-full flex-1 flex-row justify-end gap-3\"\n      {...form}\n      schema={SaveFormSchema}\n      onSubmitSuccess={onSubmitSuccess}\n    >\n      {isEdited && (\n        <Form.Button\n          type=\"button\"\n          label={resetButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          className=\"ml-auto\"\n          Icon={RotateCcw}\n          variant=\"outline\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          onClick={() => {\n            restoreEditedContent(dictionary.key);\n          }}\n        >\n          {resetButton.text}\n        </Form.Button>\n      )}\n      {isLocalDictionary ? (\n        <Form.Button\n          type=\"submit\"\n          label={publishButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          Icon={ArrowUpFromLine}\n          color=\"text\"\n          isLoading={isSubmitting}\n        >\n          {publishButton.text}\n        </Form.Button>\n      ) : (\n        isEdited && (\n          <Form.Button\n            type=\"submit\"\n            label={saveButton.label.value}\n            disabled={!isEdited || isSubmitting}\n            Icon={Save}\n            color=\"text\"\n            isLoading={isSubmitting}\n          >\n            {saveButton.text}\n          </Form.Button>\n        )\n      )}\n    </Form>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkBO,MAAM,WAAuC,CAAC,EAAE,iBAAiB;AAChE,QAAA,EAAE,qBAAqB;AAC7B,QAAM,iBAAiB;AACjB,QAAA,EAAE,WAAW;AAEb,QAAA,EAAE,eAAe,qBAAA,IAAyB;AAAA,IAC9C,CAAC,OAAO;AAAA,MACN,eAAe,EAAE;AAAA,MACjB,sBAAsB,EAAE;AAAA,IAAA;AAAA,EAC1B;AAEF,QAAM,EAAE,MAAM,aAAa,IAAI,QAAQ,cAAc;AACrD,QAAM,EAAE,aAAa,YAAY,cAAkB,IAAA;AAAA,IACjD;AAAA,EAAA;AAGF,QAAM,mBAAmB;AAAA,IACvB,MAAM,cAAc,WAAW,GAAG;AAAA,IAClC,CAAC,eAAe,WAAW,GAAG;AAAA,EAAA;AAG1B,QAAA,mBAAmB,QAAQ,MAAM;AAC9B,WAAA,SAAS,WAAW,GAAG;AAAA,EAC7B,GAAA,CAAC,QAAQ,WAAW,GAAG,CAAC;AAE3B,QAAM,WAAW;AAAA,IACf,MACE,oBACA,oBACA,KAAK,UAAU,iBAAiB,OAAO,MACrC,KAAK,UAAU,iBAAiB,OAAO;AAAA,IAC3C,CAAC,kBAAkB,gBAAgB;AAAA,EAAA;AAGrC,QAAM,oBAAoB;AAAA,IACxB,MAAM,OAAQ,YAAkC,QAAQ;AAAA,IACxD,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,kBAAkB,YAAY;AAClC,UAAM,iBAAiB;AAAA,MACrB;AAAA,QACE,GAAG;AAAA,QACH,GAAG,cAAc,WAAW,GAAG;AAAA,MACjC;AAAA,IAAA,CACD;AAAA,EAAA;AAID,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR;AAAA,MAEC,UAAA;AAAA,QACC,YAAAC,kCAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,YAAY,MAAM;AAAA,YACzB,UAAU,CAAC,YAAY;AAAA,YACvB,WAAU;AAAA,YACV,MAAM;AAAA,YACN,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,MAAM;AACb,mCAAqB,WAAW,GAAG;AAAA,YACrC;AAAA,YAEC,UAAY,YAAA;AAAA,UAAA;AAAA,QACf;AAAA,QAED,oBACCA,kCAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,cAAc,MAAM;AAAA,YAC3B,UAAU,CAAC,YAAY;AAAA,YACvB,MAAM;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAc,cAAA;AAAA,UAAA;AAAA,YAGjB,YACEA,kCAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,WAAW,MAAM;AAAA,YACxB,UAAU,CAAC,YAAY;AAAA,YACvB,MAAM;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAW,WAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKV;"}
+{"version":3,"file":"SaveForm.mjs","sources":["../../../../src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx"],"sourcesContent":["'use client';\n\nimport { Dictionary as DistantDictionary } from '@intlayer/backend';\nimport { Dictionary } from '@intlayer/core';\nimport { ArrowUpFromLine, RotateCcw, Save } from 'lucide-react';\nimport { useMemo, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useGetAllDictionaries, usePushDictionaries } from '../../../hooks';\nimport { useEditedContentStore } from '../../DictionaryEditor';\nimport { Form, useForm } from '../../Form';\nimport { saveDictionaryContent } from './saveForm.content';\nimport { getSaveFormSchema } from './SaveFormSchema';\n\ntype DictionaryDetailsProps = {\n  dictionary: Dictionary;\n};\n\nexport const SaveForm: FC<DictionaryDetailsProps> = ({ dictionary }) => {\n  const { pushDictionaries } = usePushDictionaries();\n  const SaveFormSchema = getSaveFormSchema();\n  const { online } = useGetAllDictionaries();\n\n  const { editedContent, restoreEditedContent } = useEditedContentStore(\n    useShallow((s) => ({\n      editedContent: s.editedContent,\n      restoreEditedContent: s.restoreEditedContent,\n    }))\n  );\n  const { form, isSubmitting } = useForm(SaveFormSchema);\n  const { resetButton, saveButton, publishButton } = useDictionary(\n    saveDictionaryContent\n  );\n\n  const editedDictionary = useMemo(\n    () => editedContent[dictionary.key],\n    [editedContent, dictionary.key]\n  );\n\n  const onlineDictionary = useMemo(() => {\n    return online?.[dictionary.key];\n  }, [online, dictionary.key]);\n\n  const isEdited = useMemo(\n    () =>\n      editedDictionary &&\n      onlineDictionary &&\n      JSON.stringify(editedDictionary.content) !==\n        JSON.stringify(onlineDictionary.content),\n    [onlineDictionary, editedDictionary]\n  );\n\n  const isLocalDictionary = useMemo(\n    () => typeof (dictionary as DistantDictionary)?._id === 'undefined',\n    [dictionary]\n  );\n\n  const onSubmitSuccess = async () => {\n    await pushDictionaries([\n      {\n        ...dictionary,\n        ...editedContent[dictionary.key],\n      },\n    ]);\n  };\n\n  return (\n    <Form\n      className=\"flex w-full flex-1 flex-row justify-end gap-3\"\n      {...form}\n      schema={SaveFormSchema}\n      onSubmitSuccess={onSubmitSuccess}\n    >\n      {isEdited && (\n        <Form.Button\n          type=\"button\"\n          label={resetButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          className=\"ml-auto\"\n          Icon={RotateCcw}\n          variant=\"outline\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          onClick={() => {\n            restoreEditedContent(dictionary.key);\n          }}\n        >\n          {resetButton.text}\n        </Form.Button>\n      )}\n      {isLocalDictionary ? (\n        <Form.Button\n          type=\"submit\"\n          label={publishButton.label.value}\n          disabled={!isEdited || isSubmitting}\n          Icon={ArrowUpFromLine}\n          color=\"text\"\n          isLoading={isSubmitting}\n        >\n          {publishButton.text}\n        </Form.Button>\n      ) : (\n        isEdited && (\n          <Form.Button\n            type=\"submit\"\n            label={saveButton.label.value}\n            disabled={!isEdited || isSubmitting}\n            Icon={Save}\n            color=\"text\"\n            isLoading={isSubmitting}\n          >\n            {saveButton.text}\n          </Form.Button>\n        )\n      )}\n    </Form>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,WAAuC,CAAC,EAAE,iBAAiB;AAChE,QAAA,EAAE,qBAAqB;AAC7B,QAAM,iBAAiB;AACjB,QAAA,EAAE,WAAW;AAEb,QAAA,EAAE,eAAe,qBAAA,IAAyB;AAAA,IAC9C,WAAW,CAAC,OAAO;AAAA,MACjB,eAAe,EAAE;AAAA,MACjB,sBAAsB,EAAE;AAAA,IAAA,EACxB;AAAA,EAAA;AAEJ,QAAM,EAAE,MAAM,aAAa,IAAI,QAAQ,cAAc;AACrD,QAAM,EAAE,aAAa,YAAY,cAAkB,IAAA;AAAA,IACjD;AAAA,EAAA;AAGF,QAAM,mBAAmB;AAAA,IACvB,MAAM,cAAc,WAAW,GAAG;AAAA,IAClC,CAAC,eAAe,WAAW,GAAG;AAAA,EAAA;AAG1B,QAAA,mBAAmB,QAAQ,MAAM;AAC9B,WAAA,SAAS,WAAW,GAAG;AAAA,EAC7B,GAAA,CAAC,QAAQ,WAAW,GAAG,CAAC;AAE3B,QAAM,WAAW;AAAA,IACf,MACE,oBACA,oBACA,KAAK,UAAU,iBAAiB,OAAO,MACrC,KAAK,UAAU,iBAAiB,OAAO;AAAA,IAC3C,CAAC,kBAAkB,gBAAgB;AAAA,EAAA;AAGrC,QAAM,oBAAoB;AAAA,IACxB,MAAM,OAAQ,YAAkC,QAAQ;AAAA,IACxD,CAAC,UAAU;AAAA,EAAA;AAGb,QAAM,kBAAkB,YAAY;AAClC,UAAM,iBAAiB;AAAA,MACrB;AAAA,QACE,GAAG;AAAA,QACH,GAAG,cAAc,WAAW,GAAG;AAAA,MACjC;AAAA,IAAA,CACD;AAAA,EAAA;AAID,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA,MACJ,QAAQ;AAAA,MACR;AAAA,MAEC,UAAA;AAAA,QACC,YAAAC,kCAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,YAAY,MAAM;AAAA,YACzB,UAAU,CAAC,YAAY;AAAA,YACvB,WAAU;AAAA,YACV,MAAM;AAAA,YACN,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,MAAM;AACb,mCAAqB,WAAW,GAAG;AAAA,YACrC;AAAA,YAEC,UAAY,YAAA;AAAA,UAAA;AAAA,QACf;AAAA,QAED,oBACCA,kCAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,cAAc,MAAM;AAAA,YAC3B,UAAU,CAAC,YAAY;AAAA,YACvB,MAAM;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAc,cAAA;AAAA,UAAA;AAAA,YAGjB,YACEA,kCAAA;AAAA,UAAC,KAAK;AAAA,UAAL;AAAA,YACC,MAAK;AAAA,YACL,OAAO,WAAW,MAAM;AAAA,YACxB,UAAU,CAAC,YAAY;AAAA,YACvB,MAAM;AAAA,YACN,OAAM;AAAA,YACN,WAAW;AAAA,YAEV,UAAW,WAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKV;"}

package/dist/components/Input/Input.cjs

@@ -17,8 +17,8 @@ const inputVariants = classVarianceAuthority.cva("", {
       ]
     },
     size: {
-      md: "px-2 py-1",
-      lg: "px-4 py-2"
+      md: "px-2 py-1 max-md:py-3",
+      lg: "px-4 py-2 max-md:py-4"
     },
     validationStyleEnabled: {
       disabled: "",

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

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1',\n      lg: 'px-4 py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["cva","forwardRef","jsx"],"mappings":";;;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQC,WAAA;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["cva","forwardRef","jsx"],"mappings":";;;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQC,WAAA;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;;;"}

package/dist/components/Input/Input.mjs

@@ -15,8 +15,8 @@ const inputVariants = cva("", {
       ]
     },
     size: {
-      md: "px-2 py-1",
-      lg: "px-4 py-2"
+      md: "px-2 py-1 max-md:py-3",
+      lg: "px-4 py-2 max-md:py-4"
     },
     validationStyleEnabled: {
       disabled: "",

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

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1',\n      lg: 'px-4 py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["jsx"],"mappings":";;;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQ;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["jsx"],"mappings":";;;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQ;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;"}

package/dist/components/Link/Link.cjs

@@ -12,7 +12,7 @@ const linkVariants = classVarianceAuthority.cva(
         outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
         default: "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",
         "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
+        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
         hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10"
       },
       color: {

package/dist/components/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type AnchorHTMLAttributes,\n} from 'react';\n\nconst linkVariants = cva(\n  'gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        default:\n          '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\n        button:\n          'rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\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        custom: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n  };\n\nconst isExternal = (href = ''): boolean => /^https?:\\/\\//.test(href);\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      children,\n      label,\n      className,\n      isActive,\n      isExternalLink: isExternalLinkProp,\n      ...props\n    },\n    ref\n  ) => {\n    const isChildrenString = typeof children === 'string';\n    const isExternalLink =\n      isExternalLinkProp === true ||\n      (typeof isExternalLinkProp === 'undefined' &&\n        isChildrenString &&\n        isExternal(props.href));\n\n    return (\n      <a\n        ref={ref}\n        aria-label={label}\n        aria-current={isActive}\n        aria-selected={isActive}\n        className={linkVariants({\n          variant,\n          color,\n          className,\n        })}\n        {...props}\n      >\n        {children}\n        {isExternalLink && <ExternalLink className=\"size-4\" />}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["cva","forwardRef","jsxs","jsx","ExternalLink"],"mappings":";;;;;;AAQA,MAAM,eAAeA,uBAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,kBACE;AAAA,QAEF,QACE;AAAA,QACF,WACE;AAAA,MACJ;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,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAYA,MAAM,aAAa,CAAC,OAAO,OAAgB,eAAe,KAAK,IAAI;AAE5D,MAAM,OAAOC,WAAA;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,KAEL,QACG;AACG,UAAA,mBAAmB,OAAO,aAAa;AACvC,UAAA,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,oBACA,WAAW,MAAM,IAAI;AAGvB,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,aAAa;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,kBAAkBC,2BAAAA,kBAAAA,IAACC,YAAAA,cAAa,EAAA,WAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1D;AACF;AAEA,KAAK,cAAc;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type AnchorHTMLAttributes,\n} from 'react';\n\nconst linkVariants = cva(\n  'gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        default:\n          '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\n        button:\n          'rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\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        custom: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n  };\n\nconst isExternal = (href = ''): boolean => /^https?:\\/\\//.test(href);\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      children,\n      label,\n      className,\n      isActive,\n      isExternalLink: isExternalLinkProp,\n      ...props\n    },\n    ref\n  ) => {\n    const isChildrenString = typeof children === 'string';\n    const isExternalLink =\n      isExternalLinkProp === true ||\n      (typeof isExternalLinkProp === 'undefined' &&\n        isChildrenString &&\n        isExternal(props.href));\n\n    return (\n      <a\n        ref={ref}\n        aria-label={label}\n        aria-current={isActive}\n        aria-selected={isActive}\n        className={linkVariants({\n          variant,\n          color,\n          className,\n        })}\n        {...props}\n      >\n        {children}\n        {isExternalLink && <ExternalLink className=\"size-4\" />}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["cva","forwardRef","jsxs","jsx","ExternalLink"],"mappings":";;;;;;AAQA,MAAM,eAAeA,uBAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,kBACE;AAAA,QAEF,QACE;AAAA,QACF,WACE;AAAA,MACJ;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,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAYA,MAAM,aAAa,CAAC,OAAO,OAAgB,eAAe,KAAK,IAAI;AAE5D,MAAM,OAAOC,WAAA;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,KAEL,QACG;AACG,UAAA,mBAAmB,OAAO,aAAa;AACvC,UAAA,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,oBACA,WAAW,MAAM,IAAI;AAGvB,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,aAAa;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,kBAAkBC,2BAAAA,kBAAAA,IAACC,YAAAA,cAAa,EAAA,WAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1D;AACF;AAEA,KAAK,cAAc;;"}

package/dist/components/Link/Link.mjs

@@ -10,7 +10,7 @@ const linkVariants = cva(
         outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
         default: "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",
         "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
+        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
         hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10"
       },
       color: {

package/dist/components/Link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type AnchorHTMLAttributes,\n} from 'react';\n\nconst linkVariants = cva(\n  'gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        default:\n          '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\n        button:\n          'rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\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        custom: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n  };\n\nconst isExternal = (href = ''): boolean => /^https?:\\/\\//.test(href);\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      children,\n      label,\n      className,\n      isActive,\n      isExternalLink: isExternalLinkProp,\n      ...props\n    },\n    ref\n  ) => {\n    const isChildrenString = typeof children === 'string';\n    const isExternalLink =\n      isExternalLinkProp === true ||\n      (typeof isExternalLinkProp === 'undefined' &&\n        isChildrenString &&\n        isExternal(props.href));\n\n    return (\n      <a\n        ref={ref}\n        aria-label={label}\n        aria-current={isActive}\n        aria-selected={isActive}\n        className={linkVariants({\n          variant,\n          color,\n          className,\n        })}\n        {...props}\n      >\n        {children}\n        {isExternalLink && <ExternalLink className=\"size-4\" />}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["jsxs","jsx"],"mappings":";;;;AAQA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,kBACE;AAAA,QAEF,QACE;AAAA,QACF,WACE;AAAA,MACJ;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,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAYA,MAAM,aAAa,CAAC,OAAO,OAAgB,eAAe,KAAK,IAAI;AAE5D,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,KAEL,QACG;AACG,UAAA,mBAAmB,OAAO,aAAa;AACvC,UAAA,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,oBACA,WAAW,MAAM,IAAI;AAGvB,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,aAAa;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,kBAAkBC,kCAAAA,IAAC,cAAa,EAAA,WAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1D;AACF;AAEA,KAAK,cAAc;"}
+{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type AnchorHTMLAttributes,\n} from 'react';\n\nconst linkVariants = cva(\n  'gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        default:\n          '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\n        button:\n          'rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\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        custom: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n  };\n\nconst isExternal = (href = ''): boolean => /^https?:\\/\\//.test(href);\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      children,\n      label,\n      className,\n      isActive,\n      isExternalLink: isExternalLinkProp,\n      ...props\n    },\n    ref\n  ) => {\n    const isChildrenString = typeof children === 'string';\n    const isExternalLink =\n      isExternalLinkProp === true ||\n      (typeof isExternalLinkProp === 'undefined' &&\n        isChildrenString &&\n        isExternal(props.href));\n\n    return (\n      <a\n        ref={ref}\n        aria-label={label}\n        aria-current={isActive}\n        aria-selected={isActive}\n        className={linkVariants({\n          variant,\n          color,\n          className,\n        })}\n        {...props}\n      >\n        {children}\n        {isExternalLink && <ExternalLink className=\"size-4\" />}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["jsxs","jsx"],"mappings":";;;;AAQA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,kBACE;AAAA,QAEF,QACE;AAAA,QACF,WACE;AAAA,MACJ;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,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAYA,MAAM,aAAa,CAAC,OAAO,OAAgB,eAAe,KAAK,IAAI;AAE5D,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,KAEL,QACG;AACG,UAAA,mBAAmB,OAAO,aAAa;AACvC,UAAA,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,oBACA,WAAW,MAAM,IAAI;AAGvB,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,aAAa;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,kBAAkBC,kCAAAA,IAAC,cAAa,EAAA,WAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1D;AACF;AAEA,KAAK,cAAc;"}

package/dist/components/RightDrawer/RightDrawer.cjs

@@ -16,15 +16,17 @@ const RightDrawer = ({
   children,
   header,
   closeOnOutsideClick = true,
-  backButton
+  backButton,
+  isOpen: isOpenProp,
+  onClose
 }) => {
   const { isMobile } = hooks_useDevice.useDevice("md");
   const panelRef = require$$0.useRef(null);
   const childrenContainerRef = require$$0.useRef(null);
-  const { isOpen, close } = components_RightDrawer_useRightDrawerStore.useRightDrawerStore(identifier)();
+  const { isOpen, close, open } = components_RightDrawer_useRightDrawerStore.useRightDrawerStore(identifier)();
   hooks_useScrollBlockage_index.useScrollBlockage({
     disableScroll: isOpen,
-    key: identifier ? "right_drawer" : "right_drawer_${identifier}"
+    key: identifier ? "right_drawer" : `right_drawer_${identifier}`
   });
   require$$0.useEffect(() => {
     const handleClickOutside = (event) => {
@@ -34,23 +36,35 @@ const RightDrawer = ({
       const isAtTopAndVisible = utils_isElementAtTopAndNotCovered.isElementAtTopAndNotCovered(panelRef.current);
       if (isClickAble && isClickOutside && isAtTopAndVisible) {
         close();
+        onClose?.();
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen, close, closeOnOutsideClick]);
+  }, [isOpen, close, onClose, closeOnOutsideClick]);
+  require$$0.useEffect(() => {
+    if (isOpenProp !== void 0) {
+      if (isOpenProp) {
+        open();
+      } else {
+        close();
+        onClose?.();
+      }
+    }
+  }, [close, open, onClose, isOpenProp]);
   const handleSpareSpaceClick = (e) => {
     if (e.target !== e.currentTarget) {
       return;
     }
     if (isMobile) {
       close();
+      onClose?.();
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_MaxWidthSmoother_index.MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     components_Container_index.Container,
     {
-      className: "text-text dark:text-text-dark relative  flex h-screen w-screen flex-col md:w-[400px]",
+      className: "text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]",
       ref: panelRef,
       roundedSize: "none",
       children: [

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable sonarjs/mouse-events-a11y */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n} from 'react';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { isOpen, close } = useRightDrawerStore(identifier)();\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? 'right_drawer' : 'right_drawer_${identifier}',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!panelRef.current) return;\n\n      // Check if drawer is open and click outside is enabled\n      const isClickAble = isOpen && closeOnOutsideClick;\n      // Check if click is outside the drawer panel\n      const isClickOutside = !panelRef.current.contains(event.target as Node);\n      // Check if event propagation has been stopped\n      const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n      if (isClickAble && isClickOutside && isAtTopAndVisible) {\n        close();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, closeOnOutsideClick]); // Make sure the effect runs only if isOpen or close changes\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative  flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <button\n                    className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n                    onClick={backButton.onBack}\n                  >\n                    <ChevronLeft />\n                    {backButton?.text}\n                  </button>\n                )}\n              </div>\n              <X className=\"ml-auto cursor-pointer\" onClick={close} />\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","ChevronLeft","X"],"mappings":";;;;;;;;;;;;AAkCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAaA,gBAAA,UAAU,IAAI;AAC7B,QAAA,WAAWC,kBAAuB,IAAI;AACtC,QAAA,uBAAuBA,kBAAuB,IAAI;AACxD,QAAM,EAAE,QAAQ,MAAA,IAAUC,2CAAAA,oBAAoB,UAAU,EAAE;AAExCC,kDAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,iBAAiB;AAAA,EAAA,CACpC;AAEDC,aAAAA,UAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,UAAsB;AAC5C,UAAA,CAAC,SAAS,QAAS;AAGvB,YAAM,cAAc,UAAU;AAE9B,YAAM,iBAAiB,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAEhE,YAAA,oBAAoBC,kCAAAA,4BAA4B,SAAS,OAAO;AAElE,UAAA,eAAe,kBAAkB,mBAAmB;AAChD;MACR;AAAA,IAAA;AAGO,aAAA,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EACxE,GAAA,CAAC,QAAQ,OAAO,mBAAmB,CAAC;AAEjC,QAAA,wBAA2D,CAAC,MAAM;AAElE,QAAA,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IACF;AAEA,QAAI,UAAU;AACN;IACR;AAAA,EAAA;AAIA,SAAAC,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,2BAAA,kBAAA,IAACC,sDAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAAC,2BAAA,kBAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAACD,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAAF,2BAAAA,kBAAAA,IAAC,SACE,UACC,cAAAE,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,WAAW;AAAA,gBAEpB,UAAA;AAAA,kBAAAF,2BAAA,kBAAA,IAACI,YAAY,aAAA,EAAA;AAAA,kBACZ,YAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,YACCJ,2BAAA,kBAAA,IAAAK,YAAA,GAAA,EAAE,WAAU,0BAAyB,SAAS,OAAO;AAAA,UAAA,GACxD;AAAA,UACCL,2BAAA,kBAAA,IAAA,MAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,UACC;AAAA,QAAA,GACH;AAAA,QAEAA,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,4CACb,UAAAA,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;"}
+{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n} from 'react';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { isOpen, close, open } = useRightDrawerStore(identifier)();\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? 'right_drawer' : `right_drawer_${identifier}`,\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!panelRef.current) return;\n\n      // Check if drawer is open and click outside is enabled\n      const isClickAble = isOpen && closeOnOutsideClick;\n      // Check if click is outside the drawer panel\n      const isClickOutside = !panelRef.current.contains(event.target as Node);\n      // Check if event propagation has been stopped\n      const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n      if (isClickAble && isClickOutside && isAtTopAndVisible) {\n        close();\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <button\n                    className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n                    onClick={backButton.onBack}\n                  >\n                    <ChevronLeft />\n                    {backButton?.text}\n                  </button>\n                )}\n              </div>\n              <X className=\"ml-auto cursor-pointer\" onClick={close} />\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","ChevronLeft","X"],"mappings":";;;;;;;;;;;;AAmCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAaA,gBAAA,UAAU,IAAI;AAC7B,QAAA,WAAWC,kBAAuB,IAAI;AACtC,QAAA,uBAAuBA,kBAAuB,IAAI;AACxD,QAAM,EAAE,QAAQ,OAAO,KAAS,IAAAC,2CAAA,oBAAoB,UAAU;AAE5CC,kDAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,iBAAiB,gBAAgB,UAAU;AAAA,EAAA,CAC9D;AAEDC,aAAAA,UAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,UAAsB;AAC5C,UAAA,CAAC,SAAS,QAAS;AAGvB,YAAM,cAAc,UAAU;AAE9B,YAAM,iBAAiB,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAEhE,YAAA,oBAAoBC,kCAAAA,4BAA4B,SAAS,OAAO;AAElE,UAAA,eAAe,kBAAkB,mBAAmB;AAChD;AACI;MACZ;AAAA,IAAA;AAGO,aAAA,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,KACxE,CAAC,QAAQ,OAAO,SAAS,mBAAmB,CAAC;AAEhDD,aAAAA,UAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,UAAI,YAAY;AACT;MAAA,OACA;AACC;AACI;MACZ;AAAA,IACF;AAAA,KACC,CAAC,OAAO,MAAM,SAAS,UAAU,CAAC;AAE/B,QAAA,wBAA2D,CAAC,MAAM;AAElE,QAAA,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IACF;AAEA,QAAI,UAAU;AACN;AACI;IACZ;AAAA,EAAA;AAIA,SAAAE,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,2BAAA,kBAAA,IAACC,sDAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAAC,2BAAA,kBAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAACD,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAACA,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAAF,2BAAAA,kBAAAA,IAAC,SACE,UACC,cAAAE,2BAAA,kBAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,WAAW;AAAA,gBAEpB,UAAA;AAAA,kBAAAF,2BAAA,kBAAA,IAACI,YAAY,aAAA,EAAA;AAAA,kBACZ,YAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,YACCJ,2BAAA,kBAAA,IAAAK,YAAA,GAAA,EAAE,WAAU,0BAAyB,SAAS,OAAO;AAAA,UAAA,GACxD;AAAA,UACCL,2BAAA,kBAAA,IAAA,MAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,UACC;AAAA,QAAA,GACH;AAAA,QAEAA,2BAAAA,kBAAAA,IAAC,OAAI,EAAA,WAAU,4CACb,UAAAA,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;"}

package/dist/components/RightDrawer/RightDrawer.d.ts

@@ -10,6 +10,8 @@ type RightDrawerProps = {
     header?: ReactNode;
     closeOnOutsideClick?: boolean;
     backButton?: BackButtonProps;
+    isOpen?: boolean;
+    onClose?: () => void;
 };
 export declare const RightDrawer: FC<RightDrawerProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAQf,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2F5C,CAAC"}
+{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAQf,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA0G5C,CAAC"}

package/dist/components/RightDrawer/RightDrawer.mjs

@@ -14,15 +14,17 @@ const RightDrawer = ({
   children,
   header,
   closeOnOutsideClick = true,
-  backButton
+  backButton,
+  isOpen: isOpenProp,
+  onClose
 }) => {
   const { isMobile } = useDevice("md");
   const panelRef = useRef(null);
   const childrenContainerRef = useRef(null);
-  const { isOpen, close } = useRightDrawerStore(identifier)();
+  const { isOpen, close, open } = useRightDrawerStore(identifier)();
   useScrollBlockage({
     disableScroll: isOpen,
-    key: identifier ? "right_drawer" : "right_drawer_${identifier}"
+    key: identifier ? "right_drawer" : `right_drawer_${identifier}`
   });
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -32,23 +34,35 @@ const RightDrawer = ({
       const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);
       if (isClickAble && isClickOutside && isAtTopAndVisible) {
         close();
+        onClose?.();
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen, close, closeOnOutsideClick]);
+  }, [isOpen, close, onClose, closeOnOutsideClick]);
+  useEffect(() => {
+    if (isOpenProp !== void 0) {
+      if (isOpenProp) {
+        open();
+      } else {
+        close();
+        onClose?.();
+      }
+    }
+  }, [close, open, onClose, isOpenProp]);
   const handleSpareSpaceClick = (e) => {
     if (e.target !== e.currentTarget) {
       return;
     }
     if (isMobile) {
       close();
+      onClose?.();
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Container,
     {
-      className: "text-text dark:text-text-dark relative  flex h-screen w-screen flex-col md:w-[400px]",
+      className: "text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]",
       ref: panelRef,
       roundedSize: "none",
       children: [

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable sonarjs/mouse-events-a11y */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n} from 'react';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { isOpen, close } = useRightDrawerStore(identifier)();\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? 'right_drawer' : 'right_drawer_${identifier}',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!panelRef.current) return;\n\n      // Check if drawer is open and click outside is enabled\n      const isClickAble = isOpen && closeOnOutsideClick;\n      // Check if click is outside the drawer panel\n      const isClickOutside = !panelRef.current.contains(event.target as Node);\n      // Check if event propagation has been stopped\n      const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n      if (isClickAble && isClickOutside && isAtTopAndVisible) {\n        close();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, closeOnOutsideClick]); // Make sure the effect runs only if isOpen or close changes\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative  flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <button\n                    className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n                    onClick={backButton.onBack}\n                  >\n                    <ChevronLeft />\n                    {backButton?.text}\n                  </button>\n                )}\n              </div>\n              <X className=\"ml-auto cursor-pointer\" onClick={close} />\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;;;;;;;AAkCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,UAAU,IAAI;AAC7B,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,uBAAuB,OAAuB,IAAI;AACxD,QAAM,EAAE,QAAQ,MAAA,IAAU,oBAAoB,UAAU,EAAE;AAExC,oBAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,iBAAiB;AAAA,EAAA,CACpC;AAED,YAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,UAAsB;AAC5C,UAAA,CAAC,SAAS,QAAS;AAGvB,YAAM,cAAc,UAAU;AAE9B,YAAM,iBAAiB,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAEhE,YAAA,oBAAoB,4BAA4B,SAAS,OAAO;AAElE,UAAA,eAAe,kBAAkB,mBAAmB;AAChD;MACR;AAAA,IAAA;AAGO,aAAA,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EACxE,GAAA,CAAC,QAAQ,OAAO,mBAAmB,CAAC;AAEjC,QAAA,wBAA2D,CAAC,MAAM;AAElE,QAAA,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IACF;AAEA,QAAI,UAAU;AACN;IACR;AAAA,EAAA;AAIA,SAAAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,kCAAA,IAAC,oBAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAAC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAAD,kCAAAA,IAAC,SACE,UACC,cAAAC,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,WAAW;AAAA,gBAEpB,UAAA;AAAA,kBAAAD,kCAAA,IAAC,aAAY,EAAA;AAAA,kBACZ,YAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,YACCA,kCAAA,IAAA,GAAA,EAAE,WAAU,0BAAyB,SAAS,OAAO;AAAA,UAAA,GACxD;AAAA,UACCA,kCAAA,IAAA,MAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,UACC;AAAA,QAAA,GACH;AAAA,QAEAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,4CACb,UAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n} from 'react';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { isOpen, close, open } = useRightDrawerStore(identifier)();\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? 'right_drawer' : `right_drawer_${identifier}`,\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!panelRef.current) return;\n\n      // Check if drawer is open and click outside is enabled\n      const isClickAble = isOpen && closeOnOutsideClick;\n      // Check if click is outside the drawer panel\n      const isClickOutside = !panelRef.current.contains(event.target as Node);\n      // Check if event propagation has been stopped\n      const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n      if (isClickAble && isClickOutside && isAtTopAndVisible) {\n        close();\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <button\n                    className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n                    onClick={backButton.onBack}\n                  >\n                    <ChevronLeft />\n                    {backButton?.text}\n                  </button>\n                )}\n              </div>\n              <X className=\"ml-auto cursor-pointer\" onClick={close} />\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;;;;;;;AAmCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,UAAU,IAAI;AAC7B,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,uBAAuB,OAAuB,IAAI;AACxD,QAAM,EAAE,QAAQ,OAAO,KAAS,IAAA,oBAAoB,UAAU;AAE5C,oBAAA;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,iBAAiB,gBAAgB,UAAU;AAAA,EAAA,CAC9D;AAED,YAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,UAAsB;AAC5C,UAAA,CAAC,SAAS,QAAS;AAGvB,YAAM,cAAc,UAAU;AAE9B,YAAM,iBAAiB,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAEhE,YAAA,oBAAoB,4BAA4B,SAAS,OAAO;AAElE,UAAA,eAAe,kBAAkB,mBAAmB;AAChD;AACI;MACZ;AAAA,IAAA;AAGO,aAAA,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,KACxE,CAAC,QAAQ,OAAO,SAAS,mBAAmB,CAAC;AAEhD,YAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,UAAI,YAAY;AACT;MAAA,OACA;AACC;AACI;MACZ;AAAA,IACF;AAAA,KACC,CAAC,OAAO,MAAM,SAAS,UAAU,CAAC;AAE/B,QAAA,wBAA2D,CAAC,MAAM;AAElE,QAAA,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IACF;AAEA,QAAI,UAAU;AACN;AACI;IACZ;AAAA,EAAA;AAIA,SAAAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,oDACb,UAAAA,kCAAA,IAAC,oBAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAAC,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAAD,kCAAAA,IAAC,SACE,UACC,cAAAC,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,WAAW;AAAA,gBAEpB,UAAA;AAAA,kBAAAD,kCAAA,IAAC,aAAY,EAAA;AAAA,kBACZ,YAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,YACCA,kCAAA,IAAA,GAAA,EAAE,WAAU,0BAAyB,SAAS,OAAO;AAAA,UAAA,GACxD;AAAA,UACCA,kCAAA,IAAA,MAAA,EAAG,WAAU,sDACX,UACH,OAAA;AAAA,UACC;AAAA,QAAA,GACH;AAAA,QAEAA,kCAAAA,IAAC,OAAI,EAAA,WAAU,4CACb,UAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;"}

package/dist/components/RightDrawer/index.cjs

@@ -3,6 +3,5 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const components_RightDrawer_RightDrawer = require("./RightDrawer.cjs");
 const components_RightDrawer_useRightDrawerStore = require("./useRightDrawerStore.cjs");
 exports.RightDrawer = components_RightDrawer_RightDrawer.RightDrawer;
-exports.createRightDrawerStore = components_RightDrawer_useRightDrawerStore.createRightDrawerStore;
 exports.useRightDrawerStore = components_RightDrawer_useRightDrawerStore.useRightDrawerStore;
 //# sourceMappingURL=index.cjs.map

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

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

package/dist/components/RightDrawer/index.mjs

@@ -1,8 +1,7 @@
 import { RightDrawer } from "./RightDrawer.mjs";
-import { createRightDrawerStore, useRightDrawerStore } from "./useRightDrawerStore.mjs";
+import { useRightDrawerStore } from "./useRightDrawerStore.mjs";
 export {
   RightDrawer,
-  createRightDrawerStore,
   useRightDrawerStore
 };
 //# sourceMappingURL=index.mjs.map