@sparrowengg/twigs-editor-react 0.0.1 → 0.0.3

package/dist/cjs/_virtual/isURL.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _commonjsHelpers = require('./_commonjsHelpers.js');
-var isURL$1 = require('../react-editor/node_modules/validator/lib/isURL.js');
+var isURL$1 = require('../node_modules/validator/lib/isURL.js');
 
 var isURLExports = /*@__PURE__*/ isURL$1.__require();
 var isURL = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(isURLExports);

package/dist/cjs/components/base-dropdown/index.js

@@ -3,11 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var LexicalTypeaheadMenuPlugin = require('@lexical/react/LexicalTypeaheadMenuPlugin');
-var React = require('react');
-var ReactDOM__default = require('react-dom');
-var stitches_config = require('../../react-components/dist/es/stitches.config.js');
-var button = require('../../react-components/dist/es/button/button.js');
-var box = require('../../react-components/dist/es/box/box.js');
+var twigsReact = require('@sparrowengg/twigs-react');
+var react = require('react');
+var reactDom = require('react-dom');
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -28,7 +26,7 @@ const TypeaheadMenuItem = ({
   renderMenuItemContent
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    button.Button,
+    twigsReact.Button,
     {
       ref: option.setRefElement,
       role: "option",
@@ -46,12 +44,12 @@ const TypeaheadMenuItem = ({
         index,
         isSelected,
         option
-      }) : /* @__PURE__ */ jsxRuntime.jsx(box.Box, { as: "span", className: "text", children: option.data.label })
+      }) : /* @__PURE__ */ jsxRuntime.jsx(twigsReact.Box, { as: "span", className: "text", children: option.data.label })
     },
     option.key
   );
 };
