@intlayer/design-system 5.5.9 → 5.5.10

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

@@ -1 +1 @@
-{"version":3,"file":"StructureView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type KeyPath,\n  type TypedNode,\n  type ContentNode,\n  getNodeChildren,\n  getNodeType,\n  isSameKeyPath,\n  NodeType,\n  getDefaultNode,\n} from '@intlayer/core';\nimport {\n  useConfiguration,\n  useEditedContentActions,\n  useFocusDictionary,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { Plus, Trash } from 'lucide-react';\nimport { type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Button } from '../../Button';\nimport { Container } from '../../Container';\nimport { EditableFieldInput } from '../../EditableField';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { structureViewContent } from './structureView.content';\n\ntype NodeTypeViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n  section,\n  dictionaryKey,\n  keyPath,\n  onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n  const locales = useConfiguration()?.internationalization.locales ?? [];\n  const nodeType = getNodeType(section);\n  const children = getNodeChildren(section);\n\n  const onNodeTypeChange = (content?: ContentNode) => {\n    const transformedContent = getDefaultNode(\n      nodeType,\n      locales,\n      content\n    ) as ContentNode;\n\n    onNodeTypeChangeProp(transformedContent);\n  };\n\n  if (\n    nodeType === NodeType.Translation ||\n    nodeType === NodeType.Condition ||\n    nodeType === NodeType.Enumeration\n  ) {\n    const firstKey = Object.keys(\n      (section as unknown as TypedNode)[nodeType as keyof typeof section]\n    )[0];\n    const childrenKeyPath = [\n      ...keyPath,\n      { type: nodeType, key: firstKey },\n    ] as KeyPath[];\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Array) {\n    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Object) {\n    return (\n      <>\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n        <div className=\"ml-10 mt-6\">\n          <StructureView\n            keyPath={keyPath}\n            section={section}\n            dictionaryKey={dictionaryKey}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <NodeTypeSelector\n      section={section}\n      onValueChange={(nodeType) =>\n        onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n      }\n    />\n  );\n};\n\ntype NodeWrapperProps = {\n  sectionKey?: string;\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n  sectionKey,\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n  const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n  const { titleInput, deleteButton } = useDictionary(structureViewContent);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    renameEditedContent(dictionaryKey, keyName, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: keyName } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <Container\n      transparency=\"xl\"\n      roundedSize=\"xl\"\n      className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n      border\n      borderColor=\"text\"\n      background=\"none\"\n      aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n      onClick={() => setFocusedContentKeyPath(keyPath)}\n    >\n      <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n        {typeof sectionKey === 'string' && (\n          <div className=\"w-full\">\n            <div className=\"flex w-full items-center justify-between gap-10\">\n              <EditableFieldInput\n                name=\"key\"\n                aria-label=\"Key\"\n                placeholder={titleInput.placeholder.value}\n                defaultValue={sectionKey}\n                onSave={(value) => handleRenameNodeKey(value)}\n                variant=\"invisible\"\n              />\n              <Button\n                label={deleteButton.label.value}\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"translate-x-2\"\n                Icon={Trash}\n                onClick={() => {\n                  addEditedContent(dictionaryKey, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              />\n            </div>\n\n            <span className=\"text-neutral ml-3 text-sm\">\n              ( {camelCaseToSentence(sectionKey)} )\n            </span>\n          </div>\n        )}\n        <NodeTypeView\n          keyPath={keyPath}\n          dictionaryKey={dictionaryKey}\n          section={section}\n          onNodeTypeChange={(content) => {\n            addEditedContent(dictionaryKey, content, keyPath);\n          }}\n        />\n      </div>\n    </Container>\n  );\n};\n\ntype ObjectViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { addNodeButton } = useDictionary(structureViewContent);\n  const { setFocusedContentKeyPath } = useFocusDictionaryActions();\n  const { addEditedContent } = useEditedContentActions();\n\n  if (!section || typeof section !== 'object') {\n    return <div>Not an object</div>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2 overflow-y-scroll\">\n      <ul className=\"mr-auto flex flex-col gap-4\">\n        {Object.keys(section).map((key) => (\n          <li key={key} className=\"flex w-full\">\n            <NodeView\n              sectionKey={key}\n              section={section?.[key as keyof typeof section]}\n              keyPath={[...keyPath, { type: NodeType.Object, key }]}\n              dictionaryKey={dictionaryKey}\n            />\n          </li>\n        ))}\n      </ul>\n      <Button\n        label={addNodeButton.label.value}\n        variant=\"hoverable\"\n        size=\"md\"\n        color=\"text\"\n        Icon={Plus}\n        className=\"flex-1\"\n        onClick={() => {\n          const newKey = 'newKey';\n          const newKeyPath = [\n            ...keyPath,\n            { type: NodeType.Object, key: newKey },\n          ] as KeyPath[];\n          addEditedContent(dictionaryKey, '', newKeyPath);\n          setFocusedContentKeyPath(newKeyPath);\n        }}\n      >\n        {addNodeButton.text}\n      </Button>\n    </div>\n  );\n};\n\ntype StructureViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  if (\n    !section ||\n    typeof section !== 'object' ||\n    typeof section.nodeType === 'string'\n  ) {\n    return (\n      <NodeView\n        sectionKey={'content'}\n        section={section}\n        keyPath={keyPath}\n        dictionaryKey={dictionaryKey}\n      />\n    );\n  }\n\n  return (\n    <ObjectView\n      section={section}\n      keyPath={keyPath}\n      dictionaryKey={dictionaryKey}\n    />\n  );\n};\n"],"names":["nodeType"],"mappings":"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"}
+{"version":3,"file":"StructureView.mjs","sources":["../../../../src/components/DictionaryFieldEditor/StructureView/StructureView.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentNode,\n  getDefaultNode,\n  getNodeChildren,\n  getNodeType,\n  isSameKeyPath,\n  type KeyPath,\n  NodeType,\n  type TypedNode,\n} from '@intlayer/core';\nimport {\n  useConfiguration,\n  useEditedContentActions,\n  useFocusDictionary,\n  useFocusDictionaryActions,\n} from '@intlayer/editor-react';\nimport { Plus, Trash } from 'lucide-react';\nimport { type FC } from 'react';\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport { Button } from '../../Button';\nimport { Container } from '../../Container';\nimport { EditableFieldInput } from '../../EditableField';\nimport { NodeTypeSelector } from '../NodeTypeSelector';\nimport { structureViewContent } from './structureView.content';\n\ntype NodeTypeViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n  onNodeTypeChange: (content?: ContentNode) => void;\n};\n\nconst NodeTypeView: FC<NodeTypeViewProps> = ({\n  section,\n  dictionaryKey,\n  keyPath,\n  onNodeTypeChange: onNodeTypeChangeProp,\n}) => {\n  const locales = useConfiguration()?.internationalization.locales ?? [];\n  const nodeType = getNodeType(section);\n  const children = getNodeChildren(section);\n\n  const onNodeTypeChange = (content?: ContentNode) => {\n    const transformedContent = getDefaultNode(\n      nodeType,\n      locales,\n      content\n    ) as ContentNode;\n\n    onNodeTypeChangeProp(transformedContent);\n  };\n\n  if (\n    nodeType === NodeType.Translation ||\n    nodeType === NodeType.Condition ||\n    nodeType === NodeType.Enumeration\n  ) {\n    const firstKey = Object.keys(\n      (section as unknown as TypedNode)[nodeType as keyof typeof section]\n    )[0];\n    const childrenKeyPath = [\n      ...keyPath,\n      { type: nodeType, key: firstKey },\n    ] as KeyPath[];\n\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Array) {\n    const childrenKeyPath = [...keyPath, { type: nodeType, key: 0 } as KeyPath];\n    return (\n      <div className=\"flex w-full flex-col gap-1\">\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n\n        <NodeTypeView\n          section={children}\n          keyPath={childrenKeyPath}\n          dictionaryKey={dictionaryKey}\n          onNodeTypeChange={onNodeTypeChange}\n        />\n      </div>\n    );\n  }\n\n  if (nodeType === NodeType.Object) {\n    return (\n      <>\n        <NodeTypeSelector\n          section={section}\n          onValueChange={(nodeType) =>\n            onNodeTypeChangeProp(\n              getDefaultNode(nodeType, locales) as ContentNode\n            )\n          }\n        />\n        <div className=\"ml-10 mt-6\">\n          <StructureView\n            keyPath={keyPath}\n            section={section}\n            dictionaryKey={dictionaryKey}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <NodeTypeSelector\n      section={section}\n      onValueChange={(nodeType) =>\n        onNodeTypeChangeProp(getDefaultNode(nodeType, locales) as ContentNode)\n      }\n    />\n  );\n};\n\ntype NodeWrapperProps = {\n  sectionKey?: string;\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const NodeView: FC<NodeWrapperProps> = ({\n  sectionKey,\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { focusedContent, setFocusedContentKeyPath } = useFocusDictionary();\n  const { renameEditedContent, addEditedContent } = useEditedContentActions();\n\n  const { titleInput, deleteButton } = useDictionary(structureViewContent);\n\n  const handleRenameNodeKey = (keyName: string) => {\n    renameEditedContent(dictionaryKey, keyName, keyPath);\n    const prevKeyPath: KeyPath[] = keyPath.slice(0, -1);\n    const lastKeyPath: KeyPath = keyPath[keyPath.length - 1];\n    const newKeyPath: KeyPath[] = [\n      ...prevKeyPath,\n      { ...lastKeyPath, key: keyName } as KeyPath,\n    ];\n    setFocusedContentKeyPath(newKeyPath);\n  };\n\n  return (\n    <Container\n      transparency=\"xl\"\n      roundedSize=\"xl\"\n      className=\"w-full min-w-80 gap-2 overflow-auto px-5 py-2\"\n      border\n      borderColor=\"text\"\n      background=\"none\"\n      aria-selected={isSameKeyPath(keyPath, focusedContent?.keyPath ?? [])}\n      onClick={() => setFocusedContentKeyPath(keyPath)}\n    >\n      <div className=\"flex w-full flex-col items-start justify-between gap-3\">\n        {typeof sectionKey === 'string' && (\n          <div className=\"w-full\">\n            <div className=\"flex w-full items-center justify-between gap-10\">\n              <EditableFieldInput\n                name=\"key\"\n                aria-label=\"Key\"\n                placeholder={titleInput.placeholder.value}\n                defaultValue={sectionKey}\n                onSave={(value) => handleRenameNodeKey(value)}\n                variant=\"invisible\"\n              />\n              <Button\n                label={deleteButton.label.value}\n                variant=\"hoverable\"\n                size=\"icon-sm\"\n                color=\"text\"\n                className=\"translate-x-2\"\n                Icon={Trash}\n                onClick={() => {\n                  addEditedContent(dictionaryKey, undefined, keyPath);\n\n                  const parentKeyPath: KeyPath[] = keyPath.slice(0, -1);\n                  setFocusedContentKeyPath(parentKeyPath);\n                }}\n              />\n            </div>\n\n            <span className=\"text-neutral ml-3 text-sm\">\n              ( {camelCaseToSentence(sectionKey)} )\n            </span>\n          </div>\n        )}\n        <NodeTypeView\n          keyPath={keyPath}\n          dictionaryKey={dictionaryKey}\n          section={section}\n          onNodeTypeChange={(content) => {\n            addEditedContent(dictionaryKey, content, keyPath);\n          }}\n        />\n      </div>\n    </Container>\n  );\n};\n\ntype ObjectViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const ObjectView: FC<ObjectViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { addNodeButton } = useDictionary(structureViewContent);\n  const { setFocusedContentKeyPath } = useFocusDictionaryActions();\n  const { addEditedContent } = useEditedContentActions();\n\n  if (!section || typeof section !== 'object') {\n    return <div>Not an object</div>;\n  }\n\n  return (\n    <div className=\"flex flex-col gap-2 overflow-y-auto\">\n      <ul className=\"mr-auto flex flex-col gap-4\">\n        {Object.keys(section).map((key) => (\n          <li key={key} className=\"flex w-full\">\n            <NodeView\n              sectionKey={key}\n              section={section?.[key as keyof typeof section]}\n              keyPath={[...keyPath, { type: NodeType.Object, key }]}\n              dictionaryKey={dictionaryKey}\n            />\n          </li>\n        ))}\n      </ul>\n      <Button\n        label={addNodeButton.label.value}\n        variant=\"hoverable\"\n        size=\"md\"\n        color=\"text\"\n        Icon={Plus}\n        className=\"flex-1\"\n        onClick={() => {\n          const newKey = 'newKey';\n          const newKeyPath = [\n            ...keyPath,\n            { type: NodeType.Object, key: newKey },\n          ] as KeyPath[];\n          addEditedContent(dictionaryKey, '', newKeyPath);\n          setFocusedContentKeyPath(newKeyPath);\n        }}\n      >\n        {addNodeButton.text}\n      </Button>\n    </div>\n  );\n};\n\ntype StructureViewProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: ContentNode;\n};\n\nexport const StructureView: FC<StructureViewProps> = ({\n  section,\n  keyPath,\n  dictionaryKey,\n}) => {\n  if (\n    !section ||\n    typeof section !== 'object' ||\n    typeof section.nodeType === 'string'\n  ) {\n    return (\n      <NodeView\n        sectionKey={'content'}\n        section={section}\n        keyPath={keyPath}\n        dictionaryKey={dictionaryKey}\n      />\n    );\n  }\n\n  return (\n    <ObjectView\n      section={section}\n      keyPath={keyPath}\n      dictionaryKey={dictionaryKey}\n    />\n  );\n};\n"],"names":["nodeType"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,eAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAAM;AACJ,QAAM,UAAU,iBAAA,GAAoB,qBAAqB,WAAW,CAAC;AAC/D,QAAA,WAAW,YAAY,OAAO;AAC9B,QAAA,WAAW,gBAAgB,OAAO;AAElC,QAAA,mBAAmB,CAAC,YAA0B;AAClD,UAAM,qBAAqB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,yBAAqB,kBAAkB;AAAA,EACzC;AAGE,MAAA,aAAa,SAAS,eACtB,aAAa,SAAS,aACtB,aAAa,SAAS,aACtB;AACA,UAAM,WAAW,OAAO;AAAA,MACrB,QAAiC,QAAgC;AAAA,MAClE,CAAC;AACH,UAAM,kBAAkB;AAAA,MACtB,GAAG;AAAA,MACH,EAAE,MAAM,UAAU,KAAK,SAAS;AAAA,IAClC;AAGE,WAAA,qBAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe,CAACA,cACd;AAAA,YACE,eAAeA,WAAU,OAAO;AAAA,UAAA;AAAA,QAClC;AAAA,MAEJ;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAAA;AAIA,MAAA,aAAa,SAAS,OAAO;AACzB,UAAA,kBAAkB,CAAC,GAAG,SAAS,EAAE,MAAM,UAAU,KAAK,GAAc;AAExE,WAAA,qBAAC,OAAI,EAAA,WAAU,8BACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe,CAACA,cACd;AAAA,YACE,eAAeA,WAAU,OAAO;AAAA,UAAA;AAAA,QAClC;AAAA,MAEJ;AAAA,MAEA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAAA;AAIA,MAAA,aAAa,SAAS,QAAQ;AAChC,WAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAe,CAACA,cACd;AAAA,YACE,eAAeA,WAAU,OAAO;AAAA,UAAA;AAAA,QAClC;AAAA,MAEJ;AAAA,MACA,oBAAC,OAAI,EAAA,WAAU,cACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA,EAEJ,CAAA;AAAA,IAAA,GACF;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAe,CAACA,cACd,qBAAqB,eAAeA,WAAU,OAAO,CAAgB;AAAA,IAAA;AAAA,EAEzE;AAEJ;AASO,MAAM,WAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,gBAAgB,yBAAyB,IAAI,mBAAmB;AACxE,QAAM,EAAE,qBAAqB,iBAAiB,IAAI,wBAAwB;AAE1E,QAAM,EAAE,YAAY,iBAAiB,cAAc,oBAAoB;AAEjE,QAAA,sBAAsB,CAAC,YAAoB;AAC3B,wBAAA,eAAe,SAAS,OAAO;AACnD,UAAM,cAAyB,QAAQ,MAAM,GAAG,EAAE;AAClD,UAAM,cAAuB,QAAQ,QAAQ,SAAS,CAAC;AACvD,UAAM,aAAwB;AAAA,MAC5B,GAAG;AAAA,MACH,EAAE,GAAG,aAAa,KAAK,QAAQ;AAAA,IACjC;AACA,6BAAyB,UAAU;AAAA,EACrC;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,QAAM;AAAA,MACN,aAAY;AAAA,MACZ,YAAW;AAAA,MACX,iBAAe,cAAc,SAAS,gBAAgB,WAAW,CAAA,CAAE;AAAA,MACnE,SAAS,MAAM,yBAAyB,OAAO;AAAA,MAE/C,UAAA,qBAAC,OAAI,EAAA,WAAU,0DACZ,UAAA;AAAA,QAAA,OAAO,eAAe,YACpB,qBAAA,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,UAAC,qBAAA,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAW;AAAA,gBACX,aAAa,WAAW,YAAY;AAAA,gBACpC,cAAc;AAAA,gBACd,QAAQ,CAAC,UAAU,oBAAoB,KAAK;AAAA,gBAC5C,SAAQ;AAAA,cAAA;AAAA,YACV;AAAA,YACA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,aAAa,MAAM;AAAA,gBAC1B,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS,MAAM;AACI,mCAAA,eAAe,QAAW,OAAO;AAElD,wBAAM,gBAA2B,QAAQ,MAAM,GAAG,EAAE;AACpD,2CAAyB,aAAa;AAAA,gBAAA;AAAA,cACxC;AAAA,YAAA;AAAA,UACF,GACF;AAAA,UAEA,qBAAC,QAAK,EAAA,WAAU,6BAA4B,UAAA;AAAA,YAAA;AAAA,YACvC,oBAAoB,UAAU;AAAA,YAAE;AAAA,UAAA,EACrC,CAAA;AAAA,QAAA,GACF;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,kBAAkB,CAAC,YAAY;AACZ,+BAAA,eAAe,SAAS,OAAO;AAAA,YAAA;AAAA,UAClD;AAAA,QAAA;AAAA,MACF,EACF,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;AAQO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,cAAA,IAAkB,cAAc,oBAAoB;AACtD,QAAA,EAAE,yBAAyB,IAAI,0BAA0B;AACzD,QAAA,EAAE,iBAAiB,IAAI,wBAAwB;AAErD,MAAI,CAAC,WAAW,OAAO,YAAY,UAAU;AACpC,WAAA,oBAAC,SAAI,UAAa,gBAAA,CAAA;AAAA,EAAA;AAIzB,SAAA,qBAAC,OAAI,EAAA,WAAU,uCACb,UAAA;AAAA,IAAA,oBAAC,MAAG,EAAA,WAAU,+BACX,UAAA,OAAO,KAAK,OAAO,EAAE,IAAI,CAAC,QACxB,oBAAA,MAAA,EAAa,WAAU,eACtB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ,SAAS,UAAU,GAA2B;AAAA,QAC9C,SAAS,CAAC,GAAG,SAAS,EAAE,MAAM,SAAS,QAAQ,KAAK;AAAA,QACpD;AAAA,MAAA;AAAA,IAAA,KALK,GAOT,CACD,GACH;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,cAAc,MAAM;AAAA,QAC3B,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,MAAM;AAAA,QACN,WAAU;AAAA,QACV,SAAS,MAAM;AACb,gBAAM,SAAS;AACf,gBAAM,aAAa;AAAA,YACjB,GAAG;AAAA,YACH,EAAE,MAAM,SAAS,QAAQ,KAAK,OAAO;AAAA,UACvC;AACiB,2BAAA,eAAe,IAAI,UAAU;AAC9C,mCAAyB,UAAU;AAAA,QACrC;AAAA,QAEC,UAAc,cAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB,GACF;AAEJ;AAQO,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEF,MAAA,CAAC,WACD,OAAO,YAAY,YACnB,OAAO,QAAQ,aAAa,UAC5B;AAEE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAKF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/DropDown/index.cjs

@@ -1,15 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const hooks_useDevice = require("../../hooks/useDevice.cjs");
-require("react");
-require("../../hooks/useScrollBlockage/useScrollBlockageStore.cjs");
-require("../../hooks/useAsync/useAsyncStateStore.cjs");
-require("@intlayer/editor-react");
-require("@intlayer/api");
-require("@intlayer/config/built");
-require("../Toaster/Toast.cjs");
-require("deepmerge");
 const utils_cn = require("../../utils/cn.cjs");
 const components_MaxHeightSmoother_index = require("../MaxHeightSmoother/index.cjs");
 const DropDown = ({
@@ -39,10 +30,7 @@ const Trigger = ({
     className: utils_cn.cn("w-full cursor-pointer", className),
     "aria-label": `Open panel ${identifier}`,
     onClick: (e) => {
-      const isIOS = hooks_useDevice.checkIsIphoneOrSafariDevice();
-      if (isIOS) {
-        e.currentTarget.focus({ preventScroll: true });
-      }
+      e.currentTarget.focus();
     },
     onBlur: (e) => e.currentTarget.blur(),
     ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { checkIsIphoneOrSafariDevice } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    onClick={(e) => {\n      const isIOS = checkIsIphoneOrSafariDevice();\n      if (isIOS) {\n        (e.currentTarget as HTMLButtonElement).focus({ preventScroll: true });\n      }\n    }}\n    onBlur={(e) => (e.currentTarget as HTMLButtonElement).blur()}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx","cn","checkIsIphoneOrSafariDevice","MaxHeightSmoother"],"mappings":";;;;;;;;;;;;;;AAgCO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAG,GAAA,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACpC,SAAS,CAAC,MAAM;AACd,YAAM,QAAQC,gBAAAA,4BAA4B;AAC1C,UAAI,OAAO;AACR,UAAE,cAAoC,MAAM,EAAE,eAAe,MAAM;AAAA,MAAA;AAAA,IAExE;AAAA,IACA,QAAQ,CAAC,MAAO,EAAE,cAAoC,KAAK;AAAA,IAC1D,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEF,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAD,2BAAA;AAAA,MAACG,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWF,SAAA;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    onBlur={(e) => (e.currentTarget as HTMLButtonElement).blur()}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx","cn","MaxHeightSmoother"],"mappings":";;;;;AA+BO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAG,GAAA,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACpC,SAAS,CAAC,MAAM;AAEb,QAAE,cAAoC,MAAM;AAAA,IAC/C;AAAA,IACA,QAAQ,CAAC,MAAO,EAAE,cAAoC,KAAK;AAAA,IAC1D,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACED,2BAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAA;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAD,2BAAA;AAAA,MAACE,mCAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWD,SAAA;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropDown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKhD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG;IAC7C,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1B,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,EAAE,YAetB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAoCF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropDown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC3D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,GAAG;IAC7C,OAAO,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC;IAC1B,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ,EAAE,YAetB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAkCF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACzB,CAAC"}

package/dist/components/DropDown/index.mjs

@@ -1,13 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { checkIsIphoneOrSafariDevice } from "../../hooks/useDevice.mjs";
-import "react";
-import "../../hooks/useScrollBlockage/useScrollBlockageStore.mjs";
-import "../../hooks/useAsync/useAsyncStateStore.mjs";
-import "@intlayer/editor-react";
-import "@intlayer/api";
-import "@intlayer/config/built";
-import "../Toaster/Toast.mjs";
-import "deepmerge";
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 const DropDown = ({
@@ -37,10 +28,7 @@ const Trigger = ({
     className: cn("w-full cursor-pointer", className),
     "aria-label": `Open panel ${identifier}`,
     onClick: (e) => {
-      const isIOS = checkIsIphoneOrSafariDevice();
-      if (isIOS) {
-        e.currentTarget.focus({ preventScroll: true });
-      }
+      e.currentTarget.focus();
     },
     onBlur: (e) => e.currentTarget.blur(),
     ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { checkIsIphoneOrSafariDevice } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    onClick={(e) => {\n      const isIOS = checkIsIphoneOrSafariDevice();\n      if (isIOS) {\n        (e.currentTarget as HTMLButtonElement).focus({ preventScroll: true });\n      }\n    }}\n    onBlur={(e) => (e.currentTarget as HTMLButtonElement).blur()}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":[],"mappings":";;;;;;;;;;;;AAgCO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACpC,SAAS,CAAC,MAAM;AACd,YAAM,QAAQ,4BAA4B;AAC1C,UAAI,OAAO;AACR,UAAE,cAAoC,MAAM,EAAE,eAAe,MAAM;AAAA,MAAA;AAAA,IAExE;AAAA,IACA,QAAQ,CAAC,MAAO,EAAE,cAAoC,KAAK;AAAA,IAC1D,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    onBlur={(e) => (e.currentTarget as HTMLButtonElement).blur()}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":[],"mappings":";;;AA+BO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACpC,SAAS,CAAC,MAAM;AAEb,QAAE,cAAoC,MAAM;AAAA,IAC/C;AAAA,IACA,QAAQ,CAAC,MAAO,EAAE,cAAoC,KAAK;AAAA,IAC1D,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}

package/dist/components/Form/FormBase.cjs

@@ -2,7 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const zod = require("../../zod-DpajDxlG.cjs");
+const zod = require("../../zod-K7y5gPX4.cjs");
 const reactHookForm = require("react-hook-form");
 const utils_cn = require("../../utils/cn.cjs");
 const awaitFunction = async (fn) => {
@@ -52,7 +52,7 @@ const Form = ({
 };
 const useForm = (schema, props) => {
   const form = reactHookForm.useForm({
-    resolver: zod.s(schema),
+    resolver: zod.a(schema),
     ...props
   });
   const isSubmitting = form.formState.isSubmitting;

package/dist/components/Form/FormBase.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { s } from "../../zod-DIGMabE8.js";
+import { a } from "../../zod-D4WapgbL.js";
 import { useForm as useForm$1, FormProvider } from "react-hook-form";
 import { cn } from "../../utils/cn.mjs";
 const awaitFunction = async (fn) => {
@@ -50,7 +50,7 @@ const Form = ({
 };
 const useForm = (schema, props) => {
   const form = useForm$1({
-    resolver: s(schema),
+    resolver: a(schema),
     ...props
   });
   const isSubmitting = form.formState.isSubmitting;

package/dist/components/Form/elements/FormElementWrapper.cjs

@@ -2,16 +2,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const zod = require("../../../zod-DpajDxlG.cjs");
+const zod = require("../../../zod-K7y5gPX4.cjs");
 const reactHookForm = require("react-hook-form");
-const schemas = require("../../../schemas-DJhUvjsx.cjs");
+const schemas = require("../../../schemas-DlCjM5d_.cjs");
 const Schema = schemas.object({
   test: schemas.string().min(3, "test error")
 });
 const FormElementWrapper = (props) => {
   const objectFormSchema = props.schema ?? Schema;
   const form = reactHookForm.useForm({
-    resolver: zod.s(objectFormSchema),
+    resolver: zod.a(objectFormSchema),
     values: props.values
   });
   const { children, onSubmit, ...rest } = props;

package/dist/components/Form/elements/FormElementWrapper.mjs

@@ -1,15 +1,15 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { s } from "../../../zod-DIGMabE8.js";
+import { a } from "../../../zod-D4WapgbL.js";
 import { useForm, FormProvider } from "react-hook-form";
-import { o as object, s as string } from "../../../schemas-7jC6hy_u.js";
+import { o as object, s as string } from "../../../schemas-itjzX6bG.js";
 const Schema = object({
   test: string().min(3, "test error")
 });
 const FormElementWrapper = (props) => {
   const objectFormSchema = props.schema ?? Schema;
   const form = useForm({
-    resolver: s(objectFormSchema),
+    resolver: a(objectFormSchema),
     values: props.values
   });
   const { children, onSubmit, ...rest } = props;

package/dist/components/IDE/FileList.cjs

@@ -6,7 +6,7 @@ const components_IDE_FileTree = require("./FileTree.cjs");
 const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
   components_Container_index.Container,
   {
-    className: "flex size-full flex-col justify-start overflow-scroll shadow-lg",
+    className: "flex size-full flex-col justify-start overflow-auto shadow-lg",
     roundedSize: "3xl",
     transparency: "none",
     ...props,

package/dist/components/IDE/FileList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.cjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":["jsxs","Container","jsx","FileTree"],"mappings":";;;;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAAA,2BAAA;AAAA,EAACC,2BAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,SAAI,WAAU,+HACb,UAACF,2BAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAACE,2BAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,qCACC,OAAI,EAAA,WAAU,mEACb,UAACA,2BAAA,IAAA,OAAA,EAAI,WAAU,mCACb,UAAAA,2BAAAA,IAAC,OAAI,EAAA,WAAU,kBACb,UAACA,2BAAAA,IAAAC,wBAAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"FileList.cjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":["jsxs","Container","jsx","FileTree"],"mappings":";;;;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAAA,2BAAA;AAAA,EAACC,2BAAA;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAC,2BAAAA,IAAC,SAAI,WAAU,+HACb,UAACF,2BAAA,KAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAACE,2BAAAA,IAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnDA,2BAAAA,IAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,qCACC,OAAI,EAAA,WAAU,mEACb,UAACA,2BAAA,IAAA,OAAA,EAAI,WAAU,mCACb,UAAAA,2BAAAA,IAAC,OAAI,EAAA,WAAU,kBACb,UAACA,2BAAAA,IAAAC,wBAAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;;"}

package/dist/components/IDE/FileList.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, FC } from 'react';
+import { FC, HTMLAttributes } from 'react';
 export type FileListProps = {
     filePaths: string[];
 } & HTMLAttributes<HTMLDivElement>;

package/dist/components/IDE/FileList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/FileList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsBtC,CAAC"}
+{"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/FileList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsBtC,CAAC"}

package/dist/components/IDE/FileList.mjs

@@ -4,7 +4,7 @@ import { FileTree } from "./FileTree.mjs";
 const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxs(
   Container,
   {
-    className: "flex size-full flex-col justify-start overflow-scroll shadow-lg",
+    className: "flex size-full flex-col justify-start overflow-auto shadow-lg",
     roundedSize: "3xl",
     transparency: "none",
     ...props,

package/dist/components/IDE/FileList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { HTMLAttributes, FC } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-scroll shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":[],"mappings":";;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,+HACb,UAAC,qBAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChD,oBAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnD,oBAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,0BACC,OAAI,EAAA,WAAU,mEACb,UAAC,oBAAA,OAAA,EAAI,WAAU,mCACb,UAAA,oBAAC,OAAI,EAAA,WAAU,kBACb,UAAC,oBAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;"}
+{"version":3,"file":"FileList.mjs","sources":["../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"text-neutral flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute left-0 top-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"names":[],"mappings":";;;AAQO,MAAM,WAA8B,CAAC,EAAE,WAAW,GAAG,MAC1D,MAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,aAAY;AAAA,IACZ,cAAa;AAAA,IACZ,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,+HACb,UAAC,qBAAA,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAU,iCAAiC,CAAA;AAAA,QAChD,oBAAC,OAAI,EAAA,WAAU,oCAAoC,CAAA;AAAA,QACnD,oBAAC,OAAI,EAAA,WAAU,mCAAmC,CAAA;AAAA,MAAA,EAAA,CACpD,EACF,CAAA;AAAA,0BACC,OAAI,EAAA,WAAU,mEACb,UAAC,oBAAA,OAAA,EAAI,WAAU,mCACb,UAAA,oBAAC,OAAI,EAAA,WAAU,kBACb,UAAC,oBAAA,UAAA,EAAS,YAAY,UAAW,CAAA,EACnC,CAAA,EACF,CAAA,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AACF;"}

package/dist/components/KeyboardScreenAdapter/index.cjs

@@ -10,7 +10,7 @@ const KeyboardScreenAdapter = ({ children, className, ...props }) => {
     "div",
     {
       className: utils_cn.cn(
-        "h-screen w-screen overflow-scroll scroll-smooth transition",
+        "h-screen w-screen overflow-auto scroll-smooth transition",
         className
       ),
       style: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-scroll scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["useKeyboardDetector","jsx","cn"],"mappings":";;;;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAIA,8CAAoB;AAG3C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["useKeyboardDetector","jsx","cn"],"mappings":";;;;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAIA,8CAAoB;AAG3C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}

package/dist/components/KeyboardScreenAdapter/index.mjs

@@ -8,7 +8,7 @@ const KeyboardScreenAdapter = ({ children, className, ...props }) => {
     "div",
     {
       className: cn(
-        "h-screen w-screen overflow-scroll scroll-smooth transition",
+        "h-screen w-screen overflow-auto scroll-smooth transition",
         className
       ),
       style: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-scroll scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAI,oBAAoB;AAG3C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\nexport const KeyboardScreenAdapter: FC<\n  PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n  const { windowHeight } = useKeyboardDetector();\n\n  return (\n    <div\n      className={cn(\n        'h-screen w-screen overflow-auto scroll-smooth transition',\n        className\n      )}\n      style={{\n        maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAMO,MAAM,wBAET,CAAC,EAAE,UAAU,WAAW,GAAG,YAAY;AACnC,QAAA,EAAE,aAAa,IAAI,oBAAoB;AAG3C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,WAAW,eAAe,GAAG,YAAY,OAAO;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/MarkDownRender/index.cjs

@@ -77,7 +77,7 @@ const MarkdownRenderer = ({
             }
           ),
           pre: (props) => props.children,
-          table: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full max-w-full overflow-scroll rounded", children: /* @__PURE__ */ jsxRuntime.jsx(
+          table: ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full max-w-full overflow-auto rounded", children: /* @__PURE__ */ jsxRuntime.jsx(
             "table",
             {
               className: utils_cn.cn(

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n  options?: MarkdownToJSX.Options;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n  return (\n    <CodeProvider>\n      <Markdown\n        options={{\n          overrides: {\n            h1: (props) => <H1 isClickable={true} {...props} />,\n            h2: (props) => <H2 isClickable={true} {...props} />,\n            h3: (props) => <H3 isClickable={true} {...props} />,\n            h4: (props) => <H4 isClickable={true} {...props} />,\n\n            code: (props) =>\n              typeof props.className === 'undefined' ? (\n                <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                  {props.children}\n                </strong>\n              ) : (\n                <Code\n                  isDarkMode={isDarkMode}\n                  language={props.className?.replace('lang-', '')}\n                  {...props}\n                />\n              ),\n\n            blockquote: ({ className, ...props }) => (\n              <blockquote\n                className={cn(\n                  'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            ul: ({ className, ...props }) => (\n              <ul\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            ol: ({ className, ...props }) => (\n              <ol\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            li: ({ className, ...props }) => (\n              <li className={cn('list-disc', className)} {...props} />\n            ),\n            img: ({ className, ...props }) => (\n              <img\n                {...props}\n                loading=\"lazy\"\n                className={cn('max-w-full rounded-md', className)}\n                src={`${props.src}?raw=true`}\n              />\n            ),\n            a: (props) => (\n              <Link\n                color=\"neutral\"\n                isExternalLink={props.href?.startsWith('http')}\n                underlined={true}\n                locale={locale}\n                {...props}\n              />\n            ),\n            pre: (props) => props.children,\n            table: ({ className, ...props }) => (\n              <div className=\"grid w-full max-w-full overflow-scroll rounded\">\n                <table\n                  className={cn(\n                    'max-w-full table-auto overflow-hidden text-left',\n                    className\n                  )}\n                  {...props}\n                />\n              </div>\n            ),\n            th: ({ className, ...props }) => (\n              <th\n                className={cn(\n                  'border-neutral bg-neutral/10 border-b p-4',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            tr: ({ className, ...props }) => (\n              <tr\n                className={cn('hover:bg-neutral/10 hover:/10', className)}\n                {...props}\n              />\n            ),\n            td: ({ className, ...props }) => (\n              <td\n                className={cn('border-b border-neutral-500/50 p-4', className)}\n                {...props}\n              />\n            ),\n            ...overrides,\n          },\n          wrapper: ({ className, ...props }) => (\n            <>\n              <SectionScroller />\n              <div\n                className={cn('flex flex-col gap-8 p-10', className)}\n                {...props}\n              />\n            </>\n          ),\n          ...restOptions,\n        }}\n      >\n        {children ?? ''}\n      </Markdown>\n    </CodeProvider>\n  );\n};\n"],"names":["CodeProvider","jsx","H1","H2","H3","H4","Code","cn","Link","jsxs","Fragment","SectionScroller"],"mappings":";;;;;;;;;;AAiBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,WAAW,GAAG,YAAY,IAAI,WAAW,CAAC;AAClD,wCACGA,2BAAAA,cACC,EAAA,UAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP,WAAW;AAAA,UACT,IAAI,CAAC,UAAUA,+BAACC,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,UACjD,IAAI,CAAC,UAAUD,+BAACE,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,UACjD,IAAI,CAAC,UAAUF,+BAACG,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,UACjD,IAAI,CAAC,UAAUH,+BAACI,yBAAAA,MAAG,aAAa,MAAO,GAAG,OAAO;AAAA,UAEjD,MAAM,CAAC,UACL,OAAO,MAAM,cAAc,cACzBJ,2BAAA,IAAC,UAAO,EAAA,WAAU,gFACf,UAAA,MAAM,SACT,CAAA,IAEAA,2BAAA;AAAA,YAACK,oBAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA,UAAU,MAAM,WAAW,QAAQ,SAAS,EAAE;AAAA,cAC7C,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAGJ,YAAY,CAAC,EAAE,WAAW,GAAG,MAC3B,MAAAL,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAA;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAAA,GAAG,iCAAiC,SAAS;AAAA,cACvD,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAAA,GAAG,iCAAiC,SAAS;AAAA,cACvD,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,MACxBN,2BAAAA,IAAA,MAAA,EAAG,WAAWM,SAAG,GAAA,aAAa,SAAS,GAAI,GAAG,MAAO,CAAA;AAAA,UAExD,KAAK,CAAC,EAAE,WAAW,GAAG,MACpB,MAAAN,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ,SAAQ;AAAA,cACR,WAAWM,SAAAA,GAAG,yBAAyB,SAAS;AAAA,cAChD,KAAK,GAAG,MAAM,GAAG;AAAA,YAAA;AAAA,UACnB;AAAA,UAEF,GAAG,CAAC,UACFN,2BAAA;AAAA,YAACO,qBAAA;AAAA,YAAA;AAAA,cACC,OAAM;AAAA,cACN,gBAAgB,MAAM,MAAM,WAAW,MAAM;AAAA,cAC7C,YAAY;AAAA,cACZ;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,KAAK,CAAC,UAAU,MAAM;AAAA,UACtB,OAAO,CAAC,EAAE,WAAW,GAAG,MACtB,MAAAP,+BAAC,OAAI,EAAA,WAAU,kDACb,UAAAA,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAA;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UAAA,GAER;AAAA,UAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAA;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAAA,GAAG,iCAAiC,SAAS;AAAA,cACvD,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,IAAI,CAAC,EAAE,WAAW,GAAG,MACnB,MAAAN,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAAA,GAAG,sCAAsC,SAAS;AAAA,cAC5D,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UAEF,GAAG;AAAA,QACL;AAAA,QACA,SAAS,CAAC,EAAE,WAAW,GAAG,YAEtBE,gCAAAC,WAAAA,UAAA,EAAA,UAAA;AAAA,UAAAT,2BAAA,IAACU,mCAAgB,iBAAA,EAAA;AAAA,UACjBV,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWM,SAAAA,GAAG,4BAA4B,SAAS;AAAA,cAClD,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,QACN,GACF;AAAA,QAEF,GAAG;AAAA,MACL;AAAA,MAEC,UAAY,YAAA;AAAA,IAAA;AAAA,EAAA,GAEjB;AAEJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n  options?: MarkdownToJSX.Options;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n  return (\n    <CodeProvider>\n      <Markdown\n        options={{\n          overrides: {\n            h1: (props) => <H1 isClickable={true} {...props} />,\n            h2: (props) => <H2 isClickable={true} {...props} />,\n            h3: (props) => <H3 isClickable={true} {...props} />,\n            h4: (props) => <H4 isClickable={true} {...props} />,\n\n            code: (props) =>\n              typeof props.className === 'undefined' ? (\n                <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                  {props.children}\n                </strong>\n              ) : (\n                <Code\n                  isDarkMode={isDarkMode}\n                  language={props.className?.replace('lang-', '')}\n                  {...props}\n                />\n              ),\n\n            blockquote: ({ className, ...props }) => (\n              <blockquote\n                className={cn(\n                  'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            ul: ({ className, ...props }) => (\n              <ul\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            ol: ({ className, ...props }) => (\n              <ol\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            li: ({ className, ...props }) => (\n              <li className={cn('list-disc', className)} {...props} />\n            ),\n            img: ({ className, ...props }) => (\n              <img\n                {...props}\n                loading=\"lazy\"\n                className={cn('max-w-full rounded-md', className)}\n                src={`${props.src}?raw=true`}\n              />\n            ),\n            a: (props) => (\n              <Link\n                color=\"neutral\"\n                isExternalLink={props.href?.startsWith('http')}\n                underlined={true}\n                locale={locale}\n                {...props}\n              />\n            ),\n            pre: (props) => props.children,\n            table: ({ className, ...props }) => (\n              <div className=\"grid w-full max-w-full overflow-auto rounded\">\n                <table\n                  className={cn(\n                    'max-w-full table-auto overflow-hidden text-left',\n                    className\n                  )}\n                  {...props}\n                />\n              </div>\n            ),\n            th: ({ className, ...props }) => (\n              <th\n                className={cn(\n                  'border-neutral bg-neutral/10 border-b p-4',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            tr: ({ className, ...props }) => (\n              <tr\n                className={cn('hover:bg-neutral/10 hover:/10', className)}\n                {...props}\n              />\n            ),\n            td: ({ className, ...props }) => (\n              <td\n                className={cn('border-b border-neutral-500/50 p-4', className)}\n                {...props}\n              />\n            ),\n            ...overrides,\n          },\n          wrapper: ({ className, ...props }) => (\n            <>\n              <SectionScroller />\n              <div\n                className={cn('flex flex-col gap-8 p-10', className)}\n                {...props}\n              />\n            </>\n          ),\n          ...restOptions,\n        }}\n      >\n        {children ?? ''}\n      </Markdown>\n    </CodeProvider>\n  );\n};\n"],"names":["CodeProvider","jsx","H1","H2","H3","H4","Code","cn","Link","jsxs","Fragment","SectionScroller"],"mappings":"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"}

package/dist/components/MarkDownRender/index.mjs

@@ -75,7 +75,7 @@ const MarkdownRenderer = ({
             }
           ),
           pre: (props) => props.children,
-          table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-full overflow-scroll rounded", children: /* @__PURE__ */ jsx(
+          table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: "grid w-full max-w-full overflow-auto rounded", children: /* @__PURE__ */ jsx(
             "table",
             {
               className: cn(

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n  options?: MarkdownToJSX.Options;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n  return (\n    <CodeProvider>\n      <Markdown\n        options={{\n          overrides: {\n            h1: (props) => <H1 isClickable={true} {...props} />,\n            h2: (props) => <H2 isClickable={true} {...props} />,\n            h3: (props) => <H3 isClickable={true} {...props} />,\n            h4: (props) => <H4 isClickable={true} {...props} />,\n\n            code: (props) =>\n              typeof props.className === 'undefined' ? (\n                <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                  {props.children}\n                </strong>\n              ) : (\n                <Code\n                  isDarkMode={isDarkMode}\n                  language={props.className?.replace('lang-', '')}\n                  {...props}\n                />\n              ),\n\n            blockquote: ({ className, ...props }) => (\n              <blockquote\n                className={cn(\n                  'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            ul: ({ className, ...props }) => (\n              <ul\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            ol: ({ className, ...props }) => (\n              <ol\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            li: ({ className, ...props }) => (\n              <li className={cn('list-disc', className)} {...props} />\n            ),\n            img: ({ className, ...props }) => (\n              <img\n                {...props}\n                loading=\"lazy\"\n                className={cn('max-w-full rounded-md', className)}\n                src={`${props.src}?raw=true`}\n              />\n            ),\n            a: (props) => (\n              <Link\n                color=\"neutral\"\n                isExternalLink={props.href?.startsWith('http')}\n                underlined={true}\n                locale={locale}\n                {...props}\n              />\n            ),\n            pre: (props) => props.children,\n            table: ({ className, ...props }) => (\n              <div className=\"grid w-full max-w-full overflow-scroll rounded\">\n                <table\n                  className={cn(\n                    'max-w-full table-auto overflow-hidden text-left',\n                    className\n                  )}\n                  {...props}\n                />\n              </div>\n            ),\n            th: ({ className, ...props }) => (\n              <th\n                className={cn(\n                  'border-neutral bg-neutral/10 border-b p-4',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            tr: ({ className, ...props }) => (\n              <tr\n                className={cn('hover:bg-neutral/10 hover:/10', className)}\n                {...props}\n              />\n            ),\n            td: ({ className, ...props }) => (\n              <td\n                className={cn('border-b border-neutral-500/50 p-4', className)}\n                {...props}\n              />\n            ),\n            ...overrides,\n          },\n          wrapper: ({ className, ...props }) => (\n            <>\n              <SectionScroller />\n              <div\n                className={cn('flex flex-col gap-8 p-10', className)}\n                {...props}\n              />\n            </>\n          ),\n          ...restOptions,\n        }}\n      >\n        {children ?? ''}\n      </Markdown>\n    </CodeProvider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/MarkDownRender/index.tsx"],"sourcesContent":["import type { Locales } from '@intlayer/config';\nimport Markdown, { type MarkdownToJSX } from 'markdown-to-jsx';\nimport type { FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4 } from '../Headers';\nimport { SectionScroller } from '../Headers/SectionScroller';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: Locales;\n  options?: MarkdownToJSX.Options;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n  return (\n    <CodeProvider>\n      <Markdown\n        options={{\n          overrides: {\n            h1: (props) => <H1 isClickable={true} {...props} />,\n            h2: (props) => <H2 isClickable={true} {...props} />,\n            h3: (props) => <H3 isClickable={true} {...props} />,\n            h4: (props) => <H4 isClickable={true} {...props} />,\n\n            code: (props) =>\n              typeof props.className === 'undefined' ? (\n                <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                  {props.children}\n                </strong>\n              ) : (\n                <Code\n                  isDarkMode={isDarkMode}\n                  language={props.className?.replace('lang-', '')}\n                  {...props}\n                />\n              ),\n\n            blockquote: ({ className, ...props }) => (\n              <blockquote\n                className={cn(\n                  'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            ul: ({ className, ...props }) => (\n              <ul\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            ol: ({ className, ...props }) => (\n              <ol\n                className={cn('mt-5 flex flex-col gap-3 pl-5', className)}\n                {...props}\n              />\n            ),\n            li: ({ className, ...props }) => (\n              <li className={cn('list-disc', className)} {...props} />\n            ),\n            img: ({ className, ...props }) => (\n              <img\n                {...props}\n                loading=\"lazy\"\n                className={cn('max-w-full rounded-md', className)}\n                src={`${props.src}?raw=true`}\n              />\n            ),\n            a: (props) => (\n              <Link\n                color=\"neutral\"\n                isExternalLink={props.href?.startsWith('http')}\n                underlined={true}\n                locale={locale}\n                {...props}\n              />\n            ),\n            pre: (props) => props.children,\n            table: ({ className, ...props }) => (\n              <div className=\"grid w-full max-w-full overflow-auto rounded\">\n                <table\n                  className={cn(\n                    'max-w-full table-auto overflow-hidden text-left',\n                    className\n                  )}\n                  {...props}\n                />\n              </div>\n            ),\n            th: ({ className, ...props }) => (\n              <th\n                className={cn(\n                  'border-neutral bg-neutral/10 border-b p-4',\n                  className\n                )}\n                {...props}\n              />\n            ),\n            tr: ({ className, ...props }) => (\n              <tr\n                className={cn('hover:bg-neutral/10 hover:/10', className)}\n                {...props}\n              />\n            ),\n            td: ({ className, ...props }) => (\n              <td\n                className={cn('border-b border-neutral-500/50 p-4', className)}\n                {...props}\n              />\n            ),\n            ...overrides,\n          },\n          wrapper: ({ className, ...props }) => (\n            <>\n              <SectionScroller />\n              <div\n                className={cn('flex flex-col gap-8 p-10', className)}\n                {...props}\n              />\n            </>\n          ),\n          ...restOptions,\n        }}\n      >\n        {children ?? ''}\n      </Markdown>\n    </CodeProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TextArea/AutoSizeTextArea.cjs

@@ -46,7 +46,7 @@ const AutoSizedTextArea = ({
       ref: setRef,
       onChange: handleChange,
       className: utils_cn.cn(
-        "overflow-y-scroll",
+        "overflow-y-auto",
         autoSize ? "resize-none" : "",
         className
       ),

package/dist/components/TextArea/AutoSizeTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-scroll',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":["useRef","useImperativeHandle","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;;AAiBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAcA,oBAAmC,IAAI;AAEvCC,eAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEAC,eAAAA,UAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEM,QAAA,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACO,mBAAA;AAAA,IAAA;AAAA,EAEjB;AAGE,SAAAC,2BAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}
+{"version":3,"file":"AutoSizeTextArea.cjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":["useRef","useImperativeHandle","useEffect","jsx","TextArea","cn"],"mappings":";;;;;;;AAiBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAcA,oBAAmC,IAAI;AAEvCC,eAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEAC,eAAAA,UAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEM,QAAA,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACO,mBAAA;AAAA,IAAA;AAAA,EAEjB;AAGE,SAAAC,2BAAA;AAAA,IAACC,6BAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWC,SAAA;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;;"}

package/dist/components/TextArea/AutoSizeTextArea.mjs

@@ -44,7 +44,7 @@ const AutoSizedTextArea = ({
       ref: setRef,
       onChange: handleChange,
       className: cn(
-        "overflow-y-scroll",
+        "overflow-y-auto",
         autoSize ? "resize-none" : "",
         className
       ),

package/dist/components/TextArea/AutoSizeTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-scroll',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAc,OAAmC,IAAI;AAEvC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEA,YAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEM,QAAA,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACO,mBAAA;AAAA,IAAA;AAAA,EAEjB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"AutoSizeTextArea.mjs","sources":["../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextAreaProps, TextArea } from './TextArea';\n\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  autoSize?: boolean;\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height =\n      Math.max(Math.min(scrollHeight, maxHeight), minHeight) + 'px';\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAiBA,MAAM,cAAc;AACpB,MAAM,eAAe;AAEd,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAc,OAAmC,IAAI;AAEvC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,eAAe,MAAM;AACzB,UAAM,aAAa,YAAY;AAE3B,QAAA,CAAC,cAAc,CAAC,SAAU;AAE9B,UAAM,gBAAgB,WAAW;AAGjC,kBAAc,SAAS;AACvB,UAAM,eAAe,WAAW;AAC1B,UAAA,YAAY,cAAc,UAAU;AAC1C,UAAM,YAAY,cAAc;AAGlB,kBAAA,SACZ,KAAK,IAAI,KAAK,IAAI,cAAc,SAAS,GAAG,SAAS,IAAI;AAAA,EAC7D;AAEA,YAAU,MAAM;AACD,iBAAA;AAAA,EAAA,GACZ,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,CAAC;AAE5C,QAAA,eAAwD,CAAC,MAAM;AACnE,eAAW,CAAC;AACC,iBAAA;AAAA,EACf;AAEM,QAAA,SAAS,CAAC,OAAmC;AACjD,gBAAY,UAAU;AACtB,QAAI,IAAI;AACO,mBAAA;AAAA,IAAA;AAAA,EAEjB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;"}