chordia-ui 3.2.4 → 3.2.6

package/dist/FileUploadingState.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadingState.es.js","sources":["../src/components/common/AutoSearch.jsx","../src/components/common/SideDrawer.jsx","../src/components/common/FileUploadingState.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useMemo, useRef, useEffect } from \"react\";\nimport { X, Search, PlusCircle } from \"lucide-react\";\nimport TextInput from \"../primitives/TextInput\";\nimport SmallButton from \"../primitives/SmallButton\";\n\nconst AutoSearch = ({\n  options = [],\n  value = null,\n  onChange,\n  placeholder = \"Search...\",\n  disabled = false,\n  showSuggestions = true,\n  styling,\n  isAddNew = false,\n}) => {\n  const [search, setSearch] = useState(\"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [addedOption, setAddedOption] = useState(null);\n\n  const containerRef = useRef(null);\n\n  const filteredOptions = useMemo(() => {\n    if (!showSuggestions) return [];\n    const lower = search.toLowerCase();\n\n    return options.filter((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return (\n        (label.toLowerCase().includes(lower) ||\n          val.toLowerCase().includes(lower)) &&\n        (!addedOption || opt.value !== addedOption.value)\n      );\n    });\n  }, [search, options, showSuggestions, addedOption]);\n\n  const exactMatchExists = useMemo(() => {\n    if (!isAddNew) return false;\n    const lower = search.toLowerCase();\n    return options.some((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return label.toLowerCase() === lower || val.toLowerCase() === lower;\n    });\n  }, [options, search, isAddNew]);\n\n  // Close dropdown on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (event) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const handleSelect = (opt) => {\n    onChange?.(opt);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleAddNew = () => {\n    const newOpt = { label: search, value: search };\n    setAddedOption(newOpt);\n    onChange?.(newOpt);\n    setIsOpen(false);\n    setSearch(\"\");\n  };\n\n  const handleClear = () => {\n    onChange?.(null);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleInputChange = (e) => {\n    const newValue = e.target.value;\n    if (showSuggestions) {\n      setSearch(newValue);\n      setIsOpen(true);\n    } else if (isAddNew) {\n      setSearch(newValue);\n      setIsOpen(newValue.length >= 3);\n    } else {\n      onChange?.(newValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    if (showSuggestions || isAddNew) {\n      setIsOpen(true);\n    }\n  };\n\n  const shouldShowDropdown =\n    isOpen && !value && (showSuggestions ? search.length >= 3 : search.length >= 3);\n\n  return (\n    <div className=\"relative w-full\" ref={containerRef}>\n      <div\n        className={\n          styling\n            ? styling\n            : \"flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm\"\n        }\n      >\n        <Search className=\"w-4 h-4 text-gray-400\" />\n        <div className=\"flex-1\">\n          {showSuggestions && value ? (\n            <div\n              className=\"text-gray-800 truncate\"\n              title={value.label}\n              style={{\n                fontSize: 'var(--text-sm)',\n                fontWeight: 'var(--font-medium)',\n                letterSpacing: 'var(--tracking-normal)',\n                lineHeight: 'var(--leading-normal)',\n                textTransform: 'none',\n                textDecoration: 'none',\n                fontFamily: 'var(--font-sans)',\n              }}\n            >\n              {value.label}\n            </div>\n          ) : (\n            <TextInput\n              value={showSuggestions || isAddNew ? search : value || \"\"}\n              onChange={(val) =>\n                handleInputChange({ target: { value: val } })\n              }\n              placeholder={placeholder}\n              disabled={disabled}\n              style={{\n                border: \"none\",\n                boxShadow: \"none\",\n                padding: 0,\n                backgroundColor: \"transparent\",\n              }}\n              onFocus={handleInputFocus}\n            />\n          )}\n        </div>\n        {(value || addedOption) && (\n          <SmallButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleClear}\n            style={{\n              padding: 0,\n              width: 20,\n              height: 20,\n              border: \"none\",\n              backgroundColor: \"transparent\",\n              color: \"rgba(107,114,128,1)\",\n            }}\n          >\n            <X className=\"w-3 h-3\" />\n          </SmallButton>\n        )}\n      </div>\n\n      {shouldShowDropdown && (\n        <div\n          className=\"absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library\"\n          style={{\n            maxHeight: 240,\n            overflowY: \"auto\",\n            zIndex: 30,\n          }}\n        >\n          {filteredOptions.length > 0 && (\n            <ul className=\"m-0 p-0 list-none\">\n              {filteredOptions.map((opt) => (\n                <li\n                  key={opt.value}\n                  onClick={() => handleSelect(opt)}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.backgroundColor = \"var(--hover-warm)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = \"transparent\";\n                  }}\n                  className=\"cursor-pointer px-4 py-2\"\n                  title={opt.label}\n                >\n                  <span\n                    className=\"truncate block w-full\"\n                    style={{\n                      fontFamily: \"var(--font-sans)\",\n                      color: \"var(--text-base)\",\n                      fontSize: \"var(--text-sm)\",\n                      fontWeight: \"var(--font-medium)\",\n                      letterSpacing: \"var(--tracking-normal)\",\n                      lineHeight: \"var(--leading-normal)\",\n                      textTransform: \"none\",\n                      textDecoration: \"none\",\n                    }}\n                  >\n                    {opt.label}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n\n          {isAddNew &&\n            !exactMatchExists &&\n            !addedOption &&\n            search.length >= 3 && (\n              <SmallButton\n                type=\"button\"\n                variant=\"secondary\"\n                onClick={handleAddNew}\n                style={{\n                  width: \"100%\",\n                  justifyContent: \"space-between\",\n                  padding: \"8px 10px\",\n                  border: \"none\",\n                  borderTop: \"1px solid rgba(229, 231, 235, 1)\",\n                  borderRadius: 0,\n                  backgroundColor: \"transparent\",\n                  color: \"rgba(107,114,128,1)\",\n                }}\n              >\n                <span>{`Add \"${search}\"`}</span>\n                <PlusCircle className=\"w-5 h-5 text-green-500\" />\n              </SmallButton>\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AutoSearch;\n\n","\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n}) {\n  const drawerRef = useRef(null);\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          top: \"50%\",\n          right: 0,\n          transform: \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width,\n          height,\n          maxHeight: \"100vh\",\n          padding: \"20px\",\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"24px\",\n              fontWeight: 600,\n              fontStyle: \"normal\",\n              color: \"var(--Grey-3, #252525)\",\n              margin: 0,\n              lineHeight: \"normal\",\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  fontStyle: \"normal\",\n                  fontWeight: 400,\n                  lineHeight: \"140%\",\n                  color: \"#0B0B0B\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"16px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n\n/**\n * DrawerLabel — form label for use inside SideDrawer.\n *\n * Props:\n *  - children   ReactNode\n *  - htmlFor    string\n */\nexport function DrawerLabel({ children, htmlFor }) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      style={{\n        display: \"block\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        marginBottom: \"6px\",\n      }}\n    >\n      {children}\n    </label>\n  );\n}\n\n/**\n * DrawerInput — text input for use inside SideDrawer.\n *\n * Props:\n *  - All standard <input> props (type, placeholder, value, onChange, etc.)\n */\nexport function DrawerInput(props) {\n  return (\n    <input\n      {...props}\n      style={{\n        width: \"100%\",\n        padding: \"10px 12px\",\n        borderRadius: \"6px\",\n        border: \"1px solid #D9D9D9\",\n        color: \"var(--Base-Strong, #2E3236)\",\n        fontSize: \"16px\",\n        fontStyle: \"normal\",\n        fontWeight: 400,\n        lineHeight: \"normal\",\n        outline: \"none\",\n        boxSizing: \"border-box\",\n        background: \"#FFF\",\n        transition: \"border-color 0.15s ease\",\n        ...props.style,\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.borderColor = \"#808183\";\n        props.onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.borderColor = \"#D9D9D9\";\n        props.onBlur?.(e);\n      }}\n    />\n  );\n}\n","\"use client\";\n\nimport React from \"react\";\nimport { FolderCheck } from \"lucide-react\";\n\n/**\n * ThreeCirclesSpinner — animated concentric spinner matching the Figma asset.\n * Three arcs (outer gold, middle green, inner gold) rotating at different speeds.\n */\nfunction ThreeCirclesSpinner({ size = 48 }) {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 48 48\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{ animation: \"file-upload-spin 1.2s linear infinite\" }}\n    >\n      <path\n        d=\"M43 24C43 26.4951 42.5086 28.9658 41.5537 31.271C40.5989 33.5762 39.1993 35.6707 37.435 37.435C35.6707 39.1993 33.5762 40.5989 31.271 41.5537C28.9658 42.5086 26.4951 43 24 43C21.5049 43 19.0342 42.5086 16.729 41.5537C14.4238 40.5989 12.3293 39.1993 10.565 37.435C8.80066 35.6707 7.40113 33.5762 6.44629 31.271C5.49145 28.9658 5 26.4951 5 24\"\n        stroke=\"#F3E7C7\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M12 24C12 22.4241 12.3104 20.8637 12.9134 19.4078C13.5165 17.9519 14.4004 16.629 15.5147 15.5147C16.629 14.4004 17.9519 13.5165 19.4078 12.9134C20.8637 12.3104 22.4241 12 24 12C25.5759 12 27.1363 12.3104 28.5922 12.9134C30.0481 13.5165 31.371 14.4004 32.4853 15.5147C33.5996 16.629 34.4835 17.9519 35.0866 19.4078C35.6896 20.8637 36 22.4241 36 24\"\n        stroke=\"#00A66E\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n      />\n      <path\n        d=\"M20 24C20 24.5253 20.1035 25.0454 20.3045 25.5307C20.5055 26.016 20.8001 26.457 21.1716 26.8284C21.543 27.1999 21.984 27.4945 22.4693 27.6955C22.9546 27.8965 23.4747 28 24 28C24.5253 28 25.0454 27.8965 25.5307 27.6955C26.016 27.4945 26.457 27.1999 26.8284 26.8284C27.1999 26.457 27.4945 26.016 27.6955 25.5307C27.8965 25.0454 28 24.5253 28 24\"\n        stroke=\"#F3E7C7\"\n        strokeWidth=\"4\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n\n/**\n * FileUploadingState — shows file upload progress with spinner.\n *\n * Props:\n *  - title        string   Main message (default \"Uploading your file...\")\n *  - subtitle     string   Secondary message (default \"Please wait while we process your file\")\n *  - progress     number   Optional progress percentage (0-100)\n *  - width        number|string  Container width (default 648)\n *  - height       number|string  Container height (default 281)\n */\nexport default function FileUploadingState({\n  title = \"Uploading your file...\",\n  subtitle = \"Please wait while we process your file\",\n  progress,\n  width = 648,\n  height = 281,\n}) {\n  return (\n    <>\n      <style>{`\n        @keyframes file-upload-spin {\n          from { transform: rotate(0deg); }\n          to { transform: rotate(360deg); }\n        }\n      `}</style>\n\n      <div\n        style={{\n          display: \"flex\",\n          width,\n          height,\n          padding: \"88px 64px 64px 64px\",\n          flexDirection: \"column\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          gap: \"8px\",\n          borderRadius: \"12px\",\n          border: \"2px dashed #D9D9D9\",\n          background: \"var(--Grey-White, #FFF)\",\n          boxSizing: \"border-box\",\n        }}\n      >\n        {/* Spinner */}\n        <ThreeCirclesSpinner size={48} />\n\n        {/* Title */}\n        <p\n          style={{\n            fontSize: \"16px\",\n            fontWeight: 600,\n            color: \"var(--Base-Strong, #2E3236)\",\n            margin: 0,\n            lineHeight: \"normal\",\n            textAlign: \"center\",\n          }}\n        >\n          {title}\n        </p>\n\n        {/* Subtitle */}\n        <p\n          style={{\n            fontSize: \"13px\",\n            fontWeight: 400,\n            color: \"var(--Grey-Strong, #808183)\",\n            margin: 0,\n            lineHeight: \"140%\",\n            textAlign: \"center\",\n          }}\n        >\n          {subtitle}\n        </p>\n\n        {/* Optional progress bar */}\n        {progress !== undefined && (\n          <div\n            style={{\n              width: \"200px\",\n              height: \"4px\",\n              borderRadius: \"2px\",\n              background: \"#ECEEF2\",\n              marginTop: \"8px\",\n              overflow: \"hidden\",\n            }}\n          >\n            <div\n              style={{\n                width: `${Math.min(100, Math.max(0, progress))}%`,\n                height: \"100%\",\n                borderRadius: \"2px\",\n                background: \"var(--Green-Primary, #00A66E)\",\n                transition: \"width 0.3s ease\",\n              }}\n            />\n          </div>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * FileUploadSuccessState — shows upload complete with folder-check icon.\n *\n * Props:\n *  - title        string      Main message (default \"File uploaded successfully!\")\n *  - subtitle     string      Secondary message (default \"13 files have been uploaded to your project\")\n *  - actionLabel  string      Button label (default \"Add more files\")\n *  - onAction     function    Button click callback\n *  - width        number|string  Container width (default 648)\n *  - height       number|string  Container height (default 281)\n */\nexport function FileUploadSuccessState({\n  title = \"File uploaded successfully!\",\n  subtitle = \"13 files have been uploaded to your project\",\n  actionLabel = \"Add more files\",\n  onAction,\n  width = 648,\n  height = 281,\n}) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        width,\n        height,\n        padding: \"88px 64px 64px 64px\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"12px\",\n        border: \"1px solid #D9D9D9\",\n        background: \"var(--Grey-White, #FFF)\",\n        boxSizing: \"border-box\",\n      }}\n    >\n      {/* Icon circle */}\n      <div\n        style={{\n          display: \"flex\",\n          width: \"64px\",\n          height: \"64px\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          borderRadius: \"9999px\",\n          background: \"var(--Focus-2, #FAF5E9)\",\n          flexShrink: 0,\n          marginBottom: \"8px\",\n        }}\n      >\n        <FolderCheck size={24} strokeWidth={2} color=\"var(--Base-Strong, #2E3236)\" />\n      </div>\n\n      {/* Title */}\n      <p\n        style={{\n          fontSize: \"16px\",\n          fontWeight: 600,\n          color: \"var(--Base-Strong, #2E3236)\",\n          margin: 0,\n          lineHeight: \"normal\",\n          textAlign: \"center\",\n        }}\n      >\n        {title}\n      </p>\n\n      {/* Subtitle */}\n      <p\n        style={{\n          fontSize: \"13px\",\n          fontWeight: 400,\n          color: \"var(--Grey-Strong, #808183)\",\n          margin: 0,\n          lineHeight: \"140%\",\n          textAlign: \"center\",\n        }}\n      >\n        {/* {subtitle} */}\n      </p>\n\n      {/* Action button */}\n      {actionLabel && onAction && (\n        <button\n          onClick={onAction}\n          style={{\n            display: \"flex\",\n            padding: \"8px 20px\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            gap: \"8px\",\n            borderRadius: \"6px\",\n            border: \"1px solid #D9D9D9\",\n            background: \"var(--Base-White, #FFF)\",\n            color: \"var(--Grey-Strong, #808183)\",\n            fontSize: \"14px\",\n            fontWeight: 500,\n            cursor: \"pointer\",\n            marginTop: \"8px\",\n            transition: \"all 0.15s ease\",\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.background = \"#ECEEF2\";\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n          }}\n        >\n          {actionLabel}\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["AutoSearch","options","value","onChange","placeholder","disabled","showSuggestions","styling","isAddNew","search","setSearch","useState","isOpen","setIsOpen","addedOption","setAddedOption","containerRef","useRef","filteredOptions","useMemo","lower","opt","label","val","exactMatchExists","useEffect","handleClickOutside","event","handleSelect","handleAddNew","newOpt","handleClear","handleInputChange","e","newValue","handleInputFocus","shouldShowDropdown","jsxs","jsx","Search","TextInput","SmallButton","X","PlusCircle","SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","drawerRef","handleKey","Fragment","DrawerButton","variant","onClick","isPrimary","DrawerLabel","htmlFor","DrawerInput","props","_a","ThreeCirclesSpinner","size","FileUploadingState","progress","FileUploadSuccessState","actionLabel","onAction","FolderCheck"],"mappings":";;;;;AAOA,MAAMA,IAAa,CAAC;AAAA,EAClB,SAAAC,IAAU,CAAC;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC,IAAW;AACb,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAE,GACjC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,IAAI,GAE7CK,IAAeC,EAAO,IAAI,GAE1BC,IAAkBC,EAAQ,MAAM;AACpC,QAAI,CAACb;AAAiB,aAAO;AACvB,UAAAc,IAAQX,EAAO;AAEd,WAAAR,EAAQ,OAAO,CAACoB,MAAQ;AAC7B,UAAI,CAACA;AAAY,eAAA;AACX,YAAAC,IAAQD,EAAI,SAAS,IACrBE,IAAMF,EAAI,SAAS;AACzB,cACGC,EAAM,YAAY,EAAE,SAASF,CAAK,KACjCG,EAAI,YAAA,EAAc,SAASH,CAAK,OACjC,CAACN,KAAeO,EAAI,UAAUP,EAAY;AAAA,IAAA,CAE9C;AAAA,KACA,CAACL,GAAQR,GAASK,GAAiBQ,CAAW,CAAC,GAE5CU,IAAmBL,EAAQ,MAAM;AACrC,QAAI,CAACX;AAAiB,aAAA;AAChB,UAAAY,IAAQX,EAAO;AACd,WAAAR,EAAQ,KAAK,CAACoB,MAAQ;AAC3B,UAAI,CAACA;AAAY,eAAA;AACX,YAAAC,IAAQD,EAAI,SAAS,IACrBE,IAAMF,EAAI,SAAS;AACzB,aAAOC,EAAM,kBAAkBF,KAASG,EAAI,YAAkB,MAAAH;AAAA,IAAA,CAC/D;AAAA,EACA,GAAA,CAACnB,GAASQ,GAAQD,CAAQ,CAAC;AAG9B,EAAAiB,EAAU,MAAM;AACd,QAAI,CAACb;AAAQ;AACP,UAAAc,IAAqB,CAACC,MAAU;AAElC,MAAAX,EAAa,WACb,CAACA,EAAa,QAAQ,SAASW,EAAM,MAAM,KAE3Cd,EAAU,EAAK;AAAA,IACjB;AAEO,oBAAA,iBAAiB,aAAaa,CAAkB,GAClD,MAAM,SAAS,oBAAoB,aAAaA,CAAkB;AAAA,EAAA,GACxE,CAACd,CAAM,CAAC;AAEL,QAAAgB,IAAe,CAACP,MAAQ;AAC5B,IAAAlB,KAAA,QAAAA,EAAWkB,IACXX,EAAU,EAAE,GACZG,EAAU,EAAK,GACfE,EAAe,IAAI;AAAA,EAAA,GAGfc,IAAe,MAAM;AACzB,UAAMC,IAAS,EAAE,OAAOrB,GAAQ,OAAOA,EAAO;AAC9C,IAAAM,EAAee,CAAM,GACrB3B,KAAA,QAAAA,EAAW2B,IACXjB,EAAU,EAAK,GACfH,EAAU,EAAE;AAAA,EAAA,GAGRqB,IAAc,MAAM;AACxB,IAAA5B,KAAA,QAAAA,EAAW,OACXO,EAAU,EAAE,GACZG,EAAU,EAAK,GACfE,EAAe,IAAI;AAAA,EAAA,GAGfiB,IAAoB,CAACC,MAAM;AACzB,UAAAC,IAAWD,EAAE,OAAO;AAC1B,IAAI3B,KACFI,EAAUwB,CAAQ,GAClBrB,EAAU,EAAI,KACLL,KACTE,EAAUwB,CAAQ,GACRrB,EAAAqB,EAAS,UAAU,CAAC,KAE9B/B,KAAA,QAAAA,EAAW+B;AAAA,EACb,GAGIC,IAAmB,MAAM;AAC7B,KAAI7B,KAAmBE,MACrBK,EAAU,EAAI;AAAA,EAChB,GAGIuB,IACJxB,KAAU,CAACV,KAA4BO,EAAO,UAAU;AAE1D,SACG,gBAAA4B,EAAA,OAAA,EAAI,WAAU,mBAAkB,KAAKrB,GACpC,UAAA;AAAA,IAAA,gBAAAqB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WACE9B,KAEI;AAAA,QAGN,UAAA;AAAA,UAAC,gBAAA+B,EAAAC,GAAA,EAAO,WAAU,wBAAwB,CAAA;AAAA,UACzC,gBAAAD,EAAA,OAAA,EAAI,WAAU,UACZ,eAAmBpC,IAClB,gBAAAoC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAOpC,EAAM;AAAA,cACb,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,YAAY;AAAA,gBACZ,eAAe;AAAA,gBACf,gBAAgB;AAAA,gBAChB,YAAY;AAAA,cACd;AAAA,cAEC,UAAMA,EAAA;AAAA,YAAA;AAAA,UAAA,IAGT,gBAAAoC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,OAAOlC,KAAmBE,IAAWC,IAASP,KAAS;AAAA,cACvD,UAAU,CAACqB,MACTS,EAAkB,EAAE,QAAQ,EAAE,OAAOT,EAAI,GAAG;AAAA,cAE9C,aAAAnB;AAAA,cACA,UAAAC;AAAA,cACA,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT,iBAAiB;AAAA,cACnB;AAAA,cACA,SAAS8B;AAAA,YAAA;AAAA,UAAA,GAGf;AAAA,WACEjC,KAASY,MACT,gBAAAwB;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAASV;AAAA,cACT,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,QAAQ;AAAA,gBACR,iBAAiB;AAAA,gBACjB,OAAO;AAAA,cACT;AAAA,cAEA,UAAA,gBAAAO,EAACI,GAAE,EAAA,WAAU,UAAU,CAAA;AAAA,YAAA;AAAA,UACzB;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IAECN,KACC,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,WAAW;AAAA,UACX,WAAW;AAAA,UACX,QAAQ;AAAA,QACV;AAAA,QAEC,UAAA;AAAA,UAAgBnB,EAAA,SAAS,KACvB,gBAAAoB,EAAA,MAAA,EAAG,WAAU,qBACX,UAAApB,EAAgB,IAAI,CAACG,MACpB,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,SAAS,MAAMV,EAAaP,CAAG;AAAA,cAC/B,cAAc,CAACY,MAAM;AACjB,gBAAAA,EAAA,cAAc,MAAM,kBAAkB;AAAA,cAC1C;AAAA,cACA,cAAc,CAACA,MAAM;AACjB,gBAAAA,EAAA,cAAc,MAAM,kBAAkB;AAAA,cAC1C;AAAA,cACA,WAAU;AAAA,cACV,OAAOZ,EAAI;AAAA,cAEX,UAAA,gBAAAiB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,eAAe;AAAA,oBACf,YAAY;AAAA,oBACZ,eAAe;AAAA,oBACf,gBAAgB;AAAA,kBAClB;AAAA,kBAEC,UAAIjB,EAAA;AAAA,gBAAA;AAAA,cACP;AAAA,YAAA;AAAA,YAzBKA,EAAI;AAAA,UA2BZ,CAAA,GACH;AAAA,UAGDb,KACC,CAACgB,KACD,CAACV,KACDL,EAAO,UAAU,KACf,gBAAA4B;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,SAASZ;AAAA,cACT,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,gBAAgB;AAAA,gBAChB,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,cAAc;AAAA,gBACd,iBAAiB;AAAA,gBACjB,OAAO;AAAA,cACT;AAAA,cAEA,UAAA;AAAA,gBAAC,gBAAAS,EAAA,QAAA,EAAM,UAAQ,QAAA7B,CAAM,KAAI;AAAA,gBACzB,gBAAA6B,EAACK,GAAW,EAAA,WAAU,yBAAyB,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEN;AAAA,EAEJ,EAAA,CAAA;AAEJ;AChOA,SAAwBC,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,GAAG;AACK,QAAAC,IAAYvC,EAAO,IAAI;AAY7B,SATAQ,EAAU,MAAM;AACd,QAAI,CAACoB;AAAM;AACL,UAAAY,IAAY,CAACxB,MAAM;AACvB,MAAIA,EAAE,QAAQ,aAAoBa,KAAA,QAAAA;AAAA,IAAA;AAE3B,oBAAA,iBAAiB,WAAWW,CAAS,GACvC,MAAM,SAAS,oBAAoB,WAAWA,CAAS;AAAA,EAAA,GAC7D,CAACZ,GAAMC,CAAO,CAAC,GAEbD,IAKD,gBAAAR,EAAAqB,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAApB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASQ;AAAA,QACT,OAAO;AAAA,UACL,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,YAAY;AAAA,QACd;AAAA,MAAA;AAAA,IACF;AAAA,IAGA,gBAAAT;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKmB;AAAA,QACL,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,OAAAL;AAAA,UACA,QAAAC;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QAGA,UAAA;AAAA,UAAA,gBAAAf;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,OAAO;AAAA,gBACP,YAAY;AAAA,cACd;AAAA,cAEA,UAAA;AAAA,gBAAA,gBAAAC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,WAAW;AAAA,sBACX,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,YAAY;AAAA,oBACd;AAAA,oBAEC,UAAAS;AAAA,kBAAA;AAAA,gBACH;AAAA,gBACA,gBAAAT;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAASQ;AAAA,oBACT,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,gBAAgB;AAAA,sBAChB,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,cAAc;AAAA,sBACd,YAAY;AAAA,oBACd;AAAA,oBACA,cAAc,CAACb,MAAM;AACjB,sBAAAA,EAAA,cAAc,MAAM,aAAa;AAAA,oBACrC;AAAA,oBACA,cAAc,CAACA,MAAM;AACjB,sBAAAA,EAAA,cAAc,MAAM,aAAa;AAAA,oBACrC;AAAA,oBAEA,UAAC,gBAAAK,EAAAI,GAAA,EAAE,MAAM,IAAI,aAAa,GAAG;AAAA,kBAAA;AAAA,gBAC/B;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAGA,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,YAAY;AAAA,cACd;AAAA,YAAA;AAAA,UACF;AAAA,WAGEU,KAAYK,MACZ,gBAAAhB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,OAAO;AAAA,gBACP,KAAK;AAAA,gBACL,YAAY;AAAA,cACd;AAAA,cAEC,UAAA;AAAA,gBACCW,KAAA,gBAAAV;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,WAAW;AAAA,sBACX,YAAY;AAAA,sBACZ,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,MAAM;AAAA,oBACR;AAAA,oBAEC,UAAAU;AAAA,kBAAA;AAAA,gBACH;AAAA,gBAEDK,KACC,gBAAAhB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,KAAK;AAAA,sBACL,YAAY;AAAA,oBACd;AAAA,oBAGA,UAAA;AAAA,sBAAA,gBAAAC;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,SAAS,MAAMiB,KAAA,gBAAAA,EAAW,CAACD;AAAA,0BAC3B,OAAO;AAAA,4BACL,UAAU;AAAA,4BACV,OAAO;AAAA,4BACP,QAAQ;AAAA,4BACR,cAAc;AAAA,4BACd,QAAQ;AAAA,4BACR,YAAYA,IACR,gCACA;AAAA,4BACJ,QAAQ;AAAA,4BACR,YAAY;AAAA,4BACZ,SAAS;AAAA,4BACT,YAAY;AAAA,0BACd;AAAA,0BAEA,UAAA,gBAAAhB;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BACC,OAAO;AAAA,gCACL,UAAU;AAAA,gCACV,KAAK;AAAA,gCACL,MAAMgB,IAAgB,SAAS;AAAA,gCAC/B,OAAO;AAAA,gCACP,QAAQ;AAAA,gCACR,cAAc;AAAA,gCACd,YAAY;AAAA,gCACZ,YAAY;AAAA,gCACZ,WAAW;AAAA,8BACb;AAAA,4BAAA;AAAA,0BACF;AAAA,wBAAA;AAAA,sBACF;AAAA,sBACA,gBAAAhB;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,OAAO;AAAA,4BACL,UAAU;AAAA,4BACV,YAAY;AAAA,4BACZ,OAAO;AAAA,4BACP,YAAY;AAAA,0BACd;AAAA,0BAEC,UAAAe;AAAA,wBAAA;AAAA,sBACH;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,UAIF,gBAAAf;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,WAAW;AAAA,gBACX,SAAS;AAAA,gBACT,eAAe;AAAA,gBACf,KAAK;AAAA,gBACL,WAAW;AAAA,cACb;AAAA,cAEC,UAAAW;AAAA,YAAA;AAAA,UACH;AAAA,UAGCC,KAEG,gBAAAb,EAAAqB,GAAA,EAAA,UAAA;AAAA,YAAA,gBAAApB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,YAAY;AAAA,kBACZ,YAAY;AAAA,gBACd;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,KAAK;AAAA,kBACL,OAAO;AAAA,kBACP,YAAY;AAAA,gBACd;AAAA,gBAEC,UAAAY;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA,IA3NgB;AA6NpB;AAWO,SAASS,EAAa;AAAA,EAC3B,OAAArC;AAAA,EACA,SAAAsC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,UAAAxD;AACF,GAAG;AACD,QAAMyD,IAAYF,MAAY;AAG5B,SAAA,gBAAAtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAuB;AAAA,MACA,UAAAxD;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,cAAc;AAAA,QACd,QAAQyD,IAAY,SAAS;AAAA,QAC7B,YAAYA,IACR,gCACA;AAAA,QACJ,OAAOA,IAAY,SAAS;AAAA,QAC5B,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,QAAQzD,IAAW,YAAY;AAAA,QAC/B,SAASA,IAAW,MAAM;AAAA,QAC1B,YAAY;AAAA,MACd;AAAA,MACA,cAAc,CAAC4B,MAAM;AACf,QAAA,CAAC5B,KAAY,CAACyD,MACd7B,EAAA,cAAc,MAAM,aAAa;AAAA,MAEvC;AAAA,MACA,cAAc,CAACA,MAAM;AACf,QAAA,CAAC5B,KAAY,CAACyD,MACd7B,EAAA,cAAc,MAAM,aAAa;AAAA,MAEvC;AAAA,MAEC,UAAAX;AAAA,IAAA;AAAA,EAAA;AAGP;AASO,SAASyC,EAAY,EAAE,UAAAd,GAAU,SAAAe,KAAW;AAE/C,SAAA,gBAAA1B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAA0B;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,cAAc;AAAA,MAChB;AAAA,MAEC,UAAAf;AAAA,IAAA;AAAA,EAAA;AAGP;AAQO,SAASgB,EAAYC,GAAO;AAE/B,SAAA,gBAAA5B;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG4B;AAAA,MACJ,OAAO;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,QACT,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAGA,EAAM;AAAA,MACX;AAAA,MACA,SAAS,CAACjC,MAAM;;AACZ,QAAAA,EAAA,cAAc,MAAM,cAAc,YACpCkC,IAAAD,EAAM,YAAN,QAAAC,EAAA,KAAAD,GAAgBjC;AAAA,MAClB;AAAA,MACA,QAAQ,CAACA,MAAM;;AACX,QAAAA,EAAA,cAAc,MAAM,cAAc,YACpCkC,IAAAD,EAAM,WAAN,QAAAC,EAAA,KAAAD,GAAejC;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGN;AC1XA,SAASmC,EAAoB,EAAE,MAAAC,IAAO,MAAM;AAExC,SAAA,gBAAAhC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAOgC;AAAA,MACP,QAAQA;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,OAAO,EAAE,WAAW,wCAAwC;AAAA,MAE5D,UAAA;AAAA,QAAA,gBAAA/B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAChB;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAChB;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAYA,SAAwBgC,EAAmB;AAAA,EACzC,OAAAvB,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,UAAAuB;AAAA,EACA,OAAApB,IAAQ;AAAA,EACR,QAAAC,IAAS;AACX,GAAG;AACD,SAEI,gBAAAf,EAAAqB,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAApB,EAAC,SAAO,EAAA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAKN;AAAA,IAEF,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,OAAAc;AAAA,UACA,QAAAC;AAAA,UACA,SAAS;AAAA,UACT,eAAe;AAAA,UACf,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QAGA,UAAA;AAAA,UAAC,gBAAAd,EAAA8B,GAAA,EAAoB,MAAM,GAAI,CAAA;AAAA,UAG/B,gBAAA9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,WAAW;AAAA,cACb;AAAA,cAEC,UAAAS;AAAA,YAAA;AAAA,UACH;AAAA,UAGA,gBAAAT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,WAAW;AAAA,cACb;AAAA,cAEC,UAAAU;AAAA,YAAA;AAAA,UACH;AAAA,UAGCuB,MAAa,UACZ,gBAAAjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,cAAc;AAAA,gBACd,YAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,UAAU;AAAA,cACZ;AAAA,cAEA,UAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGiC,CAAQ,CAAC,CAAC;AAAA,oBAC9C,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,YAAY;AAAA,oBACZ,YAAY;AAAA,kBACd;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA;AAEJ;AAaO,SAASC,EAAuB;AAAA,EACrC,OAAAzB,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,aAAAyB,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,OAAAvB,IAAQ;AAAA,EACR,QAAAC,IAAS;AACX,GAAG;AAEC,SAAA,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAAc;AAAA,QACA,QAAAC;AAAA,QACA,SAAS;AAAA,QACT,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,WAAW;AAAA,MACb;AAAA,MAGA,UAAA;AAAA,QAAA,gBAAAd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,cAAc;AAAA,YAChB;AAAA,YAEA,4BAACqC,GAAY,EAAA,MAAM,IAAI,aAAa,GAAG,OAAM,+BAA8B;AAAA,UAAA;AAAA,QAC7E;AAAA,QAGA,gBAAArC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,YAAY;AAAA,cACZ,WAAW;AAAA,YACb;AAAA,YAEC,UAAAS;AAAA,UAAA;AAAA,QACH;AAAA,QAGA,gBAAAT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,YAAY;AAAA,cACZ,WAAW;AAAA,YACb;AAAA,UAAA;AAAA,QAGF;AAAA,QAGCmC,KAAeC,KACd,gBAAApC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAASoC;AAAA,YACT,OAAO;AAAA,cACL,SAAS;AAAA,cACT,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,cAAc;AAAA,cACd,QAAQ;AAAA,cACR,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,WAAW;AAAA,cACX,YAAY;AAAA,YACd;AAAA,YACA,cAAc,CAACzC,MAAM;AACjB,cAAAA,EAAA,cAAc,MAAM,aAAa;AAAA,YACrC;AAAA,YACA,cAAc,CAACA,MAAM;AACjB,cAAAA,EAAA,cAAc,MAAM,aAAa;AAAA,YACrC;AAAA,YAEC,UAAAwC;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/IntegrationCard.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime");require("react");const r=require("lucide-react");function p({providerName:n,description:c,status:o="available",railColor:i,logoUrl:s,icon:d,onConfigure:l}){const a={connected:{label:"Connected",color:"#6B7C93",bgColor:"rgba(107, 124, 147, 0.08)",borderColor:"rgba(107, 124, 147, 0.20)",icon:e.jsx(r.CheckCircle2,{size:14,strokeWidth:2.5})},available:{label:"Available",color:"#1E2125",bgColor:"rgba(30, 33, 37, 0.04)",borderColor:"rgba(30, 33, 37, 0.12)",icon:e.jsx(r.Circle,{size:14,strokeWidth:2})},"coming-soon":{label:"Coming Soon",color:"rgba(30, 33, 37, 0.42)",bgColor:"transparent",borderColor:"rgba(30, 33, 37, 0.12)",icon:e.jsx(r.Circle,{size:14,strokeWidth:2,style:{opacity:.4}})}},t=a[o]||a.available;return e.jsxs("div",{style:{background:"#FFFFFF",border:`1px solid ${i}20`,borderRadius:"8px",position:"relative",display:"flex",flexDirection:"column",transition:"all 0.15s ease",cursor:o==="coming-soon"?"default":"pointer",opacity:o==="coming-soon"?.6:1,overflow:"hidden",height:"100%"},className:"hover:shadow-sm",children:[e.jsx("div",{style:{position:"absolute",left:0,top:0,bottom:0,width:"4px",background:i,opacity:o==="coming-soon"?.4:1}}),e.jsxs("div",{style:{padding:"20px",paddingLeft:"24px",display:"flex",flexDirection:"column",gap:"16px",height:"100%"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:"12px"},children:[e.jsx("div",{style:{width:"48px",height:"48px",borderRadius:"6px",background:`${i}08`,border:`1px solid ${i}18`,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:s?e.jsx("img",{src:s,alt:n,style:{width:"32px",height:"32px",objectFit:"contain"}}):e.jsx("div",{style:{color:i,fontSize:"20px",fontWeight:650,opacity:.8},children:d||(n?n.charAt(0):"")})}),e.jsxs("div",{style:{display:"inline-flex",alignItems:"center",gap:"6px",padding:"4px 10px",borderRadius:"4px",background:t.bgColor,border:`1px solid ${t.borderColor}`,fontSize:"11px",fontWeight:600,letterSpacing:"0.01em",color:t.color,flexShrink:0},children:[t.icon,t.label]})]}),e.jsxs("div",{style:{flex:1,minHeight:0},children:[e.jsx("h3",{style:{fontSize:"15px",fontWeight:650,color:"rgba(30, 33, 37, 0.92)",marginBottom:"6px",letterSpacing:"-0.01em"},children:n}),e.jsx("p",{style:{fontSize:"13px",lineHeight:1.5,color:"rgba(30, 33, 37, 0.65)"},children:c})]}),o!=="coming-soon"&&e.jsxs("button",{onClick:g=>{g.stopPropagation(),l==null||l()},style:{display:"flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"8px 14px",border:"1px solid rgba(30, 33, 37, 0.15)",borderRadius:"5px",background:o==="connected"?"transparent":"rgba(30, 33, 37, 0.03)",fontSize:"13px",fontWeight:600,color:"rgba(30, 33, 37, 0.92)",cursor:"pointer",transition:"all 0.15s ease",width:"100%",marginTop:"auto"},className:"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]",children:[e.jsx(r.Settings,{size:14,strokeWidth:2.5}),o==="connected"?"Configure":"Connect"]})]})]})}exports.IntegrationCard=p;
+"use strict";const e=require("react/jsx-runtime");require("react");const r=require("lucide-react");function u({providerName:l,description:p,status:o="available",logoUrl:s,icon:c,onConnect:a,onConfigure:d}){const x=o==="connected",n=o==="coming-soon",g={connected:{label:"Connected",color:"var(--Grey-White, #FFF)",bgColor:"var(--Green-Primary, #00A66E)",icon:e.jsx(r.CheckCircle2,{size:16,strokeWidth:2,color:"#FFF"}),actionLabel:"Disconnect",actionFilled:!1},available:{label:"Available",color:"var(--Grey-Strong, #808183)",icon:e.jsx(r.CloudDownload,{size:16,strokeWidth:2}),actionLabel:"Connect",actionFilled:!0},"coming-soon":{label:"Coming Soon",color:"var(--Grey-Muted, #B2AEA8)",icon:e.jsx(r.CloudOff,{size:16,strokeWidth:2}),actionLabel:"Connect",actionFilled:!1}},t=g[o]||g.available;return e.jsxs("div",{style:{display:"flex",width:"317px",height:"160px",padding:"16px",flexDirection:"column",alignItems:"flex-start",gap:"10px",borderRadius:"4px",border:"1px solid #D9D9D9",background:"var(--Base-White, #FFF)"},children:[e.jsxs("div",{style:{flex:1,width:"100%"},children:[e.jsx("div",{style:{marginBottom:"4px"},children:s?e.jsx("img",{src:s,alt:l,style:{height:"24px",objectFit:"contain"}}):c?e.jsx("div",{style:{display:"flex",alignItems:"center"},children:c}):e.jsx("h3",{style:{fontSize:"16px",fontWeight:700,color:"var(--Base-Strong, #1E2125)",margin:0,lineHeight:1.3},children:l})}),e.jsx("p",{style:{fontSize:"13px",lineHeight:1.4,color:"var(--Grey-Strong, #808183)",margin:0},children:p})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",padding:t.bgColor?"4px 8px 4px 6px":"0",alignItems:"center",gap:"4px",borderRadius:t.bgColor?"16px":"0",background:t.bgColor||"transparent",fontSize:"12px",fontStyle:"normal",fontWeight:400,lineHeight:"16px",color:t.color},children:[t.icon,t.label]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[x&&d&&e.jsx("button",{onClick:i=>{i.stopPropagation(),d()},style:{display:"flex",alignItems:"center",justifyContent:"center",width:"32px",height:"32px",border:"none",background:"transparent",color:"var(--Grey-Strong, #808183)",cursor:"pointer",borderRadius:"4px",transition:"background 0.15s ease"},onMouseEnter:i=>{i.currentTarget.style.background="rgba(0,0,0,0.04)"},onMouseLeave:i=>{i.currentTarget.style.background="transparent"},children:e.jsx(r.Settings2,{size:20,strokeWidth:2})}),e.jsx("button",{onClick:i=>{i.stopPropagation(),a==null||a()},disabled:n,style:{display:"flex",height:"28px",padding:"10px",justifyContent:"center",alignItems:"center",gap:"10px",borderRadius:"10px",border:t.actionFilled?"1px solid transparent":"1px solid #D9D9D9",background:n?"var(--Grey-Muted, #B2AEA8)":t.actionFilled?"var(--Base-Strong, #1E2125)":"var(--Base-White, #FFF)",color:t.actionFilled||n?"#FFF":"var(--Base-Strong, #1E2125)",fontSize:"13px",fontWeight:600,cursor:n?"default":"pointer",opacity:n?.6:1,transition:"all 0.15s ease",lineHeight:1.4},onMouseEnter:i=>{!n&&!t.actionFilled&&(i.currentTarget.style.background="rgba(0,0,0,0.04)")},onMouseLeave:i=>{!n&&!t.actionFilled&&(i.currentTarget.style.background="var(--Base-White, #FFF)")},children:t.actionLabel})]})]})]})}exports.IntegrationCard=u;
 //# sourceMappingURL=IntegrationCard.cjs.js.map

package/dist/IntegrationCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Circle, Settings } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  railColor,\n  logoUrl,\n  icon,\n  onConfigure,\n}) {\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"#6B7C93\",\n      bgColor: \"rgba(107, 124, 147, 0.08)\",\n      borderColor: \"rgba(107, 124, 147, 0.20)\",\n      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,\n    },\n    available: {\n      label: \"Available\",\n      color: \"#1E2125\",\n      bgColor: \"rgba(30, 33, 37, 0.04)\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} />,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"rgba(30, 33, 37, 0.42)\",\n      bgColor: \"transparent\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        background: \"#FFFFFF\",\n        border: `1px solid ${railColor}20`,\n        borderRadius: \"8px\",\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        transition: \"all 0.15s ease\",\n        cursor: status === \"coming-soon\" ? \"default\" : \"pointer\",\n        opacity: status === \"coming-soon\" ? 0.6 : 1,\n        overflow: \"hidden\",\n        height: \"100%\",\n      }}\n      className=\"hover:shadow-sm\"\n    >\n      {/* Rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"4px\",\n          background: railColor,\n          opacity: status === \"coming-soon\" ? 0.4 : 1,\n        }}\n      />\n\n      {/* Content wrapper with padding */}\n      <div\n        style={{\n          padding: \"20px\",\n          paddingLeft: \"24px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"16px\",\n          height: \"100%\",\n        }}\n      >\n        {/* Header: Logo + Status */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            justifyContent: \"space-between\",\n            gap: \"12px\",\n          }}\n        >\n          {/* Logo/Icon */}\n          <div\n            style={{\n              width: \"48px\",\n              height: \"48px\",\n              borderRadius: \"6px\",\n              background: `${railColor}08`,\n              border: `1px solid ${railColor}18`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {logoUrl ? (\n              <img\n                src={logoUrl}\n                alt={providerName}\n                style={{ width: \"32px\", height: \"32px\", objectFit: \"contain\" }}\n              />\n            ) : (\n              <div\n                style={{\n                  color: railColor,\n                  fontSize: \"20px\",\n                  fontWeight: 650,\n                  opacity: 0.8,\n                }}\n              >\n                {icon || (providerName ? providerName.charAt(0) : \"\")}\n              </div>\n            )}\n          </div>\n\n          {/* Status Badge */}\n          <div\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: \"6px\",\n              padding: \"4px 10px\",\n              borderRadius: \"4px\",\n              background: config.bgColor,\n              border: `1px solid ${config.borderColor}`,\n              fontSize: \"11px\",\n              fontWeight: 600,\n              letterSpacing: \"0.01em\",\n              color: config.color,\n              flexShrink: 0,\n            }}\n          >\n            {config.icon}\n            {config.label}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={{ flex: 1, minHeight: 0 }}>\n          <h3\n            style={{\n              fontSize: \"15px\",\n              fontWeight: 650,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              marginBottom: \"6px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {providerName}\n          </h3>\n          <p\n            style={{\n              fontSize: \"13px\",\n              lineHeight: 1.5,\n              color: \"rgba(30, 33, 37, 0.65)\",\n            }}\n          >\n            {description}\n          </p>\n        </div>\n\n        {/* Action Button - aligned to bottom */}\n        {status !== \"coming-soon\" && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConfigure?.();\n            }}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"8px\",\n              padding: \"8px 14px\",\n              border: \"1px solid rgba(30, 33, 37, 0.15)\",\n              borderRadius: \"5px\",\n              background: status === \"connected\" ? \"transparent\" : \"rgba(30, 33, 37, 0.03)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              width: \"100%\",\n              marginTop: \"auto\",\n            }}\n            className=\"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]\"\n          >\n            <Settings size={14} strokeWidth={2.5} />\n            {status === \"connected\" ? \"Configure\" : \"Connect\"}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["IntegrationCard","providerName","description","status","railColor","logoUrl","icon","onConfigure","statusConfig","jsx","CheckCircle2","Circle","config","jsxs","e","Settings"],"mappings":"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"}
+{"version":3,"file":"IntegrationCard.cjs.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n *  - providerName   string      Provider display name\n *  - description    string      Short description / subtitle\n *  - status         string      \"available\" | \"connected\" | \"coming-soon\"\n *  - logoUrl        string      Optional logo image URL\n *  - icon           ReactNode   Optional custom icon/logo element\n *  - onConnect      function    Connect/Disconnect callback\n *  - onConfigure    function    Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  logoUrl,\n  icon,\n  onConnect,\n  onConfigure,\n}) {\n  const isConnected = status === \"connected\";\n  const isComingSoon = status === \"coming-soon\";\n\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"var(--Grey-White, #FFF)\",\n      bgColor: \"var(--Green-Primary, #00A66E)\",\n      icon: <CheckCircle2 size={16} strokeWidth={2} color=\"#FFF\" />,\n      actionLabel: \"Disconnect\",\n      actionFilled: false,\n    },\n    available: {\n      label: \"Available\",\n      color: \"var(--Grey-Strong, #808183)\",\n      icon: <CloudDownload size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: true,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"var(--Grey-Muted, #B2AEA8)\",\n      icon: <CloudOff size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: false,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        width: \"317px\",\n        height: \"160px\",\n        padding: \"16px\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        gap: \"10px\",\n        borderRadius: \"4px\",\n        border: \"1px solid #D9D9D9\",\n        background: \"var(--Base-White, #FFF)\",\n      }}\n    >\n      {/* Top: Name + Description */}\n      <div style={{ flex: 1, width: \"100%\" }}>\n        {/* Provider Name / Logo */}\n        <div style={{ marginBottom: \"4px\" }}>\n          {logoUrl ? (\n            <img\n              src={logoUrl}\n              alt={providerName}\n              style={{ height: \"24px\", objectFit: \"contain\" }}\n            />\n          ) : icon ? (\n            <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n          ) : (\n            <h3\n              style={{\n                fontSize: \"16px\",\n                fontWeight: 700,\n                color: \"var(--Base-Strong, #1E2125)\",\n                margin: 0,\n                lineHeight: 1.3,\n              }}\n            >\n              {providerName}\n            </h3>\n          )}\n        </div>\n        {/* Description */}\n        <p\n          style={{\n            fontSize: \"13px\",\n            lineHeight: 1.4,\n            color: \"var(--Grey-Strong, #808183)\",\n            margin: 0,\n          }}\n        >\n          {description}\n        </p>\n      </div>\n\n      {/* Bottom: Status + Actions */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          width: \"100%\",\n          gap: \"8px\",\n        }}\n      >\n        {/* Status label */}\n        <div\n          style={{\n            display: \"flex\",\n            padding: config.bgColor ? \"4px 8px 4px 6px\" : \"0\",\n            alignItems: \"center\",\n            gap: \"4px\",\n            borderRadius: config.bgColor ? \"16px\" : \"0\",\n            background: config.bgColor || \"transparent\",\n            fontSize: \"12px\",\n            fontStyle: \"normal\",\n            fontWeight: 400,\n            lineHeight: \"16px\",\n            color: config.color,\n          }}\n        >\n          {config.icon}\n          {config.label}\n        </div>\n\n        {/* Action area */}\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n          {/* Settings icon for connected */}\n          {isConnected && onConfigure && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onConfigure();\n              }}\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                width: \"32px\",\n                height: \"32px\",\n                border: \"none\",\n                background: \"transparent\",\n                color: \"var(--Grey-Strong, #808183)\",\n                cursor: \"pointer\",\n                borderRadius: \"4px\",\n                transition: \"background 0.15s ease\",\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.background = \"transparent\";\n              }}\n            >\n              <Settings2 size={20} strokeWidth={2} />\n            </button>\n          )}\n\n          {/* Connect / Disconnect button */}\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConnect?.();\n            }}\n            disabled={isComingSoon}\n            style={{\n              display: \"flex\",\n              height: \"28px\",\n              padding: \"10px\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              gap: \"10px\",\n              borderRadius: \"10px\",\n              border: config.actionFilled\n                ? \"1px solid transparent\"\n                : \"1px solid #D9D9D9\",\n              background: isComingSoon\n                ? \"var(--Grey-Muted, #B2AEA8)\"\n                : config.actionFilled\n                ? \"var(--Base-Strong, #1E2125)\"\n                : \"var(--Base-White, #FFF)\",\n              color: config.actionFilled || isComingSoon\n                ? \"#FFF\"\n                : \"var(--Base-Strong, #1E2125)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              cursor: isComingSoon ? \"default\" : \"pointer\",\n              opacity: isComingSoon ? 0.6 : 1,\n              transition: \"all 0.15s ease\",\n              lineHeight: 1.4,\n            }}\n            onMouseEnter={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n              }\n            }}\n          >\n            {config.actionLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":"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"}

package/dist/IntegrationCard.es.js

@@ -1,209 +1,186 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import "react";
-import { Settings as b, CheckCircle2 as x, Circle as d } from "lucide-react";
+import { Settings2 as h, CheckCircle2 as b, CloudDownload as u, CloudOff as y } from "lucide-react";
 function m({
-  providerName: r,
-  description: s,
-  status: o = "available",
-  railColor: t,
-  logoUrl: a,
-  icon: p,
-  onConfigure: l
+  providerName: l,
+  description: p,
+  status: r = "available",
+  logoUrl: s,
+  icon: c,
+  onConnect: a,
+  onConfigure: d
 }) {
-  const c = {
+  const x = r === "connected", n = r === "coming-soon", g = {
     connected: {
       label: "Connected",
-      color: "#6B7C93",
-      bgColor: "rgba(107, 124, 147, 0.08)",
-      borderColor: "rgba(107, 124, 147, 0.20)",
-      icon: /* @__PURE__ */ e(x, { size: 14, strokeWidth: 2.5 })
+      color: "var(--Grey-White, #FFF)",
+      bgColor: "var(--Green-Primary, #00A66E)",
+      icon: /* @__PURE__ */ i(b, { size: 16, strokeWidth: 2, color: "#FFF" }),
+      actionLabel: "Disconnect",
+      actionFilled: !1
     },
     available: {
       label: "Available",
-      color: "#1E2125",
-      bgColor: "rgba(30, 33, 37, 0.04)",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: /* @__PURE__ */ e(d, { size: 14, strokeWidth: 2 })
+      color: "var(--Grey-Strong, #808183)",
+      icon: /* @__PURE__ */ i(u, { size: 16, strokeWidth: 2 }),
+      actionLabel: "Connect",
+      actionFilled: !0
     },
     "coming-soon": {
       label: "Coming Soon",
-      color: "rgba(30, 33, 37, 0.42)",
-      bgColor: "transparent",
-      borderColor: "rgba(30, 33, 37, 0.12)",
-      icon: /* @__PURE__ */ e(d, { size: 14, strokeWidth: 2, style: { opacity: 0.4 } })
+      color: "var(--Grey-Muted, #B2AEA8)",
+      icon: /* @__PURE__ */ i(y, { size: 16, strokeWidth: 2 }),
+      actionLabel: "Connect",
+      actionFilled: !1
     }
-  }, n = c[o] || c.available;
-  return /* @__PURE__ */ i(
+  }, e = g[r] || g.available;
+  return /* @__PURE__ */ o(
     "div",
     {
       style: {
-        background: "#FFFFFF",
-        border: `1px solid ${t}20`,
-        borderRadius: "8px",
-        position: "relative",
         display: "flex",
+        width: "317px",
+        height: "160px",
+        padding: "16px",
         flexDirection: "column",
-        transition: "all 0.15s ease",
-        cursor: o === "coming-soon" ? "default" : "pointer",
-        opacity: o === "coming-soon" ? 0.6 : 1,
-        overflow: "hidden",
-        height: "100%"
+        alignItems: "flex-start",
+        gap: "10px",
+        borderRadius: "4px",
+        border: "1px solid #D9D9D9",
+        background: "var(--Base-White, #FFF)"
       },
-      className: "hover:shadow-sm",
       children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: "4px",
-              background: t,
-              opacity: o === "coming-soon" ? 0.4 : 1
+        /* @__PURE__ */ o("div", { style: { flex: 1, width: "100%" }, children: [
+          /* @__PURE__ */ i("div", { style: { marginBottom: "4px" }, children: s ? /* @__PURE__ */ i(
+            "img",
+            {
+              src: s,
+              alt: l,
+              style: { height: "24px", objectFit: "contain" }
             }
-          }
-        ),
-        /* @__PURE__ */ i(
+          ) : c ? /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center" }, children: c }) : /* @__PURE__ */ i(
+            "h3",
+            {
+              style: {
+                fontSize: "16px",
+                fontWeight: 700,
+                color: "var(--Base-Strong, #1E2125)",
+                margin: 0,
+                lineHeight: 1.3
+              },
+              children: l
+            }
+          ) }),
+          /* @__PURE__ */ i(
+            "p",
+            {
+              style: {
+                fontSize: "13px",
+                lineHeight: 1.4,
+                color: "var(--Grey-Strong, #808183)",
+                margin: 0
+              },
+              children: p
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(
           "div",
           {
             style: {
-              padding: "20px",
-              paddingLeft: "24px",
               display: "flex",
-              flexDirection: "column",
-              gap: "16px",
-              height: "100%"
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              gap: "8px"
             },
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ o(
                 "div",
                 {
                   style: {
                     display: "flex",
-                    alignItems: "flex-start",
-                    justifyContent: "space-between",
-                    gap: "12px"
+                    padding: e.bgColor ? "4px 8px 4px 6px" : "0",
+                    alignItems: "center",
+                    gap: "4px",
+                    borderRadius: e.bgColor ? "16px" : "0",
+                    background: e.bgColor || "transparent",
+                    fontSize: "12px",
+                    fontStyle: "normal",
+                    fontWeight: 400,
+                    lineHeight: "16px",
+                    color: e.color
                   },
                   children: [
-                    /* @__PURE__ */ e(
-                      "div",
-                      {
-                        style: {
-                          width: "48px",
-                          height: "48px",
-                          borderRadius: "6px",
-                          background: `${t}08`,
-                          border: `1px solid ${t}18`,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexShrink: 0
-                        },
-                        children: a ? /* @__PURE__ */ e(
-                          "img",
-                          {
-                            src: a,
-                            alt: r,
-                            style: { width: "32px", height: "32px", objectFit: "contain" }
-                          }
-                        ) : /* @__PURE__ */ e(
-                          "div",
-                          {
-                            style: {
-                              color: t,
-                              fontSize: "20px",
-                              fontWeight: 650,
-                              opacity: 0.8
-                            },
-                            children: p || (r ? r.charAt(0) : "")
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ i(
-                      "div",
-                      {
-                        style: {
-                          display: "inline-flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          padding: "4px 10px",
-                          borderRadius: "4px",
-                          background: n.bgColor,
-                          border: `1px solid ${n.borderColor}`,
-                          fontSize: "11px",
-                          fontWeight: 600,
-                          letterSpacing: "0.01em",
-                          color: n.color,
-                          flexShrink: 0
-                        },
-                        children: [
-                          n.icon,
-                          n.label
-                        ]
-                      }
-                    )
+                    e.icon,
+                    e.label
                   ]
                 }
               ),
-              /* @__PURE__ */ i("div", { style: { flex: 1, minHeight: 0 }, children: [
-                /* @__PURE__ */ e(
-                  "h3",
+              /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                x && d && /* @__PURE__ */ i(
+                  "button",
                   {
+                    onClick: (t) => {
+                      t.stopPropagation(), d();
+                    },
                     style: {
-                      fontSize: "15px",
-                      fontWeight: 650,
-                      color: "rgba(30, 33, 37, 0.92)",
-                      marginBottom: "6px",
-                      letterSpacing: "-0.01em"
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "32px",
+                      height: "32px",
+                      border: "none",
+                      background: "transparent",
+                      color: "var(--Grey-Strong, #808183)",
+                      cursor: "pointer",
+                      borderRadius: "4px",
+                      transition: "background 0.15s ease"
+                    },
+                    onMouseEnter: (t) => {
+                      t.currentTarget.style.background = "rgba(0,0,0,0.04)";
                     },
-                    children: r
+                    onMouseLeave: (t) => {
+                      t.currentTarget.style.background = "transparent";
+                    },
+                    children: /* @__PURE__ */ i(h, { size: 20, strokeWidth: 2 })
                   }
                 ),
-                /* @__PURE__ */ e(
-                  "p",
+                /* @__PURE__ */ i(
+                  "button",
                   {
+                    onClick: (t) => {
+                      t.stopPropagation(), a == null || a();
+                    },
+                    disabled: n,
                     style: {
+                      display: "flex",
+                      height: "28px",
+                      padding: "10px",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      gap: "10px",
+                      borderRadius: "10px",
+                      border: e.actionFilled ? "1px solid transparent" : "1px solid #D9D9D9",
+                      background: n ? "var(--Grey-Muted, #B2AEA8)" : e.actionFilled ? "var(--Base-Strong, #1E2125)" : "var(--Base-White, #FFF)",
+                      color: e.actionFilled || n ? "#FFF" : "var(--Base-Strong, #1E2125)",
                       fontSize: "13px",
-                      lineHeight: 1.5,
-                      color: "rgba(30, 33, 37, 0.65)"
+                      fontWeight: 600,
+                      cursor: n ? "default" : "pointer",
+                      opacity: n ? 0.6 : 1,
+                      transition: "all 0.15s ease",
+                      lineHeight: 1.4
                     },
-                    children: s
+                    onMouseEnter: (t) => {
+                      !n && !e.actionFilled && (t.currentTarget.style.background = "rgba(0,0,0,0.04)");
+                    },
+                    onMouseLeave: (t) => {
+                      !n && !e.actionFilled && (t.currentTarget.style.background = "var(--Base-White, #FFF)");
+                    },
+                    children: e.actionLabel
                   }
                 )
-              ] }),
-              o !== "coming-soon" && /* @__PURE__ */ i(
-                "button",
-                {
-                  onClick: (g) => {
-                    g.stopPropagation(), l == null || l();
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: "8px",
-                    padding: "8px 14px",
-                    border: "1px solid rgba(30, 33, 37, 0.15)",
-                    borderRadius: "5px",
-                    background: o === "connected" ? "transparent" : "rgba(30, 33, 37, 0.03)",
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    color: "rgba(30, 33, 37, 0.92)",
-                    cursor: "pointer",
-                    transition: "all 0.15s ease",
-                    width: "100%",
-                    marginTop: "auto"
-                  },
-                  className: "hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]",
-                  children: [
-                    /* @__PURE__ */ e(b, { size: 14, strokeWidth: 2.5 }),
-                    o === "connected" ? "Configure" : "Connect"
-                  ]
-                }
-              )
+              ] })
             ]
           }
         )

package/dist/IntegrationCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Circle, Settings } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  railColor,\n  logoUrl,\n  icon,\n  onConfigure,\n}) {\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"#6B7C93\",\n      bgColor: \"rgba(107, 124, 147, 0.08)\",\n      borderColor: \"rgba(107, 124, 147, 0.20)\",\n      icon: <CheckCircle2 size={14} strokeWidth={2.5} />,\n    },\n    available: {\n      label: \"Available\",\n      color: \"#1E2125\",\n      bgColor: \"rgba(30, 33, 37, 0.04)\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} />,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"rgba(30, 33, 37, 0.42)\",\n      bgColor: \"transparent\",\n      borderColor: \"rgba(30, 33, 37, 0.12)\",\n      icon: <Circle size={14} strokeWidth={2} style={{ opacity: 0.4 }} />,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        background: \"#FFFFFF\",\n        border: `1px solid ${railColor}20`,\n        borderRadius: \"8px\",\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        transition: \"all 0.15s ease\",\n        cursor: status === \"coming-soon\" ? \"default\" : \"pointer\",\n        opacity: status === \"coming-soon\" ? 0.6 : 1,\n        overflow: \"hidden\",\n        height: \"100%\",\n      }}\n      className=\"hover:shadow-sm\"\n    >\n      {/* Rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"4px\",\n          background: railColor,\n          opacity: status === \"coming-soon\" ? 0.4 : 1,\n        }}\n      />\n\n      {/* Content wrapper with padding */}\n      <div\n        style={{\n          padding: \"20px\",\n          paddingLeft: \"24px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"16px\",\n          height: \"100%\",\n        }}\n      >\n        {/* Header: Logo + Status */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"flex-start\",\n            justifyContent: \"space-between\",\n            gap: \"12px\",\n          }}\n        >\n          {/* Logo/Icon */}\n          <div\n            style={{\n              width: \"48px\",\n              height: \"48px\",\n              borderRadius: \"6px\",\n              background: `${railColor}08`,\n              border: `1px solid ${railColor}18`,\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            {logoUrl ? (\n              <img\n                src={logoUrl}\n                alt={providerName}\n                style={{ width: \"32px\", height: \"32px\", objectFit: \"contain\" }}\n              />\n            ) : (\n              <div\n                style={{\n                  color: railColor,\n                  fontSize: \"20px\",\n                  fontWeight: 650,\n                  opacity: 0.8,\n                }}\n              >\n                {icon || (providerName ? providerName.charAt(0) : \"\")}\n              </div>\n            )}\n          </div>\n\n          {/* Status Badge */}\n          <div\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: \"6px\",\n              padding: \"4px 10px\",\n              borderRadius: \"4px\",\n              background: config.bgColor,\n              border: `1px solid ${config.borderColor}`,\n              fontSize: \"11px\",\n              fontWeight: 600,\n              letterSpacing: \"0.01em\",\n              color: config.color,\n              flexShrink: 0,\n            }}\n          >\n            {config.icon}\n            {config.label}\n          </div>\n        </div>\n\n        {/* Content */}\n        <div style={{ flex: 1, minHeight: 0 }}>\n          <h3\n            style={{\n              fontSize: \"15px\",\n              fontWeight: 650,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              marginBottom: \"6px\",\n              letterSpacing: \"-0.01em\",\n            }}\n          >\n            {providerName}\n          </h3>\n          <p\n            style={{\n              fontSize: \"13px\",\n              lineHeight: 1.5,\n              color: \"rgba(30, 33, 37, 0.65)\",\n            }}\n          >\n            {description}\n          </p>\n        </div>\n\n        {/* Action Button - aligned to bottom */}\n        {status !== \"coming-soon\" && (\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConfigure?.();\n            }}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"8px\",\n              padding: \"8px 14px\",\n              border: \"1px solid rgba(30, 33, 37, 0.15)\",\n              borderRadius: \"5px\",\n              background: status === \"connected\" ? \"transparent\" : \"rgba(30, 33, 37, 0.03)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              color: \"rgba(30, 33, 37, 0.92)\",\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              width: \"100%\",\n              marginTop: \"auto\",\n            }}\n            className=\"hover:bg-[rgba(30,33,37,0.06)] hover:border-[rgba(30,33,37,0.20)]\"\n          >\n            <Settings size={14} strokeWidth={2.5} />\n            {status === \"connected\" ? \"Configure\" : \"Connect\"}\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"names":["IntegrationCard","providerName","description","status","railColor","logoUrl","icon","onConfigure","statusConfig","jsx","CheckCircle2","Circle","config","jsxs","e","Settings"],"mappings":";;;AASA,SAAwBA,EAAgB;AAAA,EACtC,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AACF,GAAG;AACD,QAAMC,IAAe;AAAA,IACnB,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAO,gBAAAC,EAAAC,GAAA,EAAa,MAAM,IAAI,aAAa,KAAK;AAAA,IAClD;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAO,gBAAAD,EAAAE,GAAA,EAAO,MAAM,IAAI,aAAa,GAAG;AAAA,IAC1C;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAO,gBAAAF,EAAAE,GAAA,EAAO,MAAM,IAAI,aAAa,GAAG,OAAO,EAAE,SAAS,IAAO,EAAA,CAAA;AAAA,IACnE;AAAA,EAAA,GAGIC,IAASJ,EAAaL,CAAM,KAAKK,EAAa;AAGlD,SAAA,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ,aAAaT,CAAS;AAAA,QAC9B,cAAc;AAAA,QACd,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQD,MAAW,gBAAgB,YAAY;AAAA,QAC/C,SAASA,MAAW,gBAAgB,MAAM;AAAA,QAC1C,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MACA,WAAU;AAAA,MAGV,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,MAAM;AAAA,cACN,KAAK;AAAA,cACL,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,YAAYL;AAAA,cACZ,SAASD,MAAW,gBAAgB,MAAM;AAAA,YAC5C;AAAA,UAAA;AAAA,QACF;AAAA,QAGA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,aAAa;AAAA,cACb,SAAS;AAAA,cACT,eAAe;AAAA,cACf,KAAK;AAAA,cACL,QAAQ;AAAA,YACV;AAAA,YAGA,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,KAAK;AAAA,kBACP;AAAA,kBAGA,UAAA;AAAA,oBAAA,gBAAAJ;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,OAAO;AAAA,0BACL,OAAO;AAAA,0BACP,QAAQ;AAAA,0BACR,cAAc;AAAA,0BACd,YAAY,GAAGL,CAAS;AAAA,0BACxB,QAAQ,aAAaA,CAAS;AAAA,0BAC9B,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,gBAAgB;AAAA,0BAChB,YAAY;AAAA,wBACd;AAAA,wBAEC,UACCC,IAAA,gBAAAI;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,KAAKJ;AAAA,4BACL,KAAKJ;AAAA,4BACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,UAAU;AAAA,0BAAA;AAAA,wBAAA,IAG/D,gBAAAQ;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,OAAO;AAAA,8BACL,OAAOL;AAAA,8BACP,UAAU;AAAA,8BACV,YAAY;AAAA,8BACZ,SAAS;AAAA,4BACX;AAAA,4BAEC,UAASE,MAAAL,IAAeA,EAAa,OAAO,CAAC,IAAI;AAAA,0BAAA;AAAA,wBACpD;AAAA,sBAAA;AAAA,oBAEJ;AAAA,oBAGA,gBAAAY;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,OAAO;AAAA,0BACL,SAAS;AAAA,0BACT,YAAY;AAAA,0BACZ,KAAK;AAAA,0BACL,SAAS;AAAA,0BACT,cAAc;AAAA,0BACd,YAAYD,EAAO;AAAA,0BACnB,QAAQ,aAAaA,EAAO,WAAW;AAAA,0BACvC,UAAU;AAAA,0BACV,YAAY;AAAA,0BACZ,eAAe;AAAA,0BACf,OAAOA,EAAO;AAAA,0BACd,YAAY;AAAA,wBACd;AAAA,wBAEC,UAAA;AAAA,0BAAOA,EAAA;AAAA,0BACPA,EAAO;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACV;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,cAGA,gBAAAC,EAAC,SAAI,OAAO,EAAE,MAAM,GAAG,WAAW,EAChC,GAAA,UAAA;AAAA,gBAAA,gBAAAJ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,OAAO;AAAA,sBACP,cAAc;AAAA,sBACd,eAAe;AAAA,oBACjB;AAAA,oBAEC,UAAAR;AAAA,kBAAA;AAAA,gBACH;AAAA,gBACA,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO;AAAA,sBACL,UAAU;AAAA,sBACV,YAAY;AAAA,sBACZ,OAAO;AAAA,oBACT;AAAA,oBAEC,UAAAP;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA,GACF;AAAA,cAGCC,MAAW,iBACV,gBAAAU;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,CAACC,MAAM;AACd,oBAAAA,EAAE,gBAAgB,GACJP,KAAA,QAAAA;AAAA,kBAChB;AAAA,kBACA,OAAO;AAAA,oBACL,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,KAAK;AAAA,oBACL,SAAS;AAAA,oBACT,QAAQ;AAAA,oBACR,cAAc;AAAA,oBACd,YAAYJ,MAAW,cAAc,gBAAgB;AAAA,oBACrD,UAAU;AAAA,oBACV,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,OAAO;AAAA,oBACP,WAAW;AAAA,kBACb;AAAA,kBACA,WAAU;AAAA,kBAEV,UAAA;AAAA,oBAAA,gBAAAM,EAACM,GAAS,EAAA,MAAM,IAAI,aAAa,KAAK;AAAA,oBACrCZ,MAAW,cAAc,cAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC1C;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"IntegrationCard.es.js","sources":["../src/components/layout/IntegrationCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { CheckCircle2, Settings2, CloudOff, CloudDownload } from \"lucide-react\";\n\n/**\n * IntegrationCard Component\n * Displays an integration provider card with status, logo, and configuration options\n *\n * Props:\n *  - providerName   string      Provider display name\n *  - description    string      Short description / subtitle\n *  - status         string      \"available\" | \"connected\" | \"coming-soon\"\n *  - logoUrl        string      Optional logo image URL\n *  - icon           ReactNode   Optional custom icon/logo element\n *  - onConnect      function    Connect/Disconnect callback\n *  - onConfigure    function    Configure (settings) callback — shown for connected\n */\nexport default function IntegrationCard({\n  providerName,\n  description,\n  status = \"available\",\n  logoUrl,\n  icon,\n  onConnect,\n  onConfigure,\n}) {\n  const isConnected = status === \"connected\";\n  const isComingSoon = status === \"coming-soon\";\n\n  const statusConfig = {\n    connected: {\n      label: \"Connected\",\n      color: \"var(--Grey-White, #FFF)\",\n      bgColor: \"var(--Green-Primary, #00A66E)\",\n      icon: <CheckCircle2 size={16} strokeWidth={2} color=\"#FFF\" />,\n      actionLabel: \"Disconnect\",\n      actionFilled: false,\n    },\n    available: {\n      label: \"Available\",\n      color: \"var(--Grey-Strong, #808183)\",\n      icon: <CloudDownload size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: true,\n    },\n    \"coming-soon\": {\n      label: \"Coming Soon\",\n      color: \"var(--Grey-Muted, #B2AEA8)\",\n      icon: <CloudOff size={16} strokeWidth={2} />,\n      actionLabel: \"Connect\",\n      actionFilled: false,\n    },\n  };\n\n  const config = statusConfig[status] || statusConfig.available;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        width: \"317px\",\n        height: \"160px\",\n        padding: \"16px\",\n        flexDirection: \"column\",\n        alignItems: \"flex-start\",\n        gap: \"10px\",\n        borderRadius: \"4px\",\n        border: \"1px solid #D9D9D9\",\n        background: \"var(--Base-White, #FFF)\",\n      }}\n    >\n      {/* Top: Name + Description */}\n      <div style={{ flex: 1, width: \"100%\" }}>\n        {/* Provider Name / Logo */}\n        <div style={{ marginBottom: \"4px\" }}>\n          {logoUrl ? (\n            <img\n              src={logoUrl}\n              alt={providerName}\n              style={{ height: \"24px\", objectFit: \"contain\" }}\n            />\n          ) : icon ? (\n            <div style={{ display: \"flex\", alignItems: \"center\" }}>{icon}</div>\n          ) : (\n            <h3\n              style={{\n                fontSize: \"16px\",\n                fontWeight: 700,\n                color: \"var(--Base-Strong, #1E2125)\",\n                margin: 0,\n                lineHeight: 1.3,\n              }}\n            >\n              {providerName}\n            </h3>\n          )}\n        </div>\n        {/* Description */}\n        <p\n          style={{\n            fontSize: \"13px\",\n            lineHeight: 1.4,\n            color: \"var(--Grey-Strong, #808183)\",\n            margin: 0,\n          }}\n        >\n          {description}\n        </p>\n      </div>\n\n      {/* Bottom: Status + Actions */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          width: \"100%\",\n          gap: \"8px\",\n        }}\n      >\n        {/* Status label */}\n        <div\n          style={{\n            display: \"flex\",\n            padding: config.bgColor ? \"4px 8px 4px 6px\" : \"0\",\n            alignItems: \"center\",\n            gap: \"4px\",\n            borderRadius: config.bgColor ? \"16px\" : \"0\",\n            background: config.bgColor || \"transparent\",\n            fontSize: \"12px\",\n            fontStyle: \"normal\",\n            fontWeight: 400,\n            lineHeight: \"16px\",\n            color: config.color,\n          }}\n        >\n          {config.icon}\n          {config.label}\n        </div>\n\n        {/* Action area */}\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}>\n          {/* Settings icon for connected */}\n          {isConnected && onConfigure && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                onConfigure();\n              }}\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                width: \"32px\",\n                height: \"32px\",\n                border: \"none\",\n                background: \"transparent\",\n                color: \"var(--Grey-Strong, #808183)\",\n                cursor: \"pointer\",\n                borderRadius: \"4px\",\n                transition: \"background 0.15s ease\",\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.background = \"transparent\";\n              }}\n            >\n              <Settings2 size={20} strokeWidth={2} />\n            </button>\n          )}\n\n          {/* Connect / Disconnect button */}\n          <button\n            onClick={(e) => {\n              e.stopPropagation();\n              onConnect?.();\n            }}\n            disabled={isComingSoon}\n            style={{\n              display: \"flex\",\n              height: \"28px\",\n              padding: \"10px\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              gap: \"10px\",\n              borderRadius: \"10px\",\n              border: config.actionFilled\n                ? \"1px solid transparent\"\n                : \"1px solid #D9D9D9\",\n              background: isComingSoon\n                ? \"var(--Grey-Muted, #B2AEA8)\"\n                : config.actionFilled\n                ? \"var(--Base-Strong, #1E2125)\"\n                : \"var(--Base-White, #FFF)\",\n              color: config.actionFilled || isComingSoon\n                ? \"#FFF\"\n                : \"var(--Base-Strong, #1E2125)\",\n              fontSize: \"13px\",\n              fontWeight: 600,\n              cursor: isComingSoon ? \"default\" : \"pointer\",\n              opacity: isComingSoon ? 0.6 : 1,\n              transition: \"all 0.15s ease\",\n              lineHeight: 1.4,\n            }}\n            onMouseEnter={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"rgba(0,0,0,0.04)\";\n              }\n            }}\n            onMouseLeave={(e) => {\n              if (!isComingSoon && !config.actionFilled) {\n                e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n              }\n            }}\n          >\n            {config.actionLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["IntegrationCard","providerName","description","status","logoUrl","icon","onConnect","onConfigure","isConnected","isComingSoon","statusConfig","CheckCircle2","jsx","CloudDownload","CloudOff","config","jsxs","e","Settings2"],"mappings":"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"}