Transaction: HsuXnYi...BS4V

{ "data": { "devs.near": { "widget": { "components.chips": { "": "const { Chip } = VM.require(\"devs.near/widget/components.Index\") || {\n Chip: () => <></>,\n};\nconst items = props.items ?? [];\nconst onSelect = props.onSelect ?? (() => {});\nconst [selectedItems, setSelectedItems] = useState([]);\nconst handleClick = (item) => {\n if (props.multiple) {\n if (!selectedItems.includes(item)) {\n setSelectedItems((prev) => [...prev, item]);\n } else if (selectedItems.includes(item)) {\n setSelectedItems((prev) => prev.filter((i) => i !== item));\n }\n } else {\n if (selectedItems !== item) {\n setSelectedItems(item);\n } else if (selectedItems === item) {\n setSelectedItems(null);\n }\n }\n};\nuseEffect(() => {\n onSelect(selectedItems);\n}, [selectedItems, onSelect]);\nif (items.length === 0) {\n return <div>No items passed</div>;\n}\nconst duplicates = items.filter((item, index) => items.indexOf(item) !== index);\nif (duplicates.length > 0) {\n return <div>Duplicate Items Found</div>;\n}\nreturn (\n <div className=\"d-flex align-items-center gap-2 flex-wrap\">\n {items.map((item) => (\n <Chip\n key={item}\n selected={\n props.multiple ? selectedItems.includes(item) : selectedItems === item\n }\n onClick={() => handleClick(item)}\n size={props.size}\n multiple={props.multiple}\n >\n {item}\n </Chip>\n ))}\n </div>\n);\n" }, "components.navbar.mobile-right": { "": "const { Avatar, Button, Logo } = VM.require(\n \"devs.near/widget/components.Index\"\n) || {\n Avatar: () => <></>,\n Button: () => <></>,\n Logo: () => <></>,\n};\nconst {\n Everything,\n X,\n GitFork,\n Sun,\n Moon,\n Check,\n FileCode,\n History,\n UserCircle,\n QRCode,\n Download,\n LogOut,\n} = VM.require(\"devs.near/widget/icons\") || {\n Everything: () => <></>,\n X: () => <></>,\n GitFork: () => <></>,\n Sun: () => <></>,\n Moon: () => <></>,\n Check: () => <></>,\n FileCode: () => <></>,\n History: () => <></>,\n UserCircle: () => <></>,\n QRCode: () => <></>,\n Download: () => <></>,\n LogOut: () => <></>,\n};\nconst Container = styled.div`\n display: none;\n @media (max-width: 768px) {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--bg, #fff);\n z-index: 1049;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n .close-button {\n svg {\n width: 28px;\n height: 28px;\n stroke-width: 0;\n }\n }\n }\n`;\nconst ProfileSection = styled.div`\n display: flex;\n padding: 24px 8px;\n flex-direction: column;\n align-items: stretch;\n gap: 10px;\n flex: 1 0 0;\n align-self: stretch;\n`;\nconst ProfileButtons = styled.div`\n display: flex;\n flex-direction: column;\n button {\n justify-content: flex-start;\n color: var(--dropdown-button-color, #1c2024);\n padding: 8px 12px 8px 8px;\n }\n`;\nconst OptionSection = styled.div`\n display: flex;\n padding: 8px;\n flex-direction: column;\n align-items: stretch;\n align-self: stretch;\n button {\n justify-content: flex-start;\n color: var(--dropdown-button-color, #1c2024);\n padding: 8px 12px 8px 8px;\n }\n`;\nconst Heading = styled.div`\n display: flex;\n padding: 16px 16px 8px 16px;\n margin: 0 8px;\n align-items: center;\n align-self: stretch;\n color: #8f8f8f;\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n`;\nconst Separator = styled.div`\n height: 1px;\n background: var(--separator-color, #e2e2e2);\n margin: 4px 0;\n width: 100%;\n`;\nconst UserInfo = styled.div`\n display: flex;\n flex-direction: column;\n padding: 0 16px;\n h6 {\n color: var(--color, #0d0d0d);\n font-family: Poppins, sans-serif;\n font-weight: 500;\n line-height: 150%; /* 24px */\n letter-spacing: -0.16px;\n margin: 0;\n }\n p {\n color: var(--color, #0d0d0d);\n font-family: Poppins, sans-serif;\n font-size: 14px;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n margin: 0;\n }\n`;\nconst MobileRight = ({ toggle, accountId }) => {\n const profile = Social.getr(`${accountId}/profile`);\n const theme = profile.every.theme ?? \"light\";\n return (\n <Container>\n <div className=\"d-flex align-items-center justify-content-between p-3\">\n {accountId ? <Avatar size=\"48px\" accountId={accountId} /> : <Logo />}\n <Button\n icon\n variant=\"tertiary\"\n className=\"close-button\"\n onClick={toggle}\n >\n <X />\n </Button>\n </div>\n {accountId && (\n <UserInfo>\n <h6 className=\"text-truncate\">{profile.name}</h6>\n <p className=\"text-truncate\">{accountId}</p>\n </UserInfo>\n )}\n <ProfileSection>\n {accountId ? (\n <></>\n ) : (\n <>\n <Button className=\"mx-2\">Connect</Button>\n </>\n )}\n <ProfileButtons>\n <Button variant=\"tertiary\" size=\"small\">\n <UserCircle /> My Profile\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <QRCode /> Mobile sign-in QR\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <Download /> Withdraw\n </Button>\n </ProfileButtons>\n </ProfileSection>\n <OptionSection>\n <Heading>SOURCE CODE</Heading>\n <Button variant=\"tertiary\" size=\"small\">\n <GitFork />\n Fork Widget\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <FileCode />\n View Source\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <History />\n View History\n </Button>\n <Separator />\n <Heading>APPEARANCE</Heading>\n <Button\n variant=\"tertiary\"\n size=\"small\"\n onClick={() =>\n Social.set({\n profile: {\n every: {\n theme: \"light\",\n },\n },\n })\n }\n >\n <Sun /> Light\n {theme === \"light\" && (\n <div\n className=\"d-flex align-items-center justify-content-center\"\n style={{ marginLeft: \"auto\" }}\n >\n <Check />\n </div>\n )}\n </Button>\n <Button\n variant=\"tertiary\"\n size=\"small\"\n onClick={() =>\n Social.set({\n profile: {\n every: {\n theme: \"dark\",\n },\n },\n })\n }\n >\n <Moon /> Dark\n {theme === \"dark\" && (\n <div\n className=\"d-flex align-items-center justify-content-center\"\n style={{ marginLeft: \"auto\" }}\n >\n <Check />\n </div>\n )}\n </Button>\n {!accountId && (\n <span\n className=\"px-3\"\n style={{\n fontSize: \"12px\",\n color: \"var(--btn-secondary-danger-color, #CD2B31)\",\n }}\n >\n <small>Please login to change theme</small>\n </span>\n )}\n <Separator />\n <Button variant=\"tertiary\" size=\"small\" type=\"danger\">\n <LogOut />\n Log Out\n </Button>\n </OptionSection>\n </Container>\n );\n};\nreturn { MobileRight };\n" }, "icons.code": { "": "const Code = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M12.0002 10.6667L14.6668 8.00008L12.0002 5.33341M4.00016 5.33341L1.3335 8.00008L4.00016 10.6667M9.66683 2.66675L6.3335 13.3334\"\n stroke=\"#171717\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Code };\n" }, "components.Index": { "": "const { Avatar } = VM.require(\"devs.near/widget/components.ui.avatar\");\nconst { AvatarGroup } = VM.require(\n \"devs.near/widget/components.ui.avatar-group\"\n);\nconst { Badge } = VM.require(\"devs.near/widget/components.ui.badge\");\nconst { Button } = VM.require(\"devs.near/widget/components.ui.button\");\nconst { Chip } = VM.require(\"devs.near/widget/components.ui.chip\");\nconst { Container } = VM.require(\"devs.near/widget/components.ui.container\");\nconst { Logo } = VM.require(\"devs.near/widget/components.ui.logo\");\nconst { Tag } = VM.require(\"devs.near/widget/components.ui.tag\");\nreturn {\n Avatar,\n AvatarGroup,\n Badge,\n Button,\n Chip,\n Container,\n Logo,\n Tag,\n};\n" }, "PR.ItemFeed": { "": "const items = props.items;\nconst renderItem = props.renderItem;\nconst perPage = props.perPage || 10;\nconst jItems = JSON.stringify(items);\nif (state.jItems !== jItems) {\n State.update({\n items: 0,\n jItems,\n });\n}\nconst makeMoreItems = () => {\n State.update({\n items: state.items + perPage,\n });\n};\nconst Layout = props.Layout;\nconst renderedItems = items.slice(0, state.items).map(renderItem);\nreturn (\n <InfiniteScroll\n pageStart={0}\n loadMore={makeMoreItems}\n hasMore={state.items < items.length}\n loader={<div className=\"loader\">Loading ...</div>}\n >\n {Layout ? <Layout>{renderedItems}</Layout> : <>{renderedItems}</>}\n </InfiniteScroll>\n);\n" }, "icons.history": { "": "const History = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M2 8C2 9.18669 2.35189 10.3467 3.01118 11.3334C3.67047 12.3201 4.60754 13.0892 5.7039 13.5433C6.80026 13.9974 8.00666 14.1162 9.17054 13.8847C10.3344 13.6532 11.4035 13.0818 12.2426 12.2426C13.0818 11.4035 13.6532 10.3344 13.8847 9.17054C14.1162 8.00666 13.9974 6.80026 13.5433 5.7039C13.0892 4.60754 12.3201 3.67047 11.3334 3.01118C10.3467 2.35189 9.18669 2 8 2C6.32263 2.00631 4.71265 2.66082 3.50667 3.82667L2 5.33333M2 5.33333V2M2 5.33333H5.33333M8 4.66667V8L10.6667 9.33333\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { History };\n" }, "components.ui.container": { "": "const Container = styled.div`\n padding: 32px 40px;\n background: var(--bg, #fff);\n color: var(--color, #0d0d0d);\n height: 100%;\n flex-grow: 1;\n @media (max-width: 768px) {\n padding: 24px 16px;\n }\n`;\nreturn { Container };\n" }, "icons.chevron-up": { "": "const ChevronUp = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M12 10L8 6L4 10\"\n stroke=\"#6F6F6F\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { ChevronUp };\n" }, "icons.paint-roller": { "": "const PaintRoller = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_2300_12666)\">\n <path\n d=\"M8.33317 13.3332V11.6665C8.33317 11.2245 8.50877 10.8006 8.82133 10.488C9.13389 10.1754 9.55781 9.99984 9.99984 9.99984H16.6665C17.1085 9.99984 17.5325 9.82424 17.845 9.51168C18.1576 9.19912 18.3332 8.7752 18.3332 8.33317V5.83317C18.3332 5.39114 18.1576 4.96722 17.845 4.65466C17.5325 4.3421 17.1085 4.1665 16.6665 4.1665H14.9998M3.33317 1.6665H13.3332C14.2536 1.6665 14.9998 2.4127 14.9998 3.33317V4.99984C14.9998 5.92031 14.2536 6.6665 13.3332 6.6665H3.33317C2.4127 6.6665 1.6665 5.92031 1.6665 4.99984V3.33317C1.6665 2.4127 2.4127 1.6665 3.33317 1.6665ZM7.49984 13.3332H9.1665C9.62674 13.3332 9.99984 13.7063 9.99984 14.1665V17.4998C9.99984 17.9601 9.62674 18.3332 9.1665 18.3332H7.49984C7.0396 18.3332 6.6665 17.9601 6.6665 17.4998V14.1665C6.6665 13.7063 7.0396 13.3332 7.49984 13.3332Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_2300_12666\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nreturn { PaintRoller };\n" }, "icons.user": { "": "const User = ({ width, height, color }) => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={width ?? \"20\"}\n height={height ?? \"20\"}\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M10.0007 10.8333C12.3018 10.8333 14.1673 8.96785 14.1673 6.66667C14.1673 4.36548 12.3018 2.5 10.0007 2.5C7.69946 2.5 5.83398 4.36548 5.83398 6.66667C5.83398 8.96785 7.69946 10.8333 10.0007 10.8333ZM10.0007 10.8333C11.7688 10.8333 13.4645 11.5357 14.7147 12.786C15.9649 14.0362 16.6673 15.7319 16.6673 17.5M10.0007 10.8333C8.23254 10.8333 6.53685 11.5357 5.28661 12.786C4.03636 14.0362 3.33398 15.7319 3.33398 17.5\"\n stroke={color ?? \"#171717\"}\n strokeWidth=\"1.75\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { User };\n" }, "icons.grip": { "": "const Grip = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"28\"\n height=\"28\"\n viewBox=\"0 0 28 28\"\n fill=\"none\"\n >\n <path\n d=\"M13.9998 7.00008C14.6442 7.00008 15.1665 6.47775 15.1665 5.83341C15.1665 5.18908 14.6442 4.66675 13.9998 4.66675C13.3555 4.66675 12.8332 5.18908 12.8332 5.83341C12.8332 6.47775 13.3555 7.00008 13.9998 7.00008Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M22.1665 7.00008C22.8108 7.00008 23.3332 6.47775 23.3332 5.83341C23.3332 5.18908 22.8108 4.66675 22.1665 4.66675C21.5222 4.66675 20.9998 5.18908 20.9998 5.83341C20.9998 6.47775 21.5222 7.00008 22.1665 7.00008Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M5.83317 7.00008C6.4775 7.00008 6.99984 6.47775 6.99984 5.83341C6.99984 5.18908 6.4775 4.66675 5.83317 4.66675C5.18884 4.66675 4.6665 5.18908 4.6665 5.83341C4.6665 6.47775 5.18884 7.00008 5.83317 7.00008Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M13.9998 15.1667C14.6442 15.1667 15.1665 14.6444 15.1665 14.0001C15.1665 13.3558 14.6442 12.8334 13.9998 12.8334C13.3555 12.8334 12.8332 13.3558 12.8332 14.0001C12.8332 14.6444 13.3555 15.1667 13.9998 15.1667Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M22.1665 15.1667C22.8108 15.1667 23.3332 14.6444 23.3332 14.0001C23.3332 13.3558 22.8108 12.8334 22.1665 12.8334C21.5222 12.8334 20.9998 13.3558 20.9998 14.0001C20.9998 14.6444 21.5222 15.1667 22.1665 15.1667Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M5.83317 15.1667C6.4775 15.1667 6.99984 14.6444 6.99984 14.0001C6.99984 13.3558 6.4775 12.8334 5.83317 12.8334C5.18884 12.8334 4.6665 13.3558 4.6665 14.0001C4.6665 14.6444 5.18884 15.1667 5.83317 15.1667Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M13.9998 23.3334C14.6442 23.3334 15.1665 22.8111 15.1665 22.1667C15.1665 21.5224 14.6442 21.0001 13.9998 21.0001C13.3555 21.0001 12.8332 21.5224 12.8332 22.1667C12.8332 22.8111 13.3555 23.3334 13.9998 23.3334Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M22.1665 23.3334C22.8108 23.3334 23.3332 22.8111 23.3332 22.1667C23.3332 21.5224 22.8108 21.0001 22.1665 21.0001C21.5222 21.0001 20.9998 21.5224 20.9998 22.1667C20.9998 22.8111 21.5222 23.3334 22.1665 23.3334Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M5.83317 23.3334C6.4775 23.3334 6.99984 22.8111 6.99984 22.1667C6.99984 21.5224 6.4775 21.0001 5.83317 21.0001C5.18884 21.0001 4.6665 21.5224 4.6665 22.1667C4.6665 22.8111 5.18884 23.3334 5.83317 23.3334Z\"\n fill=\"#6F6F6F\"\n />\n <path\n d=\"M13.9998 7.00008C14.6442 7.00008 15.1665 6.47775 15.1665 5.83341C15.1665 5.18908 14.6442 4.66675 13.9998 4.66675C13.3555 4.66675 12.8332 5.18908 12.8332 5.83341C12.8332 6.47775 13.3555 7.00008 13.9998 7.00008Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M22.1665 7.00008C22.8108 7.00008 23.3332 6.47775 23.3332 5.83341C23.3332 5.18908 22.8108 4.66675 22.1665 4.66675C21.5222 4.66675 20.9998 5.18908 20.9998 5.83341C20.9998 6.47775 21.5222 7.00008 22.1665 7.00008Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M5.83317 7.00008C6.4775 7.00008 6.99984 6.47775 6.99984 5.83341C6.99984 5.18908 6.4775 4.66675 5.83317 4.66675C5.18884 4.66675 4.6665 5.18908 4.6665 5.83341C4.6665 6.47775 5.18884 7.00008 5.83317 7.00008Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M13.9998 15.1667C14.6442 15.1667 15.1665 14.6444 15.1665 14.0001C15.1665 13.3558 14.6442 12.8334 13.9998 12.8334C13.3555 12.8334 12.8332 13.3558 12.8332 14.0001C12.8332 14.6444 13.3555 15.1667 13.9998 15.1667Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M22.1665 15.1667C22.8108 15.1667 23.3332 14.6444 23.3332 14.0001C23.3332 13.3558 22.8108 12.8334 22.1665 12.8334C21.5222 12.8334 20.9998 13.3558 20.9998 14.0001C20.9998 14.6444 21.5222 15.1667 22.1665 15.1667Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M5.83317 15.1667C6.4775 15.1667 6.99984 14.6444 6.99984 14.0001C6.99984 13.3558 6.4775 12.8334 5.83317 12.8334C5.18884 12.8334 4.6665 13.3558 4.6665 14.0001C4.6665 14.6444 5.18884 15.1667 5.83317 15.1667Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M13.9998 23.3334C14.6442 23.3334 15.1665 22.8111 15.1665 22.1667C15.1665 21.5224 14.6442 21.0001 13.9998 21.0001C13.3555 21.0001 12.8332 21.5224 12.8332 22.1667C12.8332 22.8111 13.3555 23.3334 13.9998 23.3334Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M22.1665 23.3334C22.8108 23.3334 23.3332 22.8111 23.3332 22.1667C23.3332 21.5224 22.8108 21.0001 22.1665 21.0001C21.5222 21.0001 20.9998 21.5224 20.9998 22.1667C20.9998 22.8111 21.5222 23.3334 22.1665 23.3334Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M5.83317 23.3334C6.4775 23.3334 6.99984 22.8111 6.99984 22.1667C6.99984 21.5224 6.4775 21.0001 5.83317 21.0001C5.18884 21.0001 4.6665 21.5224 4.6665 22.1667C4.6665 22.8111 5.18884 23.3334 5.83317 23.3334Z\"\n stroke=\"#6F6F6F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Grip };\n" }, "components.navbar.mobile-left": { "": "const { Badge, Button, Logo } = VM.require(\n \"devs.near/widget/components.Index\"\n) || {\n Badge: () => <></>,\n Button: () => <></>,\n Logo: () => <></>,\n};\nconst {\n Code,\n Everything,\n LayoutTemplate,\n PaintRoller,\n PartyPopper,\n ShoppingCart,\n X,\n Video,\n} = VM.require(\"devs.near/widget/icons\") || {\n Code: () => <></>,\n Everything: () => <></>,\n LayoutTemplate: () => <></>,\n PaintRoller: () => <></>,\n PartyPopper: () => <></>,\n ShoppingCart: () => <></>,\n X: () => <></>,\n Video: () => <></>,\n};\nconst Container = styled.div`\n display: none;\n @media (max-width: 768px) {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--bg, #fff);\n z-index: 1049;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n .close-button {\n svg {\n width: 28px;\n height: 28px;\n stroke-width: 0;\n }\n }\n }\n`;\nconst Heading = styled.div`\n display: flex;\n padding: 16px 16px 8px 16px;\n margin: 0 8px;\n align-items: center;\n align-self: stretch;\n color: #8f8f8f;\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n`;\nconst AppGrid = styled.div`\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1rem;\n padding: 1rem;\n`;\nconst AppCard = styled.div`\n position: relative;\n display: flex;\n min-width: 160px;\n padding: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n flex: 1 0 0;\n border-radius: 20px;\n border: 1px solid var(--stroke, #e2e2e2);\n background: var(--btn-secondary-bg, #fff);\n color: var(--btn-secondary-color, #000);\n /* Poppins/Text/M - 16px/Medium */\n font-family: Poppins, sans-serif;\n font-weight: 500;\n line-height: 150%; /* 24px */\n letter-spacing: -0.16px;\n .icon {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n background: var(--btn-secondary-hover-bg, #c7c7c7);\n svg {\n height: 20px;\n width: 20px;\n }\n svg,\n path {\n color: var(--btn-secondary-color, #000);\n stroke: var(--btn-secondary-color, #000);\n }\n }\n transition: all 300ms ease;\n &:hover {\n cursor: pointer;\n background: var(--btn-secondary-hover-bg, #c7c7c7);\n }\n &.disabled {\n cursor: not-allowed;\n background: var(--app-card-disabled-bg, #c7c7c7);\n color: #6f6f6f;\n svg,\n path {\n color: #c7c7c7;\n stroke: #c7c7c7;\n }\n }\n`;\nconst Links = styled.div`\n display: flex;\n flex-direction: column;\n align-items: stretch;\n padding: 16px;\n flex-grow: 1;\n button {\n justify-content: flex-start;\n padding: 8px;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n }\n .active {\n color: var(--color);\n font-weight: 500;\n }\n`;\nconst MobileLeft = ({ toggle }) => {\n return (\n <Container>\n <div className=\"d-flex align-items-center justify-content-between p-3\">\n <Logo />\n <Button\n icon\n variant=\"tertiary\"\n className=\"close-button\"\n onClick={toggle}\n >\n <X />\n </Button>\n </div>\n <Links>\n <Button variant=\"tertiary\" className=\"active\">\n home\n </Button>\n </Links>\n <div>\n <Heading>ALL APPS</Heading>\n <AppGrid>\n <AppCard>\n <div className=\"icon\">\n <Video />\n </div>\n Video\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <PaintRoller />\n </div>\n Canvas\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <PartyPopper />\n </div>\n Event\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <LayoutTemplate />\n </div>\n Profile\n </AppCard>\n <AppCard className=\"disabled\">\n <Badge\n variant=\"alpha\"\n size=\"x-small\"\n style={{\n position: \"absolute\",\n top: 15,\n right: 15,\n color: \"#C7C7C7)\",\n background: \"var(--btn-primary-disabled-bg, #C7C7C7)\",\n }}\n >\n Soon\n </Badge>\n <div className=\"icon\">\n <ShoppingCart />\n </div>\n Marketplace\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <Code />\n </div>\n App\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <Code />\n </div>\n App\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <Code />\n </div>\n App\n </AppCard>\n </AppGrid>\n </div>\n </Container>\n );\n};\nreturn { MobileLeft };\n" }, "icons.check": { "": "const Check = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M13.3332 4L5.99984 11.3333L2.6665 8\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Check };\n" }, "Router": { "": "const { href } = VM.require(\"devs.near/widget/lib.url\") || {\n href: () => \"/\",\n};\nconst Content = styled.div`\n width: 100%;\n height: 100%;\n`;\nfunction findDefaultRoute(routesObject) {\n const routeKey =\n routesObject &&\n Object.keys(routesObject).find((key) => {\n const route = routesObject[key];\n return route.default === true;\n });\n if (routeKey) {\n return routesObject[routeKey];\n } else {\n return null;\n }\n}\nfunction Router({ config, ...passProps }) {\n const { routes, PageNotFound, debug, param } = config;\n if (!param) param = \"page\";\n const defaultRoute = findDefaultRoute(routes);\n const activeRoute =\n (routes &&\n routes.hasOwnProperty(passProps[param]) &&\n routes[passProps[param]]) ||\n defaultRoute;\n if (!PageNotFound) PageNotFound = () => <p>404 Not Found</p>;\n if (!activeRoute) {\n // Handle 404 or default case for unknown routes\n return <PageNotFound />;\n }\n // An improvement may be to \"lazy load\", e.g. load all widgets at once and only \"display\" the active one\n // potentionally add a \"lazy: true\" prop to the route object\n // for each route, if lazy, load the widget and store it in a map\n // set display for the active route\n // we may want to convert this to a widget for that purpose, to manage state?\n if (debug) {\n return (\n <div key={JSON.stringify(activeRoute)}>\n <pre>{JSON.stringify(activeRoute, null, 2)}</pre>\n <pre>{JSON.stringify(props, null, 2)}</pre>\n </div>\n );\n } else {\n return (\n <Content key={param + JSON.stringify(activeRoute)}>\n <Widget\n src={activeRoute.path}\n props={{ ...activeRoute.init, ...passProps }}\n loading={<div style={{ height: \"100%\", width: \"100%\" }} />}\n />\n </Content>\n );\n }\n}\nreturn { Router };\n" }, "icons.file-code": { "": "const FileCode = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M2.66683 14.6668H12.0002C12.3538 14.6668 12.6929 14.5264 12.943 14.2763C13.193 14.0263 13.3335 13.6871 13.3335 13.3335V4.66683L10.0002 1.3335H4.00016C3.64654 1.3335 3.3074 1.47397 3.05735 1.72402C2.80731 1.97407 2.66683 2.31321 2.66683 2.66683V5.3335M9.3335 1.3335V4.00016C9.3335 4.35378 9.47397 4.69292 9.72402 4.94297C9.97407 5.19302 10.3132 5.3335 10.6668 5.3335H13.3335M3.3335 8.00016L1.3335 10.0002L3.3335 12.0002M6.00016 12.0002L8.00016 10.0002L6.00016 8.00016\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { FileCode };\n" }, "icons.git-fork": { "": "const GitFork = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M8 10C6.89543 10 6 10.8954 6 12C6 13.1046 6.89543 14 8 14C9.10457 14 10 13.1046 10 12C10 10.8954 9.10457 10 8 10ZM8 10V8M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6ZM4 6V7.33333C4 7.73333 4.26667 8 4.66667 8H11.3333C11.7333 8 12 7.73333 12 7.33333V6M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { GitFork };\n" }, "icons.x": { "": "const X = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L12.5303 4.53033ZM3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L3.46967 11.4697ZM4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L4.53033 3.46967ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM11.4697 3.46967L3.46967 11.4697L4.53033 12.5303L12.5303 4.53033L11.4697 3.46967ZM3.46967 4.53033L11.4697 12.5303L12.5303 11.4697L4.53033 3.46967L3.46967 4.53033Z\"\n fill=\"#6F6F6F\"\n />\n </svg>\n );\n};\nreturn { X };\n" }, "components.ui.avatar-group": { "": "const { Avatar } = VM.require(\"devs.near/widget/components.ui.avatar\") || {\n Avatar: () => <></>,\n};\nconst AvatarGroup = ({ accountIds, large, size, maxCount }) => {\n const amount = accountIds.length;\n const remaining = amount - maxCount;\n return (\n <div style={{ display: \"inline-flex\", alignItems: \"center\" }}>\n {accountIds.splice(0, maxCount ?? amount).map((accountId) => (\n <Avatar\n accountId={accountId}\n key={accountId}\n large={large}\n imageStyle={{\n marginLeft: \"-6px\",\n border: \"3px solid var(--bg, #fff)\",\n }}\n size={size}\n />\n ))}\n {remaining > 0 && (\n <div\n style={{\n width: size ?? \"48px\",\n height: size ?? \"48px\",\n background: \"var(--separator-color, #e2e2e2)\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: size ? \"14px\" : \"18px\",\n fontWeight: \"500\",\n textAlign: \"center\",\n borderRadius: \"100%\",\n textTransform: \"capitalize\",\n marginLeft: \"-6px\",\n border: \"3px solid var(--bg, white)\",\n color: \"var(--btn-secondary-color, #171717)\",\n }}\n >\n +{remaining}\n </div>\n )}\n </div>\n );\n};\nreturn { AvatarGroup };\n" }, "icons.qr-code": { "": "const QRCode = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M14 10.6667H12C11.6464 10.6667 11.3072 10.8071 11.0572 11.0572C10.8071 11.3072 10.6667 11.6464 10.6667 12V14M14 14V14.0067M8 4.66667V6.66667C8 7.02029 7.85952 7.35943 7.60948 7.60948C7.35943 7.85952 7.02029 8 6.66667 8H4.66667M2 8H2.00667M8 2H8.00667M8 10.6667V10.6733M10.6667 8H11.3333M14 8V8.00667M8 14V13.3333M2.66667 2H4.66667C5.03486 2 5.33333 2.29848 5.33333 2.66667V4.66667C5.33333 5.03486 5.03486 5.33333 4.66667 5.33333H2.66667C2.29848 5.33333 2 5.03486 2 4.66667V2.66667C2 2.29848 2.29848 2 2.66667 2ZM11.3333 2H13.3333C13.7015 2 14 2.29848 14 2.66667V4.66667C14 5.03486 13.7015 5.33333 13.3333 5.33333H11.3333C10.9651 5.33333 10.6667 5.03486 10.6667 4.66667V2.66667C10.6667 2.29848 10.9651 2 11.3333 2ZM2.66667 10.6667H4.66667C5.03486 10.6667 5.33333 10.9651 5.33333 11.3333V13.3333C5.33333 13.7015 5.03486 14 4.66667 14H2.66667C2.29848 14 2 13.7015 2 13.3333V11.3333C2 10.9651 2.29848 10.6667 2.66667 10.6667Z\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { QRCode };\n" }, "components.ui.button": { "": "const StyledButton = styled.button`\n /* base style */\n all: unset;\n display: inline-flex;\n padding: 8px 20px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n border-radius: 12px;\n /* font */\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 150%; /* 24px */\n letter-spacing: -0.16px;\n /* transition */\n transition: all 300ms ease;\n /* variant styles */\n background: ${(props) => {\n if (props.variant === \"primary\" && props.type === \"danger\") {\n return \"var(--btn-primary-danger-bg, #DC3D43)\";\n } else if (props.variant === \"primary\") {\n return \"var(--btn-primary-bg, #171717)\";\n } else if (props.variant === \"secondary\" || props.variant === \"tertiary\") {\n return \"var(--btn-secondary-bg, #fff)\";\n }\n }};\n border: ${(props) => {\n if (props.variant === \"secondary\" && props.type === \"danger\") {\n return \"1px solid var(--btn-secondary-danger-stroke, #F3AEAF)\";\n } else if (props.variant === \"secondary\") {\n return \"1px solid var(--btn-secondary-stroke, #DBDBDB)\";\n } else {\n return \"\"; // No border for other cases\n }\n }};\n color: ${(props) => {\n if (props.variant === \"primary\") {\n return \"var(--btn-primary-color, #fff)\";\n } else if (\n (props.variant === \"secondary\" || props.variant === \"tertiary\") &&\n props.type === \"danger\"\n ) {\n return \"var(--btn-secondary-danger-color, #CD2B31) !important\";\n } else if (props.variant === \"secondary\") {\n return \"var(--btn-secondary-color, #171717)\";\n } else if (props.variant === \"tertiary\") {\n return \"var(--btn-tertiary-color, #6F6F6F)\";\n }\n }};\n /* handle svg */\n svg,\n path {\n stroke: ${(props) => {\n if (props.variant === \"primary\") {\n return \"var(--btn-primary-color, #fff)\";\n } else if (\n (props.variant === \"secondary\" || props.variant === \"tertiary\") &&\n props.type === \"danger\"\n ) {\n return \"var(--btn-secondary-danger-color, #CD2B31) !important\";\n } else if (props.variant === \"secondary\") {\n return \"var(--btn-secondary-color, #171717)\";\n } else if (props.variant === \"tertiary\") {\n return \"var(--btn-tertiary-color, #6F6F6F)\";\n }\n }};\n }\n font-size: ${(props) => {\n if (props.size === \"large\") {\n return \"16px\";\n }\n }};\n height: ${(props) => {\n if (props.size === \"large\") {\n return \"32px\";\n } else if (props.size === \"medium\") {\n return \"24px\";\n } else if (props.size === \"small\") {\n return \"16px\";\n }\n }};\n width: ${(props) => {\n if (props.icon) {\n if (props.size === \"large\") {\n return \"32px\";\n } else if (props.size === \"medium\") {\n return \"24px\";\n } else if (props.size === \"small\") {\n return \"16px\";\n }\n }\n }};\n padding: ${(props) => {\n if (props.icon) {\n return \"8px\";\n }\n }};\n &:hover {\n cursor: pointer;\n background: ${(props) => {\n if (props.variant === \"primary\" && props.type === \"danger\") {\n return \"#CD2B31\";\n } else if (props.variant === \"primary\") {\n return \"var(--btn-primary-hover-bg, #6F6F6F)\";\n } else if (props.variant === \"secondary\") {\n return \"var(btn-secondary-hover-bg, #FCFCFC)\";\n } else if (props.variant === \"tertiary\" && props.type === \"danger\") {\n return \"var(--btn-tertiary-danger-hover-bg,#FF050508)\";\n } else if (props.variant === \"tertiary\") {\n return \"var(--btn-tertiary-hover-bg, #F8F8F8)\";\n }\n }};\n border: ${(props) => {\n if (props.variant === \"secondary\") {\n return \"1px solid var(--btn-secondary-hover-stroke, #C7C7C7)\";\n }\n }};\n }\n &:disabled {\n cursor: not-allowed;\n background: ${(props) => {\n if (props.variant === \"primary\") {\n return \"var(--btn-primary-disabled-bg, #C7C7C7)\";\n }\n }};\n border: ${(props) => {\n if (props.variant === \"secondary\") {\n return \"1px solid var(--btn-secondary-disabled-stroke, #DBDBDB)\";\n }\n }};\n color: ${(props) => {\n if (props.variant === \"primary\") {\n return \"rgba(255, 255, 255, 0.59)\";\n } else if (\n props.variant === \"secondary\" ||\n props.variant === \"tertiary\"\n ) {\n return \"var(--btn-primary-disabled-bg, #C7C7C7)\";\n }\n }};\n svg,\n path {\n stroke: ${(props) => {\n if (props.variant === \"primary\") {\n return \"rgba(255, 255, 255, 0.59)\";\n } else if (\n props.variant === \"secondary\" ||\n props.variant === \"tertiary\"\n ) {\n return \"var(--btn-primary-disabled-bg, #C7C7C7)\";\n }\n }};\n }\n }\n`;\nconst StyledLink = styled.button`\n all: unset;\n display: inline-flex;\n padding: 2px 4px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n border-radius: 12px;\n color: #006adc;\n svg,\n path {\n stroke: #006adc;\n }\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n font-size: ${(props) => {\n if (props.size === \"large\") {\n return \"16px\";\n }\n }};\n transition: all 300ms ease;\n &:hover {\n cursor: pointer;\n text-decoration: none;\n background: #f5faff;\n color: #006adc;\n svg,\n path {\n stroke: #006adc;\n }\n }\n &:active {\n color: #006adc;\n svg,\n path {\n stroke: #006adc;\n }\n }\n &:disabled {\n color: #c7c7c7;\n svg,\n path {\n stroke: #c7c7c7;\n }\n }\n`;\nconst Button = ({\n children,\n onClick,\n variant,\n size,\n href,\n type,\n icon,\n linkClassName,\n ...restProps\n}) => {\n if (href) {\n return (\n <Link href={href} className={linkClassName}>\n <StyledLink\n onClick={onClick}\n variant={variant ?? \"primary\"}\n size={size ?? \"medium\"}\n icon={icon}\n type={type}\n {...restProps}\n >\n {children}\n </StyledLink>\n </Link>\n );\n }\n return (\n <StyledButton\n onClick={onClick}\n variant={variant ?? \"primary\"}\n size={size ?? \"medium\"}\n icon={icon}\n type={type}\n {...restProps}\n >\n {children}\n </StyledButton>\n );\n};\nreturn { Button };\n" }, "icons.sun": { "": "const Sun = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_2326_3658)\">\n <path\n d=\"M8.00016 1.3335V2.66683M8.00016 13.3335V14.6668M3.28687 3.28678L4.22687 4.22678M11.7735 11.7734L12.7135 12.7134M1.3335 8.00016H2.66683M13.3335 8.00016H14.6668M4.22687 11.7734L3.28687 12.7134M12.7135 3.28678L11.7735 4.22678M10.6668 8.00016C10.6668 9.47292 9.47292 10.6668 8.00016 10.6668C6.5274 10.6668 5.3335 9.47292 5.3335 8.00016C5.3335 6.5274 6.5274 5.3335 8.00016 5.3335C9.47292 5.3335 10.6668 6.5274 10.6668 8.00016Z\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_2326_3658\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nreturn { Sun };\n" }, "icons.video": { "": "const Video = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M18.3332 6.66667L13.3332 10L18.3332 13.3333V6.66667Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M11.6665 5H3.33317C2.4127 5 1.6665 5.74619 1.6665 6.66667V13.3333C1.6665 14.2538 2.4127 15 3.33317 15H11.6665C12.587 15 13.3332 14.2538 13.3332 13.3333V6.66667C13.3332 5.74619 12.587 5 11.6665 5Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Video };\n" }, "components.ui.tag": { "": "const { X } = VM.require(\"devs.near/widget/icons\") || {\n X: () => <></>,\n};\nconst { Badge } = VM.require(\"devs.near/widget/components.Index\") || {\n Badge: () => <></>,\n};\nconst Tag = ({ children, size, variant, color, ...restProps }) => {\n return (\n <Badge\n size={size}\n variant={variant === \"soft\" ? \"alpha\" : variant}\n color={color ?? \"gray\"}\n {...restProps}\n style={{ cursor: \"pointer\" }}\n >\n {children}\n <X />\n </Badge>\n );\n};\nreturn { Tag };\n" }, "components.ui.badge": { "": "const StyledBadge = styled.div`\n display: inline-flex;\n height: 28px;\n min-width: 28px;\n padding: 4px 8px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n flex-shrink: 0;\n border-radius: 100px;\n background: rgba(0, 0, 0, 0.05);\n color: #171717;\n background: ${(props) => {\n if (props.variant === \"outline\") {\n return \"white\";\n }\n if (props.color === \"black\") {\n return props.variant === \"alpha\" ? \"rgba(0, 0, 0, 0.05)\" : \"#171717\";\n } else if (props.color === \"blue\") {\n return props.variant === \"alpha\" ? \"rgba(2, 128, 255, 0.07)\" : \"#0081F1\";\n } else if (props.color === \"green\") {\n return props.variant === \"alpha\" ? \"rgba(2, 186, 60, 0.09)\" : \"#299764\";\n } else if (props.color === \"yellow\") {\n return props.variant === \"alpha\" ? \"rgba(255, 234, 1, 0.18)\" : \"#F7CE00\";\n } else if (props.color === \"red\") {\n return props.variant === \"alpha\" ? \"rgba(255, 1, 1, 0.06)\" : \"#DC3D43\";\n }\n }};\n color: ${(props) => {\n if (props.variant === \"outline\") {\n if (props.color === \"black\") {\n return \"var(--badge-alpha-black-color, #171717)\";\n } else if (props.color === \"blue\") {\n return \"#006ADC\";\n } else if (props.color === \"green\") {\n return \"#18794E\";\n } else if (props.color === \"yellow\") {\n return \"#35290F\";\n } else if (props.color === \"red\") {\n return \"#CD2B31\";\n }\n }\n if (props.color === \"black\") {\n return props.variant === \"alpha\"\n ? \"var(--badge-alpha-black-color, #171717)\"\n : \"#fff\";\n } else if (props.color === \"blue\") {\n return props.variant === \"alpha\" ? \"#006ADC\" : \"#fff\";\n } else if (props.color === \"green\") {\n return props.variant === \"alpha\" ? \"#18794E\" : \"#fff\";\n } else if (props.color === \"yellow\") {\n return props.variant === \"alpha\" ? \"#35290F\" : \"#fff\";\n } else if (props.color === \"red\") {\n return props.variant === \"alpha\" ? \"#CD2B31\" : \"#fff\";\n }\n }};\n border: 1px solid\n ${(props) => {\n if (props.variant === \"outline\") {\n if (props.color === \"black\") {\n return \"var(--badge-alpha-black-color, #171717)\";\n } else if (props.color === \"blue\") {\n return \"#006ADC\";\n } else if (props.color === \"green\") {\n return \"#18794E\";\n } else if (props.color === \"yellow\") {\n return \"#35290F\";\n } else if (props.color === \"red\") {\n return \"#CD2B31\";\n }\n }\n }};\n svg,\n path {\n fill: ${(props) => {\n if (props.variant === \"outline\") {\n if (props.color === \"black\") {\n return \"var(--badge-alpha-black-color, #171717)\";\n } else if (props.color === \"blue\") {\n return \"#006ADC\";\n } else if (props.color === \"green\") {\n return \"#18794E\";\n } else if (props.color === \"yellow\") {\n return \"#35290F\";\n } else if (props.color === \"red\") {\n return \"#CD2B31\";\n }\n }\n if (props.color === \"black\") {\n return props.variant === \"alpha\"\n ? \"var(--badge-alpha-black-color, #171717)\"\n : \"#fff\";\n } else if (props.color === \"blue\") {\n return props.variant === \"alpha\" ? \"#006ADC\" : \"#fff\";\n } else if (props.color === \"green\") {\n return props.variant === \"alpha\" ? \"#18794E\" : \"#fff\";\n } else if (props.color === \"yellow\") {\n return props.variant === \"alpha\" ? \"#35290F\" : \"#fff\";\n } else if (props.color === \"red\") {\n return props.variant === \"alpha\" ? \"#CD2B31\" : \"#fff\";\n }\n }};\n }\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n ${(props) => {\n if (props.size === \"small\") {\n return {\n height: \"24px\",\n minWidth: \"24px\",\n fontSize: \"12px\",\n };\n } else if (props.size === \"x-small\") {\n return {\n height: \"20px\",\n minWidth: \"20px\",\n fontSize: \"12px\",\n padding: \"4px\",\n };\n } else if (props.size === \"xx-small\") {\n return {\n height: \"16px\",\n minWidth: \"16px\",\n padding: \"4px\",\n };\n }\n }}\n`;\nconst Badge = ({ children, size, variant, color, ...restProps }) => {\n return (\n <StyledBadge\n size={size}\n variant={variant ?? \"solid\"}\n color={color ?? \"black\"}\n {...restProps}\n >\n {children}\n </StyledBadge>\n );\n};\nreturn { Badge };\n" }, "icons.download": { "": "const Download = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M4.66667 6.66667L8 10M8 10L11.3333 6.66667M8 10V2\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Download };\n" }, "icons.plus": { "": "const Plus = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M3.33301 7.24992C2.91879 7.24992 2.58301 7.58571 2.58301 7.99992C2.58301 8.41413 2.91879 8.74992 3.33301 8.74992V7.24992ZM12.6663 8.74992C13.0806 8.74992 13.4163 8.41413 13.4163 7.99992C13.4163 7.58571 13.0806 7.24992 12.6663 7.24992V8.74992ZM8.74967 3.33325C8.74967 2.91904 8.41389 2.58325 7.99967 2.58325C7.58546 2.58325 7.24967 2.91904 7.24967 3.33325H8.74967ZM7.24967 12.6666C7.24967 13.0808 7.58546 13.4166 7.99967 13.4166C8.41389 13.4166 8.74967 13.0808 8.74967 12.6666H7.24967ZM3.33301 8.74992H12.6663V7.24992H3.33301V8.74992ZM7.24967 3.33325V12.6666H8.74967V3.33325H7.24967Z\"\n fill=\"#6F6F6F\"\n />\n </svg>\n );\n};\nreturn { Plus };\n" }, "icons.layout-template": { "": "const LayoutTemplate = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <path\n d=\"M16.6667 2.5H3.33333C2.8731 2.5 2.5 2.8731 2.5 3.33333V7.5C2.5 7.96024 2.8731 8.33333 3.33333 8.33333H16.6667C17.1269 8.33333 17.5 7.96024 17.5 7.5V3.33333C17.5 2.8731 17.1269 2.5 16.6667 2.5Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M9.16667 11.6667H3.33333C2.8731 11.6667 2.5 12.0398 2.5 12.5V16.6667C2.5 17.1269 2.8731 17.5 3.33333 17.5H9.16667C9.6269 17.5 10 17.1269 10 16.6667V12.5C10 12.0398 9.6269 11.6667 9.16667 11.6667Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M16.6667 11.6667H14.1667C13.7064 11.6667 13.3333 12.0398 13.3333 12.5V16.6667C13.3333 17.1269 13.7064 17.5 14.1667 17.5H16.6667C17.1269 17.5 17.5 17.1269 17.5 16.6667V12.5C17.5 12.0398 17.1269 11.6667 16.6667 11.6667Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { LayoutTemplate };\n" }, "components.ui.logo": { "": "const { Everything } = VM.require(\"devs.near/widget/icons\") || {\n Everything: () => <></>,\n};\nconst LogoText = styled.div`\n span {\n color: var(--color, #0d0d0d);\n font-size: 18px;\n font-style: normal;\n font-weight: 600;\n line-height: 100%; /* 18px */\n text-transform: lowercase;\n margin-left: 12px;\n }\n circle {\n fill: var(--color, #0d0d0d);\n }\n @media (max-width: 768px) {\n span {\n font-size: 15px;\n margin-left: 10px;\n }\n svg {\n width: 20px;\n height: 20px;\n }\n }\n`;\nconst Logo = () => {\n return (\n <LogoText className=\"d-flex align-items-center\">\n <Everything />\n <span>everything</span>\n </LogoText>\n );\n};\nreturn { Logo };\n" }, "components.navbar": { "": "const { Avatar, Button, Badge, Logo } = VM.require(\n \"devs.near/widget/components.Index\"\n) || {\n Avatar: () => <></>,\n Button: () => <></>,\n Badge: () => <></>,\n Logo: () => <></>,\n};\nconst { MobileRight } = VM.require(\n \"devs.near/widget/components.navbar.mobile-right\"\n) || {\n MobileRight: () => <></>,\n};\nconst { MobileLeft } = VM.require(\n \"devs.near/widget/components.navbar.mobile-left\"\n) || {\n MobileLeft: () => <></>,\n};\nconst {\n Bell,\n Check,\n ChevronDown,\n ChevronUp,\n Code,\n Download,\n Everything,\n FileCode,\n GitFork,\n Grip,\n History,\n LayoutTemplate,\n LogOut,\n Menu,\n Moon,\n PaintRoller,\n PartyPopper,\n QRCode,\n ShoppingCart,\n Sun,\n UserCircle,\n Video,\n} = VM.require(\"devs.near/widget/icons\") || {\n Bell: () => <></>,\n Check: () => <></>,\n ChevronDown: () => <></>,\n ChevronUp: () => <></>,\n Code: () => <></>,\n Download: () => <></>,\n Everything: () => <></>,\n FileCode: () => <></>,\n GitFork: () => <></>,\n Grip: () => <></>,\n History: () => <></>,\n LayoutTemplate: () => <></>,\n LogOut: () => <></>,\n Menu: () => <></>,\n Moon: () => <></>,\n PaintRoller: () => <></>,\n PartyPopper: () => <></>,\n QRCode: () => <></>,\n ShoppingCart: () => <></>,\n Sun: () => <></>,\n UserCircle: () => <></>,\n Video: () => <></>,\n};\nconst [appMenuOpen, setAppMenuOpen] = useState(false);\nconst [codeMenuOpen, setCodeMenuOpen] = useState(false);\nconst [menuDropdownOpen, setMenuDropdownOpen] = useState(false);\nconst toggleAppMenu = useCallback(() => {\n setMenuDropdownOpen(false);\n setCodeMenuOpen(false);\n setAppMenuOpen((prev) => !prev);\n}, []);\nconst toggleCodeMenu = useCallback(() => {\n setMenuDropdownOpen(false);\n setAppMenuOpen(false);\n setCodeMenuOpen((prev) => !prev);\n}, []);\nconst toggleMenuDropdown = useCallback(() => {\n setCodeMenuOpen(false);\n setAppMenuOpen(false);\n setMenuDropdownOpen((prev) => !prev);\n}, []);\n// mobile\nconst [mobileRight, setMobileRight] = useState(false);\nconst [mobileLeft, setMobileLeft] = useState(false);\nconst toggleMobileRight = useCallback(() => {\n setMobileRight((prev) => !prev);\n}, []);\nconst toggleMobileLeft = useCallback(() => {\n setMobileLeft((prev) => !prev);\n}, []);\nconst StyledNavbar = styled.div`\n display: flex;\n padding: 12px 40px;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n background: var(--bg, #fff);\n border-bottom: 1px solid var(--stroke, #e2e2e2);\n @media (max-width: 768px) {\n padding: 16px;\n gap: 8px;\n }\n`;\nconst DropdownContent = styled.div`\n position: absolute;\n top: 100%;\n width: 100%;\n min-width: 200px;\n margin-top: 4px;\n display: flex;\n padding: 8px 0;\n flex-direction: column;\n align-items: stretch;\n background: var(--bg, #fff);\n border-radius: 12px;\n border: 1px solid var(--stroke, #e2e2e2);\n box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n button {\n margin: 0 8px;\n justify-content: flex-start;\n color: var(--dropdown-button-color, #1c2024);\n }\n`;\nconst BellCounter = styled.div`\n position: absolute;\n top: 35%;\n right: 35%;\n transform: translate(50%, -50%);\n display: flex;\n width: 10px;\n height: 10px;\n justify-content: center;\n align-items: center;\n border: 2px solid white;\n gap: 4px;\n flex-shrink: 0;\n border-radius: 100%;\n background: var(--btn-primary-danger-bg, #dc3d43);\n border: 1.5px solid var(--btn-secondary-bg, #fff);\n font-size: 12px;\n font-weight: 500;\n line-height: 140%;\n letter-spacing: -0.12px;\n`;\nconst Separator = styled.div`\n height: 1px;\n background: var(--separator-color, #e2e2e2);\n margin: 4px 0;\n width: 100%;\n`;\nconst DropdownHeading = styled.div`\n display: flex;\n padding: 16px 16px 8px 16px;\n margin: 0 8px;\n align-items: center;\n align-self: stretch;\n color: #8f8f8f;\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n`;\nconst AppGrid = styled.div`\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1rem;\n`;\nconst AppCard = styled.div`\n position: relative;\n display: flex;\n min-width: 160px;\n padding: 16px;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n flex: 1 0 0;\n border-radius: 20px;\n border: 1px solid var(--stroke, #e2e2e2);\n background: var(--btn-secondary-bg, #fff);\n color: var(--btn-secondary-color, #000);\n /* Poppins/Text/M - 16px/Medium */\n font-family: Poppins, sans-serif;\n font-weight: 500;\n line-height: 150%; /* 24px */\n letter-spacing: -0.16px;\n .icon {\n display: flex;\n width: 40px;\n height: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 12px;\n background: var(--btn-secondary-hover-bg, #c7c7c7);\n svg {\n height: 20px;\n width: 20px;\n }\n svg,\n path {\n color: var(--btn-secondary-color, #000);\n stroke: var(--btn-secondary-color, #000);\n }\n }\n transition: all 300ms ease;\n &:hover {\n cursor: pointer;\n background: var(--btn-secondary-hover-bg, #c7c7c7);\n }\n &.disabled {\n cursor: not-allowed;\n background: var(--btn-secondary-hover-bg, #c7c7c7);\n color: #6f6f6f;\n svg,\n path {\n color: #c7c7c7;\n stroke: #c7c7c7;\n }\n }\n`;\nconst getNotificationCount = () => {\n const notificationFeedSrc = \"mob.near/widget/NotificationFeed\";\n const lastBlockHeight = Storage.get(\"lastBlockHeight\", notificationFeedSrc);\n if (lastBlockHeight === null) {\n return \"\";\n }\n const notifications = Social.index(\"notify\", context.accountId, {\n order: \"asc\",\n from: (lastBlockHeight ?? 0) + 1,\n // subscribe: true,\n });\n return notifications.length;\n};\nconst unreadNotifications = getNotificationCount();\nconst MemoizedUserDropdown = useMemo(\n () => (\n <Button variant=\"secondary\" className=\"px-2\" onClick={toggleMenuDropdown}>\n <Avatar accountId={context.accountId} size=\"24px\" />\n {context.accountId} {menuDropdownOpen ? <ChevronUp /> : <ChevronDown />}\n </Button>\n ),\n [context.accountId, menuDropdownOpen]\n);\nconst profile = Social.getr(`${context.accountId}/profile`);\nconst theme = profile.every.theme ?? \"light\";\nreturn (\n <>\n <StyledNavbar className=\"container-xl\">\n <div className=\"d-flex align-items-center gap-md-3 gap-2\">\n <div className=\"position-relative\">\n {/* Desktop */}\n <Button\n icon\n variant=\"tertiary\"\n className=\"d-none d-md-flex\"\n onClick={toggleAppMenu}\n >\n <Grip />\n </Button>\n <Button\n icon\n variant=\"tertiary\"\n className=\"d-md-none\"\n onClick={toggleMobileLeft}\n >\n <Grip />\n </Button>\n {appMenuOpen && (\n <DropdownContent className=\"p-3\" style={{ minWidth: 400 }}>\n <AppGrid>\n <AppCard>\n <div className=\"icon\">\n <Video />\n </div>\n Video\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <PaintRoller />\n </div>\n Canvas\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <PartyPopper />\n </div>\n Event\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <LayoutTemplate />\n </div>\n Profile\n </AppCard>\n <AppCard className=\"disabled\">\n <Badge\n variant=\"alpha\"\n size=\"x-small\"\n style={{\n position: \"absolute\",\n top: 15,\n right: 15,\n // color: \"var(--btn-secondary-color, #EDEDED)\",\n // background: \"var(--btn-secondary-bg, #C7C7C7)\",\n }}\n >\n Coming Soon\n </Badge>\n <div className=\"icon\">\n <ShoppingCart />\n </div>\n Marketplace\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <Code />\n </div>\n App\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <Code />\n </div>\n App\n </AppCard>\n <AppCard>\n <div className=\"icon\">\n <Code />\n </div>\n App\n </AppCard>\n </AppGrid>\n </DropdownContent>\n )}\n </div>\n <Link href=\"/\" style={{ textDecoration: \"none\" }}>\n <Logo />\n </Link>\n </div>\n <div className=\"align-items-center gap-2 d-none d-md-flex\">\n {context.accountId ? (\n <>\n <div className=\"position-relative\">\n <Button icon variant=\"secondary\">\n <Bell />\n </Button>\n {unreadNotifications && <BellCounter />}\n </div>\n <div className=\"position-relative\">\n {MemoizedUserDropdown}\n {menuDropdownOpen && (\n <DropdownContent>\n <Button variant=\"tertiary\" size=\"small\">\n <UserCircle /> My Profile\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <QRCode /> Mobile sign-in QR\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <Download /> Withdraw\n </Button>\n <Separator />\n <Button variant=\"tertiary\" size=\"small\" type=\"danger\">\n <LogOut />\n Log Out\n </Button>\n </DropdownContent>\n )}\n </div>\n </>\n ) : (\n <Button variant=\"primary\">connect</Button>\n )}\n <div className=\"position-relative\">\n <Button icon variant=\"secondary\" onClick={toggleCodeMenu}>\n <Menu />\n </Button>\n {codeMenuOpen && (\n <DropdownContent style={{ right: \"0\" }}>\n <DropdownHeading>SOURCE CODE</DropdownHeading>\n <Button variant=\"tertiary\" size=\"small\">\n <GitFork />\n Fork Widget\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <FileCode />\n View Source\n </Button>\n <Button variant=\"tertiary\" size=\"small\">\n <History />\n View History\n </Button>\n <Separator />\n <DropdownHeading>APPEARANCE</DropdownHeading>\n <Button\n variant=\"tertiary\"\n size=\"small\"\n onClick={() =>\n Social.set({\n profile: {\n every: {\n theme: \"light\",\n },\n },\n })\n }\n >\n <Sun /> Light\n {theme === \"light\" && (\n <div\n className=\"d-flex align-items-center justify-content-center\"\n style={{ marginLeft: \"auto\" }}\n >\n <Check />\n </div>\n )}\n </Button>\n <Button\n variant=\"tertiary\"\n size=\"small\"\n onClick={() =>\n Social.set({\n profile: {\n every: {\n theme: \"dark\",\n },\n },\n })\n }\n >\n <Moon /> Dark\n {theme === \"dark\" && (\n <div\n className=\"d-flex align-items-center justify-content-center\"\n style={{ marginLeft: \"auto\" }}\n >\n <Check />\n </div>\n )}\n </Button>\n {!context.accountId && (\n <span\n className=\"px-3\"\n style={{\n fontSize: \"12px\",\n color: \"var(--btn-secondary-danger-color, #CD2B31)\",\n }}\n >\n <small>Please login to change theme</small>\n </span>\n )}\n </DropdownContent>\n )}\n </div>\n </div>\n <div className=\"d-md-none d-flex align-items-center gap-2\">\n {context.accountId && (\n <div className=\"position-relative\">\n <Button icon variant=\"secondary\">\n <Bell />\n </Button>\n {unreadNotifications && <BellCounter />}\n </div>\n )}\n <Button\n variant=\"secondary\"\n icon={!context.accountId}\n className=\"px-2\"\n onClick={toggleMobileRight}\n >\n {context.accountId && (\n <Avatar accountId={context.accountId} size=\"24px\" />\n )}{\" \"}\n <Menu />\n </Button>\n </div>\n </StyledNavbar>\n {mobileRight && (\n <MobileRight toggle={toggleMobileRight} accountId={context.accountId} />\n )}\n {mobileLeft && <MobileLeft toggle={toggleMobileLeft} />}\n </>\n);\n" }, "Index": { "": "const { Layout } = VM.require(\"devs.near/widget/Layout\") || {\n Layout: () => <>layout not found</>,\n};\nconst { Router } = VM.require(\"devs.near/widget/Router\") || {\n Router: () => <>router not found</>,\n};\nconst data = Social.index(\"post\", \"main\", { order: \"desc\", limit: 1 });\nconst { accountId, blockHeight } = data && data.length && data[0];\n// const item = {\n// path: `${accountId}/post/main`,\n// blockHeight: blockHeight,\n// type: \"social\",\n// };\n// const item = {\n// path: `mob.near/post/main`,\n// blockHeight: \"81101335\",\n// type: \"social\",\n// };\nconst item = {\n path: \"efiz.near/thing/core\",\n};\nconst CSS = styled.div`\n width: 100%,\n height: 100vh;\n`;\nconst Header = () => <div style={{ border: \"solid\" }}>header</div>;\nconst Footer = () => <>built by everyone :)</>;\nconst Sidebar = () => <>sidebar</>;\nconst Content = () => (\n <Layout blocks={{ Header, Footer }}>\n <div style={{ height: \"60vh\" }}>\n \"mob.near/post/main@81101335\" // this is a very personal thing...\n <p>{JSON.stringify(data)}</p>\n <Router\n config={{\n param: \"page\",\n routes: {\n home: {\n path: \"every.near/widget/every.thing.view\",\n init: item,\n },\n home: {\n path: \"devs.near/widget/Library\",\n init: item,\n },\n },\n }}\n page={\"home\"}\n />\n </div>\n </Layout>\n);\nreturn (\n <CSS>\n <Layout variant=\"sidebar\" blocks={{ Sidebar, Header, Footer }}>\n <Content />\n </Layout>\n </CSS>\n);\n" }, "icons.everything": { "": "const Everything = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#0D0D0D\" />\n </svg>\n );\n};\nreturn { Everything };\n" }, "icons.bell": { "": "const Bell = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M6.8667 13.9999C6.97829 14.2029 7.14233 14.3721 7.34169 14.49C7.54106 14.6079 7.76842 14.6701 8.00003 14.6701C8.23165 14.6701 8.45901 14.6079 8.65837 14.49C8.85773 14.3721 9.02178 14.2029 9.13337 13.9999M4 5.33325C4 4.27239 4.42143 3.25497 5.17157 2.50482C5.92172 1.75468 6.93913 1.33325 8 1.33325C9.06087 1.33325 10.0783 1.75468 10.8284 2.50482C11.5786 3.25497 12 4.27239 12 5.33325C12 9.99992 14 11.3333 14 11.3333H2C2 11.3333 4 9.99992 4 5.33325Z\"\n stroke=\"#171717\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Bell };\n" }, "icons.user-circle": { "": "const UserCircle = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_2326_2481)\">\n <path\n d=\"M12.0002 13.3335C12.0002 12.2726 11.5787 11.2552 10.8286 10.5051C10.0784 9.75492 9.06103 9.3335 8.00016 9.3335M8.00016 9.3335C6.9393 9.3335 5.92188 9.75492 5.17174 10.5051C4.42159 11.2552 4.00016 12.2726 4.00016 13.3335M8.00016 9.3335C9.47292 9.3335 10.6668 8.13959 10.6668 6.66683C10.6668 5.19407 9.47292 4.00016 8.00016 4.00016C6.5274 4.00016 5.3335 5.19407 5.3335 6.66683C5.3335 8.13959 6.5274 9.3335 8.00016 9.3335ZM14.6668 8.00016C14.6668 11.6821 11.6821 14.6668 8.00016 14.6668C4.31826 14.6668 1.3335 11.6821 1.3335 8.00016C1.3335 4.31826 4.31826 1.3335 8.00016 1.3335C11.6821 1.3335 14.6668 4.31826 14.6668 8.00016Z\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_2326_2481\">\n <rect width=\"16\" height=\"16\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nreturn { UserCircle };\n" }, "icons.menu": { "": "const Menu = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"17\"\n viewBox=\"0 0 16 17\"\n fill=\"none\"\n >\n <path\n d=\"M2.6665 8.7998H13.3332M2.6665 4.7998H13.3332M2.6665 12.7998H13.3332\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Menu };\n" }, "icons.chevron-down": { "": "const ChevronDown = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"#6F6F6F\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { ChevronDown };\n" }, "icons.moon": { "": "const Moon = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n >\n <path\n d=\"M8 2C7.20435 2.79565 6.75736 3.87478 6.75736 5C6.75736 6.12522 7.20435 7.20435 8 8C8.79565 8.79565 9.87478 9.24264 11 9.24264C12.1252 9.24264 13.2044 8.79565 14 8C14 9.18669 13.6481 10.3467 12.9888 11.3334C12.3295 12.3201 11.3925 13.0892 10.2961 13.5433C9.19975 13.9974 7.99335 14.1162 6.82946 13.8847C5.66558 13.6532 4.59648 13.0818 3.75736 12.2426C2.91825 11.4035 2.3468 10.3344 2.11529 9.17054C1.88378 8.00666 2.0026 6.80026 2.45673 5.7039C2.91085 4.60754 3.67989 3.67047 4.66658 3.01118C5.65328 2.35189 6.81331 2 8 2Z\"\n stroke=\"#6F6F6F\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n};\nreturn { Moon };\n" }, "IpfsImageUpload": { "": "const IPFSImageUpload = ({\n key,\n name,\n className,\n img,\n setImg,\n msg,\n setMsg,\n onError,\n accepts,\n multiple,\n clickable,\n maxFiles,\n maxFileSize,\n minFileSize,\n dragActiveClassName,\n}) => {\n const attributes = {\n key,\n name,\n className,\n img,\n setImg,\n msg,\n setMsg,\n onError,\n accepts,\n multiple,\n clickable,\n maxFiles,\n maxFileSize,\n minFileSize,\n dragActiveClassName,\n };\n const ipfsUrl = (cid) => `https://ipfs.near.social/ipfs/${cid}`;\n const uploadFile = (files) => {\n setMsg(\"Uploading...\");\n const file = files[0];\n const uploadPromise = asyncFetch(\"https://ipfs.near.social/add\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": file.type,\n },\n body: file,\n })\n .then((response) => {\n if (!response.ok) {\n setMsg(\"Upload failed!\");\n return Promise.reject(new Error(\"Upload failed\"));\n }\n return response.body;\n })\n .then((data) => {\n console.log(data);\n setImg(data);\n })\n .catch((error) => {\n console.error(\"Upload error:\", error);\n setMsg(\"Upload failed!\");\n })\n .finally(() => {\n setMsg(\"Replace Image\");\n });\n uploadPromise\n .then(() => {\n console.log(\"Upload successful!\");\n })\n .catch((error) => {\n console.error(\"Upload failed:\", error);\n });\n };\n return (\n <div className=\"d-inline-block\" key={attributes.key}>\n {img?.cid && (\n <div\n className=\"d-inline-block me-2 overflow-hidden align-middle\"\n style={{ width: \"2.5em\", height: \"2.5em\" }}\n >\n <img\n className=\"rounded w-100 h-100\"\n style={{ objectFit: \"cover\" }}\n src={ipfsUrl(img?.cid)}\n alt=\"upload preview\"\n />\n </div>\n )}\n <Files\n multiple={false}\n accepts={[\"image/*\"]}\n minFileSize={1}\n clickable\n onChange={uploadFile}\n {...attributes}\n >\n {msg}\n </Files>\n </div>\n );\n};\nreturn { IPFSImageUpload };\n" }, "icons": { "": "const { Bell } = VM.require(\"devs.near/widget/icons.bell\");\nconst { Check } = VM.require(\"devs.near/widget/icons.check\");\nconst { ChevronDown } = VM.require(\"devs.near/widget/icons.chevron-down\");\nconst { ChevronUp } = VM.require(\"devs.near/widget/icons.chevron-up\");\nconst { Code } = VM.require(\"devs.near/widget/icons.code\");\nconst { Download } = VM.require(\"devs.near/widget/icons.download\");\nconst { Everything } = VM.require(\"devs.near/widget/icons.everything\");\nconst { FileCode } = VM.require(\"devs.near/widget/icons.file-code\");\nconst { GitFork } = VM.require(\"devs.near/widget/icons.git-fork\");\nconst { Grip } = VM.require(\"devs.near/widget/icons.grip\");\nconst { History } = VM.require(\"devs.near/widget/icons.history\");\nconst { LayoutTemplate } = VM.require(\"devs.near/widget/icons.layout-template\");\nconst { LogOut } = VM.require(\"devs.near/widget/icons.log-out\");\nconst { Menu } = VM.require(\"devs.near/widget/icons.menu\");\nconst { Moon } = VM.require(\"devs.near/widget/icons.moon\");\nconst { PaintRoller } = VM.require(\"devs.near/widget/icons.paint-roller\");\nconst { PartyPopper } = VM.require(\"devs.near/widget/icons.party-popper\");\nconst { Plus } = VM.require(\"devs.near/widget/icons.plus\");\nconst { QRCode } = VM.require(\"devs.near/widget/icons.qr-code\");\nconst { ShoppingCart } = VM.require(\"devs.near/widget/icons.shopping-cart\");\nconst { Sun } = VM.require(\"devs.near/widget/icons.sun\");\nconst { UserCircle } = VM.require(\"devs.near/widget/icons.user-circle\");\nconst { User } = VM.require(\"devs.near/widget/icons.user\");\nconst { Video } = VM.require(\"devs.near/widget/icons.video\");\nconst { X } = VM.require(\"devs.near/widget/icons.x\");\nreturn {\n Bell,\n Check,\n ChevronDown,\n ChevronUp,\n Code,\n Download,\n Everything,\n FileCode,\n GitFork,\n Grip,\n History,\n LayoutTemplate,\n LogOut,\n Menu,\n Moon,\n PaintRoller,\n PartyPopper,\n Plus,\n QRCode,\n ShoppingCart,\n Sun,\n UserCircle,\n User,\n Video,\n X,\n};\n" }, "icons.shopping-cart": { "": "const ShoppingCart = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_2300_12679)\">\n <path\n d=\"M1.7085 1.7085H3.37516L5.59183 12.0585C5.67314 12.4375 5.88405 12.7764 6.18826 13.0167C6.49246 13.257 6.87092 13.3838 7.2585 13.3752H15.4085C15.7878 13.3746 16.1556 13.2446 16.451 13.0067C16.7465 12.7688 16.9519 12.4373 17.0335 12.0668L18.4085 5.87516H4.26683M7.50012 17.5001C7.50012 17.9604 7.12703 18.3335 6.66679 18.3335C6.20655 18.3335 5.83346 17.9604 5.83346 17.5001C5.83346 17.0399 6.20655 16.6668 6.66679 16.6668C7.12703 16.6668 7.50012 17.0399 7.50012 17.5001ZM16.6668 17.5001C16.6668 17.9604 16.2937 18.3335 15.8335 18.3335C15.3732 18.3335 15.0001 17.9604 15.0001 17.5001C15.0001 17.0399 15.3732 16.6668 15.8335 16.6668C16.2937 16.6668 16.6668 17.0399 16.6668 17.5001Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_2300_12679\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nreturn { ShoppingCart };\n" }, "components.ui.avatar": { "": "const { User } = VM.require(\"devs.near/widget/icons\") || {\n User: () => <></>,\n};\nconst Avatar = ({ accountId, size, large, form, imageStyle, key }) => {\n const imageForm = form ?? \"circle\";\n const profile = Social.getr(`${accountId}/profile`);\n if (!profile.image) {\n return (\n <div\n key={key}\n style={{\n width: size ?? \"48px\",\n height: size ?? \"48px\",\n background: \"var(--separator-color, #e2e2e2)\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: \"18px\",\n fontWeight: \"500\",\n textAlign: \"center\",\n borderRadius: imageForm === \"rectangle\" ? \"8px\" : \"100%\",\n textTransform: \"capitalize\",\n color: \"var(--btn-secondary-color, #171717)\",\n ...imageStyle,\n }}\n >\n {profile.name ? (\n profile.name[0]\n ) : (\n <User\n width={size ? \"14px\" : \"18px\"}\n height={size ? \"14px\" : \"18px\"}\n color={\"var(--btn-secondary-color, #171717)\"}\n />\n )}\n </div>\n );\n }\n return (\n <Widget\n src=\"mob.near/widget/ProfileImage\"\n key={key}\n props={{\n accountId,\n className: \"\",\n fast: true,\n style: {},\n thumbnail: large ? \"large\" : \"thumbnail\",\n imageClassName: \"\",\n imageStyle: {\n width: size ?? \"48px\",\n height: size ?? \"48px\",\n borderRadius: imageForm === \"rectangle\" ? \"8px\" : \"100%\",\n objectFit: \"cover\",\n ...imageStyle,\n },\n }}\n />\n );\n};\nreturn { Avatar };\n" }, "components.ui.library": { "": "const { Avatar, AvatarGroup, Button, Badge, Container } = VM.require(\n \"devs.near/widget/components.Index\"\n) || {\n Avatar: () => <></>,\n AvatarGroup: () => <></>,\n Button: () => <></>,\n Badge: () => <></>,\n Container: () => <></>,\n};\nconst badgeSizes = [\"xx-small\", \"x-small\", \"small\", \"medium\"];\nconst badgeStyles = [\"alpha\", \"solid\"];\nconst badgeColors = [\"black\", \"blue\", \"green\", \"yellow\", \"red\"];\nconst avatarIds = [\n \"devs.near\",\n \"every.near\",\n \"devs.near\",\n \"devs.near\",\n \"devs.near\",\n \"devs.near\",\n \"devs.near\",\n \"devs.near\",\n];\nconst [selected, setSelected] = useState(null);\nconst badges = [];\nbadgeSizes.forEach((size) => {\n badgeStyles.forEach((style) => {\n badgeColors.forEach((color) => {\n badges.push({ size, style, color });\n });\n });\n});\nreturn (\n <div className=\"d-flex flex-column gap-3\">\n <h1>UI Library</h1>\n <h2>Button</h2>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button size={\"medium\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button size={\"small\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Button size={\"large\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button size={\"medium\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button size={\"small\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button variant=\"secondary\" size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"secondary\" size={\"medium\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"secondary\" size={\"small\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Button variant=\"secondary\" size={\"large\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"secondary\" size={\"medium\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"secondary\" size={\"small\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button variant=\"tertiary\" size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"tertiary\" size={\"medium\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"tertiary\" size={\"small\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Button variant=\"tertiary\" size={\"large\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"tertiary\" size={\"medium\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button variant=\"tertiary\" size={\"small\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button href=\"https://google.com\" size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button href=\"https://google.com\">\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button type=\"danger\" size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" size={\"medium\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" size={\"small\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Button type=\"danger\" size={\"large\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" size={\"medium\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" size={\"small\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button type=\"danger\" variant=\"secondary\" size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"secondary\" size={\"medium\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"secondary\" size={\"small\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Button type=\"danger\" variant=\"secondary\" size={\"large\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"secondary\" size={\"medium\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"secondary\" size={\"small\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <div className=\"d-flex align-items-center gap-5 flex-wrap\">\n <div className=\"d-flex align-items-center gap-3 flex-wrap\">\n <Button type=\"danger\" variant=\"tertiary\" size={\"large\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"tertiary\" size={\"medium\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"tertiary\" size={\"small\"}>\n <i className=\"bi bi-box\"></i> button <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Button type=\"danger\" variant=\"tertiary\" size={\"large\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"tertiary\" size={\"medium\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n <Button type=\"danger\" variant=\"tertiary\" size={\"small\"} icon>\n <i className=\"bi bi-box\"></i>\n </Button>\n </div>\n </div>\n <h2>Badge</h2>\n <div className=\"d-flex flex-wrap gap-3 align-items-center\">\n {badges.map((badge, index) => (\n <Badge\n style={{ width: \"max-content\" }}\n key={index}\n size={badge.size}\n variant={badge.style}\n color={badge.color}\n >\n 1\n </Badge>\n ))}\n </div>\n <h2>Chips</h2>\n <h3>Single</h3>\n <Widget\n src=\"devs.near/widget/components.chips\"\n props={{\n items: badgeColors,\n onSelect: (selected) => setSelected(selected),\n }}\n />\n <h3>Multiple</h3>\n <Widget\n src=\"devs.near/widget/components.chips\"\n props={{\n items: badgeColors,\n onSelect: (selected) => setSelected(selected),\n multiple: true,\n }}\n />\n <h2>Avatar</h2>\n <div className=\"d-flex align-items-center gap-3\">\n <Avatar accountId={\"devs.near\"} form=\"rectangle\" size=\"48px\" />\n <Avatar accountId={\"devs.near\"} form=\"rectangle\" size=\"40px\" />\n <Avatar accountId={\"devs.near\"} form=\"rectangle\" size=\"32px\" />\n <Avatar accountId={\"devs.near\"} form=\"rectangle\" size=\"24px\" />\n </div>\n <div className=\"d-flex align-items-center gap-3\">\n <Avatar accountId={\"devs.near\"} form=\"circle\" size=\"48px\" />\n <Avatar accountId={\"devs.near\"} form=\"circle\" size=\"40px\" />\n <Avatar accountId={\"devs.near\"} form=\"circle\" size=\"32px\" />\n <Avatar accountId={\"devs.near\"} form=\"circle\" size=\"24px\" />\n </div>\n <div className=\"d-flex flex-column gap-3\">\n <AvatarGroup accountIds={avatarIds} maxCount={5} size=\"48px\" />\n <AvatarGroup accountIds={avatarIds} maxCount={5} size=\"40px\" />\n <AvatarGroup accountIds={avatarIds} maxCount={5} size=\"32px\" />\n <AvatarGroup accountIds={avatarIds} maxCount={5} size=\"24px\" />\n </div>\n </div>\n);\n" }, "icons.log-out": { "": "const LogOut = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"#171717\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n class=\"lucide lucide-log-out\"\n >\n <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n <polyline points=\"16 17 21 12 16 7\" />\n <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n </svg>\n );\n};\nreturn { LogOut };\n" }, "components.ui.chip": { "": "const { Plus, X } = VM.require(\"devs.near/widget/icons\") || {\n Plus: () => <></>,\n X: () => <></>,\n};\nconst StyledChip = styled.div`\n display: inline-flex;\n height: 32px;\n padding: 8px 16px;\n justify-content: center;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n ${(props) => {\n if (props.size === \"small\") {\n return {\n height: \"24px\",\n padding: \"8px 12px\",\n };\n }\n }}\n border-radius: 12px;\n background: var(--chip-bg, #f3f3f3);\n color: var(--chip-color, #171717);\n font-family: Poppins, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 140%; /* 19.6px */\n letter-spacing: -0.14px;\n transition: all 300ms ease;\n cursor: pointer;\n &:hover {\n background: var(--chip-hover-bg, #e8e8e8);\n }\n &.selected {\n background: var(--chip-selected-bg, #171717);\n color: var(--chip-selected-color, #fff);\n svg {\n path {\n fill: var(--chip-selected-icon, #dbdbdb);\n }\n }\n &:hover {\n background: var(--chip-selected-hover-bg, #6f6f6f);\n }\n }\n`;\nconst Chip = ({\n children,\n selected,\n onClick,\n size,\n multiple,\n ...restProps\n}) => {\n return (\n <StyledChip\n size={size}\n className={selected ? \"selected\" : \"\"}\n onClick={onClick}\n {...restProps}\n >\n {children} {multiple ? selected ? <X /> : <Plus /> : null}\n </StyledChip>\n );\n};\nreturn { Chip };\n" }, "icons.party-popper": { "": "const PartyPopper = () => {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n >\n <g clip-path=\"url(#clip0_2300_12670)\">\n <path\n d=\"M4.83317 9.41654L1.6665 18.3332L10.5832 15.1749M3.33317 2.49984H3.3415M18.3332 6.6665H18.3415M12.4998 1.6665H12.5082M18.3332 16.6665H18.3415M18.3332 1.6665L16.4665 2.2915C15.9352 2.46849 15.4818 2.82454 15.1839 3.29877C14.8859 3.77301 14.762 4.336 14.8332 4.8915C14.9165 5.60817 14.3582 6.24984 13.6248 6.24984H13.3082C12.5915 6.24984 11.9748 6.74984 11.8415 7.44984L11.6665 8.33317M18.3332 10.8331L17.6498 10.5581C16.9332 10.2748 16.1332 10.7248 15.9998 11.4831C15.9082 12.0664 15.3998 12.4998 14.8082 12.4998H14.1665M9.1665 1.6665L9.4415 2.34984C9.72484 3.0665 9.27484 3.8665 8.5165 3.99984C7.93317 4.08317 7.49984 4.59984 7.49984 5.1915V5.83317M9.16652 10.8332C10.7749 12.4415 11.5249 14.3082 10.8332 14.9999C10.1415 15.6915 8.27485 14.9415 6.66652 13.3332C5.05819 11.7249 4.30819 9.85818 4.99985 9.16652C5.69152 8.47485 7.55819 9.22485 9.16652 10.8332Z\"\n stroke=\"#171717\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_2300_12670\">\n <rect width=\"20\" height=\"20\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n );\n};\nreturn { PartyPopper };\n" } } } } }