diff --git a/sparkle/.eslintrc.js b/sparkle/.eslintrc.js
index 9b6f8a864e3c..2327f50a4213 100644
--- a/sparkle/.eslintrc.js
+++ b/sparkle/.eslintrc.js
@@ -9,11 +9,13 @@ module.exports = {
ignorePatterns: [
"rollup.config.js",
"eslint.js",
+ ".eslintrc.js",
"dist/",
"node_modules/",
"svgr.config.js",
"postcss.config.js",
"tailwind.config.js",
+ "svgr-*-template.js",
],
rules: {
curly: ["error", "all"],
diff --git a/sparkle/build_icons.sh b/sparkle/build_icons.sh
index 5000263084f9..b72d714344b8 100755
--- a/sparkle/build_icons.sh
+++ b/sparkle/build_icons.sh
@@ -5,10 +5,16 @@ rm -rf src/icons/solid
rm -rf src/logo/platforms
rm -rf src/logo/dust
-npx @svgr/cli --out-dir src/icons/stroke/ src/icons/src/stroke/
-npx @svgr/cli --out-dir src/icons/solid/ src/icons/src/solid/
-npx @svgr/cli --out-dir src/logo/platforms/ src/logo/src/platforms/
-npx @svgr/cli --out-dir src/logo/dust/ src/logo/src/dust/
+npx @svgr/cli --no-prettier --index-template svgr-stroke-template.js --out-dir src/icons/stroke/ src/icons/src/stroke/
+npx @svgr/cli --no-prettier --index-template svgr-icon-template.js --out-dir src/icons/solid/ src/icons/src/solid/
+npx @svgr/cli --no-prettier --index-template svgr-logo-template.js --out-dir src/logo/platforms/ src/logo/src/platforms/
+npx @svgr/cli --no-prettier --index-template svgr-logo-template.js --out-dir src/logo/dust/ src/logo/src/dust/
+
+# Prettify and lint - prettier 3 is not working with svgr, so we need to run it separately
+npx prettier --write src/icons/stroke
+npx prettier --write src/icons/solid
+npx prettier --write src/logo/platforms
+npx prettier --write src/logo/dust
npx eslint --fix src/icons/stroke
npx eslint --fix src/icons/solid
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index befbdf2d163f..982a9c1ba6e4 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -50,6 +50,7 @@
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.3",
"babel-preset-react-app": "^10.0.1",
+ "copyfiles": "^2.4.1",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-simple-import-sort": "^12.1.0",
@@ -65,7 +66,9 @@
"sass-loader": "^13.3.2",
"storybook": "^7.4.6",
"tailwindcss": "^3.2.4",
+ "tsc-alias": "^1.8.10",
"typescript": "^5.4.5",
+ "typescript-transform-paths": "^3.4.7",
"uuid": "^9.0.1"
},
"peerDependencies": {
@@ -14532,6 +14535,58 @@
"url": "https://github.com/sponsors/mesqueeb"
}
},
+ "node_modules/copyfiles": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
+ "integrity": "sha512-fereAvAvxDrQDOXybk3Qu3dPbOoKoysFMWtkY3mv5BsL8//OSZVL5DCLYqgRfY5cWirgRzlC+WSrxp6Bo3eNZg==",
+ "dev": true,
+ "dependencies": {
+ "glob": "^7.0.5",
+ "minimatch": "^3.0.3",
+ "mkdirp": "^1.0.4",
+ "noms": "0.0.0",
+ "through2": "^2.0.1",
+ "untildify": "^4.0.0",
+ "yargs": "^16.1.0"
+ },
+ "bin": {
+ "copyfiles": "copyfiles",
+ "copyup": "copyfiles"
+ }
+ },
+ "node_modules/copyfiles/node_modules/glob": {
+ "version": "7.2.3",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+ "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+ "deprecated": "Glob versions prior to v9 are no longer supported",
+ "dev": true,
+ "dependencies": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.1.1",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ },
+ "engines": {
+ "node": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
+ "node_modules/copyfiles/node_modules/mkdirp": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+ "dev": true,
+ "bin": {
+ "mkdirp": "bin/cmd.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/core-js-compat": {
"version": "3.37.1",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
@@ -22154,6 +22209,19 @@
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
+ "node_modules/mylas": {
+ "version": "2.1.13",
+ "resolved": "https://registry.npmjs.org/mylas/-/mylas-2.1.13.tgz",
+ "integrity": "sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==",
+ "dev": true,
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/raouldeheer"
+ }
+ },
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -22313,6 +22381,40 @@
"integrity": "sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==",
"dev": true
},
+ "node_modules/noms": {
+ "version": "0.0.0",
+ "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
+ "integrity": "sha512-lNDU9VJaOPxUmXcLb+HQFeUgQQPtMI24Gt6hgfuMHRJgMRHMF/qZ4HJD3GDru4sSw9IQl2jPjAYnQrdIeLbwow==",
+ "dev": true,
+ "dependencies": {
+ "inherits": "^2.0.1",
+ "readable-stream": "~1.0.31"
+ }
+ },
+ "node_modules/noms/node_modules/isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+ "dev": true
+ },
+ "node_modules/noms/node_modules/readable-stream": {
+ "version": "1.0.34",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+ "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+ "dev": true,
+ "dependencies": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.1",
+ "isarray": "0.0.1",
+ "string_decoder": "~0.10.x"
+ }
+ },
+ "node_modules/noms/node_modules/string_decoder": {
+ "version": "0.10.31",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+ "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+ "dev": true
+ },
"node_modules/normalize-package-data": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -23112,6 +23214,18 @@
"pathe": "^1.1.2"
}
},
+ "node_modules/plimit-lit": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/plimit-lit/-/plimit-lit-1.6.1.tgz",
+ "integrity": "sha512-B7+VDyb8Tl6oMJT9oSO2CW8XC/T4UcJGrwOVoNGwOQsQYhlpfajmrMj5xeejqaASq3V/EqThyOeATEOMuSEXiA==",
+ "dev": true,
+ "dependencies": {
+ "queue-lit": "^1.5.1"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/polished": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
@@ -24236,6 +24350,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/queue-lit": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/queue-lit/-/queue-lit-1.5.2.tgz",
+ "integrity": "sha512-tLc36IOPeMAubu8BkW8YDBV+WyIgKlYU7zUNs0J5Vk9skSZ4JfGlPOqplP0aHdfv7HL0B2Pg6nwiq60Qc6M2Hw==",
+ "dev": true,
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -27326,6 +27449,23 @@
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"dev": true
},
+ "node_modules/tsc-alias": {
+ "version": "1.8.10",
+ "resolved": "https://registry.npmjs.org/tsc-alias/-/tsc-alias-1.8.10.tgz",
+ "integrity": "sha512-Ibv4KAWfFkFdKJxnWfVtdOmB0Zi1RJVxcbPGiCDsFpCQSsmpWyuzHG3rQyI5YkobWwxFPEyQfu1hdo4qLG2zPw==",
+ "dev": true,
+ "dependencies": {
+ "chokidar": "^3.5.3",
+ "commander": "^9.0.0",
+ "globby": "^11.0.4",
+ "mylas": "^2.1.9",
+ "normalize-path": "^3.0.0",
+ "plimit-lit": "^1.2.6"
+ },
+ "bin": {
+ "tsc-alias": "dist/bin/index.js"
+ }
+ },
"node_modules/tsconfig-paths": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -27503,6 +27643,18 @@
"node": ">=14.17"
}
},
+ "node_modules/typescript-transform-paths": {
+ "version": "3.4.10",
+ "resolved": "https://registry.npmjs.org/typescript-transform-paths/-/typescript-transform-paths-3.4.10.tgz",
+ "integrity": "sha512-OPBjXDnwX/B4JzewvRAzEzcNK+hQn/JonCfUN93VARsFQcj/wk//4RJ3FPp/SgzsT1s1EJJhOass5grxy8Y2yA==",
+ "dev": true,
+ "dependencies": {
+ "minimatch": "^3.1.2"
+ },
+ "peerDependencies": {
+ "typescript": ">=3.6.5"
+ }
+ },
"node_modules/ufo": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
diff --git a/sparkle/package.json b/sparkle/package.json
index ab4804ba28c1..2302331eeba7 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,9 +1,12 @@
{
"name": "@dust-tt/sparkle",
- "version": "0.2.219",
+ "version": "0.2.220",
"scripts": {
- "build": "rm -rf dist && rollup -c",
- "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
+ "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
+ "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
+ "build:esm": "npm run copy:esm && tsc && tsc-alias",
+ "copy:esm": "copyfiles -u 1 src/**/*.css src/**/*.svg src/**/*.png src/**/*.json dist/esm",
+ "build:cjs": "rollup -c",
"storybook": "storybook dev -p 6006 --debug-webpack",
"build-storybook": "storybook build",
"format:check": "prettier --check .",
@@ -11,7 +14,7 @@
"lint": "eslint ."
},
"main": "dist/cjs/index.js",
- "types": "dist/cjs/index.d.ts",
+ "types": "dist/esm/index.d.ts",
"module": "dist/esm/index.js",
"files": [
"dist/",
@@ -45,6 +48,7 @@
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.3",
"babel-preset-react-app": "^10.0.1",
+ "copyfiles": "^2.4.1",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-simple-import-sort": "^12.1.0",
@@ -60,7 +64,9 @@
"sass-loader": "^13.3.2",
"storybook": "^7.4.6",
"tailwindcss": "^3.2.4",
+ "tsc-alias": "^1.8.10",
"typescript": "^5.4.5",
+ "typescript-transform-paths": "^3.4.7",
"uuid": "^9.0.1"
},
"peerDependencies": {
diff --git a/sparkle/rollup.config.mjs b/sparkle/rollup.config.mjs
index 7ef5ecfd5a15..db34e063747d 100644
--- a/sparkle/rollup.config.mjs
+++ b/sparkle/rollup.config.mjs
@@ -1,32 +1,23 @@
+// Rollup configuration for building the library as a cjs bundle. This is used by front workers.
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import resolve from "@rollup/plugin-node-resolve";
-import typescript from "@rollup/plugin-typescript";
import autoprefixer from "autoprefixer";
import fs from "fs";
import path from "path";
+import { rollup } from "rollup";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import tailwindcss from "tailwindcss";
import { fileURLToPath } from "url";
-let tsPluginOptions = {
- tsconfig: "./tsconfig.json",
- outputToFilesystem: true,
-};
-
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const pkg = JSON.parse(
fs.readFileSync(path.resolve(__dirname, "package.json"), "utf-8")
);
-let entryFile = "src/index.ts";
-tsPluginOptions.exclude = "src/index_with_tw_base.ts";
-if (process.env.INCLUDE_TW_BASE) {
- entryFile = "src/index_with_tw_base.ts";
- tsPluginOptions.exclude = "src/index.ts";
-}
+let entryFile = "dist/esm/index.js";
const config = {
input: entryFile,
@@ -37,17 +28,11 @@ const config = {
sourcemap: true,
name: "react-lib",
},
- {
- file: pkg.module,
- format: "esm",
- sourcemap: true,
- },
],
plugins: [
external(),
resolve(),
commonjs(),
- typescript(tsPluginOptions),
postcss({
plugins: [
tailwindcss({
diff --git a/sparkle/src/_index.ts b/sparkle/src/_index.ts
deleted file mode 100644
index 493c70f9b8ab..000000000000
--- a/sparkle/src/_index.ts
+++ /dev/null
@@ -1,784 +0,0 @@
-import { SparkleContext } from "./context";
-export { SparkleContext };
-
-import * as avatarUtils from "./lib/avatar/utils";
-export { avatarUtils };
-
-import { Div3D, Hover3D } from "./components/Hover3D";
-export { Div3D, Hover3D };
-
-import { Hoverable } from "./components/Hoverable";
-export { Hoverable };
-
-import { Button } from "./components/Button";
-export { Button };
-
-import { CardButton } from "./components/CardButton";
-export { CardButton };
-
-import { EmojiPicker } from "./components/EmojiPicker";
-export { EmojiPicker };
-
-import { SliderToggle } from "./components/SliderToggle";
-export { SliderToggle };
-
-import { Collapsible } from "./components/Collapsible";
-export { Collapsible };
-
-import { Tab } from "./components/Tab";
-export { Tab };
-
-import { Item } from "./components/Item";
-export { Item };
-
-import { ContextItem } from "./components/ContextItem";
-export { ContextItem };
-
-import { AssistantPreview } from "./components/AssistantPreview";
-export { AssistantPreview };
-
-import { Banner } from "./components/Banner";
-export { Banner };
-
-import { PaginatedCitationsGrid } from "./components/PaginatedCitationsGrid";
-export { PaginatedCitationsGrid };
-
-import { Notification } from "./components/Notification";
-export { Notification };
-
-import { Chip } from "./components/Chip";
-export { Chip };
-
-import { Citation } from "./components/Citation";
-export { Citation };
-
-import { ZoomableImageCitationWrapper } from "./components/ZoomableImageCitationWrapper";
-export { ZoomableImageCitationWrapper };
-
-import { DropdownMenu } from "./components/DropdownMenu";
-export { DropdownMenu };
-
-import { Page } from "./components/Page";
-export { Page };
-
-import { Pagination } from "./components/Pagination";
-export { Pagination };
-
-import { BarHeader } from "./components/BarHeader";
-export { BarHeader };
-
-import { PriceTable } from "./components/PriceTable";
-export { PriceTable };
-
-import { Icon } from "./components/Icon";
-export { Icon };
-
-import { Logo } from "./logo/Logo";
-export { Logo };
-
-import { Checkbox } from "./components/Checkbox";
-export { Checkbox };
-
-import { IconButton } from "./components/IconButton";
-export { IconButton };
-
-import { Tree } from "./components/Tree";
-export { Tree };
-
-import { IconToggleButton } from "./components/IconToggleButton";
-export { IconToggleButton };
-
-import { Tooltip } from "./components/Tooltip";
-export { Tooltip };
-
-import { ContentMessage } from "./components/ContentMessage";
-export { ContentMessage };
-
-import { ColorPicker } from "./components/ColorPicker";
-export { ColorPicker };
-
-import { Avatar } from "./components/Avatar";
-export { Avatar };
-
-import Spinner from "./components/Spinner";
-export { Spinner };
-
-import DropzoneOverlay from "./components/DropzoneOverlay";
-export { DropzoneOverlay };
-
-import CollapseButton from "./components/CollapseButton";
-export { CollapseButton };
-
-import { Modal } from "./components/Modal";
-export { Modal };
-
-import ConfettiBackground from "./components/ConfettiBackground";
-export { ConfettiBackground };
-
-import { ElementModal } from "./components/ElementModal";
-export { ElementModal };
-
-import { Dialog } from "./components/Dialog";
-export { Dialog };
-
-import { ElementDialog } from "./components/ElementDialog";
-export { ElementDialog };
-
-import { Input } from "./components/Input";
-export { Input };
-
-import { Searchbar } from "./components/Searchbar";
-export { Searchbar };
-
-import { RadioButton } from "./components/RadioButton";
-export { RadioButton };
-
-import { Popup } from "./components/Popup";
-export { Popup };
-
-import { FilterChips } from "./components/FilterChips";
-export { FilterChips };
-
-import { TextArea } from "./components/TextArea";
-export { TextArea };
-
-import { Markdown } from "./components/Markdown";
-export { Markdown };
-
-import { DataTable } from "./components/DataTable";
-export { DataTable };
-
-import { Breadcrumbs } from "@sparkle/components/Breadcrumbs";
-export { Breadcrumbs };
-
-import {
- LogoHorizontalColor as LogoHorizontalColorLogo,
- LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,
- LogoHorizontalColorLayer2 as LogoHorizontalColorLogoLayer2,
- LogoHorizontalDark as LogoHorizontalDarkLogo,
- LogoHorizontalWhite as LogoHorizontalWhiteLogo,
- LogoSquareColor as LogoSquareColorLogo,
- LogoSquareColorLayer1 as LogoSquareColorLogoLayer1,
- LogoSquareColorLayer2 as LogoSquareColorLogoLayer2,
- LogoSquareDark as LogoSquareDarkLogo,
- LogoSquareWhite as LogoSquareWhiteLogo,
-} from "./logo/dust";
-
-export {
- LogoHorizontalColorLogo,
- LogoHorizontalColorLogoLayer1,
- LogoHorizontalColorLogoLayer2,
- LogoHorizontalDarkLogo,
- LogoHorizontalWhiteLogo,
- LogoSquareColorLogo,
- LogoSquareColorLogoLayer1,
- LogoSquareColorLogoLayer2,
- LogoSquareDarkLogo,
- LogoSquareWhiteLogo,
-};
-
-import {
- Ai21 as Ai21Logo,
- Anthropic as AnthropicLogo,
- AnthropicWhite as AnthropicWhiteLogo,
- Claude as ClaudeLogo,
- Cohere as CohereLogo,
- Confluence as ConfluenceLogo,
- Drive as DriveLogo,
- Gemini as GeminiLogo,
- Github as GithubLogo,
- GithubWhite as GithubWhiteLogo,
- Gong as GongLogo,
- Google as GoogleLogo,
- GoogleDoc as GoogleDocLogo,
- GooglePdf as GooglePdfLogo,
- GoogleSlide as GoogleSlideLogo,
- GoogleSpreadsheet as GoogleSpreadsheetLogo,
- Gpt3 as Gpt3Logo,
- Gpt4 as Gpt4Logo,
- HuggingFace as HuggingFaceLogo,
- Intercom as IntercomLogo,
- Microsoft as MicrosoftLogo,
- MicrosoftExcel as MicrosoftExcelLogo,
- MicrosoftPowerpoint as MicrosoftPowerpointLogo,
- MicrosoftWord as MicrosoftWordLogo,
- Mistral as MistralLogo,
- Notion as NotionLogo,
- Office as OfficeLogo,
- Openai as OpenaiLogo,
- OpenaiWhite as OpenaiWhiteLogo,
- Replicate as ReplicateLogo,
- Salesforce as SalesforceLogo,
- Slack as SlackLogo,
- Zapier as ZapierLogo,
- Zendesk as ZendeskLogo,
-} from "./logo/platforms";
-
-export {
- Ai21Logo,
- AnthropicLogo,
- AnthropicWhiteLogo,
- ClaudeLogo,
- CohereLogo,
- ConfluenceLogo,
- DriveLogo,
- GeminiLogo,
- GithubLogo,
- GithubWhiteLogo,
- GongLogo,
- GoogleDocLogo,
- GoogleLogo,
- GooglePdfLogo,
- GoogleSlideLogo,
- GoogleSpreadsheetLogo,
- Gpt3Logo,
- Gpt4Logo,
- HuggingFaceLogo,
- IntercomLogo,
- MicrosoftExcelLogo,
- MicrosoftLogo,
- MicrosoftPowerpointLogo,
- MicrosoftWordLogo,
- MistralLogo,
- NotionLogo,
- OfficeLogo,
- OpenaiLogo,
- OpenaiWhiteLogo,
- ReplicateLogo,
- SalesforceLogo,
- SlackLogo,
- ZapierLogo,
- ZendeskLogo,
-};
-
-import {
- ArrowDown as ArrowDownIcon,
- ArrowDownCircle as ArrowDownCircleIcon,
- ArrowDownOnSquare as ArrowDownOnSquareIcon,
- ArrowDownS as ArrowDownSIcon,
- ArrowLeft as ArrowLeftIcon,
- ArrowLeftS as ArrowLeftSIcon,
- ArrowPath as ArrowPathIcon,
- ArrowRight as ArrowRightIcon,
- ArrowRightS as ArrowRightSIcon,
- ArrowUp as ArrowUpIcon,
- ArrowUpOnSquare as ArrowUpOnSquareIcon,
- ArrowUpS as ArrowUpSIcon,
- Attachment as AttachmentIcon,
- Backspace as BackspaceIcon,
- Bookmark as BookmarkIcon,
- BookOpen as BookOpenIcon,
- Braces as BracesIcon,
- Card as CardIcon,
- ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusIcon,
- ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextIcon,
- ChatBubbleLeftRight as ChatBubbleLeftRightIcon,
- ChatBubbleThought as ChatBubbleThoughtIcon,
- Check as CheckIcon,
- CheckCircle as CheckCircleIcon,
- ChevronDoubleLeft as ChevronDoubleLeftIcon,
- ChevronDoubleRight as ChevronDoubleRightIcon,
- ChevronDown as ChevronDownIcon,
- ChevronLeft as ChevronLeftIcon,
- ChevronRight as ChevronRightIcon,
- ChevronUp as ChevronUpIcon,
- ChevronUpDown as ChevronUpDownIcon,
- Circle as CircleIcon,
- Clipboard as ClipboardIcon,
- ClipboardCheck as ClipboardCheckIcon,
- Clock as ClockIcon,
- CloudArrowDown as CloudArrowDownIcon,
- CloudArrowLeftRight as CloudArrowLeftRightIcon,
- CloudArrowUp as CloudArrowUpIcon,
- CloudX as CloudXIcon,
- Cog6Tooth as Cog6ToothIcon,
- Command as CommandIcon,
- CommandLine as CommandLineIcon,
- Company as CompanyIcon,
- Cube as CubeIcon,
- Dash as DashIcon,
- Document as DocumentIcon,
- DocumentDuplicate as DocumentDuplicateIcon,
- DocumentPile as DocumentPileIcon,
- DocumentPlus as DocumentPlusIcon,
- DocumentText as DocumentTextIcon,
- Dust as DustIcon,
- EmotionLaugh as EmotionLaughIcon,
- Equalizer as EqualizerIcon,
- ExclamationCircle as ExclamationCircleIcon,
- ExternalLink as ExternalLinkIcon,
- Eye as EyeIcon,
- EyeSlash as EyeSlashIcon,
- Filter as FilterIcon,
- Fire as FireIcon,
- Flag as FlagIcon,
- Folder as FolderIcon,
- FolderOpen as FolderOpenIcon,
- Fullscreen as FullscreenIcon,
- FullscreenExit as FullscreenExitIcon,
- GlobeAlt as GlobeAltIcon,
- Grab as GrabIcon,
- HandThumbDown as HandThumbDownIcon,
- HandThumbUp as HandThumbUpIcon,
- Heart as HeartIcon,
- HeartAlt as HeartAltIcon,
- Hexagon as HexagonIcon,
- History as HistoryIcon,
- Home as HomeIcon,
- Image as ImageIcon,
- InformationCircle as InformationCircleIcon,
- Key as KeyIcon,
- Lightbulb as LightbulbIcon,
- Link as LinkIcon,
- List as ListIcon,
- ListAdd as ListAddIcon,
- ListCheck as ListCheckIcon,
- ListRemove as ListRemoveIcon,
- Lock as LockIcon,
- Login as LoginIcon,
- Logout as LogoutIcon,
- Magic as MagicIcon,
- MagnifyingGlass as MagnifyingGlassIcon,
- MarkPen as MarkPenIcon,
- Menu as MenuIcon,
- More as MoreIcon,
- MovingMail as MovingMailIcon,
- Paint as PaintIcon,
- PaperAirplane as PaperAirplaneIcon,
- Pause as PauseIcon,
- PencilSquare as PencilSquareIcon,
- Planet as PlanetIcon,
- Play as PlayIcon,
- Plus as PlusIcon,
- PlusCircle as PlusCircleIcon,
- Pushpin as PushpinIcon,
- Puzzle as PuzzleIcon,
- QuestionMarkCircle as QuestionMarkCircleIcon,
- Reaction as ReactionIcon,
- Rectangle as RectangleIcon,
- Robot as RobotIcon,
- Rocket as RocketIcon,
- Scan as ScanIcon,
- Server as ServerIcon,
- ShakeHands as ShakeHandsIcon,
- Shapes as ShapesIcon,
- Sparkles as SparklesIcon,
- Square as SquareIcon,
- Square3Stack3D as Square3Stack3DIcon,
- Star as StarIcon,
- Stop as StopIcon,
- Table as TableIcon,
- Tag as TagIcon,
- Template as TemplateIcon,
- TestTube as TestTubeIcon,
- Time as TimeIcon,
- Translate as TranslateIcon,
- Trash as TrashIcon,
- Triangle as TriangleIcon,
- User as UserIcon,
- UserArrow as UserArrowIcon,
- UserGroup as UserGroupIcon,
- UserPlus as UserPlusIcon,
- Wrench as WrenchIcon,
- XCircle as XCircleIcon,
- XMark as XMarkIcon,
-} from "./icons/solid";
-
-export {
- ArrowDownCircleIcon,
- ArrowDownIcon,
- ArrowDownOnSquareIcon,
- ArrowDownSIcon,
- ArrowLeftIcon,
- ArrowLeftSIcon,
- ArrowPathIcon,
- ArrowRightIcon,
- ArrowRightSIcon,
- ArrowUpIcon,
- ArrowUpOnSquareIcon,
- ArrowUpSIcon,
- AttachmentIcon,
- BackspaceIcon,
- BookmarkIcon,
- BookOpenIcon,
- BracesIcon,
- CardIcon,
- ChatBubbleBottomCenterPlusIcon,
- ChatBubbleBottomCenterTextIcon,
- ChatBubbleLeftRightIcon,
- ChatBubbleThoughtIcon,
- CheckCircleIcon,
- CheckIcon,
- ChevronDoubleLeftIcon,
- ChevronDoubleRightIcon,
- ChevronDownIcon,
- ChevronLeftIcon,
- ChevronRightIcon,
- ChevronUpDownIcon,
- ChevronUpIcon,
- CircleIcon,
- ClipboardCheckIcon,
- ClipboardIcon,
- ClockIcon,
- CloudArrowDownIcon,
- CloudArrowLeftRightIcon,
- CloudArrowUpIcon,
- CloudXIcon,
- Cog6ToothIcon,
- CommandIcon,
- CommandLineIcon,
- CompanyIcon,
- CubeIcon,
- DashIcon,
- DocumentDuplicateIcon,
- DocumentIcon,
- DocumentPileIcon,
- DocumentPlusIcon,
- DocumentTextIcon,
- DustIcon,
- EmotionLaughIcon,
- EqualizerIcon,
- ExclamationCircleIcon,
- ExternalLinkIcon,
- EyeIcon,
- EyeSlashIcon,
- FilterIcon,
- FireIcon,
- FlagIcon,
- FolderIcon,
- FolderOpenIcon,
- FullscreenExitIcon,
- FullscreenIcon,
- GlobeAltIcon,
- GrabIcon,
- HandThumbDownIcon,
- HandThumbUpIcon,
- HeartAltIcon,
- HeartIcon,
- HexagonIcon,
- HistoryIcon,
- HomeIcon,
- ImageIcon,
- InformationCircleIcon,
- KeyIcon,
- LightbulbIcon,
- LinkIcon,
- ListAddIcon,
- ListCheckIcon,
- ListIcon,
- ListRemoveIcon,
- LockIcon,
- LoginIcon,
- LogoutIcon,
- MagicIcon,
- MagnifyingGlassIcon,
- MarkPenIcon,
- MenuIcon,
- MoreIcon,
- MovingMailIcon,
- PaintIcon,
- PaperAirplaneIcon,
- PauseIcon,
- PencilSquareIcon,
- PlanetIcon,
- PlayIcon,
- PlusCircleIcon,
- PlusIcon,
- PushpinIcon,
- PuzzleIcon,
- QuestionMarkCircleIcon,
- ReactionIcon,
- RectangleIcon,
- RobotIcon,
- RocketIcon,
- ScanIcon,
- ServerIcon,
- ShakeHandsIcon,
- ShapesIcon,
- SparklesIcon,
- Square3Stack3DIcon,
- SquareIcon,
- StarIcon,
- StopIcon,
- TableIcon,
- TagIcon,
- TemplateIcon,
- TestTubeIcon,
- TimeIcon,
- TranslateIcon,
- TrashIcon,
- TriangleIcon,
- UserArrowIcon,
- UserGroupIcon,
- UserIcon,
- UserPlusIcon,
- WrenchIcon,
- XCircleIcon,
- XMarkIcon,
-};
-
-import {
- ArrowDown as ArrowDownStrokeIcon,
- ArrowDownCircle as ArrowDownCircleStrokeIcon,
- ArrowDownOnSquare as ArrowDownOnSquareStrokeIcon,
- ArrowDownS as ArrowDownSStrokeIcon,
- ArrowLeft as ArrowLeftStrokeIcon,
- ArrowLeftS as ArrowLeftSStrokeIcon,
- ArrowPath as ArrowPathStrokeIcon,
- ArrowRight as ArrowRightStrokeIcon,
- ArrowRightS as ArrowRightSStrokeIcon,
- ArrowUp as ArrowUpStrokeIcon,
- ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon,
- ArrowUpS as ArrowUpSStrokeIcon,
- Attachment as AttachmentStrokeIcon,
- Backspace as BackspaceStrokeIcon,
- Bookmark as BookmarkStrokeIcon,
- BookOpen as BookOpenStrokeIcon,
- Braces as BracesStrokeIcon,
- Card as CardStrokeIcon,
- ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusStrokeIcon,
- ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextStrokeIcon,
- ChatBubbleLeftRight as ChatBubbleLeftRightStrokeIcon,
- ChatBubbleThought as ChatBubbleThoughtStrokeIcon,
- Check as CheckStrokeIcon,
- CheckCircle as CheckCircleStrokeIcon,
- ChevronDoubleLeft as ChevronDoubleLeftStrokeIcon,
- ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
- ChevronDown as ChevronDownStrokeIcon,
- ChevronLeft as ChevronLeftStrokeIcon,
- ChevronRight as ChevronRightStrokeIcon,
- ChevronUp as ChevronUpStrokeIcon,
- ChevronUpDown as ChevronUpDownStrokeIcon,
- Circle as CircleStrokeIcon,
- Clipboard as ClipboardStrokeIcon,
- ClipboardCheck as ClipboardCheckStrokeIcon,
- Clock as ClockStrokeIcon,
- CloudArrowDown as CloudArrowDownStrokeIcon,
- CloudArrowLeftRight as CloudArrowLeftRightStrokeIcon,
- CloudArrowUp as CloudArrowUpStrokeIcon,
- CloudX as CloudXStrokeIcon,
- Cog6Tooth as Cog6ToothStrokeIcon,
- Command as CommandStrokeIcon,
- CommandLine as CommandLineStrokeIcon,
- Company as CompanyStrokeIcon,
- Cube as CubeStrokeIcon,
- Dash as DashStrokeIcon,
- Document as DocumentStrokeIcon,
- DocumentDuplicate as DocumentDuplicateStrokeIcon,
- DocumentPile as DocumentPileStrokeIcon,
- DocumentPlus as DocumentPlusStrokeIcon,
- DocumentText as DocumentTextStrokeIcon,
- Dust as DustStrokeIcon,
- EmotionLaugh as EmotionLaughStrokeIcon,
- Equalizer as EqualizerStrokeIcon,
- ExclamationCircle as ExclamationCircleStrokeIcon,
- ExternalLink as ExternalLinkStrokeIcon,
- Eye as EyeStrokeIcon,
- EyeSlash as EyeSlashStrokeIcon,
- Filter as FilterStrokeIcon,
- Fire as FireStrokeIcon,
- Flag as FlagStrokeIcon,
- Folder as FolderStrokeIcon,
- FolderOpen as FolderOpenStrokeIcon,
- Fullscreen as FullscreenStrokeIcon,
- FullscreenExit as FullscreenExitStrokeIcon,
- GlobeAlt as GlobeAltStrokeIcon,
- Grab as GrabStrokeIcon,
- HandThumbDown as HandThumbDownStrokeIcon,
- HandThumbUp as HandThumbUpStrokeIcon,
- Heart as HeartStrokeIcon,
- HeartAlt as HeartAltStrokeIcon,
- Hexagon as HexagonStrokeIcon,
- History as HistoryStrokeIcon,
- Home as HomeStrokeIcon,
- Image as ImageStrokeIcon,
- InformationCircle as InformationCircleStrokeIcon,
- Key as KeyStrokeIcon,
- Lightbulb as LightbulbStrokeIcon,
- Link as LinkStrokeIcon,
- List as ListStrokeIcon,
- ListAdd as ListAddStrokeIcon,
- ListCheck as ListCheckStrokeIcon,
- ListRemove as ListRemoveStrokeIcon,
- Lock as LockStrokeIcon,
- Login as LoginStrokeIcon,
- Logout as LogoutStrokeIcon,
- Magic as MagicStrokeIcon,
- MagnifyingGlass as MagnifyingGlassStrokeIcon,
- MarkPen as MarkPenStrokeIcon,
- Menu as MenuStrokeIcon,
- More as MoreStrokeIcon,
- MovingMail as MovingMailStrokeIcon,
- Paint as PaintStrokeIcon,
- PaperAirplane as PaperAirplaneStrokeIcon,
- Pause as PauseStrokeIcon,
- PencilSquare as PencilSquareStrokeIcon,
- Planet as PlanetStrokeIcon,
- Play as PlayStrokeIcon,
- Plus as PlusStrokeIcon,
- PlusCircle as PlusCircleStrokeIcon,
- Pushpin as PushpinStrokeIcon,
- Puzzle as PuzzleStrokeIcon,
- QuestionMarkCircle as QuestionMarkCircleStrokeIcon,
- Reaction as ReactionStrokeIcon,
- Rectangle as RectangleStrokeIcon,
- Robot as RobotStrokeIcon,
- Rocket as RocketStrokeIcon,
- Scan as ScanStrokeIcon,
- Server as ServerStrokeIcon,
- ShakeHands as ShakeHandsStrokeIcon,
- Shapes as ShapesStrokeIcon,
- Sparkles as SparklesStrokeIcon,
- Square as SquareStrokeIcon,
- Square3Stack3D as Square3Stack3DStrokeIcon,
- Star as StarStrokeIcon,
- Stop as StopStrokeIcon,
- Table as TableStrokeIcon,
- Tag as TagStrokeIcon,
- Template as TemplateStrokeIcon,
- TestTube as TestTubeStrokeIcon,
- Time as TimeStrokeIcon,
- Translate as TranslateStrokeIcon,
- Trash as TrashStrokeIcon,
- Triangle as TriangleStrokeIcon,
- User as UserStrokeIcon,
- UserArrow as UserArrowStrokeIcon,
- UserGroup as UserGroupStrokeIcon,
- UserPlus as UserPlusStrokeIcon,
- Wrench as WrenchStrokeIcon,
- XCircle as XCircleStrokeIcon,
- XMark as XMarkStrokeIcon,
-} from "./icons/stroke";
-
-export {
- ArrowDownCircleStrokeIcon,
- ArrowDownOnSquareStrokeIcon,
- ArrowDownSStrokeIcon,
- ArrowDownStrokeIcon,
- ArrowLeftSStrokeIcon,
- ArrowLeftStrokeIcon,
- ArrowPathStrokeIcon,
- ArrowRightSStrokeIcon,
- ArrowRightStrokeIcon,
- ArrowUpOnSquareStrokeIcon,
- ArrowUpSStrokeIcon,
- ArrowUpStrokeIcon,
- AttachmentStrokeIcon,
- BackspaceStrokeIcon,
- BookmarkStrokeIcon,
- BookOpenStrokeIcon,
- BracesStrokeIcon,
- CardStrokeIcon,
- ChatBubbleBottomCenterPlusStrokeIcon,
- ChatBubbleBottomCenterTextStrokeIcon,
- ChatBubbleLeftRightStrokeIcon,
- ChatBubbleThoughtStrokeIcon,
- CheckCircleStrokeIcon,
- CheckStrokeIcon,
- ChevronDoubleLeftStrokeIcon,
- ChevronDoubleRightStrokeIcon,
- ChevronDownStrokeIcon,
- ChevronLeftStrokeIcon,
- ChevronRightStrokeIcon,
- ChevronUpDownStrokeIcon,
- ChevronUpStrokeIcon,
- CircleStrokeIcon,
- ClipboardCheckStrokeIcon,
- ClipboardStrokeIcon,
- ClockStrokeIcon,
- CloudArrowDownStrokeIcon,
- CloudArrowLeftRightStrokeIcon,
- CloudArrowUpStrokeIcon,
- CloudXStrokeIcon,
- Cog6ToothStrokeIcon,
- CommandLineStrokeIcon,
- CommandStrokeIcon,
- CompanyStrokeIcon,
- CubeStrokeIcon,
- DashStrokeIcon,
- DocumentDuplicateStrokeIcon,
- DocumentPileStrokeIcon,
- DocumentPlusStrokeIcon,
- DocumentStrokeIcon,
- DocumentTextStrokeIcon,
- DustStrokeIcon,
- EmotionLaughStrokeIcon,
- EqualizerStrokeIcon,
- ExclamationCircleStrokeIcon,
- ExternalLinkStrokeIcon,
- EyeSlashStrokeIcon,
- EyeStrokeIcon,
- FilterStrokeIcon,
- FireStrokeIcon,
- FlagStrokeIcon,
- FolderOpenStrokeIcon,
- FolderStrokeIcon,
- FullscreenExitStrokeIcon,
- FullscreenStrokeIcon,
- GlobeAltStrokeIcon,
- GrabStrokeIcon,
- HandThumbDownStrokeIcon,
- HandThumbUpStrokeIcon,
- HeartAltStrokeIcon,
- HeartStrokeIcon,
- HexagonStrokeIcon,
- HistoryStrokeIcon,
- HomeStrokeIcon,
- ImageStrokeIcon,
- InformationCircleStrokeIcon,
- KeyStrokeIcon,
- LightbulbStrokeIcon,
- LinkStrokeIcon,
- ListAddStrokeIcon,
- ListCheckStrokeIcon,
- ListRemoveStrokeIcon,
- ListStrokeIcon,
- LockStrokeIcon,
- LoginStrokeIcon,
- LogoutStrokeIcon,
- MagicStrokeIcon,
- MagnifyingGlassStrokeIcon,
- MarkPenStrokeIcon,
- MenuStrokeIcon,
- MoreStrokeIcon,
- MovingMailStrokeIcon,
- PaintStrokeIcon,
- PaperAirplaneStrokeIcon,
- PauseStrokeIcon,
- PencilSquareStrokeIcon,
- PlanetStrokeIcon,
- PlayStrokeIcon,
- PlusCircleStrokeIcon,
- PlusStrokeIcon,
- PushpinStrokeIcon,
- PuzzleStrokeIcon,
- QuestionMarkCircleStrokeIcon,
- ReactionStrokeIcon,
- RectangleStrokeIcon,
- RobotStrokeIcon,
- RocketStrokeIcon,
- ScanStrokeIcon,
- ServerStrokeIcon,
- ShakeHandsStrokeIcon,
- ShapesStrokeIcon,
- SparklesStrokeIcon,
- Square3Stack3DStrokeIcon,
- SquareStrokeIcon,
- StarStrokeIcon,
- StopStrokeIcon,
- TableStrokeIcon,
- TagStrokeIcon,
- TemplateStrokeIcon,
- TestTubeStrokeIcon,
- TimeStrokeIcon,
- TranslateStrokeIcon,
- TrashStrokeIcon,
- TriangleStrokeIcon,
- UserArrowStrokeIcon,
- UserGroupStrokeIcon,
- UserPlusStrokeIcon,
- UserStrokeIcon,
- WrenchStrokeIcon,
- XCircleStrokeIcon,
- XMarkStrokeIcon,
-};
diff --git a/sparkle/src/components/AssistantPreview.tsx b/sparkle/src/components/AssistantPreview.tsx
index d4e223f62f2b..7c713ab6391e 100644
--- a/sparkle/src/components/AssistantPreview.tsx
+++ b/sparkle/src/components/AssistantPreview.tsx
@@ -1,7 +1,9 @@
import React, { useState } from "react";
-import { Button, CardButton, MoreIcon } from "@sparkle/_index";
import { Avatar } from "@sparkle/components/Avatar";
+import { Button } from "@sparkle/components/Button";
+import { CardButton } from "@sparkle/components/CardButton";
+import { MoreIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
type AssistantPreviewVariant = "list" | "minimal";
diff --git a/sparkle/src/components/Avatar.tsx b/sparkle/src/components/Avatar.tsx
index 1caaf55ae1cf..51bcdfbe7a57 100644
--- a/sparkle/src/components/Avatar.tsx
+++ b/sparkle/src/components/Avatar.tsx
@@ -1,6 +1,6 @@
import React, { useState } from "react";
-import { User } from "@sparkle/icons/solid";
+import { UserIcon } from "@sparkle/icons/solid";
import { getEmojiAndBackgroundFromUrl } from "@sparkle/lib/avatar/utils";
import { classNames } from "@sparkle/lib/utils";
@@ -190,7 +190,7 @@ export function Avatar({
{/\+/.test(name) ? name : name[0].toUpperCase()}
) : (
-
+
)}
);
diff --git a/sparkle/src/components/Banner.tsx b/sparkle/src/components/Banner.tsx
index a3ead4232cd6..612f7c9d79bc 100644
--- a/sparkle/src/components/Banner.tsx
+++ b/sparkle/src/components/Banner.tsx
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react";
-import { IconButton, XMarkIcon } from "@sparkle/_index";
+import { IconButton } from "@sparkle/components/IconButton";
+import { XMarkIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
interface BannerProps {
diff --git a/sparkle/src/components/BarHeader.tsx b/sparkle/src/components/BarHeader.tsx
index 7fb37be4376e..d43a2b0098ab 100644
--- a/sparkle/src/components/BarHeader.tsx
+++ b/sparkle/src/components/BarHeader.tsx
@@ -1,10 +1,10 @@
import React from "react";
import {
- ArrowUpOnSquare,
- ChevronLeft,
- Trash,
- XMark,
+ ArrowUpOnSquareIcon,
+ ChevronLeftIcon,
+ TrashIcon,
+ XMarkIcon,
} from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
@@ -82,7 +82,7 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
return (
diff --git a/sparkle/src/components/Breadcrumbs.tsx b/sparkle/src/components/Breadcrumbs.tsx
index 3013f5ef76c7..1c2a9114a810 100644
--- a/sparkle/src/components/Breadcrumbs.tsx
+++ b/sparkle/src/components/Breadcrumbs.tsx
@@ -1,14 +1,11 @@
import type { ComponentType } from "react";
import React from "react";
-import { SparkleContextLinkType } from "@sparkle/context";
-import {
- ChevronRightIcon,
- DropdownMenu,
- Icon,
- SparkleContext,
- Tooltip,
-} from "@sparkle/index";
+import { DropdownMenu } from "@sparkle/components/DropdownMenu";
+import { Icon } from "@sparkle/components/Icon";
+import { Tooltip } from "@sparkle/components/Tooltip";
+import { SparkleContext, SparkleContextLinkType } from "@sparkle/context";
+import { ChevronRightIcon } from "@sparkle/icons";
const LABEL_TRUNCATE_LENGTH_MIDDLE = 15;
const LABEL_TRUNCATE_LENGTH_END = 30;
diff --git a/sparkle/src/components/Button.tsx b/sparkle/src/components/Button.tsx
index db7c78ca99fa..950891d62454 100644
--- a/sparkle/src/components/Button.tsx
+++ b/sparkle/src/components/Button.tsx
@@ -6,7 +6,7 @@ import React, {
ReactNode,
} from "react";
-import { ChevronDown, ChevronUpDown } from "@sparkle/icons/solid";
+import { ChevronDownIcon, ChevronUpDownIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
import { Avatar } from "./Avatar";
@@ -225,14 +225,14 @@ export function Button({
{type === "menu" && (
)}
{type === "select" && (
)}
diff --git a/sparkle/src/components/Checkbox.tsx b/sparkle/src/components/Checkbox.tsx
index dd843f9ae516..58282f21ad4d 100644
--- a/sparkle/src/components/Checkbox.tsx
+++ b/sparkle/src/components/Checkbox.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import { Check, Dash } from "@sparkle/icons/solid";
+import { CheckIcon, DashIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
import { Icon } from "./Icon";
@@ -113,7 +113,7 @@ export function Checkbox({
/>
{variant === "checkable" && (
-
+
)}
diff --git a/sparkle/src/components/Citation.tsx b/sparkle/src/components/Citation.tsx
index 04a8514bdb38..cd553edbaa68 100644
--- a/sparkle/src/components/Citation.tsx
+++ b/sparkle/src/components/Citation.tsx
@@ -1,28 +1,25 @@
import React, { ReactNode } from "react";
-import { DocumentText, Image } from "@sparkle/icons/stroke";
+import { Avatar } from "@sparkle/components/Avatar";
+import { CardButton } from "@sparkle/components/CardButton";
+import { Icon } from "@sparkle/components/Icon";
+import { IconButton } from "@sparkle/components/IconButton";
+import Spinner from "@sparkle/components/Spinner";
+import { Tooltip } from "@sparkle/components/Tooltip";
+import { XCircleIcon } from "@sparkle/icons";
+import { DocumentTextStrokeIcon, ImageStrokeIcon } from "@sparkle/icons/stroke";
import { classNames } from "@sparkle/lib/utils";
import {
- Confluence,
- Drive,
- Github,
- Intercom,
- Microsoft,
- Notion,
- Slack,
- Zendesk,
+ ConfluenceLogo,
+ DriveLogo,
+ GithubLogo,
+ IntercomLogo,
+ MicrosoftLogo,
+ NotionLogo,
+ SlackLogo,
+ ZendeskLogo,
} from "@sparkle/logo/platforms";
-import {
- Avatar,
- CardButton,
- Icon,
- IconButton,
- Spinner,
- Tooltip,
- XCircleIcon,
-} from "..";
-
export type CitationType =
| "confluence"
| "document"
@@ -51,16 +48,16 @@ interface CitationProps {
}
const typeIcons = {
- confluence: Confluence,
- document: DocumentText,
- github: Github,
- google_drive: Drive,
- intercom: Intercom,
- microsoft: Microsoft,
- zendesk: Zendesk,
- notion: Notion,
- slack: Slack,
- image: Image,
+ confluence: ConfluenceLogo,
+ document: DocumentTextStrokeIcon,
+ github: GithubLogo,
+ google_drive: DriveLogo,
+ intercom: IntercomLogo,
+ microsoft: MicrosoftLogo,
+ zendesk: ZendeskLogo,
+ notion: NotionLogo,
+ slack: SlackLogo,
+ image: ImageStrokeIcon,
};
const typeSizing = {
diff --git a/sparkle/src/components/Collapsible.tsx b/sparkle/src/components/Collapsible.tsx
index 9eeec435873e..a63d02545810 100644
--- a/sparkle/src/components/Collapsible.tsx
+++ b/sparkle/src/components/Collapsible.tsx
@@ -1,7 +1,7 @@
import { Disclosure, Transition } from "@headlessui/react";
import React, { createContext, useContext } from "react";
-import { ChevronDown, ChevronRight } from "@sparkle/icons/solid";
+import { ChevronDownIcon, ChevronRightIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
import { Icon } from "./Icon";
@@ -135,7 +135,7 @@ Collapsible.Button = function ({
)}
>
diff --git a/sparkle/src/components/ContentMessage.tsx b/sparkle/src/components/ContentMessage.tsx
index 07507efd8f80..4be4378df773 100644
--- a/sparkle/src/components/ContentMessage.tsx
+++ b/sparkle/src/components/ContentMessage.tsx
@@ -1,9 +1,9 @@
import React, { ComponentType } from "react";
+import { Icon } from "@sparkle/components/Icon";
+import { InformationCircleIcon } from "@sparkle/icons";
import { classNames } from "@sparkle/lib/utils";
-import { Icon, InformationCircleIcon } from "..";
-
export interface ContentMessageProps {
title: string;
children: React.ReactNode;
diff --git a/sparkle/src/components/DataTable.tsx b/sparkle/src/components/DataTable.tsx
index 3e36c12d41d6..4c63adbcc9c9 100644
--- a/sparkle/src/components/DataTable.tsx
+++ b/sparkle/src/components/DataTable.tsx
@@ -4,15 +4,20 @@ import {
flexRender,
getCoreRowModel,
getFilteredRowModel,
- getSortedRowModel, SortingFn,
+ getSortedRowModel,
+ SortingFn,
type SortingState,
useReactTable,
} from "@tanstack/react-table";
import React, { ReactNode, useEffect, useState } from "react";
-import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
-import { Avatar, DropdownMenu, IconButton, MoreIcon } from "@sparkle/index";
-import { ArrowDownIcon, ArrowUpIcon } from "@sparkle/index";
+import { Avatar } from "@sparkle/components/Avatar";
+import {
+ DropdownItemProps,
+ DropdownMenu,
+} from "@sparkle/components/DropdownMenu";
+import { IconButton } from "@sparkle/components/IconButton";
+import { ArrowDownIcon, ArrowUpIcon, MoreIcon } from "@sparkle/icons";
import { classNames } from "@sparkle/lib/utils";
import { Icon } from "./Icon";
@@ -35,7 +40,7 @@ interface DataTableProps {
filterColumn?: string;
initialColumnOrder?: SortingState;
columnsBreakpoints?: ColumnBreakpoint;
- sortingFn?: SortingFn
+ sortingFn?: SortingFn;
}
function shouldRenderColumn(
diff --git a/sparkle/src/components/Dialog.tsx b/sparkle/src/components/Dialog.tsx
index 75238f48cbe5..33c7906bee19 100644
--- a/sparkle/src/components/Dialog.tsx
+++ b/sparkle/src/components/Dialog.tsx
@@ -1,7 +1,8 @@
import { Dialog as HeadlessDialog, Transition } from "@headlessui/react";
import React, { Fragment, useRef } from "react";
-import { ConfettiBackground, Spinner } from "@sparkle/index";
+import ConfettiBackground from "@sparkle/components/ConfettiBackground";
+import Spinner from "@sparkle/components/Spinner";
import { classNames } from "@sparkle/lib/utils";
import { Button } from "./Button";
diff --git a/sparkle/src/components/DropdownMenu.tsx b/sparkle/src/components/DropdownMenu.tsx
index 941db39592a4..ff978a0783bf 100644
--- a/sparkle/src/components/DropdownMenu.tsx
+++ b/sparkle/src/components/DropdownMenu.tsx
@@ -12,7 +12,11 @@ import React, {
useState,
} from "react";
-import { ChevronDown, ChevronRight, ChevronUpDown } from "@sparkle/icons/solid";
+import {
+ ChevronDownIcon,
+ ChevronRightIcon,
+ ChevronUpDownIcon,
+} from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
import { Icon } from "./Icon";
@@ -169,10 +173,10 @@ DropdownMenu.Button = function ({
const chevronIcon =
type === "select"
- ? ChevronUpDown
+ ? ChevronUpDownIcon
: type === "submenu"
- ? ChevronRight
- : ChevronDown;
+ ? ChevronRightIcon
+ : ChevronDownIcon;
return (
<>
diff --git a/sparkle/src/components/DropzoneOverlay.tsx b/sparkle/src/components/DropzoneOverlay.tsx
index fb94819f0527..832d25d2112f 100644
--- a/sparkle/src/components/DropzoneOverlay.tsx
+++ b/sparkle/src/components/DropzoneOverlay.tsx
@@ -1,7 +1,8 @@
import Lottie, { LottieRefCurrentProps } from "lottie-react";
import React, { useEffect, useRef, useState } from "react";
-import { ArrowUpOnSquareIcon, Icon } from "@sparkle/_index";
+import { Icon } from "@sparkle/components/Icon";
+import { ArrowUpOnSquareIcon } from "@sparkle/icons";
import anim from "@sparkle/lottie/dragArea";
export interface DropzoneOverlayProps {
diff --git a/sparkle/src/components/Item.tsx b/sparkle/src/components/Item.tsx
index b65bef7f6194..30aed11f1f67 100644
--- a/sparkle/src/components/Item.tsx
+++ b/sparkle/src/components/Item.tsx
@@ -5,7 +5,7 @@ import {
SparkleContext,
SparkleContextLinkType,
} from "@sparkle/context";
-import { ChevronRight } from "@sparkle/icons/solid";
+import { ChevronRightIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
import { Avatar } from "./Avatar";
@@ -67,7 +67,7 @@ export function Item({
icon,
style = "action",
spacing = "sm",
- action = ChevronRight,
+ action = ChevronRightIcon,
hasAction = true,
onClick,
selected = false,
diff --git a/sparkle/src/components/Markdown.tsx b/sparkle/src/components/Markdown.tsx
index 9fd9f80af447..cace1c73c404 100644
--- a/sparkle/src/components/Markdown.tsx
+++ b/sparkle/src/components/Markdown.tsx
@@ -1,7 +1,8 @@
import React from "react";
import ReactMarkdown from "react-markdown";
-import { Button, ClipboardCheckIcon, ClipboardIcon } from "@sparkle/index";
+import { Button } from "@sparkle/components/Button";
+import { ClipboardCheckIcon, ClipboardIcon } from "@sparkle/icons";
import { classNames } from "@sparkle/lib/utils";
import { useCopyToClipboard } from "@sparkle/lib/utils";
diff --git a/sparkle/src/components/Notification.tsx b/sparkle/src/components/Notification.tsx
index 5f77323a199b..49c08741b6b4 100644
--- a/sparkle/src/components/Notification.tsx
+++ b/sparkle/src/components/Notification.tsx
@@ -1,11 +1,7 @@
import React from "react";
-import {
- CheckCircleIcon,
- IconButton,
- XCircleIcon,
- XMarkIcon,
-} from "@sparkle/index";
+import { IconButton } from "@sparkle/components/IconButton";
+import { CheckCircleIcon, XCircleIcon, XMarkIcon } from "@sparkle/icons";
import { classNames } from "@sparkle/lib/utils";
import { Icon } from "./Icon";
diff --git a/sparkle/src/components/PaginatedCitationsGrid.tsx b/sparkle/src/components/PaginatedCitationsGrid.tsx
index b8477ffcaaaf..cbb3c0d18326 100644
--- a/sparkle/src/components/PaginatedCitationsGrid.tsx
+++ b/sparkle/src/components/PaginatedCitationsGrid.tsx
@@ -1,9 +1,8 @@
import { useState } from "react";
import React from "react";
-import { CitationType } from "@sparkle/components/Citation";
+import { Citation, CitationType } from "@sparkle/components/Citation";
import { Pagination } from "@sparkle/components/Pagination";
-import { Citation } from "@sparkle/index";
import { classNames } from "@sparkle/lib/utils";
interface CitationItem {
diff --git a/sparkle/src/components/Pagination.tsx b/sparkle/src/components/Pagination.tsx
index 70d5f14ab87f..17013d34496f 100644
--- a/sparkle/src/components/Pagination.tsx
+++ b/sparkle/src/components/Pagination.tsx
@@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { useState } from "react";
-import { ChevronLeft, ChevronRight } from "@sparkle/icons/solid";
+import { ChevronLeftIcon, ChevronRightIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
import { Button } from "./Button";
@@ -74,7 +74,7 @@ export function Pagination({
labelVisible={false}
disabledTooltip={true}
disabled={currentPage === 1 ? true : false}
- icon={ChevronLeft}
+ icon={ChevronLeftIcon}
onClick={() => {
onPaginationButtonClick(currentPage - 1);
}}
@@ -97,7 +97,7 @@ export function Pagination({
labelVisible={false}
disabledTooltip={true}
disabled={currentPage === numPages ? true : false}
- icon={ChevronRight}
+ icon={ChevronRightIcon}
onClick={() => {
onPaginationButtonClick(currentPage + 1);
}}
diff --git a/sparkle/src/components/Popup.tsx b/sparkle/src/components/Popup.tsx
index 941eded94e4f..9b18130042d6 100644
--- a/sparkle/src/components/Popup.tsx
+++ b/sparkle/src/components/Popup.tsx
@@ -1,10 +1,10 @@
import { Transition } from "@headlessui/react";
import React from "react";
-import { XMark } from "@sparkle/icons/solid";
+import { IconButton } from "@sparkle/components/IconButton";
+import { XMarkIcon } from "@sparkle/icons/solid";
import { classNames } from "@sparkle/lib/utils";
-import { IconButton } from "..";
import { Button } from "./Button";
import { Chip } from "./Chip";
@@ -49,7 +49,7 @@ export function Popup({
{onClose && (
diff --git a/sparkle/src/components/index.ts b/sparkle/src/components/index.ts
new file mode 100644
index 000000000000..be0c6242782b
--- /dev/null
+++ b/sparkle/src/components/index.ts
@@ -0,0 +1,48 @@
+export { AssistantPreview } from "./AssistantPreview";
+export { Avatar } from "./Avatar";
+export { Banner } from "./Banner";
+export { BarHeader } from "./BarHeader";
+export { Breadcrumbs } from "./Breadcrumbs";
+export { Button } from "./Button";
+export { CardButton } from "./CardButton";
+export { Checkbox } from "./Checkbox";
+export { Chip } from "./Chip";
+export { Citation } from "./Citation";
+export { default as CollapseButton } from "./CollapseButton";
+export { Collapsible } from "./Collapsible";
+export { ColorPicker } from "./ColorPicker";
+export { default as ConfettiBackground } from "./ConfettiBackground";
+export { ContentMessage } from "./ContentMessage";
+export { ContextItem } from "./ContextItem";
+export { DataTable } from "./DataTable";
+export { Dialog } from "./Dialog";
+export { DropdownMenu } from "./DropdownMenu";
+export { default as DropzoneOverlay } from "./DropzoneOverlay";
+export { ElementDialog } from "./ElementDialog";
+export { ElementModal } from "./ElementModal";
+export { EmojiPicker } from "./EmojiPicker";
+export { FilterChips } from "./FilterChips";
+export { Div3D, Hover3D } from "./Hover3D";
+export { Hoverable } from "./Hoverable";
+export { Icon } from "./Icon";
+export { IconButton } from "./IconButton";
+export { IconToggleButton } from "./IconToggleButton";
+export { Input } from "./Input";
+export { Item } from "./Item";
+export { Markdown } from "./Markdown";
+export { Modal } from "./Modal";
+export { Notification } from "./Notification";
+export { Page } from "./Page";
+export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
+export { Pagination } from "./Pagination";
+export { Popup } from "./Popup";
+export { PriceTable } from "./PriceTable";
+export { RadioButton } from "./RadioButton";
+export { Searchbar } from "./Searchbar";
+export { SliderToggle } from "./SliderToggle";
+export { default as Spinner } from "./Spinner";
+export { Tab } from "./Tab";
+export { TextArea } from "./TextArea";
+export { Tooltip } from "./Tooltip";
+export { Tree } from "./Tree";
+export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";
diff --git a/sparkle/src/icons/index.ts b/sparkle/src/icons/index.ts
new file mode 100644
index 000000000000..ff416bb90a05
--- /dev/null
+++ b/sparkle/src/icons/index.ts
@@ -0,0 +1,2 @@
+export * from "./solid";
+export * from "./stroke";
diff --git a/sparkle/src/icons/solid/index.ts b/sparkle/src/icons/solid/index.ts
index 56a70bde194b..693bc9e1e603 100644
--- a/sparkle/src/icons/solid/index.ts
+++ b/sparkle/src/icons/solid/index.ts
@@ -1,130 +1,130 @@
-export { default as ArrowDown } from "./ArrowDown";
-export { default as ArrowDownCircle } from "./ArrowDownCircle";
-export { default as ArrowDownOnSquare } from "./ArrowDownOnSquare";
-export { default as ArrowDownS } from "./ArrowDownS";
-export { default as ArrowLeft } from "./ArrowLeft";
-export { default as ArrowLeftS } from "./ArrowLeftS";
-export { default as ArrowPath } from "./ArrowPath";
-export { default as ArrowRight } from "./ArrowRight";
-export { default as ArrowRightS } from "./ArrowRightS";
-export { default as ArrowUp } from "./ArrowUp";
-export { default as ArrowUpOnSquare } from "./ArrowUpOnSquare";
-export { default as ArrowUpS } from "./ArrowUpS";
-export { default as Attachment } from "./Attachment";
-export { default as Backspace } from "./Backspace";
-export { default as Bookmark } from "./Bookmark";
-export { default as BookOpen } from "./BookOpen";
-export { default as Braces } from "./Braces";
-export { default as Card } from "./Card";
-export { default as ChatBubbleBottomCenterPlus } from "./ChatBubbleBottomCenterPlus";
-export { default as ChatBubbleBottomCenterText } from "./ChatBubbleBottomCenterText";
-export { default as ChatBubbleLeftRight } from "./ChatBubbleLeftRight";
-export { default as ChatBubbleThought } from "./ChatBubbleThought";
-export { default as Check } from "./Check";
-export { default as CheckCircle } from "./CheckCircle";
-export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft";
-export { default as ChevronDoubleRight } from "./ChevronDoubleRight";
-export { default as ChevronDown } from "./ChevronDown";
-export { default as ChevronLeft } from "./ChevronLeft";
-export { default as ChevronRight } from "./ChevronRight";
-export { default as ChevronUp } from "./ChevronUp";
-export { default as ChevronUpDown } from "./ChevronUpDown";
-export { default as Circle } from "./Circle";
-export { default as Clipboard } from "./Clipboard";
-export { default as ClipboardCheck } from "./ClipboardCheck";
-export { default as Clock } from "./Clock";
-export { default as CloudArrowDown } from "./CloudArrowDown";
-export { default as CloudArrowLeftRight } from "./CloudArrowLeftRight";
-export { default as CloudArrowUp } from "./CloudArrowUp";
-export { default as CloudX } from "./CloudX";
-export { default as Cog6Tooth } from "./Cog6Tooth";
-export { default as Command } from "./Command";
-export { default as CommandLine } from "./CommandLine";
-export { default as Company } from "./Company";
-export { default as Cube } from "./Cube";
-export { default as Dash } from "./Dash";
-export { default as Document } from "./Document";
-export { default as DocumentDuplicate } from "./DocumentDuplicate";
-export { default as DocumentPile } from "./DocumentPile";
-export { default as DocumentPlus } from "./DocumentPlus";
-export { default as DocumentText } from "./DocumentText";
-export { default as Dust } from "./Dust";
-export { default as EmotionLaugh } from "./EmotionLaugh";
-export { default as Equalizer } from "./Equalizer";
-export { default as ExclamationCircle } from "./ExclamationCircle";
-export { default as ExternalLink } from "./ExternalLink";
-export { default as Eye } from "./Eye";
-export { default as EyeSlash } from "./EyeSlash";
-export { default as Filter } from "./Filter";
-export { default as Fire } from "./Fire";
-export { default as Flag } from "./Flag";
-export { default as Folder } from "./Folder";
-export { default as FolderOpen } from "./FolderOpen";
-export { default as Fullscreen } from "./Fullscreen";
-export { default as FullscreenExit } from "./FullscreenExit";
-export { default as GlobeAlt } from "./GlobeAlt";
-export { default as Grab } from "./Grab";
-export { default as HandThumbDown } from "./HandThumbDown";
-export { default as HandThumbUp } from "./HandThumbUp";
-export { default as Heart } from "./Heart";
-export { default as HeartAlt } from "./HeartAlt";
-export { default as Hexagon } from "./Hexagon";
-export { default as History } from "./History";
-export { default as Home } from "./Home";
-export { default as Image } from "./Image";
-export { default as InformationCircle } from "./InformationCircle";
-export { default as Key } from "./Key";
-export { default as Lightbulb } from "./Lightbulb";
-export { default as Link } from "./Link";
-export { default as List } from "./List";
-export { default as ListAdd } from "./ListAdd";
-export { default as ListCheck } from "./ListCheck";
-export { default as ListRemove } from "./ListRemove";
-export { default as Lock } from "./Lock";
-export { default as Login } from "./Login";
-export { default as Logout } from "./Logout";
-export { default as Magic } from "./Magic";
-export { default as MagnifyingGlass } from "./MagnifyingGlass";
-export { default as MarkPen } from "./MarkPen";
-export { default as Menu } from "./Menu";
-export { default as More } from "./More";
-export { default as MovingMail } from "./MovingMail";
-export { default as Paint } from "./Paint";
-export { default as PaperAirplane } from "./PaperAirplane";
-export { default as Pause } from "./Pause";
-export { default as PencilSquare } from "./PencilSquare";
-export { default as Planet } from "./Planet";
-export { default as Play } from "./Play";
-export { default as Plus } from "./Plus";
-export { default as PlusCircle } from "./PlusCircle";
-export { default as Pushpin } from "./Pushpin";
-export { default as Puzzle } from "./Puzzle";
-export { default as QuestionMarkCircle } from "./QuestionMarkCircle";
-export { default as Reaction } from "./Reaction";
-export { default as Rectangle } from "./Rectangle";
-export { default as Robot } from "./Robot";
-export { default as Rocket } from "./Rocket";
-export { default as Scan } from "./Scan";
-export { default as Server } from "./Server";
-export { default as ShakeHands } from "./ShakeHands";
-export { default as Shapes } from "./Shapes";
-export { default as Sparkles } from "./Sparkles";
-export { default as Square } from "./Square";
-export { default as Square3Stack3D } from "./Square3Stack3D";
-export { default as Star } from "./Star";
-export { default as Stop } from "./Stop";
-export { default as Table } from "./Table";
-export { default as Tag } from "./Tag";
-export { default as Template } from "./Template";
-export { default as TestTube } from "./TestTube";
-export { default as Time } from "./Time";
-export { default as Translate } from "./Translate";
-export { default as Trash } from "./Trash";
-export { default as Triangle } from "./Triangle";
-export { default as User } from "./User";
-export { default as UserArrow } from "./UserArrow";
-export { default as UserGroup } from "./UserGroup";
-export { default as UserPlus } from "./UserPlus";
-export { default as Wrench } from "./Wrench";
-export { default as XCircle } from "./XCircle";
-export { default as XMark } from "./XMark";
+export { default as ArrowDownIcon } from "./ArrowDown";
+export { default as ArrowDownCircleIcon } from "./ArrowDownCircle";
+export { default as ArrowDownOnSquareIcon } from "./ArrowDownOnSquare";
+export { default as ArrowDownSIcon } from "./ArrowDownS";
+export { default as ArrowLeftIcon } from "./ArrowLeft";
+export { default as ArrowLeftSIcon } from "./ArrowLeftS";
+export { default as ArrowPathIcon } from "./ArrowPath";
+export { default as ArrowRightIcon } from "./ArrowRight";
+export { default as ArrowRightSIcon } from "./ArrowRightS";
+export { default as ArrowUpIcon } from "./ArrowUp";
+export { default as ArrowUpOnSquareIcon } from "./ArrowUpOnSquare";
+export { default as ArrowUpSIcon } from "./ArrowUpS";
+export { default as AttachmentIcon } from "./Attachment";
+export { default as BackspaceIcon } from "./Backspace";
+export { default as BookmarkIcon } from "./Bookmark";
+export { default as BookOpenIcon } from "./BookOpen";
+export { default as BracesIcon } from "./Braces";
+export { default as CardIcon } from "./Card";
+export { default as ChatBubbleBottomCenterPlusIcon } from "./ChatBubbleBottomCenterPlus";
+export { default as ChatBubbleBottomCenterTextIcon } from "./ChatBubbleBottomCenterText";
+export { default as ChatBubbleLeftRightIcon } from "./ChatBubbleLeftRight";
+export { default as ChatBubbleThoughtIcon } from "./ChatBubbleThought";
+export { default as CheckIcon } from "./Check";
+export { default as CheckCircleIcon } from "./CheckCircle";
+export { default as ChevronDoubleLeftIcon } from "./ChevronDoubleLeft";
+export { default as ChevronDoubleRightIcon } from "./ChevronDoubleRight";
+export { default as ChevronDownIcon } from "./ChevronDown";
+export { default as ChevronLeftIcon } from "./ChevronLeft";
+export { default as ChevronRightIcon } from "./ChevronRight";
+export { default as ChevronUpIcon } from "./ChevronUp";
+export { default as ChevronUpDownIcon } from "./ChevronUpDown";
+export { default as CircleIcon } from "./Circle";
+export { default as ClipboardIcon } from "./Clipboard";
+export { default as ClipboardCheckIcon } from "./ClipboardCheck";
+export { default as ClockIcon } from "./Clock";
+export { default as CloudArrowDownIcon } from "./CloudArrowDown";
+export { default as CloudArrowLeftRightIcon } from "./CloudArrowLeftRight";
+export { default as CloudArrowUpIcon } from "./CloudArrowUp";
+export { default as CloudXIcon } from "./CloudX";
+export { default as Cog6ToothIcon } from "./Cog6Tooth";
+export { default as CommandIcon } from "./Command";
+export { default as CommandLineIcon } from "./CommandLine";
+export { default as CompanyIcon } from "./Company";
+export { default as CubeIcon } from "./Cube";
+export { default as DashIcon } from "./Dash";
+export { default as DocumentIcon } from "./Document";
+export { default as DocumentDuplicateIcon } from "./DocumentDuplicate";
+export { default as DocumentPileIcon } from "./DocumentPile";
+export { default as DocumentPlusIcon } from "./DocumentPlus";
+export { default as DocumentTextIcon } from "./DocumentText";
+export { default as DustIcon } from "./Dust";
+export { default as EmotionLaughIcon } from "./EmotionLaugh";
+export { default as EqualizerIcon } from "./Equalizer";
+export { default as ExclamationCircleIcon } from "./ExclamationCircle";
+export { default as ExternalLinkIcon } from "./ExternalLink";
+export { default as EyeIcon } from "./Eye";
+export { default as EyeSlashIcon } from "./EyeSlash";
+export { default as FilterIcon } from "./Filter";
+export { default as FireIcon } from "./Fire";
+export { default as FlagIcon } from "./Flag";
+export { default as FolderIcon } from "./Folder";
+export { default as FolderOpenIcon } from "./FolderOpen";
+export { default as FullscreenIcon } from "./Fullscreen";
+export { default as FullscreenExitIcon } from "./FullscreenExit";
+export { default as GlobeAltIcon } from "./GlobeAlt";
+export { default as GrabIcon } from "./Grab";
+export { default as HandThumbDownIcon } from "./HandThumbDown";
+export { default as HandThumbUpIcon } from "./HandThumbUp";
+export { default as HeartIcon } from "./Heart";
+export { default as HeartAltIcon } from "./HeartAlt";
+export { default as HexagonIcon } from "./Hexagon";
+export { default as HistoryIcon } from "./History";
+export { default as HomeIcon } from "./Home";
+export { default as ImageIcon } from "./Image";
+export { default as InformationCircleIcon } from "./InformationCircle";
+export { default as KeyIcon } from "./Key";
+export { default as LightbulbIcon } from "./Lightbulb";
+export { default as LinkIcon } from "./Link";
+export { default as ListIcon } from "./List";
+export { default as ListAddIcon } from "./ListAdd";
+export { default as ListCheckIcon } from "./ListCheck";
+export { default as ListRemoveIcon } from "./ListRemove";
+export { default as LockIcon } from "./Lock";
+export { default as LoginIcon } from "./Login";
+export { default as LogoutIcon } from "./Logout";
+export { default as MagicIcon } from "./Magic";
+export { default as MagnifyingGlassIcon } from "./MagnifyingGlass";
+export { default as MarkPenIcon } from "./MarkPen";
+export { default as MenuIcon } from "./Menu";
+export { default as MoreIcon } from "./More";
+export { default as MovingMailIcon } from "./MovingMail";
+export { default as PaintIcon } from "./Paint";
+export { default as PaperAirplaneIcon } from "./PaperAirplane";
+export { default as PauseIcon } from "./Pause";
+export { default as PencilSquareIcon } from "./PencilSquare";
+export { default as PlanetIcon } from "./Planet";
+export { default as PlayIcon } from "./Play";
+export { default as PlusIcon } from "./Plus";
+export { default as PlusCircleIcon } from "./PlusCircle";
+export { default as PushpinIcon } from "./Pushpin";
+export { default as PuzzleIcon } from "./Puzzle";
+export { default as QuestionMarkCircleIcon } from "./QuestionMarkCircle";
+export { default as ReactionIcon } from "./Reaction";
+export { default as RectangleIcon } from "./Rectangle";
+export { default as RobotIcon } from "./Robot";
+export { default as RocketIcon } from "./Rocket";
+export { default as ScanIcon } from "./Scan";
+export { default as ServerIcon } from "./Server";
+export { default as ShakeHandsIcon } from "./ShakeHands";
+export { default as ShapesIcon } from "./Shapes";
+export { default as SparklesIcon } from "./Sparkles";
+export { default as SquareIcon } from "./Square";
+export { default as Square3Stack3DIcon } from "./Square3Stack3D";
+export { default as StarIcon } from "./Star";
+export { default as StopIcon } from "./Stop";
+export { default as TableIcon } from "./Table";
+export { default as TagIcon } from "./Tag";
+export { default as TemplateIcon } from "./Template";
+export { default as TestTubeIcon } from "./TestTube";
+export { default as TimeIcon } from "./Time";
+export { default as TranslateIcon } from "./Translate";
+export { default as TrashIcon } from "./Trash";
+export { default as TriangleIcon } from "./Triangle";
+export { default as UserIcon } from "./User";
+export { default as UserArrowIcon } from "./UserArrow";
+export { default as UserGroupIcon } from "./UserGroup";
+export { default as UserPlusIcon } from "./UserPlus";
+export { default as WrenchIcon } from "./Wrench";
+export { default as XCircleIcon } from "./XCircle";
+export { default as XMarkIcon } from "./XMark";
diff --git a/sparkle/src/icons/stroke/index.ts b/sparkle/src/icons/stroke/index.ts
index 56a70bde194b..f83578eac14a 100644
--- a/sparkle/src/icons/stroke/index.ts
+++ b/sparkle/src/icons/stroke/index.ts
@@ -1,130 +1,130 @@
-export { default as ArrowDown } from "./ArrowDown";
-export { default as ArrowDownCircle } from "./ArrowDownCircle";
-export { default as ArrowDownOnSquare } from "./ArrowDownOnSquare";
-export { default as ArrowDownS } from "./ArrowDownS";
-export { default as ArrowLeft } from "./ArrowLeft";
-export { default as ArrowLeftS } from "./ArrowLeftS";
-export { default as ArrowPath } from "./ArrowPath";
-export { default as ArrowRight } from "./ArrowRight";
-export { default as ArrowRightS } from "./ArrowRightS";
-export { default as ArrowUp } from "./ArrowUp";
-export { default as ArrowUpOnSquare } from "./ArrowUpOnSquare";
-export { default as ArrowUpS } from "./ArrowUpS";
-export { default as Attachment } from "./Attachment";
-export { default as Backspace } from "./Backspace";
-export { default as Bookmark } from "./Bookmark";
-export { default as BookOpen } from "./BookOpen";
-export { default as Braces } from "./Braces";
-export { default as Card } from "./Card";
-export { default as ChatBubbleBottomCenterPlus } from "./ChatBubbleBottomCenterPlus";
-export { default as ChatBubbleBottomCenterText } from "./ChatBubbleBottomCenterText";
-export { default as ChatBubbleLeftRight } from "./ChatBubbleLeftRight";
-export { default as ChatBubbleThought } from "./ChatBubbleThought";
-export { default as Check } from "./Check";
-export { default as CheckCircle } from "./CheckCircle";
-export { default as ChevronDoubleLeft } from "./ChevronDoubleLeft";
-export { default as ChevronDoubleRight } from "./ChevronDoubleRight";
-export { default as ChevronDown } from "./ChevronDown";
-export { default as ChevronLeft } from "./ChevronLeft";
-export { default as ChevronRight } from "./ChevronRight";
-export { default as ChevronUp } from "./ChevronUp";
-export { default as ChevronUpDown } from "./ChevronUpDown";
-export { default as Circle } from "./Circle";
-export { default as Clipboard } from "./Clipboard";
-export { default as ClipboardCheck } from "./ClipboardCheck";
-export { default as Clock } from "./Clock";
-export { default as CloudArrowDown } from "./CloudArrowDown";
-export { default as CloudArrowLeftRight } from "./CloudArrowLeftRight";
-export { default as CloudArrowUp } from "./CloudArrowUp";
-export { default as CloudX } from "./CloudX";
-export { default as Cog6Tooth } from "./Cog6Tooth";
-export { default as Command } from "./Command";
-export { default as CommandLine } from "./CommandLine";
-export { default as Company } from "./Company";
-export { default as Cube } from "./Cube";
-export { default as Dash } from "./Dash";
-export { default as Document } from "./Document";
-export { default as DocumentDuplicate } from "./DocumentDuplicate";
-export { default as DocumentPile } from "./DocumentPile";
-export { default as DocumentPlus } from "./DocumentPlus";
-export { default as DocumentText } from "./DocumentText";
-export { default as Dust } from "./Dust";
-export { default as EmotionLaugh } from "./EmotionLaugh";
-export { default as Equalizer } from "./Equalizer";
-export { default as ExclamationCircle } from "./ExclamationCircle";
-export { default as ExternalLink } from "./ExternalLink";
-export { default as Eye } from "./Eye";
-export { default as EyeSlash } from "./EyeSlash";
-export { default as Filter } from "./Filter";
-export { default as Fire } from "./Fire";
-export { default as Flag } from "./Flag";
-export { default as Folder } from "./Folder";
-export { default as FolderOpen } from "./FolderOpen";
-export { default as Fullscreen } from "./Fullscreen";
-export { default as FullscreenExit } from "./FullscreenExit";
-export { default as GlobeAlt } from "./GlobeAlt";
-export { default as Grab } from "./Grab";
-export { default as HandThumbDown } from "./HandThumbDown";
-export { default as HandThumbUp } from "./HandThumbUp";
-export { default as Heart } from "./Heart";
-export { default as HeartAlt } from "./HeartAlt";
-export { default as Hexagon } from "./Hexagon";
-export { default as History } from "./History";
-export { default as Home } from "./Home";
-export { default as Image } from "./Image";
-export { default as InformationCircle } from "./InformationCircle";
-export { default as Key } from "./Key";
-export { default as Lightbulb } from "./Lightbulb";
-export { default as Link } from "./Link";
-export { default as List } from "./List";
-export { default as ListAdd } from "./ListAdd";
-export { default as ListCheck } from "./ListCheck";
-export { default as ListRemove } from "./ListRemove";
-export { default as Lock } from "./Lock";
-export { default as Login } from "./Login";
-export { default as Logout } from "./Logout";
-export { default as Magic } from "./Magic";
-export { default as MagnifyingGlass } from "./MagnifyingGlass";
-export { default as MarkPen } from "./MarkPen";
-export { default as Menu } from "./Menu";
-export { default as More } from "./More";
-export { default as MovingMail } from "./MovingMail";
-export { default as Paint } from "./Paint";
-export { default as PaperAirplane } from "./PaperAirplane";
-export { default as Pause } from "./Pause";
-export { default as PencilSquare } from "./PencilSquare";
-export { default as Planet } from "./Planet";
-export { default as Play } from "./Play";
-export { default as Plus } from "./Plus";
-export { default as PlusCircle } from "./PlusCircle";
-export { default as Pushpin } from "./Pushpin";
-export { default as Puzzle } from "./Puzzle";
-export { default as QuestionMarkCircle } from "./QuestionMarkCircle";
-export { default as Reaction } from "./Reaction";
-export { default as Rectangle } from "./Rectangle";
-export { default as Robot } from "./Robot";
-export { default as Rocket } from "./Rocket";
-export { default as Scan } from "./Scan";
-export { default as Server } from "./Server";
-export { default as ShakeHands } from "./ShakeHands";
-export { default as Shapes } from "./Shapes";
-export { default as Sparkles } from "./Sparkles";
-export { default as Square } from "./Square";
-export { default as Square3Stack3D } from "./Square3Stack3D";
-export { default as Star } from "./Star";
-export { default as Stop } from "./Stop";
-export { default as Table } from "./Table";
-export { default as Tag } from "./Tag";
-export { default as Template } from "./Template";
-export { default as TestTube } from "./TestTube";
-export { default as Time } from "./Time";
-export { default as Translate } from "./Translate";
-export { default as Trash } from "./Trash";
-export { default as Triangle } from "./Triangle";
-export { default as User } from "./User";
-export { default as UserArrow } from "./UserArrow";
-export { default as UserGroup } from "./UserGroup";
-export { default as UserPlus } from "./UserPlus";
-export { default as Wrench } from "./Wrench";
-export { default as XCircle } from "./XCircle";
-export { default as XMark } from "./XMark";
+export { default as ArrowDownStrokeIcon } from "./ArrowDown";
+export { default as ArrowDownCircleStrokeIcon } from "./ArrowDownCircle";
+export { default as ArrowDownOnSquareStrokeIcon } from "./ArrowDownOnSquare";
+export { default as ArrowDownSStrokeIcon } from "./ArrowDownS";
+export { default as ArrowLeftStrokeIcon } from "./ArrowLeft";
+export { default as ArrowLeftSStrokeIcon } from "./ArrowLeftS";
+export { default as ArrowPathStrokeIcon } from "./ArrowPath";
+export { default as ArrowRightStrokeIcon } from "./ArrowRight";
+export { default as ArrowRightSStrokeIcon } from "./ArrowRightS";
+export { default as ArrowUpStrokeIcon } from "./ArrowUp";
+export { default as ArrowUpOnSquareStrokeIcon } from "./ArrowUpOnSquare";
+export { default as ArrowUpSStrokeIcon } from "./ArrowUpS";
+export { default as AttachmentStrokeIcon } from "./Attachment";
+export { default as BackspaceStrokeIcon } from "./Backspace";
+export { default as BookmarkStrokeIcon } from "./Bookmark";
+export { default as BookOpenStrokeIcon } from "./BookOpen";
+export { default as BracesStrokeIcon } from "./Braces";
+export { default as CardStrokeIcon } from "./Card";
+export { default as ChatBubbleBottomCenterPlusStrokeIcon } from "./ChatBubbleBottomCenterPlus";
+export { default as ChatBubbleBottomCenterTextStrokeIcon } from "./ChatBubbleBottomCenterText";
+export { default as ChatBubbleLeftRightStrokeIcon } from "./ChatBubbleLeftRight";
+export { default as ChatBubbleThoughtStrokeIcon } from "./ChatBubbleThought";
+export { default as CheckStrokeIcon } from "./Check";
+export { default as CheckCircleStrokeIcon } from "./CheckCircle";
+export { default as ChevronDoubleLeftStrokeIcon } from "./ChevronDoubleLeft";
+export { default as ChevronDoubleRightStrokeIcon } from "./ChevronDoubleRight";
+export { default as ChevronDownStrokeIcon } from "./ChevronDown";
+export { default as ChevronLeftStrokeIcon } from "./ChevronLeft";
+export { default as ChevronRightStrokeIcon } from "./ChevronRight";
+export { default as ChevronUpStrokeIcon } from "./ChevronUp";
+export { default as ChevronUpDownStrokeIcon } from "./ChevronUpDown";
+export { default as CircleStrokeIcon } from "./Circle";
+export { default as ClipboardStrokeIcon } from "./Clipboard";
+export { default as ClipboardCheckStrokeIcon } from "./ClipboardCheck";
+export { default as ClockStrokeIcon } from "./Clock";
+export { default as CloudArrowDownStrokeIcon } from "./CloudArrowDown";
+export { default as CloudArrowLeftRightStrokeIcon } from "./CloudArrowLeftRight";
+export { default as CloudArrowUpStrokeIcon } from "./CloudArrowUp";
+export { default as CloudXStrokeIcon } from "./CloudX";
+export { default as Cog6ToothStrokeIcon } from "./Cog6Tooth";
+export { default as CommandStrokeIcon } from "./Command";
+export { default as CommandLineStrokeIcon } from "./CommandLine";
+export { default as CompanyStrokeIcon } from "./Company";
+export { default as CubeStrokeIcon } from "./Cube";
+export { default as DashStrokeIcon } from "./Dash";
+export { default as DocumentStrokeIcon } from "./Document";
+export { default as DocumentDuplicateStrokeIcon } from "./DocumentDuplicate";
+export { default as DocumentPileStrokeIcon } from "./DocumentPile";
+export { default as DocumentPlusStrokeIcon } from "./DocumentPlus";
+export { default as DocumentTextStrokeIcon } from "./DocumentText";
+export { default as DustStrokeIcon } from "./Dust";
+export { default as EmotionLaughStrokeIcon } from "./EmotionLaugh";
+export { default as EqualizerStrokeIcon } from "./Equalizer";
+export { default as ExclamationCircleStrokeIcon } from "./ExclamationCircle";
+export { default as ExternalLinkStrokeIcon } from "./ExternalLink";
+export { default as EyeStrokeIcon } from "./Eye";
+export { default as EyeSlashStrokeIcon } from "./EyeSlash";
+export { default as FilterStrokeIcon } from "./Filter";
+export { default as FireStrokeIcon } from "./Fire";
+export { default as FlagStrokeIcon } from "./Flag";
+export { default as FolderStrokeIcon } from "./Folder";
+export { default as FolderOpenStrokeIcon } from "./FolderOpen";
+export { default as FullscreenStrokeIcon } from "./Fullscreen";
+export { default as FullscreenExitStrokeIcon } from "./FullscreenExit";
+export { default as GlobeAltStrokeIcon } from "./GlobeAlt";
+export { default as GrabStrokeIcon } from "./Grab";
+export { default as HandThumbDownStrokeIcon } from "./HandThumbDown";
+export { default as HandThumbUpStrokeIcon } from "./HandThumbUp";
+export { default as HeartStrokeIcon } from "./Heart";
+export { default as HeartAltStrokeIcon } from "./HeartAlt";
+export { default as HexagonStrokeIcon } from "./Hexagon";
+export { default as HistoryStrokeIcon } from "./History";
+export { default as HomeStrokeIcon } from "./Home";
+export { default as ImageStrokeIcon } from "./Image";
+export { default as InformationCircleStrokeIcon } from "./InformationCircle";
+export { default as KeyStrokeIcon } from "./Key";
+export { default as LightbulbStrokeIcon } from "./Lightbulb";
+export { default as LinkStrokeIcon } from "./Link";
+export { default as ListStrokeIcon } from "./List";
+export { default as ListAddStrokeIcon } from "./ListAdd";
+export { default as ListCheckStrokeIcon } from "./ListCheck";
+export { default as ListRemoveStrokeIcon } from "./ListRemove";
+export { default as LockStrokeIcon } from "./Lock";
+export { default as LoginStrokeIcon } from "./Login";
+export { default as LogoutStrokeIcon } from "./Logout";
+export { default as MagicStrokeIcon } from "./Magic";
+export { default as MagnifyingGlassStrokeIcon } from "./MagnifyingGlass";
+export { default as MarkPenStrokeIcon } from "./MarkPen";
+export { default as MenuStrokeIcon } from "./Menu";
+export { default as MoreStrokeIcon } from "./More";
+export { default as MovingMailStrokeIcon } from "./MovingMail";
+export { default as PaintStrokeIcon } from "./Paint";
+export { default as PaperAirplaneStrokeIcon } from "./PaperAirplane";
+export { default as PauseStrokeIcon } from "./Pause";
+export { default as PencilSquareStrokeIcon } from "./PencilSquare";
+export { default as PlanetStrokeIcon } from "./Planet";
+export { default as PlayStrokeIcon } from "./Play";
+export { default as PlusStrokeIcon } from "./Plus";
+export { default as PlusCircleStrokeIcon } from "./PlusCircle";
+export { default as PushpinStrokeIcon } from "./Pushpin";
+export { default as PuzzleStrokeIcon } from "./Puzzle";
+export { default as QuestionMarkCircleStrokeIcon } from "./QuestionMarkCircle";
+export { default as ReactionStrokeIcon } from "./Reaction";
+export { default as RectangleStrokeIcon } from "./Rectangle";
+export { default as RobotStrokeIcon } from "./Robot";
+export { default as RocketStrokeIcon } from "./Rocket";
+export { default as ScanStrokeIcon } from "./Scan";
+export { default as ServerStrokeIcon } from "./Server";
+export { default as ShakeHandsStrokeIcon } from "./ShakeHands";
+export { default as ShapesStrokeIcon } from "./Shapes";
+export { default as SparklesStrokeIcon } from "./Sparkles";
+export { default as SquareStrokeIcon } from "./Square";
+export { default as Square3Stack3DStrokeIcon } from "./Square3Stack3D";
+export { default as StarStrokeIcon } from "./Star";
+export { default as StopStrokeIcon } from "./Stop";
+export { default as TableStrokeIcon } from "./Table";
+export { default as TagStrokeIcon } from "./Tag";
+export { default as TemplateStrokeIcon } from "./Template";
+export { default as TestTubeStrokeIcon } from "./TestTube";
+export { default as TimeStrokeIcon } from "./Time";
+export { default as TranslateStrokeIcon } from "./Translate";
+export { default as TrashStrokeIcon } from "./Trash";
+export { default as TriangleStrokeIcon } from "./Triangle";
+export { default as UserStrokeIcon } from "./User";
+export { default as UserArrowStrokeIcon } from "./UserArrow";
+export { default as UserGroupStrokeIcon } from "./UserGroup";
+export { default as UserPlusStrokeIcon } from "./UserPlus";
+export { default as WrenchStrokeIcon } from "./Wrench";
+export { default as XCircleStrokeIcon } from "./XCircle";
+export { default as XMarkStrokeIcon } from "./XMark";
diff --git a/sparkle/src/index.ts b/sparkle/src/index.ts
index c4a5f5da370e..832e0fdb8f30 100644
--- a/sparkle/src/index.ts
+++ b/sparkle/src/index.ts
@@ -1,2 +1,5 @@
-import "./styles/global.css";
-export * from "./_index";
+export * from "./components";
+export { SparkleContext } from "./context";
+export * from "./icons";
+export * from "./lib";
+export * from "./logo";
diff --git a/sparkle/src/index_with_tw_base.ts b/sparkle/src/index_with_tw_base.ts
index b32e3a4e4678..1e1ce6baa07a 100644
--- a/sparkle/src/index_with_tw_base.ts
+++ b/sparkle/src/index_with_tw_base.ts
@@ -1,2 +1,2 @@
import "./styles/global_with_tw_base.css";
-export * from "./_index";
+export * from "./index";
diff --git a/sparkle/src/lib/index.ts b/sparkle/src/lib/index.ts
new file mode 100644
index 000000000000..63d9cac821c2
--- /dev/null
+++ b/sparkle/src/lib/index.ts
@@ -0,0 +1 @@
+export * as avatarUtils from "./avatar/utils";
diff --git a/sparkle/src/logo/dust/index.ts b/sparkle/src/logo/dust/index.ts
index a09243089062..d71aa9512010 100644
--- a/sparkle/src/logo/dust/index.ts
+++ b/sparkle/src/logo/dust/index.ts
@@ -1,10 +1,10 @@
-export { default as LogoHorizontalColor } from "./LogoHorizontalColor";
-export { default as LogoHorizontalColorLayer1 } from "./LogoHorizontalColorLayer1";
-export { default as LogoHorizontalColorLayer2 } from "./LogoHorizontalColorLayer2";
-export { default as LogoHorizontalDark } from "./LogoHorizontalDark";
-export { default as LogoHorizontalWhite } from "./LogoHorizontalWhite";
-export { default as LogoSquareColor } from "./LogoSquareColor";
-export { default as LogoSquareColorLayer1 } from "./LogoSquareColorLayer1";
-export { default as LogoSquareColorLayer2 } from "./LogoSquareColorLayer2";
-export { default as LogoSquareDark } from "./LogoSquareDark";
-export { default as LogoSquareWhite } from "./LogoSquareWhite";
+export { default as LogoHorizontalColorLogo } from "./LogoHorizontalColor";
+export { default as LogoHorizontalColorLayer1Logo } from "./LogoHorizontalColorLayer1";
+export { default as LogoHorizontalColorLayer2Logo } from "./LogoHorizontalColorLayer2";
+export { default as LogoHorizontalDarkLogo } from "./LogoHorizontalDark";
+export { default as LogoHorizontalWhiteLogo } from "./LogoHorizontalWhite";
+export { default as LogoSquareColorLogo } from "./LogoSquareColor";
+export { default as LogoSquareColorLayer1Logo } from "./LogoSquareColorLayer1";
+export { default as LogoSquareColorLayer2Logo } from "./LogoSquareColorLayer2";
+export { default as LogoSquareDarkLogo } from "./LogoSquareDark";
+export { default as LogoSquareWhiteLogo } from "./LogoSquareWhite";
diff --git a/sparkle/src/logo/index.ts b/sparkle/src/logo/index.ts
new file mode 100644
index 000000000000..47e9a757361e
--- /dev/null
+++ b/sparkle/src/logo/index.ts
@@ -0,0 +1,3 @@
+export * from "./dust";
+export * from "./Logo";
+export * from "./platforms";
diff --git a/sparkle/src/logo/platforms/Zendesk.tsx b/sparkle/src/logo/platforms/Zendesk.tsx
index 6732ca14eb3d..8ad3c8af8f2c 100644
--- a/sparkle/src/logo/platforms/Zendesk.tsx
+++ b/sparkle/src/logo/platforms/Zendesk.tsx
@@ -1,20 +1,18 @@
import type { SVGProps } from "react";
import * as React from "react";
-const SvgZapier = (props: SVGProps) => (
+const SvgZendesk = (props: SVGProps) => (
);
-export default SvgZapier;
+export default SvgZendesk;
diff --git a/sparkle/src/logo/platforms/index.ts b/sparkle/src/logo/platforms/index.ts
index ef18cab89616..d686ca849df5 100644
--- a/sparkle/src/logo/platforms/index.ts
+++ b/sparkle/src/logo/platforms/index.ts
@@ -1,34 +1,34 @@
-export { default as Ai21 } from "./Ai21";
-export { default as Anthropic } from "./Anthropic";
-export { default as AnthropicWhite } from "./AnthropicWhite";
-export { default as Claude } from "./Claude";
-export { default as Cohere } from "./Cohere";
-export { default as Confluence } from "./Confluence";
-export { default as Drive } from "./Drive";
-export { default as Gemini } from "./Gemini";
-export { default as Github } from "./Github";
-export { default as GithubWhite } from "./GithubWhite";
-export { default as Gong } from "./Gong";
-export { default as Google } from "./Google";
-export { default as GoogleDoc } from "./GoogleDoc";
-export { default as GooglePdf } from "./GooglePdf";
-export { default as GoogleSlide } from "./GoogleSlide";
-export { default as GoogleSpreadsheet } from "./GoogleSpreadsheet";
-export { default as Gpt3 } from "./Gpt3";
-export { default as Gpt4 } from "./Gpt4";
-export { default as HuggingFace } from "./HuggingFace";
-export { default as Intercom } from "./Intercom";
-export { default as Microsoft } from "./Microsoft";
-export { default as MicrosoftExcel } from "./MicrosoftExcel";
-export { default as MicrosoftPowerpoint } from "./MicrosoftPowerpoint";
-export { default as MicrosoftWord } from "./MicrosoftWord";
-export { default as Mistral } from "./Mistral";
-export { default as Notion } from "./Notion";
-export { default as Office } from "./Office";
-export { default as Openai } from "./Openai";
-export { default as OpenaiWhite } from "./OpenaiWhite";
-export { default as Replicate } from "./Replicate";
-export { default as Salesforce } from "./Salesforce";
-export { default as Slack } from "./Slack";
-export { default as Zapier } from "./Zapier";
-export { default as Zendesk } from "./Zendesk";
+export { default as Ai21Logo } from "./Ai21";
+export { default as AnthropicLogo } from "./Anthropic";
+export { default as AnthropicWhiteLogo } from "./AnthropicWhite";
+export { default as ClaudeLogo } from "./Claude";
+export { default as CohereLogo } from "./Cohere";
+export { default as ConfluenceLogo } from "./Confluence";
+export { default as DriveLogo } from "./Drive";
+export { default as GeminiLogo } from "./Gemini";
+export { default as GithubLogo } from "./Github";
+export { default as GithubWhiteLogo } from "./GithubWhite";
+export { default as GongLogo } from "./Gong";
+export { default as GoogleLogo } from "./Google";
+export { default as GoogleDocLogo } from "./GoogleDoc";
+export { default as GooglePdfLogo } from "./GooglePdf";
+export { default as GoogleSlideLogo } from "./GoogleSlide";
+export { default as GoogleSpreadsheetLogo } from "./GoogleSpreadsheet";
+export { default as Gpt3Logo } from "./Gpt3";
+export { default as Gpt4Logo } from "./Gpt4";
+export { default as HuggingFaceLogo } from "./HuggingFace";
+export { default as IntercomLogo } from "./Intercom";
+export { default as MicrosoftLogo } from "./Microsoft";
+export { default as MicrosoftExcelLogo } from "./MicrosoftExcel";
+export { default as MicrosoftPowerpointLogo } from "./MicrosoftPowerpoint";
+export { default as MicrosoftWordLogo } from "./MicrosoftWord";
+export { default as MistralLogo } from "./Mistral";
+export { default as NotionLogo } from "./Notion";
+export { default as OfficeLogo } from "./Office";
+export { default as OpenaiLogo } from "./Openai";
+export { default as OpenaiWhiteLogo } from "./OpenaiWhite";
+export { default as ReplicateLogo } from "./Replicate";
+export { default as SalesforceLogo } from "./Salesforce";
+export { default as SlackLogo } from "./Slack";
+export { default as ZapierLogo } from "./Zapier";
+export { default as ZendeskLogo } from "./Zendesk";
diff --git a/sparkle/src/stories/Banner.stories.tsx b/sparkle/src/stories/Banner.stories.tsx
index 14e64a436cab..7e1f5e97639a 100644
--- a/sparkle/src/stories/Banner.stories.tsx
+++ b/sparkle/src/stories/Banner.stories.tsx
@@ -1,8 +1,8 @@
import type { Meta } from "@storybook/react";
import React from "react";
-import { Button } from "@sparkle/_index";
import { Banner } from "@sparkle/components/Banner";
+import { Button } from "@sparkle/components/Button";
const meta = {
title: "Components/Banner",
diff --git a/sparkle/src/stories/BarHeader.stories.tsx b/sparkle/src/stories/BarHeader.stories.tsx
index 4a13a307c67c..c585fec47eb2 100644
--- a/sparkle/src/stories/BarHeader.stories.tsx
+++ b/sparkle/src/stories/BarHeader.stories.tsx
@@ -1,7 +1,7 @@
import type { Meta, StoryObj } from "@storybook/react";
import React from "react";
-import { ChatBubbleBottomCenterText } from "@sparkle/icons/solid";
+import { ChatBubbleBottomCenterTextIcon } from "@sparkle/icons/solid";
import { BarHeader, Page } from "../index_with_tw_base";
@@ -41,7 +41,7 @@ export const BasicBarHeaderValidate = () => {
}
/>