-const StyledUl = stitches_config.styled("ul", {
+const StyledUl = twigsReact.styled("ul", {
   width: "260px",
   padding: "$4",
   borderRadius: "$md",
@@ -70,7 +68,7 @@ const defaultMenuRender = ({
   css
 }) => {
   if (anchorElementRef.current && menuOptions.length) {
-    return ReactDOM__default.createPortal(
+    return reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typeahead-popover dropdown-menu", children: /* @__PURE__ */ jsxRuntime.jsx(StyledUl, { css, children: menuOptions.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
         TypeaheadMenuItem,
         {
@@ -104,19 +102,19 @@ const EditorLookupDropdownBase = ({
   css
 }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [queryString, setQueryString] = React.useState(null);
-  const [results, setResults] = React.useState([]);
-  React.useEffect(() => {
+  const [queryString, setQueryString] = react.useState(null);
+  const [results, setResults] = react.useState([]);
+  react.useEffect(() => {
     (async () => {
       const res = await getResults(queryString);
       setResults(res || []);
     })();
   }, [queryString, getResults]);
-  const menuOptions = React.useMemo(
+  const menuOptions = react.useMemo(
     () => results.map((result) => new TypeaheadOption(result)).slice(0, suggestionsListLength),
     [results, suggestionsListLength]
   );
-  const onSelectOption = React.useCallback(
+  const onSelectOption = react.useCallback(
     (selectedOption, nodeToReplace, closeMenu) => {
       editor.update(() => {
         if (onMenuItemSelect) {
@@ -136,7 +134,7 @@ const EditorLookupDropdownBase = ({
     },
     [editor, $createNode]
   );
-  const menuRenderFn = React.useCallback(
+  const menuRenderFn = react.useCallback(
     (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
       if (renderMenu) {
         return renderMenu({

package/dist/cjs/components/base-dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/base-dropdown/index.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n  LexicalTypeaheadMenuPlugin,\n  MenuOption,\n  MenuTextMatch\n} from '@lexical/react/LexicalTypeaheadMenuPlugin';\nimport {\n  Box, Button, config, styled\n} from '@sparrowengg/twigs-react';\nimport { CSS } from '@stitches/react';\nimport { LexicalEditor, TextNode } from 'lexical';\nimport React, {\n  ReactNode,\n  ReactPortal,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type TypeaheadMenuData = {\n  value: string;\n  label: string;\n  [x: string]: unknown;\n};\n\ntype RenderMenuItemContentProps = {\n  index: number;\n  isSelected: boolean;\n  option: TypeaheadOption;\n};\n\nclass TypeaheadOption extends MenuOption {\n  data: TypeaheadMenuData;\n\n  constructor(data: TypeaheadMenuData) {\n    super(data.value);\n    this.data = data;\n  }\n}\n\nconst TypeaheadMenuItem = ({\n  index,\n  isSelected,\n  onClick,\n  onMouseEnter,\n  option,\n  renderMenuItemContent\n}: {\n  index: number;\n  isSelected: boolean;\n  onClick: () => void;\n  onMouseEnter: () => void;\n  option: TypeaheadOption;\n  renderMenuItemContent?: (props: RenderMenuItemContentProps) => ReactNode;\n}) => {\n  return (\n    <Button\n      key={option.key}\n      ref={option.setRefElement}\n      role=\"option\"\n      color={isSelected ? 'default' : 'bright'}\n      aria-selected={isSelected}\n      id={`typeahead-item-${index}`}\n      onMouseEnter={onMouseEnter}\n      onClick={onClick}\n      size=\"md\"\n      css={{\n        width: '100%',\n        justifyContent: 'flex-start'\n      }}\n    >\n      {renderMenuItemContent ? (\n        renderMenuItemContent({\n          index,\n          isSelected,\n          option\n        })\n      ) : (\n        <Box as=\"span\" className=\"text\">\n          {option.data.label}\n        </Box>\n      )}\n    </Button>\n  );\n};\n\nconst StyledUl = styled('ul', {\n  width: '260px',\n  padding: '$4',\n  borderRadius: '$md',\n  backgroundColor: '$white900',\n  position: 'relative',\n  zIndex: 1000,\n  boxShadow: 'rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px'\n});\n\nexport type EditorLookupDropdownBaseProps = {\n  triggerFunction: (text: string) => MenuTextMatch | null;\n  getResults: (\n    text: string | null\n  ) => Promise<TypeaheadMenuData[]> | TypeaheadMenuData[];\n  $createNode?: (data: TypeaheadOption) => TextNode;\n  suggestionsListLength?: number;\n  renderMenu?: (args: {\n    anchorElementRef: React.MutableRefObject<HTMLElement | null>;\n    selectedIndex: number | null;\n    selectOptionAndCleanUp: (option: TypeaheadOption) => void;\n    setHighlightedIndex: (index: number) => void;\n    menuOptions: TypeaheadOption[];\n  }) => ReactPortal | React.JSX.Element | null;\n  renderMenuItemContent?: (props: RenderMenuItemContentProps) => ReactNode;\n  onMenuItemSelect?: (\n    option: TypeaheadOption,\n    closeMenu?: () => void\n  ) => void | boolean;\n  css?: CSS<typeof config>;\n};\n\nconst defaultMenuRender = ({\n  selectOptionAndCleanUp,\n  setHighlightedIndex,\n  renderMenuItemContent,\n  anchorElementRef,\n  menuOptions,\n  selectedIndex,\n  css\n}: {\n  anchorElementRef: React.MutableRefObject<HTMLElement | null>;\n  selectOptionAndCleanUp: (option: TypeaheadOption) => void;\n  setHighlightedIndex: (index: number) => void;\n  selectedIndex: number | null;\n  menuOptions: TypeaheadOption[];\n  editor: LexicalEditor;\n  renderMenuItemContent?: EditorLookupDropdownBaseProps['renderMenuItemContent'];\n  css?: CSS<typeof config>;\n}) => {\n  if (anchorElementRef.current && menuOptions.length) {\n    return createPortal(\n      <div className=\"typeahead-popover dropdown-menu\">\n        <StyledUl css={css}>\n          {menuOptions.map((option, i: number) => (\n            <TypeaheadMenuItem\n              index={i}\n              isSelected={selectedIndex === i}\n              onClick={() => {\n                setHighlightedIndex(i);\n                selectOptionAndCleanUp(option);\n              }}\n              onMouseEnter={() => {\n                setHighlightedIndex(i);\n              }}\n              key={option.key}\n              option={option}\n              renderMenuItemContent={renderMenuItemContent}\n            />\n          ))}\n        </StyledUl>\n      </div>,\n      anchorElementRef.current\n    );\n  }\n\n  return null;\n};\n\nexport const EditorLookupDropdownBase = ({\n  triggerFunction,\n  getResults,\n  $createNode,\n  renderMenu,\n  onMenuItemSelect,\n  renderMenuItemContent,\n  suggestionsListLength = 5,\n  css\n}: EditorLookupDropdownBaseProps) => {\n  const [editor] = useLexicalComposerContext();\n\n  const [queryString, setQueryString] = useState<string | null>(null);\n\n  const [results, setResults] = useState<TypeaheadMenuData[]>([]);\n\n  useEffect(() => {\n    (async () => {\n      const res = await getResults(queryString);\n      setResults(res || []);\n    })();\n  }, [queryString, getResults]);\n\n  const menuOptions = useMemo(\n    () => results\n      .map((result) => new TypeaheadOption(result))\n      .slice(0, suggestionsListLength),\n    [results, suggestionsListLength]\n  );\n\n  const onSelectOption = useCallback(\n    (\n      selectedOption: TypeaheadOption,\n      nodeToReplace: TextNode | null,\n      closeMenu: () => void\n    ) => {\n      editor.update(() => {\n        if (onMenuItemSelect) {\n          const result = onMenuItemSelect(selectedOption, closeMenu);\n          if (result) {\n            return;\n          }\n        }\n\n        if (!$createNode) return;\n\n        const node = $createNode(selectedOption);\n        if (nodeToReplace) {\n          nodeToReplace.replace(node);\n        }\n        node.select();\n        closeMenu();\n      });\n    },\n    [editor, $createNode]\n  );\n\n  const menuRenderFn = useCallback(\n    (\n      anchorElementRef: React.MutableRefObject<HTMLElement | null>,\n      { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }\n    ) => {\n      if (renderMenu) {\n        return renderMenu({\n          menuOptions,\n          selectedIndex,\n          anchorElementRef,\n          setHighlightedIndex,\n          selectOptionAndCleanUp\n        });\n      }\n\n      return defaultMenuRender({\n        editor,\n        menuOptions,\n        selectedIndex,\n        anchorElementRef,\n        setHighlightedIndex,\n        renderMenuItemContent,\n        selectOptionAndCleanUp,\n        css\n      });\n    },\n    [menuOptions, renderMenu, renderMenuItemContent, css]\n  );\n\n  return (\n    <LexicalTypeaheadMenuPlugin<TypeaheadOption>\n      onQueryChange={setQueryString}\n      onSelectOption={onSelectOption}\n      triggerFn={triggerFunction}\n      options={menuOptions}\n      menuRenderFn={menuRenderFn}\n    />\n  );\n};\n"],"names":["MenuOption","jsx","Button","Box","styled","createPortal","useLexicalComposerContext","useState","useEffect","useMemo","useCallback","LexicalTypeaheadMenuPlugin"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/base-dropdown/index.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport {\n  LexicalTypeaheadMenuPlugin,\n  MenuOption,\n  MenuTextMatch\n} from '@lexical/react/LexicalTypeaheadMenuPlugin';\nimport {\n  Box, Button, config, styled\n} from '@sparrowengg/twigs-react';\nimport { CSS } from '@stitches/react';\nimport { LexicalEditor, TextNode } from 'lexical';\nimport React, {\n  ReactNode,\n  ReactPortal,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type TypeaheadMenuData = {\n  value: string;\n  label: string;\n  [x: string]: unknown;\n};\n\ntype RenderMenuItemContentProps = {\n  index: number;\n  isSelected: boolean;\n  option: TypeaheadOption;\n};\n\nclass TypeaheadOption extends MenuOption {\n  data: TypeaheadMenuData;\n\n  constructor(data: TypeaheadMenuData) {\n    super(data.value);\n    this.data = data;\n  }\n}\n\nconst TypeaheadMenuItem = ({\n  index,\n  isSelected,\n  onClick,\n  onMouseEnter,\n  option,\n  renderMenuItemContent\n}: {\n  index: number;\n  isSelected: boolean;\n  onClick: () => void;\n  onMouseEnter: () => void;\n  option: TypeaheadOption;\n  renderMenuItemContent?: (props: RenderMenuItemContentProps) => ReactNode;\n}) => {\n  return (\n    <Button\n      key={option.key}\n      ref={option.setRefElement}\n      role=\"option\"\n      color={isSelected ? 'default' : 'bright'}\n      aria-selected={isSelected}\n      id={`typeahead-item-${index}`}\n      onMouseEnter={onMouseEnter}\n      onClick={onClick}\n      size=\"md\"\n      css={{\n        width: '100%',\n        justifyContent: 'flex-start'\n      }}\n    >\n      {renderMenuItemContent ? (\n        renderMenuItemContent({\n          index,\n          isSelected,\n          option\n        })\n      ) : (\n        <Box as=\"span\" className=\"text\">\n          {option.data.label}\n        </Box>\n      )}\n    </Button>\n  );\n};\n\nconst StyledUl = styled('ul', {\n  width: '260px',\n  padding: '$4',\n  borderRadius: '$md',\n  backgroundColor: '$white900',\n  position: 'relative',\n  zIndex: 1000,\n  boxShadow: 'rgba(14, 18, 22, 0.35) 0px 10px 38px -10px, rgba(14, 18, 22, 0.2) 0px 10px 20px -15px'\n});\n\nexport type EditorLookupDropdownBaseProps = {\n  triggerFunction: (text: string) => MenuTextMatch | null;\n  getResults: (\n    text: string | null\n  ) => Promise<TypeaheadMenuData[]> | TypeaheadMenuData[];\n  $createNode?: (data: TypeaheadOption) => TextNode;\n  suggestionsListLength?: number;\n  renderMenu?: (args: {\n    anchorElementRef: React.MutableRefObject<HTMLElement | null>;\n    selectedIndex: number | null;\n    selectOptionAndCleanUp: (option: TypeaheadOption) => void;\n    setHighlightedIndex: (index: number) => void;\n    menuOptions: TypeaheadOption[];\n  }) => ReactPortal | React.JSX.Element | null;\n  renderMenuItemContent?: (props: RenderMenuItemContentProps) => ReactNode;\n  onMenuItemSelect?: (\n    option: TypeaheadOption,\n    closeMenu?: () => void\n  ) => void | boolean;\n  css?: CSS<typeof config>;\n};\n\nconst defaultMenuRender = ({\n  selectOptionAndCleanUp,\n  setHighlightedIndex,\n  renderMenuItemContent,\n  anchorElementRef,\n  menuOptions,\n  selectedIndex,\n  css\n}: {\n  anchorElementRef: React.MutableRefObject<HTMLElement | null>;\n  selectOptionAndCleanUp: (option: TypeaheadOption) => void;\n  setHighlightedIndex: (index: number) => void;\n  selectedIndex: number | null;\n  menuOptions: TypeaheadOption[];\n  editor: LexicalEditor;\n  renderMenuItemContent?: EditorLookupDropdownBaseProps['renderMenuItemContent'];\n  css?: CSS<typeof config>;\n}) => {\n  if (anchorElementRef.current && menuOptions.length) {\n    return createPortal(\n      <div className=\"typeahead-popover dropdown-menu\">\n        <StyledUl css={css}>\n          {menuOptions.map((option, i: number) => (\n            <TypeaheadMenuItem\n              index={i}\n              isSelected={selectedIndex === i}\n              onClick={() => {\n                setHighlightedIndex(i);\n                selectOptionAndCleanUp(option);\n              }}\n              onMouseEnter={() => {\n                setHighlightedIndex(i);\n              }}\n              key={option.key}\n              option={option}\n              renderMenuItemContent={renderMenuItemContent}\n            />\n          ))}\n        </StyledUl>\n      </div>,\n      anchorElementRef.current\n    );\n  }\n\n  return null;\n};\n\nexport const EditorLookupDropdownBase = ({\n  triggerFunction,\n  getResults,\n  $createNode,\n  renderMenu,\n  onMenuItemSelect,\n  renderMenuItemContent,\n  suggestionsListLength = 5,\n  css\n}: EditorLookupDropdownBaseProps) => {\n  const [editor] = useLexicalComposerContext();\n\n  const [queryString, setQueryString] = useState<string | null>(null);\n\n  const [results, setResults] = useState<TypeaheadMenuData[]>([]);\n\n  useEffect(() => {\n    (async () => {\n      const res = await getResults(queryString);\n      setResults(res || []);\n    })();\n  }, [queryString, getResults]);\n\n  const menuOptions = useMemo(\n    () => results\n      .map((result) => new TypeaheadOption(result))\n      .slice(0, suggestionsListLength),\n    [results, suggestionsListLength]\n  );\n\n  const onSelectOption = useCallback(\n    (\n      selectedOption: TypeaheadOption,\n      nodeToReplace: TextNode | null,\n      closeMenu: () => void\n    ) => {\n      editor.update(() => {\n        if (onMenuItemSelect) {\n          const result = onMenuItemSelect(selectedOption, closeMenu);\n          if (result) {\n            return;\n          }\n        }\n\n        if (!$createNode) return;\n\n        const node = $createNode(selectedOption);\n        if (nodeToReplace) {\n          nodeToReplace.replace(node);\n        }\n        node.select();\n        closeMenu();\n      });\n    },\n    [editor, $createNode]\n  );\n\n  const menuRenderFn = useCallback(\n    (\n      anchorElementRef: React.MutableRefObject<HTMLElement | null>,\n      { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }\n    ) => {\n      if (renderMenu) {\n        return renderMenu({\n          menuOptions,\n          selectedIndex,\n          anchorElementRef,\n          setHighlightedIndex,\n          selectOptionAndCleanUp\n        });\n      }\n\n      return defaultMenuRender({\n        editor,\n        menuOptions,\n        selectedIndex,\n        anchorElementRef,\n        setHighlightedIndex,\n        renderMenuItemContent,\n        selectOptionAndCleanUp,\n        css\n      });\n    },\n    [menuOptions, renderMenu, renderMenuItemContent, css]\n  );\n\n  return (\n    <LexicalTypeaheadMenuPlugin<TypeaheadOption>\n      onQueryChange={setQueryString}\n      onSelectOption={onSelectOption}\n      triggerFn={triggerFunction}\n      options={menuOptions}\n      menuRenderFn={menuRenderFn}\n    />\n  );\n};\n"],"names":["MenuOption","jsx","Button","Box","styled","createPortal","useLexicalComposerContext","useState","useEffect","useMemo","useCallback","LexicalTypeaheadMenuPlugin"],"mappings":"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"}

package/dist/cjs/components/dialog-link-editor/index.js

@@ -6,8 +6,8 @@ var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var utils = require('@lexical/utils');
 var commands = require('../../utils/commands.js');
 var lexical = require('lexical');
-var React = require('react');
-var isURL = require('../../react-editor/node_modules/validator/es/lib/isURL.js');
+var react = require('react');
+var isURL = require('../../node_modules/validator/es/lib/isURL.js');
 var getSelectedNode = require('../../utils/get-selected-node.js');
 var setFloatingElemPositionForLinkEditor = require('../../utils/set-floating-elem-position-for-link-editor.js');
 var linkEditorDialog = require('./link-editor-dialog.js');
@@ -15,20 +15,20 @@ var linkTooltip = require('./link-tooltip.js');
 
 function useDialogLinkEditorToolbar(editor, anchorElem, options) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
-  const [linkUrl, setLinkUrl] = React.useState("");
-  const [linkText, setLinkText] = React.useState("");
-  const [isLink, setIsLink] = React.useState(false);
-  const [lastSelection, setLastSelection] = React.useState(null);
-  const [isLinkEditMode, setIsLinkEditMode] = React.useState(false);
-  const [isUpdate, setIsUpdate] = React.useState(false);
-  const [errors, setErrors] = React.useState({
+  const [linkUrl, setLinkUrl] = react.useState("");
+  const [linkText, setLinkText] = react.useState("");
+  const [isLink, setIsLink] = react.useState(false);
+  const [lastSelection, setLastSelection] = react.useState(null);
+  const [isLinkEditMode, setIsLinkEditMode] = react.useState(false);
+  const [isUpdate, setIsUpdate] = react.useState(false);
+  const [errors, setErrors] = react.useState({
     text: false,
     url: false
   });
-  const isNewLink = React.useRef(false);
-  const containerRef = React.useRef(null);
+  const isNewLink = react.useRef(false);
+  const containerRef = react.useRef(null);
   const containerElem = containerRef.current;
-  React.useEffect(() => {
+  react.useEffect(() => {
     function updateToolbar() {
       const selection = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection)) {
@@ -79,7 +79,7 @@ function useDialogLinkEditorToolbar(editor, anchorElem, options) {
       )
     );
   }, [editor]);
-  const updateLinkEditor = React.useCallback(() => {
+  const updateLinkEditor = react.useCallback(() => {
     const selection = lexical.$getSelection();
     if (lexical.$isRangeSelection(selection)) {
       const node = getSelectedNode.getSelectedNode(selection);
@@ -123,12 +123,12 @@ function useDialogLinkEditorToolbar(editor, anchorElem, options) {
     }
     return true;
   }, [anchorElem, editor, setIsLinkEditMode]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isLinkEditMode) {
       isNewLink.current = false;
     }
   }, [isLinkEditMode]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -182,7 +182,7 @@ function useDialogLinkEditorToolbar(editor, anchorElem, options) {
       )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     editor.getEditorState().read(() => {
       updateLinkEditor();
     });

package/dist/cjs/components/dialog-link-editor/link-editor-dialog.js

@@ -1,16 +1,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var dialog = require('../../react-components/dist/es/dialog/dialog.js');
-var text = require('../../react-components/dist/es/text/text.js');
-var iconButton = require('../../react-components/dist/es/button/icon-button.js');
-var close = require('../../react-icons/dist/es/icons/close.js');
-var box = require('../../react-components/dist/es/box/box.js');
-var formInput = require('../../react-components/dist/es/input/form-input.js');
-var flex = require('../../react-components/dist/es/flex/flex.js');
-var _delete = require('../../react-icons/dist/es/icons/delete.js');
-var button = require('../../react-components/dist/es/button/button.js');
+var twigsReact = require('@sparrowengg/twigs-react');
+var twigsReactIcons = require('@sparrowengg/twigs-react-icons');
+var react = require('react');
 
 const LinkEditorDialog = ({
   open,
@@ -31,8 +24,8 @@ const LinkEditorDialog = ({
   handleLinkSubmission
 }) => {
   var _a, _b;
-  const [editedLinkText, setEditedLinkText] = React.useState(linkText);
-  const [editedLinkUrl, setEditedLinkUrl] = React.useState(linkUrl);
+  const [editedLinkText, setEditedLinkText] = react.useState(linkText);
+  const [editedLinkUrl, setEditedLinkUrl] = react.useState(linkUrl);
   const monitorInputInteraction = (event) => {
     if (event.key === "Enter") {
       event.preventDefault();
@@ -46,7 +39,7 @@ const LinkEditorDialog = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    dialog.Dialog,
+    twigsReact.Dialog,
     {
       open,
       size: "sm",
@@ -56,7 +49,7 @@ const LinkEditorDialog = ({
         }
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        dialog.DialogContent,
+        twigsReact.DialogContent,
         {
           css: {
             padding: "0",
@@ -64,7 +57,7 @@ const LinkEditorDialog = ({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              dialog.DialogTitle,
+              twigsReact.DialogTitle,
               {
                 css: {
                   padding: "$8 $12",
@@ -74,15 +67,15 @@ const LinkEditorDialog = ({
                   alignItems: "center"
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(text.Text, { weight: "bold", size: "lg", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(twigsReact.Text, { weight: "bold", size: "lg", children: title }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    iconButton.IconButton,
+                    twigsReact.IconButton,
                     {
                       onClick: closeModal,
                       css: {
                         color: "$neutral800"
                       },
-                      icon: /* @__PURE__ */ jsxRuntime.jsx(close.CloseIcon, {}),
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.CloseIcon, {}),
                       color: "bright",
                       size: "lg"
                     }
@@ -91,14 +84,14 @@ const LinkEditorDialog = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              box.Box,
+              twigsReact.Box,
               {
                 css: {
                   padding: "$8 $12"
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    formInput.FormInput,
+                    twigsReact.FormInput,
                     {
                       label: textLabel,
                       size: "lg",
@@ -116,13 +109,13 @@ const LinkEditorDialog = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    box.Box,
+                    twigsReact.Box,
                     {
                       css: {
                         marginTop: "$10"
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        formInput.FormInput,
+                        twigsReact.FormInput,
                         {
                           label: urlLabel,
                           size: "lg",
@@ -145,7 +138,7 @@ const LinkEditorDialog = ({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              flex.Flex,
+              twigsReact.Flex,
               {
                 justifyContent: "space-between",
                 css: {
@@ -153,24 +146,24 @@ const LinkEditorDialog = ({
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    iconButton.IconButton,
+                    twigsReact.IconButton,
                     {
-                      icon: /* @__PURE__ */ jsxRuntime.jsx(_delete.DeleteIcon, {}),
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.DeleteIcon, {}),
                       color: "bright",
                       size: "lg",
                       onClick: removeLink
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsxs(
-                    flex.Flex,
+                    twigsReact.Flex,
                     {
                       css: {
                         gap: "$6"
                       },
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { color: "default", size: "lg", onClick: closeModal, children: cancelLabel }),
+                        /* @__PURE__ */ jsxRuntime.jsx(twigsReact.Button, { color: "default", size: "lg", onClick: closeModal, children: cancelLabel }),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          button.Button,
+                          twigsReact.Button,
                           {
                             color: "primary",
                             size: "lg",

package/dist/cjs/components/dialog-link-editor/link-editor-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-editor-dialog.js","sources":["../../../../src/components/dialog-link-editor/link-editor-dialog.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  Flex,\n  FormInput,\n  IconButton,\n  Text\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon, DeleteIcon } from '@sparrowengg/twigs-react-icons';\nimport React, { useState } from 'react';\n\nexport const LinkEditorDialog = ({\n  open,\n  title,\n  errors,\n  linkUrl,\n  linkText,\n  urlLabel,\n  isUpdate,\n  textLabel,\n  saveLabel = 'Save',\n  cancelLabel = 'Cancel',\n  updateLabel = 'Update',\n  errorLabels,\n  closeModal,\n  removeLink,\n  setIsLinkEditMode,\n  handleLinkSubmission\n}: {\n  open: boolean;\n  title: string;\n  linkUrl: string;\n  linkText: string;\n  urlLabel: string;\n  isUpdate?: boolean;\n  textLabel: string;\n  saveLabel?: string;\n  cancelLabel?: string;\n  updateLabel?: string;\n  errorLabels?: {\n    text?: string;\n    url?: string;\n  };\n  closeModal: () => void;\n  removeLink: () => void;\n  handleLinkSubmission: ({ text, url }: { text: string; url: string }) => void;\n  setIsLinkEditMode: (isEditMode: boolean) => void;\n  errors: {\n    text: boolean;\n    url: boolean;\n  };\n}) => {\n  const [editedLinkText, setEditedLinkText] = useState(linkText);\n  const [editedLinkUrl, setEditedLinkUrl] = useState(linkUrl);\n\n  const monitorInputInteraction = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      handleLinkSubmission({\n        text: editedLinkText,\n        url: editedLinkUrl\n      });\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setIsLinkEditMode(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      size=\"sm\"\n      onOpenChange={(op) => {\n        if (!op) {\n          closeModal();\n        }\n      }}\n    >\n      <DialogContent\n        css={{\n          padding: '0',\n          borderRadius: '2xl'\n        }}\n      >\n        <DialogTitle\n          css={{\n            padding: '$8 $12',\n            borderBottom: '1px solid $neutral200',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center'\n          }}\n        >\n          <Text weight=\"bold\" size=\"lg\">\n            {title}\n          </Text>\n          <IconButton\n            onClick={closeModal}\n            css={{\n              color: '$neutral800'\n            }}\n            icon={<CloseIcon />}\n            color=\"bright\"\n            size=\"lg\"\n          />\n        </DialogTitle>\n        <Box\n          css={{\n            padding: '$8 $12'\n          }}\n        >\n          <FormInput\n            label={textLabel}\n            size=\"lg\"\n            onChange={(event) => {\n              setEditedLinkText(event.target.value);\n            }}\n            onKeyDown={(event) => {\n              monitorInputInteraction(event);\n            }}\n            value={editedLinkText}\n            css={{\n              boxSizing: 'border-box'\n            }}\n            error={\n              errors.text\n                ? errorLabels?.text ?? 'Please enter a valid text'\n                : undefined\n            }\n          />\n          <Box\n            css={{\n              marginTop: '$10'\n            }}\n          >\n            <FormInput\n              label={urlLabel}\n              size=\"lg\"\n              onChange={(event) => {\n                setEditedLinkUrl(event.target.value);\n              }}\n              onKeyDown={(event) => {\n                monitorInputInteraction(event);\n              }}\n              value={editedLinkUrl}\n              css={{\n                boxSizing: 'border-box'\n              }}\n              error={\n                errors.url\n                  ? errorLabels?.url ?? 'Please enter a valid URL'\n                  : undefined\n              }\n            />\n          </Box>\n        </Box>\n        <Flex\n          justifyContent=\"space-between\"\n          css={{\n            padding: '$8 $12'\n          }}\n        >\n          <IconButton\n            icon={<DeleteIcon />}\n            color=\"bright\"\n            size=\"lg\"\n            onClick={removeLink}\n          />\n          <Flex\n            css={{\n              gap: '$6'\n            }}\n          >\n            <Button color=\"default\" size=\"lg\" onClick={closeModal}>\n              {cancelLabel}\n            </Button>\n            <Button\n              color=\"primary\"\n              size=\"lg\"\n              disabled={\n                editedLinkText === linkText && editedLinkUrl === linkUrl\n              }\n              onClick={() => handleLinkSubmission({\n                text: editedLinkText,\n                url: editedLinkUrl\n              })}\n            >\n              {isUpdate ? updateLabel : saveLabel}\n            </Button>\n          </Flex>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":["useState","jsx","Dialog","jsxs","DialogContent","DialogTitle","Text","IconButton","CloseIcon","Box","FormInput","Flex","DeleteIcon","Button"],"mappings":"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"}
+{"version":3,"file":"link-editor-dialog.js","sources":["../../../../src/components/dialog-link-editor/link-editor-dialog.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  Flex,\n  FormInput,\n  IconButton,\n  Text\n} from '@sparrowengg/twigs-react';\nimport { CloseIcon, DeleteIcon } from '@sparrowengg/twigs-react-icons';\nimport React, { useState } from 'react';\n\nexport const LinkEditorDialog = ({\n  open,\n  title,\n  errors,\n  linkUrl,\n  linkText,\n  urlLabel,\n  isUpdate,\n  textLabel,\n  saveLabel = 'Save',\n  cancelLabel = 'Cancel',\n  updateLabel = 'Update',\n  errorLabels,\n  closeModal,\n  removeLink,\n  setIsLinkEditMode,\n  handleLinkSubmission\n}: {\n  open: boolean;\n  title: string;\n  linkUrl: string;\n  linkText: string;\n  urlLabel: string;\n  isUpdate?: boolean;\n  textLabel: string;\n  saveLabel?: string;\n  cancelLabel?: string;\n  updateLabel?: string;\n  errorLabels?: {\n    text?: string;\n    url?: string;\n  };\n  closeModal: () => void;\n  removeLink: () => void;\n  handleLinkSubmission: ({ text, url }: { text: string; url: string }) => void;\n  setIsLinkEditMode: (isEditMode: boolean) => void;\n  errors: {\n    text: boolean;\n    url: boolean;\n  };\n}) => {\n  const [editedLinkText, setEditedLinkText] = useState(linkText);\n  const [editedLinkUrl, setEditedLinkUrl] = useState(linkUrl);\n\n  const monitorInputInteraction = (\n    event: React.KeyboardEvent<HTMLInputElement>\n  ) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      handleLinkSubmission({\n        text: editedLinkText,\n        url: editedLinkUrl\n      });\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setIsLinkEditMode(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      size=\"sm\"\n      onOpenChange={(op) => {\n        if (!op) {\n          closeModal();\n        }\n      }}\n    >\n      <DialogContent\n        css={{\n          padding: '0',\n          borderRadius: '2xl'\n        }}\n      >\n        <DialogTitle\n          css={{\n            padding: '$8 $12',\n            borderBottom: '1px solid $neutral200',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center'\n          }}\n        >\n          <Text weight=\"bold\" size=\"lg\">\n            {title}\n          </Text>\n          <IconButton\n            onClick={closeModal}\n            css={{\n              color: '$neutral800'\n            }}\n            icon={<CloseIcon />}\n            color=\"bright\"\n            size=\"lg\"\n          />\n        </DialogTitle>\n        <Box\n          css={{\n            padding: '$8 $12'\n          }}\n        >\n          <FormInput\n            label={textLabel}\n            size=\"lg\"\n            onChange={(event) => {\n              setEditedLinkText(event.target.value);\n            }}\n            onKeyDown={(event) => {\n              monitorInputInteraction(event);\n            }}\n            value={editedLinkText}\n            css={{\n              boxSizing: 'border-box'\n            }}\n            error={\n              errors.text\n                ? errorLabels?.text ?? 'Please enter a valid text'\n                : undefined\n            }\n          />\n          <Box\n            css={{\n              marginTop: '$10'\n            }}\n          >\n            <FormInput\n              label={urlLabel}\n              size=\"lg\"\n              onChange={(event) => {\n                setEditedLinkUrl(event.target.value);\n              }}\n              onKeyDown={(event) => {\n                monitorInputInteraction(event);\n              }}\n              value={editedLinkUrl}\n              css={{\n                boxSizing: 'border-box'\n              }}\n              error={\n                errors.url\n                  ? errorLabels?.url ?? 'Please enter a valid URL'\n                  : undefined\n              }\n            />\n          </Box>\n        </Box>\n        <Flex\n          justifyContent=\"space-between\"\n          css={{\n            padding: '$8 $12'\n          }}\n        >\n          <IconButton\n            icon={<DeleteIcon />}\n            color=\"bright\"\n            size=\"lg\"\n            onClick={removeLink}\n          />\n          <Flex\n            css={{\n              gap: '$6'\n            }}\n          >\n            <Button color=\"default\" size=\"lg\" onClick={closeModal}>\n              {cancelLabel}\n            </Button>\n            <Button\n              color=\"primary\"\n              size=\"lg\"\n              disabled={\n                editedLinkText === linkText && editedLinkUrl === linkUrl\n              }\n              onClick={() => handleLinkSubmission({\n                text: editedLinkText,\n                url: editedLinkUrl\n              })}\n            >\n              {isUpdate ? updateLabel : saveLabel}\n            </Button>\n          </Flex>\n        </Flex>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":["useState","jsx","Dialog","jsxs","DialogContent","DialogTitle","Text","IconButton","CloseIcon","Box","FormInput","Flex","DeleteIcon","Button"],"mappings":"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"}

package/dist/cjs/components/dialog-link-editor/link-tooltip.js

@@ -1,14 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var twigsReact = require('@sparrowengg/twigs-react');
+var twigsReactIcons = require('@sparrowengg/twigs-react-icons');
 var prefixClassName = require('../../utils/prefix-class-name.js');
-var ReactDOM__default = require('react-dom');
-var box = require('../../react-components/dist/es/box/box.js');
-var link = require('../../react-icons/dist/es/icons/link.js');
-var link$1 = require('../../react-components/dist/es/link/link.js');
-var iconButton = require('../../react-components/dist/es/button/icon-button.js');
-var pencil = require('../../react-icons/dist/es/icons/pencil.js');
-var _delete = require('../../react-icons/dist/es/icons/delete.js');
+var reactDom = require('react-dom');
 
 const LinkTooltip = ({
   linkUrl,
@@ -18,9 +14,9 @@ const LinkTooltip = ({
   handleDelete,
   https
 }) => {
-  return ReactDOM__default.createPortal(
+  return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsxs(
-      box.Box,
+      twigsReact.Box,
       {
         ref: containerRef,
         className: prefixClassName.prefixClassName("link-tooltip"),
@@ -39,7 +35,7 @@ const LinkTooltip = ({
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            box.Box,
+            twigsReact.Box,
             {
               className: prefixClassName.prefixClassName("link-tooltip__icon"),
               css: {
@@ -48,11 +44,11 @@ const LinkTooltip = ({
                   display: "block"
                 }
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(link.LinkIcon, { color: "#fff", size: 16 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.LinkIcon, { color: "#fff", size: 16 })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            link$1.Link,
+            twigsReact.Link,
             {
               className: prefixClassName.prefixClassName("link-tooltip__link"),
               css: {
@@ -69,7 +65,7 @@ const LinkTooltip = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            box.Box,
+            twigsReact.Box,
             {
               className: prefixClassName.prefixClassName("link-tooltip__actions"),
               css: {
@@ -81,9 +77,9 @@ const LinkTooltip = ({
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  iconButton.IconButton,
+                  twigsReact.IconButton,
                   {
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(pencil.PencilIcon, { strokeWidth: 2 }),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.PencilIcon, { strokeWidth: 2 }),
                     size: "xs",
                     color: "light",
                     css: {
@@ -95,9 +91,9 @@ const LinkTooltip = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  iconButton.IconButton,
+                  twigsReact.IconButton,
                   {
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(_delete.DeleteIcon, { strokeWidth: 2 }),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(twigsReactIcons.DeleteIcon, { strokeWidth: 2 }),
                     size: "xs",
                     color: "light",
                     css: {

package/dist/cjs/components/dialog-link-editor/link-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-tooltip.js","sources":["../../../../src/components/dialog-link-editor/link-tooltip.tsx"],"sourcesContent":["import { Box, IconButton, Link } from '@sparrowengg/twigs-react';\nimport {\n  DeleteIcon,\n  LinkIcon,\n  PencilIcon\n} from '@sparrowengg/twigs-react-icons';\nimport { prefixClassName } from '@src/utils/prefix-class-name';\nimport React from 'react';\nimport { createPortal } from 'react-dom';\n\nexport const LinkTooltip = ({\n  linkUrl,\n  anchorElem,\n  containerRef,\n  handleEdit,\n  handleDelete,\n  https\n}: {\n  anchorElem: HTMLElement;\n  containerRef: React.RefObject<HTMLDivElement>;\n  linkUrl: string;\n  handleEdit: () => void;\n  handleDelete: () => void;\n  https: boolean;\n}) => {\n  return createPortal(\n    <Box\n      ref={containerRef}\n      className={prefixClassName('link-tooltip')}\n      css={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        opacity: 0,\n        backgroundColor: '$black900',\n        maxWidth: 280,\n        borderRadius: '$lg',\n        display: 'flex',\n        padding: '$2 $4',\n        alignItems: 'center',\n        gap: '$3'\n      }}\n    >\n      <Box\n        className={prefixClassName('link-tooltip__icon')}\n        css={{\n          flexShrink: 0,\n\n          svg: {\n            display: 'block'\n          }\n        }}\n      >\n        <LinkIcon color=\"#fff\" size={16} />\n      </Box>\n      <Link\n        className={prefixClassName('link-tooltip__link')}\n        css={{\n          color: '$white900',\n          textDecoration: 'underline',\n          fontSize: '$sm',\n          textOverflow: 'ellipsis',\n          overflow: 'hidden'\n        }}\n        target=\"_blank\"\n        referrerPolicy=\"no-referrer\"\n        href={\n          https && !linkUrl.startsWith('https://')\n            ? `https://${linkUrl}`\n            : linkUrl\n        }\n      >\n        {linkUrl}\n      </Link>\n      <Box\n        className={prefixClassName('link-tooltip__actions')}\n        css={{\n          display: 'flex',\n          borderLeft: '1px solid $white600',\n          margin: '$2',\n          paddingLeft: '$4',\n          flexShrink: 0\n        }}\n      >\n        <IconButton\n          icon={<PencilIcon strokeWidth={2} />}\n          size=\"xs\"\n          color=\"light\"\n          css={{\n            backgroundColor: 'transparent'\n          }}\n          onClick={() => {\n            handleEdit();\n          }}\n        />\n        <IconButton\n          icon={<DeleteIcon strokeWidth={2} />}\n          size=\"xs\"\n          color=\"light\"\n          css={{\n            backgroundColor: 'transparent'\n          }}\n          onClick={() => {\n            handleDelete();\n          }}\n        />\n      </Box>\n    </Box>,\n    anchorElem\n  );\n};\n"],"names":["createPortal","jsxs","Box","prefixClassName","jsx","LinkIcon","Link","IconButton","PencilIcon","DeleteIcon"],"mappings":"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"}
+{"version":3,"file":"link-tooltip.js","sources":["../../../../src/components/dialog-link-editor/link-tooltip.tsx"],"sourcesContent":["import { Box, IconButton, Link } from '@sparrowengg/twigs-react';\nimport {\n  DeleteIcon,\n  LinkIcon,\n  PencilIcon\n} from '@sparrowengg/twigs-react-icons';\nimport { prefixClassName } from '@src/utils/prefix-class-name';\nimport React from 'react';\nimport { createPortal } from 'react-dom';\n\nexport const LinkTooltip = ({\n  linkUrl,\n  anchorElem,\n  containerRef,\n  handleEdit,\n  handleDelete,\n  https\n}: {\n  anchorElem: HTMLElement;\n  containerRef: React.RefObject<HTMLDivElement>;\n  linkUrl: string;\n  handleEdit: () => void;\n  handleDelete: () => void;\n  https: boolean;\n}) => {\n  return createPortal(\n    <Box\n      ref={containerRef}\n      className={prefixClassName('link-tooltip')}\n      css={{\n        position: 'absolute',\n        left: 0,\n        top: 0,\n        opacity: 0,\n        backgroundColor: '$black900',\n        maxWidth: 280,\n        borderRadius: '$lg',\n        display: 'flex',\n        padding: '$2 $4',\n        alignItems: 'center',\n        gap: '$3'\n      }}\n    >\n      <Box\n        className={prefixClassName('link-tooltip__icon')}\n        css={{\n          flexShrink: 0,\n\n          svg: {\n            display: 'block'\n          }\n        }}\n      >\n        <LinkIcon color=\"#fff\" size={16} />\n      </Box>\n      <Link\n        className={prefixClassName('link-tooltip__link')}\n        css={{\n          color: '$white900',\n          textDecoration: 'underline',\n          fontSize: '$sm',\n          textOverflow: 'ellipsis',\n          overflow: 'hidden'\n        }}\n        target=\"_blank\"\n        referrerPolicy=\"no-referrer\"\n        href={\n          https && !linkUrl.startsWith('https://')\n            ? `https://${linkUrl}`\n            : linkUrl\n        }\n      >\n        {linkUrl}\n      </Link>\n      <Box\n        className={prefixClassName('link-tooltip__actions')}\n        css={{\n          display: 'flex',\n          borderLeft: '1px solid $white600',\n          margin: '$2',\n          paddingLeft: '$4',\n          flexShrink: 0\n        }}\n      >\n        <IconButton\n          icon={<PencilIcon strokeWidth={2} />}\n          size=\"xs\"\n          color=\"light\"\n          css={{\n            backgroundColor: 'transparent'\n          }}\n          onClick={() => {\n            handleEdit();\n          }}\n        />\n        <IconButton\n          icon={<DeleteIcon strokeWidth={2} />}\n          size=\"xs\"\n          color=\"light\"\n          css={{\n            backgroundColor: 'transparent'\n          }}\n          onClick={() => {\n            handleDelete();\n          }}\n        />\n      </Box>\n    </Box>,\n    anchorElem\n  );\n};\n"],"names":["createPortal","jsxs","Box","prefixClassName","jsx","LinkIcon","Link","IconButton","PencilIcon","DeleteIcon"],"mappings":"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"}