From 2a4553e685eef0ab50207c77e72dcdc3a2bcc9b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Tue, 15 Sep 2026 15:13:44 +0200 Subject: [PATCH 01/18] feat(mosaic): add the @clerk/mosaic package --- .github/labeler.yml | 4 + packages/mosaic/LICENSE | 21 +++++ packages/mosaic/bundlewatch.config.json | 6 ++ packages/mosaic/package.json | 89 +++++++++++++++++++ packages/mosaic/scripts/check-bundle.mjs | 32 +++++++ packages/mosaic/src/global.d.ts | 1 + packages/mosaic/src/index.ts | 4 + packages/mosaic/styles.css.d.ts | 1 + .../mosaic/stylex-lightningcss.config.mjs | 17 ++++ packages/mosaic/tsconfig.build.json | 10 +++ packages/mosaic/tsconfig.json | 25 ++++++ packages/mosaic/tsdown.config.mts | 33 +++++++ packages/mosaic/tsdown.css.config.mts | 35 ++++++++ packages/mosaic/turbo.json | 28 ++++++ packages/mosaic/vitest.config.mts | 27 ++++++ pnpm-lock.yaml | 75 ++++++++++++---- 16 files changed, 391 insertions(+), 17 deletions(-) create mode 100644 packages/mosaic/LICENSE create mode 100644 packages/mosaic/bundlewatch.config.json create mode 100644 packages/mosaic/package.json create mode 100644 packages/mosaic/scripts/check-bundle.mjs create mode 100644 packages/mosaic/src/global.d.ts create mode 100644 packages/mosaic/src/index.ts create mode 100644 packages/mosaic/styles.css.d.ts create mode 100644 packages/mosaic/stylex-lightningcss.config.mjs create mode 100644 packages/mosaic/tsconfig.build.json create mode 100644 packages/mosaic/tsconfig.json create mode 100644 packages/mosaic/tsdown.config.mts create mode 100644 packages/mosaic/tsdown.css.config.mts create mode 100644 packages/mosaic/turbo.json create mode 100644 packages/mosaic/vitest.config.mts diff --git a/.github/labeler.yml b/.github/labeler.yml index 52e3335cd5b..b6f18eeb545 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -76,6 +76,10 @@ types: - changed-files: - any-glob-to-any-file: packages/types/** +mosaic: + - changed-files: + - any-glob-to-any-file: packages/mosaic/** + ui: - changed-files: - any-glob-to-any-file: packages/ui/** diff --git a/packages/mosaic/LICENSE b/packages/mosaic/LICENSE new file mode 100644 index 00000000000..daceccfbc84 --- /dev/null +++ b/packages/mosaic/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Clerk, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/mosaic/bundlewatch.config.json b/packages/mosaic/bundlewatch.config.json new file mode 100644 index 00000000000..e6978792667 --- /dev/null +++ b/packages/mosaic/bundlewatch.config.json @@ -0,0 +1,6 @@ +{ + "files": [ + { "path": "./dist/index.js", "maxSize": "107KB" }, + { "path": "./dist/styles.css", "maxSize": "12KB" } + ] +} diff --git a/packages/mosaic/package.json b/packages/mosaic/package.json new file mode 100644 index 00000000000..39f46ab4a99 --- /dev/null +++ b/packages/mosaic/package.json @@ -0,0 +1,89 @@ +{ + "name": "@clerk/mosaic", + "version": "0.0.1", + "description": "Clerk Mosaic UI components", + "keywords": [ + "clerk", + "auth", + "authentication", + "react", + "mosaic", + "ui" + ], + "homepage": "https://clerk.com/", + "bugs": { + "url": "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/clerk/javascript/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/clerk/javascript.git", + "directory": "packages/mosaic" + }, + "license": "MIT", + "author": "Clerk", + "sideEffects": [ + "./dist/styles.css" + ], + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js", + "default": "./dist/index.js" + }, + "./styles.css": { + "types": "./styles.css.d.ts", + "default": "./dist/styles.css" + }, + "./package.json": "./package.json" + }, + "types": "dist/index.d.ts", + "files": [ + "dist", + "styles.css.d.ts" + ], + "scripts": { + "build": "pnpm build:js && pnpm build:css && pnpm check:bundle && pnpm typecheck", + "build:css": "tsdown --config tsdown.css.config.mts", + "build:js": "tsdown --config tsdown.config.mts", + "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json", + "check:bundle": "node ./scripts/check-bundle.mjs", + "clean": "rimraf ./dist ./dist-css", + "dev": "tsdown --config tsdown.config.mts --watch", + "format": "node ../../scripts/format-package.mjs", + "format:check": "node ../../scripts/format-package.mjs --check", + "lint": "eslint src", + "lint:attw": "attw --pack . --exclude-entrypoints styles.css --profile esm-only", + "lint:publint": "publint", + "test": "vitest run", + "test:ci": "vitest run --maxWorkers=70%", + "typecheck": "tsc --noEmit" + }, + "dependencies": { + "@clerk/shared": "workspace:^" + }, + "devDependencies": { + "@clerk/headless": "workspace:^", + "@floating-ui/react": "catalog:repo", + "@stylexjs/eslint-plugin": "0.19.0", + "@stylexjs/rollup-plugin": "0.19.0", + "@stylexjs/stylex": "0.19.0", + "@stylexjs/unplugin": "0.19.0", + "@types/react": "catalog:react", + "@types/react-dom": "catalog:react", + "bundlewatch": "^0.4.2", + "react": "catalog:react", + "react-dom": "catalog:react", + "tsdown": "catalog:repo" + }, + "peerDependencies": { + "react": "catalog:peer-react", + "react-dom": "catalog:peer-react" + }, + "engines": { + "node": ">=20.9.0" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/mosaic/scripts/check-bundle.mjs b/packages/mosaic/scripts/check-bundle.mjs new file mode 100644 index 00000000000..a6cef719dd1 --- /dev/null +++ b/packages/mosaic/scripts/check-bundle.mjs @@ -0,0 +1,32 @@ +import { readFile } from 'node:fs/promises'; +import { resolve } from 'node:path'; + +const distFile = resolve(import.meta.dirname, '../dist/index.js'); +const source = await readFile(distFile, 'utf8'); + +if (!source.startsWith("'use client';") && !source.startsWith('"use client";')) { + throw new Error("Published Mosaic JS is missing a top-level 'use client' boundary."); +} + +const forbidden = [ + { name: '@clerk/ui', pattern: /(?:from|import)\s*['"]@clerk\/ui(?:\/[^'"]*)?['"]/ }, + { name: '@clerk/headless', pattern: /(?:from|import)\s*['"]@clerk\/headless(?:\/[^'"]*)?['"]/ }, + { name: 'Emotion', pattern: /(?:from|import)\s*['"]@emotion\// }, + { name: 'StyleX', pattern: /(?:from|import)\s*['"]@stylexjs\// }, +]; + +const hits = forbidden.filter(({ pattern }) => pattern.test(source)).map(({ name }) => name); + +if (hits.length > 0) { + throw new Error(`Published Mosaic JS still references ${hits.join(', ')}.`); +} + +if (!/(?:from|import)\s*['"]@clerk\/shared(?:\/[^'"]*)?['"]/.test(source)) { + throw new Error( + 'Published Mosaic JS does not import @clerk/shared; Clerk context would not resolve from the host SDK.', + ); +} + +console.log( + '✅ Mosaic bundle is client-boundaried, imports @clerk/shared, and is free of UI, Headless, Emotion, and StyleX runtime imports', +); diff --git a/packages/mosaic/src/global.d.ts b/packages/mosaic/src/global.d.ts new file mode 100644 index 00000000000..9dba9570a63 --- /dev/null +++ b/packages/mosaic/src/global.d.ts @@ -0,0 +1 @@ +declare const process: { env: { NODE_ENV?: string } }; diff --git a/packages/mosaic/src/index.ts b/packages/mosaic/src/index.ts new file mode 100644 index 00000000000..328284799fc --- /dev/null +++ b/packages/mosaic/src/index.ts @@ -0,0 +1,4 @@ +'use client'; + +export type { UserButtonProps } from './user-button/user-button'; +export { UserButton } from './user-button/user-button'; diff --git a/packages/mosaic/styles.css.d.ts b/packages/mosaic/styles.css.d.ts new file mode 100644 index 00000000000..cb0ff5c3b54 --- /dev/null +++ b/packages/mosaic/styles.css.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/mosaic/stylex-lightningcss.config.mjs b/packages/mosaic/stylex-lightningcss.config.mjs new file mode 100644 index 00000000000..18f5179a8a6 --- /dev/null +++ b/packages/mosaic/stylex-lightningcss.config.mjs @@ -0,0 +1,17 @@ +// Lightning CSS encodes browser versions as (major << 16) | (minor << 8) | patch. +const version = (major, minor = 0) => (major << 16) | (minor << 8); + +// Pin targets to browsers that natively support `light-dark()` and `oklch()` +// (the token color model). Without this, the plugin defaults to a broad +// browserslist and Lightning CSS down-levels `light-dark()` into an incomplete +// `--lightningcss-*` polyfill, producing invalid two-token color values. +// +// Firefox is 121, not the 120 that `light-dark()` alone would allow: 121 is where +// `:has()` shipped, which the styles now use (see `button.styles.ts`). +export const mosaicLightningCssTargets = { + chrome: version(123), + edge: version(123), + firefox: version(121), + safari: version(17, 5), + ios_saf: version(17, 5), +}; diff --git a/packages/mosaic/tsconfig.build.json b/packages/mosaic/tsconfig.build.json new file mode 100644 index 00000000000..b1359a02913 --- /dev/null +++ b/packages/mosaic/tsconfig.build.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "paths": { + "@clerk/headless/hooks": ["../headless/src/hooks/index.ts"], + "@clerk/headless/utils": ["../headless/src/utils/index.ts"], + "@clerk/headless/*": ["../headless/src/primitives/*"] + } + } +} diff --git a/packages/mosaic/tsconfig.json b/packages/mosaic/tsconfig.json new file mode 100644 index 00000000000..90212123bb7 --- /dev/null +++ b/packages/mosaic/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "rootDir": "src", + "verbatimModuleSyntax": true, + "target": "es2022", + "strict": true, + "skipLibCheck": true, + "resolveJsonModule": true, + "preserveWatchOutput": true, + "outDir": "dist", + "noUnusedLocals": true, + "moduleResolution": "bundler", + "moduleDetection": "force", + "module": "preserve", + "lib": ["ES2023", "DOM", "DOM.Iterable"], + "jsx": "react-jsx", + "isolatedModules": true, + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "declaration": true, + "declarationMap": true + }, + "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx", "**/__tests__/**"], + "include": ["src"] +} diff --git a/packages/mosaic/tsdown.config.mts b/packages/mosaic/tsdown.config.mts new file mode 100644 index 00000000000..ad29a69cd4c --- /dev/null +++ b/packages/mosaic/tsdown.config.mts @@ -0,0 +1,33 @@ +import stylexPlugin from '@stylexjs/rollup-plugin'; +import { defineConfig } from 'tsdown'; + +import { mosaicLightningCssTargets } from './stylex-lightningcss.config.mjs'; + +export default defineConfig({ + entry: ['./src/index.ts'], + outDir: './dist', + format: ['esm'], + dts: true, + clean: true, + target: 'es2022', + platform: 'browser', + minify: false, + sourcemap: false, + tsconfig: './tsconfig.build.json', + deps: { + neverBundle: ['react', 'react-dom', /^@clerk\/shared(\/.*)?$/], + alwaysBundle: [/^@clerk\/headless(\/.*)?$/, /^@stylexjs\//, /^@floating-ui\//], + onlyBundle: false, + }, + plugins: [ + stylexPlugin({ + fileName: 'styles.partial.css', + useCSSLayers: true, + lightningcssOptions: { targets: mosaicLightningCssTargets }, + }), + ], + onSuccess: async () => { + const { rm } = await import('node:fs/promises'); + await rm('./dist/index.js.map', { force: true }); + }, +}); diff --git a/packages/mosaic/tsdown.css.config.mts b/packages/mosaic/tsdown.css.config.mts new file mode 100644 index 00000000000..b81a5b8fe17 --- /dev/null +++ b/packages/mosaic/tsdown.css.config.mts @@ -0,0 +1,35 @@ +import stylexPlugin from '@stylexjs/rollup-plugin'; +import { defineConfig } from 'tsdown'; + +import { mosaicLightningCssTargets } from './stylex-lightningcss.config.mjs'; + +export default defineConfig({ + entry: ['./src/styles/index.ts'], + outDir: './dist-css', + format: ['esm'], + dts: false, + clean: true, + target: 'es2022', + platform: 'browser', + minify: false, + sourcemap: false, + tsconfig: './tsconfig.json', + deps: { + neverBundle: ['react', 'react-dom', '@stylexjs/stylex', /^@clerk\/headless(\/.*)?$/, /^@clerk\/shared(\/.*)?$/], + onlyBundle: false, + }, + plugins: [ + stylexPlugin({ + fileName: 'styles.css', + useCSSLayers: true, + lightningcssOptions: { targets: mosaicLightningCssTargets }, + }), + ], + onSuccess: async () => { + const { cp, rm } = await import('node:fs/promises'); + await cp('./dist-css/styles.css', './dist/styles.css'); + await rm('./dist-css', { recursive: true, force: true }); + await rm('./dist/styles.partial.css', { force: true }); + await rm('./dist/index.js.map', { force: true }); + }, +}); diff --git a/packages/mosaic/turbo.json b/packages/mosaic/turbo.json new file mode 100644 index 00000000000..87a7f9a3ffc --- /dev/null +++ b/packages/mosaic/turbo.json @@ -0,0 +1,28 @@ +{ + "extends": ["//"], + "tasks": { + "build": { + "inputs": [ + "package.json", + "*.d.ts", + "src/**", + "tsconfig.json", + "tsconfig.build.json", + "tsdown.config.mts", + "tsdown.css.config.mts", + "stylex-lightningcss.config.mjs", + "scripts/**", + "!**/*.test.*", + "!**/test/**", + "!**/tests/**", + "!**/__tests__/**", + "!**/__mocks__/**", + "!**/__snapshots__/**", + "!coverage/**", + "!examples/**", + "!node_modules/**" + ], + "outputs": ["dist/**"] + } + } +} diff --git a/packages/mosaic/vitest.config.mts b/packages/mosaic/vitest.config.mts new file mode 100644 index 00000000000..199e5c917f7 --- /dev/null +++ b/packages/mosaic/vitest.config.mts @@ -0,0 +1,27 @@ +import stylex from '@stylexjs/unplugin/vite'; +import react from '@vitejs/plugin-react'; +import { resolve } from 'node:path'; +import { defineConfig } from 'vitest/config'; + +const mosaicPath = resolve(import.meta.dirname, 'src'); + +export default defineConfig({ + plugins: [ + stylex({ dev: true, unstable_moduleResolution: { type: 'commonJS', rootDir: mosaicPath } }), + react({ jsxRuntime: 'automatic' }), + ], + test: { + watch: false, + environment: 'jsdom', + environmentOptions: { + jsdom: { + resources: 'usable', + }, + }, + globals: false, + include: ['**/*.test.?(c|m)[jt]s?(x)', '**/*.spec.?(c|m)[jt]s?(x)'], + exclude: ['node_modules/**', 'dist/**'], + setupFiles: '../clerk-js/vitest.setup.mts', + testTimeout: 5000, + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b3ecba5aa74..f1b73c7804b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -845,6 +845,49 @@ importers: specifier: workspace:^ version: link:../shared + packages/mosaic: + dependencies: + '@clerk/shared': + specifier: workspace:^ + version: link:../shared + devDependencies: + '@clerk/headless': + specifier: workspace:^ + version: link:../headless + '@floating-ui/react': + specifier: catalog:repo + version: 0.27.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@stylexjs/eslint-plugin': + specifier: 0.19.0 + version: 0.19.0 + '@stylexjs/rollup-plugin': + specifier: 0.19.0 + version: 0.19.0 + '@stylexjs/stylex': + specifier: 0.19.0 + version: 0.19.0 + '@stylexjs/unplugin': + specifier: 0.19.0 + version: 0.19.0(unplugin@3.3.0(@rspack/core@2.0.6)(esbuild@0.28.1)(rolldown@1.1.0)(rollup@4.61.0)(vite@8.2.2(@types/node@25.6.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(webpack@5.102.1(esbuild@0.28.1))) + '@types/react': + specifier: catalog:react + version: 18.3.28 + '@types/react-dom': + specifier: catalog:react + version: 18.3.7(@types/react@18.3.28) + bundlewatch: + specifier: ^0.4.2 + version: 0.4.2 + react: + specifier: 18.3.1 + version: 18.3.1 + react-dom: + specifier: 18.3.1 + version: 18.3.1(react@18.3.1) + tsdown: + specifier: catalog:repo + version: 0.22.2(@arethetypeswrong/core@0.18.2)(publint@0.3.18)(tsx@4.20.6)(typescript@6.0.3)(unrun@0.3.1(synckit@0.11.11))(vue-tsc@3.2.4(typescript@6.0.3)) + packages/msw: dependencies: '@clerk/shared': @@ -1056,9 +1099,9 @@ importers: '@clerk/headless': specifier: workspace:* version: link:../headless - '@clerk/ui': + '@clerk/mosaic': specifier: workspace:* - version: link:../ui + version: link:../mosaic '@stylexjs/stylex': specifier: 0.19.0 version: 0.19.0 @@ -1230,9 +1273,6 @@ importers: '@solana/wallet-standard': specifier: catalog:module-manager version: 1.1.4(@solana/wallet-adapter-base@0.9.27(@solana/web3.js@1.98.4(bufferutil@4.1.0)(typescript@6.0.3)(utf-8-validate@5.0.10)))(@solana/web3.js@1.98.4(bufferutil@4.1.0)(typescript@6.0.3)(utf-8-validate@5.0.10))(bs58@6.0.0)(react@18.3.1) - '@stylexjs/stylex': - specifier: 0.19.0 - version: 0.19.0 '@swc/helpers': specifier: catalog:repo version: 0.5.21 @@ -1261,9 +1301,6 @@ importers: specifier: 18.3.1 version: 18.3.1(react@18.3.1) devDependencies: - '@clerk/headless': - specifier: workspace:^ - version: link:../headless '@floating-ui/react-dom': specifier: ^2.1.8 version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1282,15 +1319,6 @@ importers: '@rspack/plugin-react-refresh': specifier: catalog:rspack version: 2.0.1(@rspack/core@2.0.6(@swc/helpers@0.5.21))(react-refresh@0.17.0) - '@stylexjs/eslint-plugin': - specifier: 0.19.0 - version: 0.19.0 - '@stylexjs/rollup-plugin': - specifier: 0.19.0 - version: 0.19.0 - '@stylexjs/unplugin': - specifier: 0.19.0 - version: 0.19.0(unplugin@2.3.11) '@svgr/rollup': specifier: ^8.1.0 version: 8.1.0(rollup@4.61.0)(typescript@6.0.3) @@ -20936,6 +20964,19 @@ snapshots: transitivePeerDependencies: - supports-color + '@stylexjs/unplugin@0.19.0(unplugin@3.3.0(@rspack/core@2.0.6)(esbuild@0.28.1)(rolldown@1.1.0)(rollup@4.61.0)(vite@8.2.2(@types/node@25.6.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(webpack@5.102.1(esbuild@0.28.1)))': + dependencies: + '@babel/core': 7.29.7 + '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.29.7) + '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7) + '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7) + '@stylexjs/babel-plugin': 0.19.0 + browserslist: 4.28.8 + lightningcss: 1.33.0 + unplugin: 3.3.0(@rspack/core@2.0.6)(esbuild@0.28.1)(rolldown@1.1.0)(rollup@4.61.0)(vite@8.2.2(@types/node@25.6.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.46.1)(tsx@4.20.6)(yaml@2.9.0))(webpack@5.102.1(esbuild@0.28.1)) + transitivePeerDependencies: + - supports-color + '@svgr/babel-plugin-add-jsx-attribute@6.5.1(@babel/core@7.29.7)': dependencies: '@babel/core': 7.29.7 From 4ece61dfe1f9603fcde0041362c37c1227d0eaab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Tue, 15 Sep 2026 15:19:35 +0200 Subject: [PATCH 02/18] refactor(ui): move mosaic source into @clerk/mosaic --- .gitignore | 1 - .prettierignore | 1 - .../mosaic => mosaic/src}/MosaicProvider.tsx | 0 .../__tests__/MosaicProvider.ssr.test.tsx | 0 .../src}/__tests__/MosaicProvider.test.tsx | 0 .../src}/__tests__/props.test.ts | 0 .../blocks/destructive/destructive.test.tsx | 0 .../src}/blocks/destructive/destructive.tsx | 0 .../src}/blocks/destructive/index.ts | 0 .../src}/components/avatar/avatar.styles.ts | 0 .../src}/components/avatar/avatar.test.tsx | 0 .../src}/components/avatar/avatar.tsx | 0 .../src}/components/avatar/index.ts | 0 .../src}/components/badge/badge.styles.ts | 0 .../src}/components/badge/badge.test.tsx | 0 .../src}/components/badge/badge.tsx | 0 .../src}/components/badge/index.ts | 0 .../src}/components/banner/banner.styles.ts | 0 .../src}/components/banner/banner.test.tsx | 0 .../src}/components/banner/banner.tsx | 0 .../src}/components/banner/index.ts | 0 .../components/branding/branding.styles.ts | 0 .../components/branding/branding.test.tsx | 0 .../src}/components/branding/branding.tsx | 0 .../src}/components/branding/index.ts | 0 .../src}/components/button/button.context.ts | 0 .../button/button.markers.stylex.ts | 0 .../src}/components/button/button.styles.ts | 2 +- .../src}/components/button/button.test.tsx | 0 .../src}/components/button/button.tsx | 0 .../src}/components/button/index.ts | 0 .../components/button/submit-button.styles.ts | 0 .../components/button/submit-button.test.tsx | 0 .../src}/components/button/submit-button.tsx | 0 .../components/card/card.markers.stylex.ts | 0 .../src}/components/card/card.styles.ts | 0 .../src}/components/card/card.test.tsx | 0 .../src}/components/card/card.tsx | 0 .../src}/components/card/index.ts | 0 .../src}/components/clerk-logo/clerk-logo.tsx | 0 .../src}/components/clerk-logo/index.ts | 0 .../components/combobox/combobox.styles.ts | 0 .../components/combobox/combobox.test.tsx | 0 .../src}/components/combobox/combobox.tsx | 0 .../src}/components/combobox/index.ts | 0 .../components/dialog/alert-dialog.test.tsx | 0 .../src}/components/dialog/dialog.styles.ts | 0 .../src}/components/dialog/dialog.test.tsx | 0 .../src}/components/dialog/dialog.tsx | 0 .../src}/components/dialog/index.ts | 0 .../src}/components/dialog/keyboard-inset.ts | 0 .../src}/components/drawer/drawer.styles.ts | 0 .../src}/components/drawer/drawer.test.tsx | 0 .../src}/components/drawer/drawer.tsx | 0 .../src}/components/drawer/index.ts | 0 .../src}/components/field/field.context.tsx | 0 .../src}/components/field/field.ssr.test.tsx | 0 .../src}/components/field/field.styles.ts | 0 .../src}/components/field/field.test.tsx | 0 .../src}/components/field/field.tsx | 0 .../src}/components/field/index.ts | 0 .../src}/components/flow/flow.styles.ts | 0 .../src}/components/flow/flow.test.tsx | 0 .../src}/components/flow/flow.tsx | 0 .../src}/components/flow/index.ts | 0 .../src}/components/heading/heading.styles.ts | 0 .../src}/components/heading/heading.test.tsx | 0 .../src}/components/heading/heading.tsx | 0 .../src}/components/heading/index.ts | 0 .../src}/components/icon/icon-frame.styles.ts | 0 .../src}/components/icon/icon-frame.test.tsx | 0 .../src}/components/icon/icon-frame.tsx | 0 .../components/icon/icon.markers.stylex.ts | 0 .../src}/components/icon/icon.styles.ts | 0 .../src}/components/icon/icon.test.tsx | 0 .../src}/components/icon/icon.tsx | 0 .../src}/components/icon/index.ts | 0 .../src}/components/input-group/index.ts | 0 .../input-group/input-group.context.ts | 0 .../input-group/input-group.styles.ts | 0 .../input-group/input-group.test.tsx | 0 .../components/input-group/input-group.tsx | 0 .../src}/components/input/index.ts | 0 .../src}/components/input/input.styles.ts | 0 .../src}/components/input/input.test.tsx | 0 .../src}/components/input/input.tsx | 0 .../src}/components/item/index.ts | 0 .../src}/components/item/item.styles.ts | 0 .../src}/components/item/item.test.tsx | 0 .../src}/components/item/item.tsx | 0 .../src}/components/menu/index.ts | 0 .../src}/components/menu/menu.styles.ts | 0 .../src}/components/menu/menu.test.tsx | 0 .../src}/components/menu/menu.tsx | 0 .../src}/components/otp/index.ts | 0 .../src}/components/otp/otp.styles.ts | 0 .../src}/components/otp/otp.test.tsx | 0 .../src}/components/otp/otp.tsx | 0 .../src}/components/phone-input/index.ts | 0 .../phone-input/phone-input.styles.ts | 0 .../phone-input/phone-input.test.tsx | 0 .../components/phone-input/phone-input.tsx | 0 .../src}/components/popover/index.ts | 0 .../src}/components/popover/popover.styles.ts | 0 .../src}/components/popover/popover.test.tsx | 0 .../src}/components/popover/popover.tsx | 0 .../src}/components/profile/index.ts | 0 .../src}/components/profile/profile.styles.ts | 0 .../src}/components/profile/profile.test.tsx | 0 .../src}/components/profile/profile.tsx | 0 .../src}/components/scroll-area/index.ts | 0 .../scroll-area/scroll-area.styles.ts | 0 .../scroll-area/scroll-area.test.ts | 0 .../scroll-area/scroll-area.vars.stylex.ts | 0 .../src}/components/section/index.ts | 0 .../section/section.markers.stylex.ts | 0 .../src}/components/section/section.styles.ts | 0 .../src}/components/section/section.test.tsx | 0 .../src}/components/section/section.tsx | 0 .../src}/components/select/index.ts | 0 .../select/select.markers.stylex.ts | 0 .../src}/components/select/select.styles.ts | 0 .../src}/components/select/select.test.tsx | 0 .../src}/components/select/select.tsx | 0 .../src}/components/spinner/index.ts | 0 .../src}/components/spinner/spinner.styles.ts | 0 .../src}/components/spinner/spinner.test.tsx | 0 .../src}/components/spinner/spinner.tsx | 0 .../src}/components/text/index.ts | 0 .../src}/components/text/text.test.tsx | 0 .../src}/components/text/text.tsx | 0 .../src}/components/visually-hidden/index.ts | 0 .../visually-hidden/visually-hidden.test.tsx | 0 .../visually-hidden/visually-hidden.tsx | 0 .../reverification.controller.test.tsx | 0 .../__tests__/reverification.model.test.tsx | 0 .../__tests__/reverification.test.tsx | 0 .../__tests__/reverification.view.test.tsx | 0 .../use-reverification-with-state.test.tsx | 0 .../src}/features/reverification/index.ts | 0 .../reverification.controller.ts | 0 .../reverification/reverification.messages.ts | 0 .../reverification/reverification.model.tsx | 0 .../reverification/reverification.tsx | 0 .../reverification/reverification.types.ts | 0 .../reverification/reverification.utils.ts | 0 .../reverification/reverification.view.tsx | 0 .../steps/reverification-backup-code.tsx | 0 .../steps/reverification-help.tsx | 0 .../steps/reverification-method-picker.tsx | 0 .../steps/reverification-otp.tsx | 0 .../steps/reverification-passkey.tsx | 0 .../steps/reverification-password.tsx | 0 .../use-reverification-with-state.ts | 0 .../__tests__/user-button.controller.test.tsx | 0 .../user-button.integration.test.tsx | 0 .../__tests__/user-button.layout.test.ts | 0 .../__tests__/user-button.model.test.tsx | 0 .../__tests__/user-button.pages.test.tsx | 0 .../__tests__/user-button.test.tsx | 0 .../__tests__/user-button.view.test.tsx | 0 .../user-button/user-button.controller.tsx | 0 .../user-button/user-button.layout.ts | 0 .../user-button/user-button.messages.ts | 0 .../user-button/user-button.model.tsx | 0 .../user-button/user-button.pages.tsx | 0 .../user-button/user-button.styles.ts | 0 .../src}/features/user-button/user-button.tsx | 2 +- .../features/user-button/user-button.types.ts | 0 .../features/user-button/user-button.view.tsx | 0 .../user-profile-add-email.dialog.test.tsx | 0 ...ser-profile-add-email.integration.test.tsx | 0 .../user-profile-add-phone.controller.test.ts | 0 .../user-profile-add-phone.dialog.test.tsx | 0 ...ser-profile-add-phone.integration.test.tsx | 0 .../user-profile-api-keys-panel.view.test.tsx | 0 .../user-profile-billing-panel.view.test.tsx | 0 ...rofile-connected-accounts-actions.test.tsx | 0 ...e-connected-accounts-section.view.test.tsx | 0 ...ser-profile-contact-list-row.view.test.tsx | 0 ...-profile-delete-section.controller.test.ts | 0 .../user-profile-delete-section.view.test.tsx | 0 .../user-profile-edit-name.controller.test.ts | 0 .../user-profile-edit-name.dialog.test.tsx | 0 ...user-profile-edit-password.dialog.test.tsx | 0 ...r-profile-edit-username.controller.test.ts | 0 ...user-profile-edit-username.dialog.test.tsx | 0 .../user-profile-email-actions.test.tsx | 0 ...-enterprise-accounts-section.view.test.tsx | 0 ...ser-profile-password-section.view.test.tsx | 0 .../user-profile-phone-actions.test.tsx | 0 .../user-profile-picture-row.view.test.tsx | 0 .../user-profile-profile-panel.view.test.tsx | 0 .../user-profile-security-panel.view.test.tsx | 0 ...-profile-verify-email-link.dialog.test.tsx | 0 ...r-profile-verify-email-sso.dialog.test.tsx | 0 .../user-profile-web3-actions.test.tsx | 0 ...profile-web3-wallets-section.view.test.tsx | 0 .../__tests__/user-profile.layout.test.ts | 0 .../__tests__/user-profile.view.test.tsx | 0 .../user-profile-account-section.messages.ts | 0 .../user-profile-account-section.styles.ts | 0 .../user-profile-account-section.types.ts | 0 .../user-profile-account-section.view.tsx | 0 .../user-profile-add-email.controller.test.ts | 0 .../user-profile-add-email.controller.ts | 0 .../user-profile-add-email.dialog.tsx | 0 .../user-profile-add-email.messages.ts | 0 .../user-profile-add-phone.controller.ts | 0 .../user-profile-add-phone.dialog.tsx | 0 .../user-profile-add-phone.messages.ts | 0 .../user-profile-contact-list-row.view.tsx | 0 .../user-profile-contact-row.view.tsx | 0 .../user-profile-edit-name.controller.ts | 0 .../user-profile-edit-name.dialog.tsx | 0 .../user-profile-edit-username.controller.ts | 0 .../user-profile-edit-username.dialog.tsx | 0 .../user-profile-email-row.view.tsx | 0 .../user-profile-name-row.view.tsx | 0 .../user-profile-phone-row.view.tsx | 0 .../user-profile-picture-row.view.tsx | 0 .../user-profile-username-row.view.tsx | 0 .../user-profile-verify-email-link.dialog.tsx | 0 ...user-profile-verify-email-link.messages.ts | 0 .../user-profile-verify-email-link.styles.ts | 0 .../user-profile-verify-email-sso.dialog.tsx | 0 .../user-profile-verify-email-sso.messages.ts | 0 .../user-profile-verify-email-sso.styles.ts | 0 .../user-profile/user-profile-action-menu.tsx | 0 ...er-profile-active-devices-section.view.tsx | 0 .../user-profile-api-keys-panel.styles.ts | 0 .../user-profile-api-keys-panel.view.tsx | 0 ...-profile-billing-history-section.styles.ts | 0 ...r-profile-billing-history-section.view.tsx | 0 .../user-profile-billing-panel.styles.ts | 0 .../user-profile-billing-panel.view.tsx | 0 ...ser-profile-connected-account-row.view.tsx | 0 ...rofile-connected-accounts-section.view.tsx | 0 ...ser-profile-connected-accounts.messages.ts | 0 .../user-profile-connected-accounts.styles.ts | 0 .../user-profile-delete-section.controller.ts | 0 .../user-profile-delete-section.messages.ts | 0 .../user-profile-delete-section.view.tsx | 0 ...er-profile-enterprise-account-row.view.tsx | 0 ...le-enterprise-accounts-section.messages.ts | 0 ...file-enterprise-accounts-section.styles.ts | 0 ...ofile-enterprise-accounts-section.types.ts | 0 ...ofile-enterprise-accounts-section.view.tsx | 0 .../user-profile-mfa-section.view.tsx | 0 .../user-profile-passkeys-section.view.tsx | 0 ...r-profile-edit-password.controller.test.ts | 0 .../user-profile-edit-password.controller.ts | 0 .../user-profile-edit-password.dialog.tsx | 0 .../user-profile-password-row.view.tsx | 0 .../user-profile-password-section.messages.ts | 0 .../user-profile-password-section.styles.ts | 0 .../user-profile-password-section.types.ts | 0 .../user-profile-password-section.view.tsx | 0 ...r-profile-payment-methods-section.view.tsx | 0 .../user-profile-profile-panel.styles.ts | 0 .../user-profile-profile-panel.view.tsx | 0 .../user-profile-provider-icon.tsx | 0 .../user-profile-security-icon.tsx | 0 .../user-profile-security-list.tsx | 0 .../user-profile-security-panel.styles.ts | 0 .../user-profile-security-panel.view.tsx | 0 ...user-profile-subscription-section.view.tsx | 0 .../user-profile-web3-wallet-row.view.tsx | 0 ...user-profile-web3-wallets-section.view.tsx | 0 .../user-profile-web3-wallets.messages.ts | 0 .../user-profile-web3-wallets.styles.ts | 0 .../user-profile/user-profile.layout.ts | 0 .../user-profile/user-profile.messages.ts | 0 .../user-profile/user-profile.types.ts | 0 .../user-profile/user-profile.view.tsx | 0 .../__tests__/useAccessibleWarnings.test.ts | 0 .../src}/hooks/__tests__/useMeasure.test.tsx | 0 .../__tests__/useMosaicSupportEmail.test.ts | 0 .../src}/hooks/__tests__/useSpinDelay.test.ts | 0 .../hooks/useAccessibleDescriptionWarning.ts | 0 .../src}/hooks/useAccessibleNameWarning.ts | 0 .../mosaic => mosaic/src}/hooks/useInView.ts | 0 .../mosaic => mosaic/src}/hooks/useMeasure.ts | 0 .../src}/hooks/useMosaicEnvironment.ts | 0 .../src}/hooks/useMosaicRouter.ts | 0 .../src}/hooks/useMosaicSupportEmail.ts | 0 .../src}/hooks/useOrganizationListInView.ts | 0 .../src}/hooks/useSpinDelay.ts | 0 .../mosaic => mosaic/src}/icons/overrides.ts | 0 .../mosaic => mosaic/src}/icons/registry.tsx | 0 packages/mosaic/src/index.ts | 4 +-- .../mosaic => mosaic/src}/machine/ADOPTION.md | 0 .../mosaic => mosaic/src}/machine/README.md | 0 .../__tests__/delete-organization-machine.ts | 0 .../src}/machine/__tests__/machine.test.ts | 0 .../src}/machine/__tests__/patterns.test.ts | 0 .../machine/__tests__/useMachine.test.tsx | 0 .../__tests__/wizard-migration.test.tsx | 0 .../mosaic => mosaic/src}/machine/assign.ts | 0 .../src}/machine/createActor.ts | 0 .../src}/machine/createMachine.ts | 0 .../mosaic => mosaic/src}/machine/setup.ts | 0 .../src}/machine/types.test-d.ts | 0 .../mosaic => mosaic/src}/machine/types.ts | 0 .../src}/machine/useMachine.ts | 0 .../__tests__/firstFactorMachine.test.ts | 0 .../machines/__tests__/signInMachine.test.ts | 0 .../src}/machines/__tests__/test-utils.ts | 0 .../src}/machines/firstFactorMachine.ts | 0 .../src}/machines/signInMachine.ts | 0 .../src/mosaic => mosaic/src}/props.test-d.ts | 0 .../{ui/src/mosaic => mosaic/src}/props.ts | 0 .../src/mosaic => mosaic/src}/styles/index.ts | 8 ++--- .../mosaic => mosaic/src}/tokens.stylex.ts | 0 .../src}/utils/apply-order.test.ts | 0 .../src}/utils/apply-order.ts | 0 .../mosaic => mosaic/src}/utils/context.ts | 0 .../src}/utils/focus-outline.styles.ts | 0 .../src}/utils/focus-outline.test.ts | 0 .../src}/utils/input.styles.ts | 0 .../src}/utils/messages.test.tsx | 0 .../mosaic => mosaic/src}/utils/messages.ts | 0 .../src}/utils/reset.styles.ts | 0 .../src}/utils/reset.test.tsx | 0 .../src}/utils/typography.styles.ts | 0 .../src}/utils/typography.test.ts | 0 .../src}/utils/visually-hidden.styles.ts | 0 .../src}/utils/visually-hidden.test.tsx | 0 packages/ui/package.json | 15 +------- packages/ui/styles.css.d.ts | 3 -- packages/ui/tsconfig.mosaic.json | 18 ---------- packages/ui/tsdown.config.mts | 1 - packages/ui/tsdown.mosaic.config.mts | 36 ------------------- packages/ui/turbo.json | 4 +-- packages/ui/vitest.config.mts | 10 +----- turbo.json | 2 +- 336 files changed, 11 insertions(+), 96 deletions(-) rename packages/{ui/src/mosaic => mosaic/src}/MosaicProvider.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/__tests__/MosaicProvider.ssr.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/__tests__/MosaicProvider.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/__tests__/props.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/destructive/destructive.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/destructive/destructive.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/destructive/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/avatar/avatar.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/avatar/avatar.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/avatar/avatar.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/avatar/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/badge/badge.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/badge/badge.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/badge/badge.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/badge/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/banner/banner.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/banner/banner.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/banner/banner.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/banner/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/branding/branding.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/branding/branding.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/branding/branding.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/branding/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/button.context.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/button.markers.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/button.styles.ts (99%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/button.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/button.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/submit-button.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/submit-button.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/button/submit-button.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/card/card.markers.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/card/card.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/card/card.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/card/card.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/card/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/clerk-logo/clerk-logo.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/clerk-logo/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/combobox/combobox.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/combobox/combobox.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/combobox/combobox.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/combobox/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/dialog/alert-dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/dialog/dialog.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/dialog/dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/dialog/dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/dialog/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/dialog/keyboard-inset.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/drawer/drawer.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/drawer/drawer.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/drawer/drawer.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/drawer/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/field/field.context.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/field/field.ssr.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/field/field.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/field/field.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/field/field.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/field/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/flow/flow.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/flow/flow.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/flow/flow.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/flow/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/heading/heading.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/heading/heading.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/heading/heading.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/heading/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon-frame.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon-frame.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon-frame.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon.markers.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/icon.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/icon/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input-group/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input-group/input-group.context.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input-group/input-group.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input-group/input-group.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input-group/input-group.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input/input.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input/input.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/input/input.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/item/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/item/item.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/item/item.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/item/item.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/menu/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/menu/menu.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/menu/menu.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/menu/menu.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/otp/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/otp/otp.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/otp/otp.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/otp/otp.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/phone-input/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/phone-input/phone-input.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/phone-input/phone-input.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/phone-input/phone-input.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/popover/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/popover/popover.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/popover/popover.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/popover/popover.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/profile/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/profile/profile.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/profile/profile.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/profile/profile.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/scroll-area/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/scroll-area/scroll-area.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/scroll-area/scroll-area.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/scroll-area/scroll-area.vars.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/section/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/section/section.markers.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/section/section.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/section/section.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/section/section.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/select/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/select/select.markers.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/select/select.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/select/select.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/select/select.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/spinner/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/spinner/spinner.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/spinner/spinner.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/spinner/spinner.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/text/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/text/text.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/text/text.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/visually-hidden/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/visually-hidden/visually-hidden.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/components/visually-hidden/visually-hidden.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/__tests__/reverification.controller.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/__tests__/reverification.model.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/__tests__/reverification.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/__tests__/reverification.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/__tests__/use-reverification-with-state.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/index.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.model.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.utils.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/reverification.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/steps/reverification-backup-code.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/steps/reverification-help.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/steps/reverification-method-picker.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/steps/reverification-otp.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/steps/reverification-passkey.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/steps/reverification-password.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/reverification/use-reverification-with-state.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.controller.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.integration.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.layout.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.model.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.pages.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/__tests__/user-button.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.controller.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.layout.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.model.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.pages.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.tsx (99%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-button/user-button.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-add-phone.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-delete-section.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-delete-section.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-edit-password.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-email-actions.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-enterprise-accounts-section.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-password-section.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-phone-actions.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-web3-actions.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile-web3-wallets-section.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile.layout.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/__tests__/user-profile.view.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-account-section.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-account-section.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-email.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-email.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-email.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-add-phone.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-verify-email-link.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-verify-email-link.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-action-menu.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-active-devices-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-api-keys-panel.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-api-keys-panel.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-billing-history-section.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-billing-history-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-billing-panel.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-billing-panel.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-connected-account-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-connected-accounts-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-connected-accounts.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-connected-accounts.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-delete-section/user-profile-delete-section.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-mfa-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-passkeys-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-password-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-password-section.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-password-section.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-password-section.types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-payment-methods-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-profile-panel.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-profile-panel.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-provider-icon.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-security-icon.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-security-list.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-security-panel.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-security-panel.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-subscription-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-web3-wallet-row.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-web3-wallets-section.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-web3-wallets.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile-web3-wallets.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile.layout.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile.messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile.types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/features/user-profile/user-profile.view.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/__tests__/useAccessibleWarnings.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/__tests__/useMeasure.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/__tests__/useMosaicSupportEmail.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/__tests__/useSpinDelay.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useAccessibleDescriptionWarning.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useAccessibleNameWarning.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useInView.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useMeasure.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useMosaicEnvironment.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useMosaicRouter.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useMosaicSupportEmail.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useOrganizationListInView.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/hooks/useSpinDelay.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/icons/overrides.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/icons/registry.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/ADOPTION.md (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/README.md (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/__tests__/delete-organization-machine.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/__tests__/machine.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/__tests__/patterns.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/__tests__/useMachine.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/__tests__/wizard-migration.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/assign.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/createActor.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/createMachine.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/setup.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/types.test-d.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/types.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machine/useMachine.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machines/__tests__/firstFactorMachine.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machines/__tests__/signInMachine.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machines/__tests__/test-utils.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machines/firstFactorMachine.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/machines/signInMachine.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/props.test-d.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/props.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/styles/index.ts (94%) rename packages/{ui/src/mosaic => mosaic/src}/tokens.stylex.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/apply-order.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/apply-order.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/context.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/focus-outline.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/focus-outline.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/input.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/messages.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/messages.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/reset.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/reset.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/typography.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/typography.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/visually-hidden.styles.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/utils/visually-hidden.test.tsx (100%) delete mode 100644 packages/ui/styles.css.d.ts delete mode 100644 packages/ui/tsconfig.mosaic.json delete mode 100644 packages/ui/tsdown.mosaic.config.mts diff --git a/.gitignore b/.gitignore index 5bafec9cbca..47d16f5917a 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,6 @@ # compiled output dist -dist-mosaic tmp out-tsc out diff --git a/.prettierignore b/.prettierignore index 933efe001d3..da490cc898c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -13,7 +13,6 @@ build coverage dist -dist-mosaic /packages/nextjs/examples node_modules package-lock.json diff --git a/packages/ui/src/mosaic/MosaicProvider.tsx b/packages/mosaic/src/MosaicProvider.tsx similarity index 100% rename from packages/ui/src/mosaic/MosaicProvider.tsx rename to packages/mosaic/src/MosaicProvider.tsx diff --git a/packages/ui/src/mosaic/__tests__/MosaicProvider.ssr.test.tsx b/packages/mosaic/src/__tests__/MosaicProvider.ssr.test.tsx similarity index 100% rename from packages/ui/src/mosaic/__tests__/MosaicProvider.ssr.test.tsx rename to packages/mosaic/src/__tests__/MosaicProvider.ssr.test.tsx diff --git a/packages/ui/src/mosaic/__tests__/MosaicProvider.test.tsx b/packages/mosaic/src/__tests__/MosaicProvider.test.tsx similarity index 100% rename from packages/ui/src/mosaic/__tests__/MosaicProvider.test.tsx rename to packages/mosaic/src/__tests__/MosaicProvider.test.tsx diff --git a/packages/ui/src/mosaic/__tests__/props.test.ts b/packages/mosaic/src/__tests__/props.test.ts similarity index 100% rename from packages/ui/src/mosaic/__tests__/props.test.ts rename to packages/mosaic/src/__tests__/props.test.ts diff --git a/packages/ui/src/mosaic/blocks/destructive/destructive.test.tsx b/packages/mosaic/src/blocks/destructive/destructive.test.tsx similarity index 100% rename from packages/ui/src/mosaic/blocks/destructive/destructive.test.tsx rename to packages/mosaic/src/blocks/destructive/destructive.test.tsx diff --git a/packages/ui/src/mosaic/blocks/destructive/destructive.tsx b/packages/mosaic/src/blocks/destructive/destructive.tsx similarity index 100% rename from packages/ui/src/mosaic/blocks/destructive/destructive.tsx rename to packages/mosaic/src/blocks/destructive/destructive.tsx diff --git a/packages/ui/src/mosaic/blocks/destructive/index.ts b/packages/mosaic/src/blocks/destructive/index.ts similarity index 100% rename from packages/ui/src/mosaic/blocks/destructive/index.ts rename to packages/mosaic/src/blocks/destructive/index.ts diff --git a/packages/ui/src/mosaic/components/avatar/avatar.styles.ts b/packages/mosaic/src/components/avatar/avatar.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/avatar/avatar.styles.ts rename to packages/mosaic/src/components/avatar/avatar.styles.ts diff --git a/packages/ui/src/mosaic/components/avatar/avatar.test.tsx b/packages/mosaic/src/components/avatar/avatar.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/avatar/avatar.test.tsx rename to packages/mosaic/src/components/avatar/avatar.test.tsx diff --git a/packages/ui/src/mosaic/components/avatar/avatar.tsx b/packages/mosaic/src/components/avatar/avatar.tsx similarity index 100% rename from packages/ui/src/mosaic/components/avatar/avatar.tsx rename to packages/mosaic/src/components/avatar/avatar.tsx diff --git a/packages/ui/src/mosaic/components/avatar/index.ts b/packages/mosaic/src/components/avatar/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/avatar/index.ts rename to packages/mosaic/src/components/avatar/index.ts diff --git a/packages/ui/src/mosaic/components/badge/badge.styles.ts b/packages/mosaic/src/components/badge/badge.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/badge/badge.styles.ts rename to packages/mosaic/src/components/badge/badge.styles.ts diff --git a/packages/ui/src/mosaic/components/badge/badge.test.tsx b/packages/mosaic/src/components/badge/badge.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/badge/badge.test.tsx rename to packages/mosaic/src/components/badge/badge.test.tsx diff --git a/packages/ui/src/mosaic/components/badge/badge.tsx b/packages/mosaic/src/components/badge/badge.tsx similarity index 100% rename from packages/ui/src/mosaic/components/badge/badge.tsx rename to packages/mosaic/src/components/badge/badge.tsx diff --git a/packages/ui/src/mosaic/components/badge/index.ts b/packages/mosaic/src/components/badge/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/badge/index.ts rename to packages/mosaic/src/components/badge/index.ts diff --git a/packages/ui/src/mosaic/components/banner/banner.styles.ts b/packages/mosaic/src/components/banner/banner.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/banner/banner.styles.ts rename to packages/mosaic/src/components/banner/banner.styles.ts diff --git a/packages/ui/src/mosaic/components/banner/banner.test.tsx b/packages/mosaic/src/components/banner/banner.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/banner/banner.test.tsx rename to packages/mosaic/src/components/banner/banner.test.tsx diff --git a/packages/ui/src/mosaic/components/banner/banner.tsx b/packages/mosaic/src/components/banner/banner.tsx similarity index 100% rename from packages/ui/src/mosaic/components/banner/banner.tsx rename to packages/mosaic/src/components/banner/banner.tsx diff --git a/packages/ui/src/mosaic/components/banner/index.ts b/packages/mosaic/src/components/banner/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/banner/index.ts rename to packages/mosaic/src/components/banner/index.ts diff --git a/packages/ui/src/mosaic/components/branding/branding.styles.ts b/packages/mosaic/src/components/branding/branding.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/branding/branding.styles.ts rename to packages/mosaic/src/components/branding/branding.styles.ts diff --git a/packages/ui/src/mosaic/components/branding/branding.test.tsx b/packages/mosaic/src/components/branding/branding.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/branding/branding.test.tsx rename to packages/mosaic/src/components/branding/branding.test.tsx diff --git a/packages/ui/src/mosaic/components/branding/branding.tsx b/packages/mosaic/src/components/branding/branding.tsx similarity index 100% rename from packages/ui/src/mosaic/components/branding/branding.tsx rename to packages/mosaic/src/components/branding/branding.tsx diff --git a/packages/ui/src/mosaic/components/branding/index.ts b/packages/mosaic/src/components/branding/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/branding/index.ts rename to packages/mosaic/src/components/branding/index.ts diff --git a/packages/ui/src/mosaic/components/button/button.context.ts b/packages/mosaic/src/components/button/button.context.ts similarity index 100% rename from packages/ui/src/mosaic/components/button/button.context.ts rename to packages/mosaic/src/components/button/button.context.ts diff --git a/packages/ui/src/mosaic/components/button/button.markers.stylex.ts b/packages/mosaic/src/components/button/button.markers.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/components/button/button.markers.stylex.ts rename to packages/mosaic/src/components/button/button.markers.stylex.ts diff --git a/packages/ui/src/mosaic/components/button/button.styles.ts b/packages/mosaic/src/components/button/button.styles.ts similarity index 99% rename from packages/ui/src/mosaic/components/button/button.styles.ts rename to packages/mosaic/src/components/button/button.styles.ts index 02a76ba58b6..41d006442f2 100644 --- a/packages/ui/src/mosaic/components/button/button.styles.ts +++ b/packages/mosaic/src/components/button/button.styles.ts @@ -421,7 +421,7 @@ export const variants = stylex.create({ // it already has above and below, `(height - icon) / 2`, so it sits in a square cell. // /* eslint-disable @stylexjs/no-lookahead-selectors -- every browser this package builds for - supports `:has()` (`tsdown.mosaic.config.mts`); an older one keeps the untightened padding. */ + supports `:has()` (`stylex-lightningcss.config.mjs`); an older one keeps the untightened padding. */ export const sizes = stylex.create({ xs: { gap: space['1'], diff --git a/packages/ui/src/mosaic/components/button/button.test.tsx b/packages/mosaic/src/components/button/button.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/button/button.test.tsx rename to packages/mosaic/src/components/button/button.test.tsx diff --git a/packages/ui/src/mosaic/components/button/button.tsx b/packages/mosaic/src/components/button/button.tsx similarity index 100% rename from packages/ui/src/mosaic/components/button/button.tsx rename to packages/mosaic/src/components/button/button.tsx diff --git a/packages/ui/src/mosaic/components/button/index.ts b/packages/mosaic/src/components/button/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/button/index.ts rename to packages/mosaic/src/components/button/index.ts diff --git a/packages/ui/src/mosaic/components/button/submit-button.styles.ts b/packages/mosaic/src/components/button/submit-button.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/button/submit-button.styles.ts rename to packages/mosaic/src/components/button/submit-button.styles.ts diff --git a/packages/ui/src/mosaic/components/button/submit-button.test.tsx b/packages/mosaic/src/components/button/submit-button.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/button/submit-button.test.tsx rename to packages/mosaic/src/components/button/submit-button.test.tsx diff --git a/packages/ui/src/mosaic/components/button/submit-button.tsx b/packages/mosaic/src/components/button/submit-button.tsx similarity index 100% rename from packages/ui/src/mosaic/components/button/submit-button.tsx rename to packages/mosaic/src/components/button/submit-button.tsx diff --git a/packages/ui/src/mosaic/components/card/card.markers.stylex.ts b/packages/mosaic/src/components/card/card.markers.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/components/card/card.markers.stylex.ts rename to packages/mosaic/src/components/card/card.markers.stylex.ts diff --git a/packages/ui/src/mosaic/components/card/card.styles.ts b/packages/mosaic/src/components/card/card.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/card/card.styles.ts rename to packages/mosaic/src/components/card/card.styles.ts diff --git a/packages/ui/src/mosaic/components/card/card.test.tsx b/packages/mosaic/src/components/card/card.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/card/card.test.tsx rename to packages/mosaic/src/components/card/card.test.tsx diff --git a/packages/ui/src/mosaic/components/card/card.tsx b/packages/mosaic/src/components/card/card.tsx similarity index 100% rename from packages/ui/src/mosaic/components/card/card.tsx rename to packages/mosaic/src/components/card/card.tsx diff --git a/packages/ui/src/mosaic/components/card/index.ts b/packages/mosaic/src/components/card/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/card/index.ts rename to packages/mosaic/src/components/card/index.ts diff --git a/packages/ui/src/mosaic/components/clerk-logo/clerk-logo.tsx b/packages/mosaic/src/components/clerk-logo/clerk-logo.tsx similarity index 100% rename from packages/ui/src/mosaic/components/clerk-logo/clerk-logo.tsx rename to packages/mosaic/src/components/clerk-logo/clerk-logo.tsx diff --git a/packages/ui/src/mosaic/components/clerk-logo/index.ts b/packages/mosaic/src/components/clerk-logo/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/clerk-logo/index.ts rename to packages/mosaic/src/components/clerk-logo/index.ts diff --git a/packages/ui/src/mosaic/components/combobox/combobox.styles.ts b/packages/mosaic/src/components/combobox/combobox.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/combobox/combobox.styles.ts rename to packages/mosaic/src/components/combobox/combobox.styles.ts diff --git a/packages/ui/src/mosaic/components/combobox/combobox.test.tsx b/packages/mosaic/src/components/combobox/combobox.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/combobox/combobox.test.tsx rename to packages/mosaic/src/components/combobox/combobox.test.tsx diff --git a/packages/ui/src/mosaic/components/combobox/combobox.tsx b/packages/mosaic/src/components/combobox/combobox.tsx similarity index 100% rename from packages/ui/src/mosaic/components/combobox/combobox.tsx rename to packages/mosaic/src/components/combobox/combobox.tsx diff --git a/packages/ui/src/mosaic/components/combobox/index.ts b/packages/mosaic/src/components/combobox/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/combobox/index.ts rename to packages/mosaic/src/components/combobox/index.ts diff --git a/packages/ui/src/mosaic/components/dialog/alert-dialog.test.tsx b/packages/mosaic/src/components/dialog/alert-dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/dialog/alert-dialog.test.tsx rename to packages/mosaic/src/components/dialog/alert-dialog.test.tsx diff --git a/packages/ui/src/mosaic/components/dialog/dialog.styles.ts b/packages/mosaic/src/components/dialog/dialog.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/dialog/dialog.styles.ts rename to packages/mosaic/src/components/dialog/dialog.styles.ts diff --git a/packages/ui/src/mosaic/components/dialog/dialog.test.tsx b/packages/mosaic/src/components/dialog/dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/dialog/dialog.test.tsx rename to packages/mosaic/src/components/dialog/dialog.test.tsx diff --git a/packages/ui/src/mosaic/components/dialog/dialog.tsx b/packages/mosaic/src/components/dialog/dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/components/dialog/dialog.tsx rename to packages/mosaic/src/components/dialog/dialog.tsx diff --git a/packages/ui/src/mosaic/components/dialog/index.ts b/packages/mosaic/src/components/dialog/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/dialog/index.ts rename to packages/mosaic/src/components/dialog/index.ts diff --git a/packages/ui/src/mosaic/components/dialog/keyboard-inset.ts b/packages/mosaic/src/components/dialog/keyboard-inset.ts similarity index 100% rename from packages/ui/src/mosaic/components/dialog/keyboard-inset.ts rename to packages/mosaic/src/components/dialog/keyboard-inset.ts diff --git a/packages/ui/src/mosaic/components/drawer/drawer.styles.ts b/packages/mosaic/src/components/drawer/drawer.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/drawer/drawer.styles.ts rename to packages/mosaic/src/components/drawer/drawer.styles.ts diff --git a/packages/ui/src/mosaic/components/drawer/drawer.test.tsx b/packages/mosaic/src/components/drawer/drawer.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/drawer/drawer.test.tsx rename to packages/mosaic/src/components/drawer/drawer.test.tsx diff --git a/packages/ui/src/mosaic/components/drawer/drawer.tsx b/packages/mosaic/src/components/drawer/drawer.tsx similarity index 100% rename from packages/ui/src/mosaic/components/drawer/drawer.tsx rename to packages/mosaic/src/components/drawer/drawer.tsx diff --git a/packages/ui/src/mosaic/components/drawer/index.ts b/packages/mosaic/src/components/drawer/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/drawer/index.ts rename to packages/mosaic/src/components/drawer/index.ts diff --git a/packages/ui/src/mosaic/components/field/field.context.tsx b/packages/mosaic/src/components/field/field.context.tsx similarity index 100% rename from packages/ui/src/mosaic/components/field/field.context.tsx rename to packages/mosaic/src/components/field/field.context.tsx diff --git a/packages/ui/src/mosaic/components/field/field.ssr.test.tsx b/packages/mosaic/src/components/field/field.ssr.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/field/field.ssr.test.tsx rename to packages/mosaic/src/components/field/field.ssr.test.tsx diff --git a/packages/ui/src/mosaic/components/field/field.styles.ts b/packages/mosaic/src/components/field/field.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/field/field.styles.ts rename to packages/mosaic/src/components/field/field.styles.ts diff --git a/packages/ui/src/mosaic/components/field/field.test.tsx b/packages/mosaic/src/components/field/field.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/field/field.test.tsx rename to packages/mosaic/src/components/field/field.test.tsx diff --git a/packages/ui/src/mosaic/components/field/field.tsx b/packages/mosaic/src/components/field/field.tsx similarity index 100% rename from packages/ui/src/mosaic/components/field/field.tsx rename to packages/mosaic/src/components/field/field.tsx diff --git a/packages/ui/src/mosaic/components/field/index.ts b/packages/mosaic/src/components/field/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/field/index.ts rename to packages/mosaic/src/components/field/index.ts diff --git a/packages/ui/src/mosaic/components/flow/flow.styles.ts b/packages/mosaic/src/components/flow/flow.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/flow/flow.styles.ts rename to packages/mosaic/src/components/flow/flow.styles.ts diff --git a/packages/ui/src/mosaic/components/flow/flow.test.tsx b/packages/mosaic/src/components/flow/flow.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/flow/flow.test.tsx rename to packages/mosaic/src/components/flow/flow.test.tsx diff --git a/packages/ui/src/mosaic/components/flow/flow.tsx b/packages/mosaic/src/components/flow/flow.tsx similarity index 100% rename from packages/ui/src/mosaic/components/flow/flow.tsx rename to packages/mosaic/src/components/flow/flow.tsx diff --git a/packages/ui/src/mosaic/components/flow/index.ts b/packages/mosaic/src/components/flow/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/flow/index.ts rename to packages/mosaic/src/components/flow/index.ts diff --git a/packages/ui/src/mosaic/components/heading/heading.styles.ts b/packages/mosaic/src/components/heading/heading.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/heading/heading.styles.ts rename to packages/mosaic/src/components/heading/heading.styles.ts diff --git a/packages/ui/src/mosaic/components/heading/heading.test.tsx b/packages/mosaic/src/components/heading/heading.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/heading/heading.test.tsx rename to packages/mosaic/src/components/heading/heading.test.tsx diff --git a/packages/ui/src/mosaic/components/heading/heading.tsx b/packages/mosaic/src/components/heading/heading.tsx similarity index 100% rename from packages/ui/src/mosaic/components/heading/heading.tsx rename to packages/mosaic/src/components/heading/heading.tsx diff --git a/packages/ui/src/mosaic/components/heading/index.ts b/packages/mosaic/src/components/heading/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/heading/index.ts rename to packages/mosaic/src/components/heading/index.ts diff --git a/packages/ui/src/mosaic/components/icon/icon-frame.styles.ts b/packages/mosaic/src/components/icon/icon-frame.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon-frame.styles.ts rename to packages/mosaic/src/components/icon/icon-frame.styles.ts diff --git a/packages/ui/src/mosaic/components/icon/icon-frame.test.tsx b/packages/mosaic/src/components/icon/icon-frame.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon-frame.test.tsx rename to packages/mosaic/src/components/icon/icon-frame.test.tsx diff --git a/packages/ui/src/mosaic/components/icon/icon-frame.tsx b/packages/mosaic/src/components/icon/icon-frame.tsx similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon-frame.tsx rename to packages/mosaic/src/components/icon/icon-frame.tsx diff --git a/packages/ui/src/mosaic/components/icon/icon.markers.stylex.ts b/packages/mosaic/src/components/icon/icon.markers.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon.markers.stylex.ts rename to packages/mosaic/src/components/icon/icon.markers.stylex.ts diff --git a/packages/ui/src/mosaic/components/icon/icon.styles.ts b/packages/mosaic/src/components/icon/icon.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon.styles.ts rename to packages/mosaic/src/components/icon/icon.styles.ts diff --git a/packages/ui/src/mosaic/components/icon/icon.test.tsx b/packages/mosaic/src/components/icon/icon.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon.test.tsx rename to packages/mosaic/src/components/icon/icon.test.tsx diff --git a/packages/ui/src/mosaic/components/icon/icon.tsx b/packages/mosaic/src/components/icon/icon.tsx similarity index 100% rename from packages/ui/src/mosaic/components/icon/icon.tsx rename to packages/mosaic/src/components/icon/icon.tsx diff --git a/packages/ui/src/mosaic/components/icon/index.ts b/packages/mosaic/src/components/icon/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/icon/index.ts rename to packages/mosaic/src/components/icon/index.ts diff --git a/packages/ui/src/mosaic/components/input-group/index.ts b/packages/mosaic/src/components/input-group/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/input-group/index.ts rename to packages/mosaic/src/components/input-group/index.ts diff --git a/packages/ui/src/mosaic/components/input-group/input-group.context.ts b/packages/mosaic/src/components/input-group/input-group.context.ts similarity index 100% rename from packages/ui/src/mosaic/components/input-group/input-group.context.ts rename to packages/mosaic/src/components/input-group/input-group.context.ts diff --git a/packages/ui/src/mosaic/components/input-group/input-group.styles.ts b/packages/mosaic/src/components/input-group/input-group.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/input-group/input-group.styles.ts rename to packages/mosaic/src/components/input-group/input-group.styles.ts diff --git a/packages/ui/src/mosaic/components/input-group/input-group.test.tsx b/packages/mosaic/src/components/input-group/input-group.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/input-group/input-group.test.tsx rename to packages/mosaic/src/components/input-group/input-group.test.tsx diff --git a/packages/ui/src/mosaic/components/input-group/input-group.tsx b/packages/mosaic/src/components/input-group/input-group.tsx similarity index 100% rename from packages/ui/src/mosaic/components/input-group/input-group.tsx rename to packages/mosaic/src/components/input-group/input-group.tsx diff --git a/packages/ui/src/mosaic/components/input/index.ts b/packages/mosaic/src/components/input/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/input/index.ts rename to packages/mosaic/src/components/input/index.ts diff --git a/packages/ui/src/mosaic/components/input/input.styles.ts b/packages/mosaic/src/components/input/input.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/input/input.styles.ts rename to packages/mosaic/src/components/input/input.styles.ts diff --git a/packages/ui/src/mosaic/components/input/input.test.tsx b/packages/mosaic/src/components/input/input.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/input/input.test.tsx rename to packages/mosaic/src/components/input/input.test.tsx diff --git a/packages/ui/src/mosaic/components/input/input.tsx b/packages/mosaic/src/components/input/input.tsx similarity index 100% rename from packages/ui/src/mosaic/components/input/input.tsx rename to packages/mosaic/src/components/input/input.tsx diff --git a/packages/ui/src/mosaic/components/item/index.ts b/packages/mosaic/src/components/item/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/item/index.ts rename to packages/mosaic/src/components/item/index.ts diff --git a/packages/ui/src/mosaic/components/item/item.styles.ts b/packages/mosaic/src/components/item/item.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/item/item.styles.ts rename to packages/mosaic/src/components/item/item.styles.ts diff --git a/packages/ui/src/mosaic/components/item/item.test.tsx b/packages/mosaic/src/components/item/item.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/item/item.test.tsx rename to packages/mosaic/src/components/item/item.test.tsx diff --git a/packages/ui/src/mosaic/components/item/item.tsx b/packages/mosaic/src/components/item/item.tsx similarity index 100% rename from packages/ui/src/mosaic/components/item/item.tsx rename to packages/mosaic/src/components/item/item.tsx diff --git a/packages/ui/src/mosaic/components/menu/index.ts b/packages/mosaic/src/components/menu/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/menu/index.ts rename to packages/mosaic/src/components/menu/index.ts diff --git a/packages/ui/src/mosaic/components/menu/menu.styles.ts b/packages/mosaic/src/components/menu/menu.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/menu/menu.styles.ts rename to packages/mosaic/src/components/menu/menu.styles.ts diff --git a/packages/ui/src/mosaic/components/menu/menu.test.tsx b/packages/mosaic/src/components/menu/menu.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/menu/menu.test.tsx rename to packages/mosaic/src/components/menu/menu.test.tsx diff --git a/packages/ui/src/mosaic/components/menu/menu.tsx b/packages/mosaic/src/components/menu/menu.tsx similarity index 100% rename from packages/ui/src/mosaic/components/menu/menu.tsx rename to packages/mosaic/src/components/menu/menu.tsx diff --git a/packages/ui/src/mosaic/components/otp/index.ts b/packages/mosaic/src/components/otp/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/otp/index.ts rename to packages/mosaic/src/components/otp/index.ts diff --git a/packages/ui/src/mosaic/components/otp/otp.styles.ts b/packages/mosaic/src/components/otp/otp.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/otp/otp.styles.ts rename to packages/mosaic/src/components/otp/otp.styles.ts diff --git a/packages/ui/src/mosaic/components/otp/otp.test.tsx b/packages/mosaic/src/components/otp/otp.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/otp/otp.test.tsx rename to packages/mosaic/src/components/otp/otp.test.tsx diff --git a/packages/ui/src/mosaic/components/otp/otp.tsx b/packages/mosaic/src/components/otp/otp.tsx similarity index 100% rename from packages/ui/src/mosaic/components/otp/otp.tsx rename to packages/mosaic/src/components/otp/otp.tsx diff --git a/packages/ui/src/mosaic/components/phone-input/index.ts b/packages/mosaic/src/components/phone-input/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/phone-input/index.ts rename to packages/mosaic/src/components/phone-input/index.ts diff --git a/packages/ui/src/mosaic/components/phone-input/phone-input.styles.ts b/packages/mosaic/src/components/phone-input/phone-input.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/phone-input/phone-input.styles.ts rename to packages/mosaic/src/components/phone-input/phone-input.styles.ts diff --git a/packages/ui/src/mosaic/components/phone-input/phone-input.test.tsx b/packages/mosaic/src/components/phone-input/phone-input.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/phone-input/phone-input.test.tsx rename to packages/mosaic/src/components/phone-input/phone-input.test.tsx diff --git a/packages/ui/src/mosaic/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx similarity index 100% rename from packages/ui/src/mosaic/components/phone-input/phone-input.tsx rename to packages/mosaic/src/components/phone-input/phone-input.tsx diff --git a/packages/ui/src/mosaic/components/popover/index.ts b/packages/mosaic/src/components/popover/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/popover/index.ts rename to packages/mosaic/src/components/popover/index.ts diff --git a/packages/ui/src/mosaic/components/popover/popover.styles.ts b/packages/mosaic/src/components/popover/popover.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/popover/popover.styles.ts rename to packages/mosaic/src/components/popover/popover.styles.ts diff --git a/packages/ui/src/mosaic/components/popover/popover.test.tsx b/packages/mosaic/src/components/popover/popover.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/popover/popover.test.tsx rename to packages/mosaic/src/components/popover/popover.test.tsx diff --git a/packages/ui/src/mosaic/components/popover/popover.tsx b/packages/mosaic/src/components/popover/popover.tsx similarity index 100% rename from packages/ui/src/mosaic/components/popover/popover.tsx rename to packages/mosaic/src/components/popover/popover.tsx diff --git a/packages/ui/src/mosaic/components/profile/index.ts b/packages/mosaic/src/components/profile/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/profile/index.ts rename to packages/mosaic/src/components/profile/index.ts diff --git a/packages/ui/src/mosaic/components/profile/profile.styles.ts b/packages/mosaic/src/components/profile/profile.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/profile/profile.styles.ts rename to packages/mosaic/src/components/profile/profile.styles.ts diff --git a/packages/ui/src/mosaic/components/profile/profile.test.tsx b/packages/mosaic/src/components/profile/profile.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/profile/profile.test.tsx rename to packages/mosaic/src/components/profile/profile.test.tsx diff --git a/packages/ui/src/mosaic/components/profile/profile.tsx b/packages/mosaic/src/components/profile/profile.tsx similarity index 100% rename from packages/ui/src/mosaic/components/profile/profile.tsx rename to packages/mosaic/src/components/profile/profile.tsx diff --git a/packages/ui/src/mosaic/components/scroll-area/index.ts b/packages/mosaic/src/components/scroll-area/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/scroll-area/index.ts rename to packages/mosaic/src/components/scroll-area/index.ts diff --git a/packages/ui/src/mosaic/components/scroll-area/scroll-area.styles.ts b/packages/mosaic/src/components/scroll-area/scroll-area.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/scroll-area/scroll-area.styles.ts rename to packages/mosaic/src/components/scroll-area/scroll-area.styles.ts diff --git a/packages/ui/src/mosaic/components/scroll-area/scroll-area.test.ts b/packages/mosaic/src/components/scroll-area/scroll-area.test.ts similarity index 100% rename from packages/ui/src/mosaic/components/scroll-area/scroll-area.test.ts rename to packages/mosaic/src/components/scroll-area/scroll-area.test.ts diff --git a/packages/ui/src/mosaic/components/scroll-area/scroll-area.vars.stylex.ts b/packages/mosaic/src/components/scroll-area/scroll-area.vars.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/components/scroll-area/scroll-area.vars.stylex.ts rename to packages/mosaic/src/components/scroll-area/scroll-area.vars.stylex.ts diff --git a/packages/ui/src/mosaic/components/section/index.ts b/packages/mosaic/src/components/section/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/section/index.ts rename to packages/mosaic/src/components/section/index.ts diff --git a/packages/ui/src/mosaic/components/section/section.markers.stylex.ts b/packages/mosaic/src/components/section/section.markers.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/components/section/section.markers.stylex.ts rename to packages/mosaic/src/components/section/section.markers.stylex.ts diff --git a/packages/ui/src/mosaic/components/section/section.styles.ts b/packages/mosaic/src/components/section/section.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/section/section.styles.ts rename to packages/mosaic/src/components/section/section.styles.ts diff --git a/packages/ui/src/mosaic/components/section/section.test.tsx b/packages/mosaic/src/components/section/section.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/section/section.test.tsx rename to packages/mosaic/src/components/section/section.test.tsx diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/mosaic/src/components/section/section.tsx similarity index 100% rename from packages/ui/src/mosaic/components/section/section.tsx rename to packages/mosaic/src/components/section/section.tsx diff --git a/packages/ui/src/mosaic/components/select/index.ts b/packages/mosaic/src/components/select/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/select/index.ts rename to packages/mosaic/src/components/select/index.ts diff --git a/packages/ui/src/mosaic/components/select/select.markers.stylex.ts b/packages/mosaic/src/components/select/select.markers.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/components/select/select.markers.stylex.ts rename to packages/mosaic/src/components/select/select.markers.stylex.ts diff --git a/packages/ui/src/mosaic/components/select/select.styles.ts b/packages/mosaic/src/components/select/select.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/select/select.styles.ts rename to packages/mosaic/src/components/select/select.styles.ts diff --git a/packages/ui/src/mosaic/components/select/select.test.tsx b/packages/mosaic/src/components/select/select.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/select/select.test.tsx rename to packages/mosaic/src/components/select/select.test.tsx diff --git a/packages/ui/src/mosaic/components/select/select.tsx b/packages/mosaic/src/components/select/select.tsx similarity index 100% rename from packages/ui/src/mosaic/components/select/select.tsx rename to packages/mosaic/src/components/select/select.tsx diff --git a/packages/ui/src/mosaic/components/spinner/index.ts b/packages/mosaic/src/components/spinner/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/spinner/index.ts rename to packages/mosaic/src/components/spinner/index.ts diff --git a/packages/ui/src/mosaic/components/spinner/spinner.styles.ts b/packages/mosaic/src/components/spinner/spinner.styles.ts similarity index 100% rename from packages/ui/src/mosaic/components/spinner/spinner.styles.ts rename to packages/mosaic/src/components/spinner/spinner.styles.ts diff --git a/packages/ui/src/mosaic/components/spinner/spinner.test.tsx b/packages/mosaic/src/components/spinner/spinner.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/spinner/spinner.test.tsx rename to packages/mosaic/src/components/spinner/spinner.test.tsx diff --git a/packages/ui/src/mosaic/components/spinner/spinner.tsx b/packages/mosaic/src/components/spinner/spinner.tsx similarity index 100% rename from packages/ui/src/mosaic/components/spinner/spinner.tsx rename to packages/mosaic/src/components/spinner/spinner.tsx diff --git a/packages/ui/src/mosaic/components/text/index.ts b/packages/mosaic/src/components/text/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/text/index.ts rename to packages/mosaic/src/components/text/index.ts diff --git a/packages/ui/src/mosaic/components/text/text.test.tsx b/packages/mosaic/src/components/text/text.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/text/text.test.tsx rename to packages/mosaic/src/components/text/text.test.tsx diff --git a/packages/ui/src/mosaic/components/text/text.tsx b/packages/mosaic/src/components/text/text.tsx similarity index 100% rename from packages/ui/src/mosaic/components/text/text.tsx rename to packages/mosaic/src/components/text/text.tsx diff --git a/packages/ui/src/mosaic/components/visually-hidden/index.ts b/packages/mosaic/src/components/visually-hidden/index.ts similarity index 100% rename from packages/ui/src/mosaic/components/visually-hidden/index.ts rename to packages/mosaic/src/components/visually-hidden/index.ts diff --git a/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.test.tsx b/packages/mosaic/src/components/visually-hidden/visually-hidden.test.tsx similarity index 100% rename from packages/ui/src/mosaic/components/visually-hidden/visually-hidden.test.tsx rename to packages/mosaic/src/components/visually-hidden/visually-hidden.test.tsx diff --git a/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx b/packages/mosaic/src/components/visually-hidden/visually-hidden.tsx similarity index 100% rename from packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx rename to packages/mosaic/src/components/visually-hidden/visually-hidden.tsx diff --git a/packages/ui/src/mosaic/features/reverification/__tests__/reverification.controller.test.tsx b/packages/mosaic/src/features/reverification/__tests__/reverification.controller.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/__tests__/reverification.controller.test.tsx rename to packages/mosaic/src/features/reverification/__tests__/reverification.controller.test.tsx diff --git a/packages/ui/src/mosaic/features/reverification/__tests__/reverification.model.test.tsx b/packages/mosaic/src/features/reverification/__tests__/reverification.model.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/__tests__/reverification.model.test.tsx rename to packages/mosaic/src/features/reverification/__tests__/reverification.model.test.tsx diff --git a/packages/ui/src/mosaic/features/reverification/__tests__/reverification.test.tsx b/packages/mosaic/src/features/reverification/__tests__/reverification.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/__tests__/reverification.test.tsx rename to packages/mosaic/src/features/reverification/__tests__/reverification.test.tsx diff --git a/packages/ui/src/mosaic/features/reverification/__tests__/reverification.view.test.tsx b/packages/mosaic/src/features/reverification/__tests__/reverification.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/__tests__/reverification.view.test.tsx rename to packages/mosaic/src/features/reverification/__tests__/reverification.view.test.tsx diff --git a/packages/ui/src/mosaic/features/reverification/__tests__/use-reverification-with-state.test.tsx b/packages/mosaic/src/features/reverification/__tests__/use-reverification-with-state.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/__tests__/use-reverification-with-state.test.tsx rename to packages/mosaic/src/features/reverification/__tests__/use-reverification-with-state.test.tsx diff --git a/packages/ui/src/mosaic/features/reverification/index.ts b/packages/mosaic/src/features/reverification/index.ts similarity index 100% rename from packages/ui/src/mosaic/features/reverification/index.ts rename to packages/mosaic/src/features/reverification/index.ts diff --git a/packages/ui/src/mosaic/features/reverification/reverification.controller.ts b/packages/mosaic/src/features/reverification/reverification.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.controller.ts rename to packages/mosaic/src/features/reverification/reverification.controller.ts diff --git a/packages/ui/src/mosaic/features/reverification/reverification.messages.ts b/packages/mosaic/src/features/reverification/reverification.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.messages.ts rename to packages/mosaic/src/features/reverification/reverification.messages.ts diff --git a/packages/ui/src/mosaic/features/reverification/reverification.model.tsx b/packages/mosaic/src/features/reverification/reverification.model.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.model.tsx rename to packages/mosaic/src/features/reverification/reverification.model.tsx diff --git a/packages/ui/src/mosaic/features/reverification/reverification.tsx b/packages/mosaic/src/features/reverification/reverification.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.tsx rename to packages/mosaic/src/features/reverification/reverification.tsx diff --git a/packages/ui/src/mosaic/features/reverification/reverification.types.ts b/packages/mosaic/src/features/reverification/reverification.types.ts similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.types.ts rename to packages/mosaic/src/features/reverification/reverification.types.ts diff --git a/packages/ui/src/mosaic/features/reverification/reverification.utils.ts b/packages/mosaic/src/features/reverification/reverification.utils.ts similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.utils.ts rename to packages/mosaic/src/features/reverification/reverification.utils.ts diff --git a/packages/ui/src/mosaic/features/reverification/reverification.view.tsx b/packages/mosaic/src/features/reverification/reverification.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/reverification.view.tsx rename to packages/mosaic/src/features/reverification/reverification.view.tsx diff --git a/packages/ui/src/mosaic/features/reverification/steps/reverification-backup-code.tsx b/packages/mosaic/src/features/reverification/steps/reverification-backup-code.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/steps/reverification-backup-code.tsx rename to packages/mosaic/src/features/reverification/steps/reverification-backup-code.tsx diff --git a/packages/ui/src/mosaic/features/reverification/steps/reverification-help.tsx b/packages/mosaic/src/features/reverification/steps/reverification-help.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/steps/reverification-help.tsx rename to packages/mosaic/src/features/reverification/steps/reverification-help.tsx diff --git a/packages/ui/src/mosaic/features/reverification/steps/reverification-method-picker.tsx b/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/steps/reverification-method-picker.tsx rename to packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx diff --git a/packages/ui/src/mosaic/features/reverification/steps/reverification-otp.tsx b/packages/mosaic/src/features/reverification/steps/reverification-otp.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/steps/reverification-otp.tsx rename to packages/mosaic/src/features/reverification/steps/reverification-otp.tsx diff --git a/packages/ui/src/mosaic/features/reverification/steps/reverification-passkey.tsx b/packages/mosaic/src/features/reverification/steps/reverification-passkey.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/steps/reverification-passkey.tsx rename to packages/mosaic/src/features/reverification/steps/reverification-passkey.tsx diff --git a/packages/ui/src/mosaic/features/reverification/steps/reverification-password.tsx b/packages/mosaic/src/features/reverification/steps/reverification-password.tsx similarity index 100% rename from packages/ui/src/mosaic/features/reverification/steps/reverification-password.tsx rename to packages/mosaic/src/features/reverification/steps/reverification-password.tsx diff --git a/packages/ui/src/mosaic/features/reverification/use-reverification-with-state.ts b/packages/mosaic/src/features/reverification/use-reverification-with-state.ts similarity index 100% rename from packages/ui/src/mosaic/features/reverification/use-reverification-with-state.ts rename to packages/mosaic/src/features/reverification/use-reverification-with-state.ts diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.controller.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.controller.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.controller.test.tsx rename to packages/mosaic/src/features/user-button/__tests__/user-button.controller.test.tsx diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.integration.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.integration.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.integration.test.tsx rename to packages/mosaic/src/features/user-button/__tests__/user-button.integration.test.tsx diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.layout.test.ts b/packages/mosaic/src/features/user-button/__tests__/user-button.layout.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.layout.test.ts rename to packages/mosaic/src/features/user-button/__tests__/user-button.layout.test.ts diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.model.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.model.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.model.test.tsx rename to packages/mosaic/src/features/user-button/__tests__/user-button.model.test.tsx diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.pages.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.pages.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.pages.test.tsx rename to packages/mosaic/src/features/user-button/__tests__/user-button.pages.test.tsx diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.test.tsx rename to packages/mosaic/src/features/user-button/__tests__/user-button.test.tsx diff --git a/packages/ui/src/mosaic/features/user-button/__tests__/user-button.view.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/__tests__/user-button.view.test.tsx rename to packages/mosaic/src/features/user-button/__tests__/user-button.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-button/user-button.controller.tsx b/packages/mosaic/src/features/user-button/user-button.controller.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.controller.tsx rename to packages/mosaic/src/features/user-button/user-button.controller.tsx diff --git a/packages/ui/src/mosaic/features/user-button/user-button.layout.ts b/packages/mosaic/src/features/user-button/user-button.layout.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.layout.ts rename to packages/mosaic/src/features/user-button/user-button.layout.ts diff --git a/packages/ui/src/mosaic/features/user-button/user-button.messages.ts b/packages/mosaic/src/features/user-button/user-button.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.messages.ts rename to packages/mosaic/src/features/user-button/user-button.messages.ts diff --git a/packages/ui/src/mosaic/features/user-button/user-button.model.tsx b/packages/mosaic/src/features/user-button/user-button.model.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.model.tsx rename to packages/mosaic/src/features/user-button/user-button.model.tsx diff --git a/packages/ui/src/mosaic/features/user-button/user-button.pages.tsx b/packages/mosaic/src/features/user-button/user-button.pages.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.pages.tsx rename to packages/mosaic/src/features/user-button/user-button.pages.tsx diff --git a/packages/ui/src/mosaic/features/user-button/user-button.styles.ts b/packages/mosaic/src/features/user-button/user-button.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.styles.ts rename to packages/mosaic/src/features/user-button/user-button.styles.ts diff --git a/packages/ui/src/mosaic/features/user-button/user-button.tsx b/packages/mosaic/src/features/user-button/user-button.tsx similarity index 99% rename from packages/ui/src/mosaic/features/user-button/user-button.tsx rename to packages/mosaic/src/features/user-button/user-button.tsx index df832fd1b93..398a07da2b2 100644 --- a/packages/ui/src/mosaic/features/user-button/user-button.tsx +++ b/packages/mosaic/src/features/user-button/user-button.tsx @@ -73,7 +73,7 @@ export type UserButtonProps = UserButtonModelOptions & * * @example * ```tsx - * import { UserButton } from '@clerk/ui/mosaic'; + * import { UserButton } from '@clerk/mosaic'; * * * ``` diff --git a/packages/ui/src/mosaic/features/user-button/user-button.types.ts b/packages/mosaic/src/features/user-button/user-button.types.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.types.ts rename to packages/mosaic/src/features/user-button/user-button.types.ts diff --git a/packages/ui/src/mosaic/features/user-button/user-button.view.tsx b/packages/mosaic/src/features/user-button/user-button.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-button/user-button.view.tsx rename to packages/mosaic/src/features/user-button/user-button.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-phone.controller.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-phone.controller.test.ts rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.controller.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-section.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-list-row.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-delete-section.controller.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-delete-section.controller.test.ts rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.controller.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-delete-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-delete-section.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-password.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-password.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-password.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-password.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-email-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-email-actions.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-enterprise-accounts-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-enterprise-accounts-section.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-enterprise-accounts-section.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-enterprise-accounts-section.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-password-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-password-section.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-password-section.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-password-section.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-phone-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-phone-actions.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-web3-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-actions.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-web3-actions.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-actions.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-web3-wallets-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-wallets-section.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile-web3-wallets-section.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-wallets-section.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile.layout.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile.layout.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile.layout.test.ts rename to packages/mosaic/src/features/user-profile/__tests__/user-profile.layout.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/__tests__/user-profile.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/__tests__/user-profile.view.test.tsx rename to packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.types.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.controller.test.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.controller.test.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-name-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-username-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-link.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-link.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-link.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-link.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-action-menu.tsx b/packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-action-menu.tsx rename to packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-active-devices-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-active-devices-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-api-keys-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-api-keys-panel.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-api-keys-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-api-keys-panel.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-billing-history-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-billing-history-section.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-billing-history-section.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-billing-history-section.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-billing-history-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-billing-history-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-billing-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-billing-panel.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-billing-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-billing-panel.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-connected-account-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-connected-accounts.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-connected-accounts.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts rename to packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types.ts rename to packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-mfa-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-mfa-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-passkeys-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.ts rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.types.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.types.ts rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.types.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-payment-methods-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-payment-methods-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-profile-panel.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-provider-icon.tsx b/packages/mosaic/src/features/user-profile/user-profile-provider-icon.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-provider-icon.tsx rename to packages/mosaic/src/features/user-profile/user-profile-provider-icon.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-security-icon.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-icon.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-security-icon.tsx rename to packages/mosaic/src/features/user-profile/user-profile-security-icon.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-security-list.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-list.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-security-list.tsx rename to packages/mosaic/src/features/user-profile/user-profile-security-list.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-security-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-security-panel.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-security-panel.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-subscription-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-subscription-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-subscription-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-subscription-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallet-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallet-row.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets-section.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile-web3-wallets.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets.styles.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets.styles.ts rename to packages/mosaic/src/features/user-profile/user-profile-web3-wallets.styles.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile.layout.ts b/packages/mosaic/src/features/user-profile/user-profile.layout.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile.layout.ts rename to packages/mosaic/src/features/user-profile/user-profile.layout.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile.messages.ts b/packages/mosaic/src/features/user-profile/user-profile.messages.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile.messages.ts rename to packages/mosaic/src/features/user-profile/user-profile.messages.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile.types.ts b/packages/mosaic/src/features/user-profile/user-profile.types.ts similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile.types.ts rename to packages/mosaic/src/features/user-profile/user-profile.types.ts diff --git a/packages/ui/src/mosaic/features/user-profile/user-profile.view.tsx b/packages/mosaic/src/features/user-profile/user-profile.view.tsx similarity index 100% rename from packages/ui/src/mosaic/features/user-profile/user-profile.view.tsx rename to packages/mosaic/src/features/user-profile/user-profile.view.tsx diff --git a/packages/ui/src/mosaic/hooks/__tests__/useAccessibleWarnings.test.ts b/packages/mosaic/src/hooks/__tests__/useAccessibleWarnings.test.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/__tests__/useAccessibleWarnings.test.ts rename to packages/mosaic/src/hooks/__tests__/useAccessibleWarnings.test.ts diff --git a/packages/ui/src/mosaic/hooks/__tests__/useMeasure.test.tsx b/packages/mosaic/src/hooks/__tests__/useMeasure.test.tsx similarity index 100% rename from packages/ui/src/mosaic/hooks/__tests__/useMeasure.test.tsx rename to packages/mosaic/src/hooks/__tests__/useMeasure.test.tsx diff --git a/packages/ui/src/mosaic/hooks/__tests__/useMosaicSupportEmail.test.ts b/packages/mosaic/src/hooks/__tests__/useMosaicSupportEmail.test.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/__tests__/useMosaicSupportEmail.test.ts rename to packages/mosaic/src/hooks/__tests__/useMosaicSupportEmail.test.ts diff --git a/packages/ui/src/mosaic/hooks/__tests__/useSpinDelay.test.ts b/packages/mosaic/src/hooks/__tests__/useSpinDelay.test.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/__tests__/useSpinDelay.test.ts rename to packages/mosaic/src/hooks/__tests__/useSpinDelay.test.ts diff --git a/packages/ui/src/mosaic/hooks/useAccessibleDescriptionWarning.ts b/packages/mosaic/src/hooks/useAccessibleDescriptionWarning.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useAccessibleDescriptionWarning.ts rename to packages/mosaic/src/hooks/useAccessibleDescriptionWarning.ts diff --git a/packages/ui/src/mosaic/hooks/useAccessibleNameWarning.ts b/packages/mosaic/src/hooks/useAccessibleNameWarning.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useAccessibleNameWarning.ts rename to packages/mosaic/src/hooks/useAccessibleNameWarning.ts diff --git a/packages/ui/src/mosaic/hooks/useInView.ts b/packages/mosaic/src/hooks/useInView.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useInView.ts rename to packages/mosaic/src/hooks/useInView.ts diff --git a/packages/ui/src/mosaic/hooks/useMeasure.ts b/packages/mosaic/src/hooks/useMeasure.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useMeasure.ts rename to packages/mosaic/src/hooks/useMeasure.ts diff --git a/packages/ui/src/mosaic/hooks/useMosaicEnvironment.ts b/packages/mosaic/src/hooks/useMosaicEnvironment.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useMosaicEnvironment.ts rename to packages/mosaic/src/hooks/useMosaicEnvironment.ts diff --git a/packages/ui/src/mosaic/hooks/useMosaicRouter.ts b/packages/mosaic/src/hooks/useMosaicRouter.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useMosaicRouter.ts rename to packages/mosaic/src/hooks/useMosaicRouter.ts diff --git a/packages/ui/src/mosaic/hooks/useMosaicSupportEmail.ts b/packages/mosaic/src/hooks/useMosaicSupportEmail.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useMosaicSupportEmail.ts rename to packages/mosaic/src/hooks/useMosaicSupportEmail.ts diff --git a/packages/ui/src/mosaic/hooks/useOrganizationListInView.ts b/packages/mosaic/src/hooks/useOrganizationListInView.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useOrganizationListInView.ts rename to packages/mosaic/src/hooks/useOrganizationListInView.ts diff --git a/packages/ui/src/mosaic/hooks/useSpinDelay.ts b/packages/mosaic/src/hooks/useSpinDelay.ts similarity index 100% rename from packages/ui/src/mosaic/hooks/useSpinDelay.ts rename to packages/mosaic/src/hooks/useSpinDelay.ts diff --git a/packages/ui/src/mosaic/icons/overrides.ts b/packages/mosaic/src/icons/overrides.ts similarity index 100% rename from packages/ui/src/mosaic/icons/overrides.ts rename to packages/mosaic/src/icons/overrides.ts diff --git a/packages/ui/src/mosaic/icons/registry.tsx b/packages/mosaic/src/icons/registry.tsx similarity index 100% rename from packages/ui/src/mosaic/icons/registry.tsx rename to packages/mosaic/src/icons/registry.tsx diff --git a/packages/mosaic/src/index.ts b/packages/mosaic/src/index.ts index 328284799fc..c9db826cd1a 100644 --- a/packages/mosaic/src/index.ts +++ b/packages/mosaic/src/index.ts @@ -1,4 +1,4 @@ 'use client'; -export type { UserButtonProps } from './user-button/user-button'; -export { UserButton } from './user-button/user-button'; +export type { UserButtonProps } from './features/user-button/user-button'; +export { UserButton } from './features/user-button/user-button'; diff --git a/packages/ui/src/mosaic/machine/ADOPTION.md b/packages/mosaic/src/machine/ADOPTION.md similarity index 100% rename from packages/ui/src/mosaic/machine/ADOPTION.md rename to packages/mosaic/src/machine/ADOPTION.md diff --git a/packages/ui/src/mosaic/machine/README.md b/packages/mosaic/src/machine/README.md similarity index 100% rename from packages/ui/src/mosaic/machine/README.md rename to packages/mosaic/src/machine/README.md diff --git a/packages/ui/src/mosaic/machine/__tests__/delete-organization-machine.ts b/packages/mosaic/src/machine/__tests__/delete-organization-machine.ts similarity index 100% rename from packages/ui/src/mosaic/machine/__tests__/delete-organization-machine.ts rename to packages/mosaic/src/machine/__tests__/delete-organization-machine.ts diff --git a/packages/ui/src/mosaic/machine/__tests__/machine.test.ts b/packages/mosaic/src/machine/__tests__/machine.test.ts similarity index 100% rename from packages/ui/src/mosaic/machine/__tests__/machine.test.ts rename to packages/mosaic/src/machine/__tests__/machine.test.ts diff --git a/packages/ui/src/mosaic/machine/__tests__/patterns.test.ts b/packages/mosaic/src/machine/__tests__/patterns.test.ts similarity index 100% rename from packages/ui/src/mosaic/machine/__tests__/patterns.test.ts rename to packages/mosaic/src/machine/__tests__/patterns.test.ts diff --git a/packages/ui/src/mosaic/machine/__tests__/useMachine.test.tsx b/packages/mosaic/src/machine/__tests__/useMachine.test.tsx similarity index 100% rename from packages/ui/src/mosaic/machine/__tests__/useMachine.test.tsx rename to packages/mosaic/src/machine/__tests__/useMachine.test.tsx diff --git a/packages/ui/src/mosaic/machine/__tests__/wizard-migration.test.tsx b/packages/mosaic/src/machine/__tests__/wizard-migration.test.tsx similarity index 100% rename from packages/ui/src/mosaic/machine/__tests__/wizard-migration.test.tsx rename to packages/mosaic/src/machine/__tests__/wizard-migration.test.tsx diff --git a/packages/ui/src/mosaic/machine/assign.ts b/packages/mosaic/src/machine/assign.ts similarity index 100% rename from packages/ui/src/mosaic/machine/assign.ts rename to packages/mosaic/src/machine/assign.ts diff --git a/packages/ui/src/mosaic/machine/createActor.ts b/packages/mosaic/src/machine/createActor.ts similarity index 100% rename from packages/ui/src/mosaic/machine/createActor.ts rename to packages/mosaic/src/machine/createActor.ts diff --git a/packages/ui/src/mosaic/machine/createMachine.ts b/packages/mosaic/src/machine/createMachine.ts similarity index 100% rename from packages/ui/src/mosaic/machine/createMachine.ts rename to packages/mosaic/src/machine/createMachine.ts diff --git a/packages/ui/src/mosaic/machine/setup.ts b/packages/mosaic/src/machine/setup.ts similarity index 100% rename from packages/ui/src/mosaic/machine/setup.ts rename to packages/mosaic/src/machine/setup.ts diff --git a/packages/ui/src/mosaic/machine/types.test-d.ts b/packages/mosaic/src/machine/types.test-d.ts similarity index 100% rename from packages/ui/src/mosaic/machine/types.test-d.ts rename to packages/mosaic/src/machine/types.test-d.ts diff --git a/packages/ui/src/mosaic/machine/types.ts b/packages/mosaic/src/machine/types.ts similarity index 100% rename from packages/ui/src/mosaic/machine/types.ts rename to packages/mosaic/src/machine/types.ts diff --git a/packages/ui/src/mosaic/machine/useMachine.ts b/packages/mosaic/src/machine/useMachine.ts similarity index 100% rename from packages/ui/src/mosaic/machine/useMachine.ts rename to packages/mosaic/src/machine/useMachine.ts diff --git a/packages/ui/src/mosaic/machines/__tests__/firstFactorMachine.test.ts b/packages/mosaic/src/machines/__tests__/firstFactorMachine.test.ts similarity index 100% rename from packages/ui/src/mosaic/machines/__tests__/firstFactorMachine.test.ts rename to packages/mosaic/src/machines/__tests__/firstFactorMachine.test.ts diff --git a/packages/ui/src/mosaic/machines/__tests__/signInMachine.test.ts b/packages/mosaic/src/machines/__tests__/signInMachine.test.ts similarity index 100% rename from packages/ui/src/mosaic/machines/__tests__/signInMachine.test.ts rename to packages/mosaic/src/machines/__tests__/signInMachine.test.ts diff --git a/packages/ui/src/mosaic/machines/__tests__/test-utils.ts b/packages/mosaic/src/machines/__tests__/test-utils.ts similarity index 100% rename from packages/ui/src/mosaic/machines/__tests__/test-utils.ts rename to packages/mosaic/src/machines/__tests__/test-utils.ts diff --git a/packages/ui/src/mosaic/machines/firstFactorMachine.ts b/packages/mosaic/src/machines/firstFactorMachine.ts similarity index 100% rename from packages/ui/src/mosaic/machines/firstFactorMachine.ts rename to packages/mosaic/src/machines/firstFactorMachine.ts diff --git a/packages/ui/src/mosaic/machines/signInMachine.ts b/packages/mosaic/src/machines/signInMachine.ts similarity index 100% rename from packages/ui/src/mosaic/machines/signInMachine.ts rename to packages/mosaic/src/machines/signInMachine.ts diff --git a/packages/ui/src/mosaic/props.test-d.ts b/packages/mosaic/src/props.test-d.ts similarity index 100% rename from packages/ui/src/mosaic/props.test-d.ts rename to packages/mosaic/src/props.test-d.ts diff --git a/packages/ui/src/mosaic/props.ts b/packages/mosaic/src/props.ts similarity index 100% rename from packages/ui/src/mosaic/props.ts rename to packages/mosaic/src/props.ts diff --git a/packages/ui/src/mosaic/styles/index.ts b/packages/mosaic/src/styles/index.ts similarity index 94% rename from packages/ui/src/mosaic/styles/index.ts rename to packages/mosaic/src/styles/index.ts index 577660f8f95..5c561e8fc9c 100644 --- a/packages/ui/src/mosaic/styles/index.ts +++ b/packages/mosaic/src/styles/index.ts @@ -1,8 +1,6 @@ -// StyleX-only barrel: the entry for the isolated `build:mosaic` tsdown config. -// It re-exports every migrated (Emotion-free) Mosaic component plus the tokens -// and helpers, so the StyleX rollup plugin can walk this graph and extract one -// static `styles.css`. Keep it isolated from Emotion/un-migrated code — grow it -// as components migrate. +// StyleX-only barrel: the entry for the isolated CSS tsdown config. +// It re-exports every Mosaic component plus the tokens and helpers, so the +// StyleX rollup plugin can walk this graph and extract one static `styles.css`. export type { MosaicComponentProps, MosaicElementProps } from '../props'; export { Avatar } from '../components/avatar'; diff --git a/packages/ui/src/mosaic/tokens.stylex.ts b/packages/mosaic/src/tokens.stylex.ts similarity index 100% rename from packages/ui/src/mosaic/tokens.stylex.ts rename to packages/mosaic/src/tokens.stylex.ts diff --git a/packages/ui/src/mosaic/utils/apply-order.test.ts b/packages/mosaic/src/utils/apply-order.test.ts similarity index 100% rename from packages/ui/src/mosaic/utils/apply-order.test.ts rename to packages/mosaic/src/utils/apply-order.test.ts diff --git a/packages/ui/src/mosaic/utils/apply-order.ts b/packages/mosaic/src/utils/apply-order.ts similarity index 100% rename from packages/ui/src/mosaic/utils/apply-order.ts rename to packages/mosaic/src/utils/apply-order.ts diff --git a/packages/ui/src/mosaic/utils/context.ts b/packages/mosaic/src/utils/context.ts similarity index 100% rename from packages/ui/src/mosaic/utils/context.ts rename to packages/mosaic/src/utils/context.ts diff --git a/packages/ui/src/mosaic/utils/focus-outline.styles.ts b/packages/mosaic/src/utils/focus-outline.styles.ts similarity index 100% rename from packages/ui/src/mosaic/utils/focus-outline.styles.ts rename to packages/mosaic/src/utils/focus-outline.styles.ts diff --git a/packages/ui/src/mosaic/utils/focus-outline.test.ts b/packages/mosaic/src/utils/focus-outline.test.ts similarity index 100% rename from packages/ui/src/mosaic/utils/focus-outline.test.ts rename to packages/mosaic/src/utils/focus-outline.test.ts diff --git a/packages/ui/src/mosaic/utils/input.styles.ts b/packages/mosaic/src/utils/input.styles.ts similarity index 100% rename from packages/ui/src/mosaic/utils/input.styles.ts rename to packages/mosaic/src/utils/input.styles.ts diff --git a/packages/ui/src/mosaic/utils/messages.test.tsx b/packages/mosaic/src/utils/messages.test.tsx similarity index 100% rename from packages/ui/src/mosaic/utils/messages.test.tsx rename to packages/mosaic/src/utils/messages.test.tsx diff --git a/packages/ui/src/mosaic/utils/messages.ts b/packages/mosaic/src/utils/messages.ts similarity index 100% rename from packages/ui/src/mosaic/utils/messages.ts rename to packages/mosaic/src/utils/messages.ts diff --git a/packages/ui/src/mosaic/utils/reset.styles.ts b/packages/mosaic/src/utils/reset.styles.ts similarity index 100% rename from packages/ui/src/mosaic/utils/reset.styles.ts rename to packages/mosaic/src/utils/reset.styles.ts diff --git a/packages/ui/src/mosaic/utils/reset.test.tsx b/packages/mosaic/src/utils/reset.test.tsx similarity index 100% rename from packages/ui/src/mosaic/utils/reset.test.tsx rename to packages/mosaic/src/utils/reset.test.tsx diff --git a/packages/ui/src/mosaic/utils/typography.styles.ts b/packages/mosaic/src/utils/typography.styles.ts similarity index 100% rename from packages/ui/src/mosaic/utils/typography.styles.ts rename to packages/mosaic/src/utils/typography.styles.ts diff --git a/packages/ui/src/mosaic/utils/typography.test.ts b/packages/mosaic/src/utils/typography.test.ts similarity index 100% rename from packages/ui/src/mosaic/utils/typography.test.ts rename to packages/mosaic/src/utils/typography.test.ts diff --git a/packages/ui/src/mosaic/utils/visually-hidden.styles.ts b/packages/mosaic/src/utils/visually-hidden.styles.ts similarity index 100% rename from packages/ui/src/mosaic/utils/visually-hidden.styles.ts rename to packages/mosaic/src/utils/visually-hidden.styles.ts diff --git a/packages/ui/src/mosaic/utils/visually-hidden.test.tsx b/packages/mosaic/src/utils/visually-hidden.test.tsx similarity index 100% rename from packages/ui/src/mosaic/utils/visually-hidden.test.tsx rename to packages/mosaic/src/utils/visually-hidden.test.tsx diff --git a/packages/ui/package.json b/packages/ui/package.json index 1fc011f6ff4..e9eabd119fd 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -11,7 +11,6 @@ "author": "Clerk", "sideEffects": [ "./src/utils/setWebpackChunkPublicPath.ts", - "./dist-mosaic/styles.css", "./register/*" ], "type": "module", @@ -57,10 +56,6 @@ "default": "./dist/experimental/index.js" }, "./themes/shadcn.css": "./dist/themes/shadcn.css", - "./styles.css": { - "types": "./styles.css.d.ts", - "default": "./dist-mosaic/styles.css" - }, "./register": { "import": { "types": "./register/index.d.ts", @@ -76,15 +71,12 @@ "types": "dist/index.d.ts", "files": [ "dist", - "dist-mosaic", - "styles.css.d.ts", "register" ], "scripts": { - "build": "pnpm build:umd && pnpm build:esm && pnpm build:mosaic && pnpm check:no-rhc && pnpm type-check", + "build": "pnpm build:umd && pnpm build:esm && pnpm check:no-rhc && pnpm type-check", "build:analyze": "rspack build --config rspack.config.js --env production --env analyze", "build:esm": "tsdown", - "build:mosaic": "tsdown --config tsdown.mosaic.config.mts", "build:rsdoctor": "RSDOCTOR=true rspack build --config rspack.config.js --env production", "build:umd": "rspack build --config rspack.config.js --env production", "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json", @@ -116,7 +108,6 @@ "@solana/wallet-adapter-base": "catalog:module-manager", "@solana/wallet-adapter-react": "catalog:module-manager", "@solana/wallet-standard": "catalog:module-manager", - "@stylexjs/stylex": "0.19.0", "@swc/helpers": "catalog:repo", "copy-to-clipboard": "3.3.3", "core-js": "catalog:repo", @@ -126,16 +117,12 @@ "qrcode.react": "4.2.0" }, "devDependencies": { - "@clerk/headless": "workspace:^", "@floating-ui/react-dom": "^2.1.8", "@rsdoctor/rspack-plugin": "^1.5.9", "@rspack/cli": "catalog:rspack", "@rspack/core": "catalog:rspack", "@rspack/dev-server": "catalog:rspack", "@rspack/plugin-react-refresh": "catalog:rspack", - "@stylexjs/eslint-plugin": "0.19.0", - "@stylexjs/rollup-plugin": "0.19.0", - "@stylexjs/unplugin": "0.19.0", "@svgr/rollup": "^8.1.0", "@svgr/webpack": "^6.5.1", "@types/webpack-env": "^1.18.8", diff --git a/packages/ui/styles.css.d.ts b/packages/ui/styles.css.d.ts deleted file mode 100644 index 2f6203bca8b..00000000000 --- a/packages/ui/styles.css.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -// Type stub so `import '@clerk/ui/styles.css'` type-checks. The StyleX build emits -// the real stylesheet to dist-mosaic/styles.css; this side-effect import has no value. -export {}; diff --git a/packages/ui/tsconfig.mosaic.json b/packages/ui/tsconfig.mosaic.json deleted file mode 100644 index 05fde7579f6..00000000000 --- a/packages/ui/tsconfig.mosaic.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "jsxImportSource": "react", - "paths": { - // Resolve the private, unpublished `@clerk/headless` to its SOURCE for the Mosaic - // declaration bundle. Its published `dist/*.d.ts` are re-export barrels that - // rolldown-plugin-dts can't follow when inlining, so building types against source - // (the monorepo default) lets Mosaic components import headless types directly. - "@clerk/headless/utils": ["../headless/src/utils/index.ts"], - "@clerk/headless/*": ["../headless/src/*"], - // Preserve the base config's test-only aliases (extends replaces `paths` wholesale). - "@/core/*": ["../clerk-js/src/core/*"], - "@/*": ["./src/*"], - "@/ui*": ["./src/*"] - } - } -} diff --git a/packages/ui/tsdown.config.mts b/packages/ui/tsdown.config.mts index f5b8a74e396..07e51a701fa 100644 --- a/packages/ui/tsdown.config.mts +++ b/packages/ui/tsdown.config.mts @@ -12,7 +12,6 @@ export default defineConfig(({ watch }) => { target: 'es2022', platform: 'browser', external: ['react', 'react-dom', '@clerk/localizations', '@clerk/shared'], - noExternal: ['@clerk/headless'], format: ['esm'], // ESM only fixedExtension: false, minify: false, diff --git a/packages/ui/tsdown.mosaic.config.mts b/packages/ui/tsdown.mosaic.config.mts deleted file mode 100644 index fccff71ba8b..00000000000 --- a/packages/ui/tsdown.mosaic.config.mts +++ /dev/null @@ -1,36 +0,0 @@ -import stylexPlugin from '@stylexjs/rollup-plugin'; -import { defineConfig } from 'tsdown'; -import { mosaicLightningCssTargets } from './stylex-lightningcss.config.mjs'; - -// Isolated Mosaic build: compiles ONLY the StyleX barrel (`src/mosaic/styles`) -// with the StyleX rollup plugin, emitting transformed ESM + a single static -// `styles.css` that consumers import. Kept separate from the main tsdown build so -// the Emotion-based code is untouched and this entry stays Emotion-free. -// -// `useCSSLayers` wraps StyleX's atomic rules in `@layer priorityN` for correct -// intra-StyleX precedence; consumers import the sheet into a layer they control -// (`@import '@clerk/ui/styles.css' layer(components)`), under which those nest -// cleanly, and override from a later layer. -export default defineConfig({ - entry: ['./src/mosaic/styles/index.ts'], - outDir: './dist-mosaic', - format: ['esm'], - dts: true, - clean: true, - target: 'es2022', - platform: 'browser', - minify: false, - // Use the standard React JSX runtime, not Emotion's — the Mosaic build must be Emotion-free. - tsconfig: './tsconfig.mosaic.json', - // `@clerk/headless` stays external here (the main build inlines it): this entry exists to - // extract `styles.css`, and only that file is exported from the package — so there is nothing - // to gain from pulling the primitives and their deps into a bundle nobody imports. - external: ['react', 'react-dom', '@stylexjs/stylex', /^@clerk\/headless/], - plugins: [ - stylexPlugin({ - fileName: 'styles.css', - useCSSLayers: true, - lightningcssOptions: { targets: mosaicLightningCssTargets }, - }), - ], -}); diff --git a/packages/ui/turbo.json b/packages/ui/turbo.json index d001d7daa95..1a8586f7526 100644 --- a/packages/ui/turbo.json +++ b/packages/ui/turbo.json @@ -11,9 +11,7 @@ "*.d.ts", "src/**", "tsconfig.json", - "tsconfig.mosaic.json", "rspack.config.js", - "tsdown.mosaic.config.mts", "!**/*.test.*", "!**/test/**", @@ -25,7 +23,7 @@ "!examples/**", "!node_modules/**" ], - "outputs": ["*/package.json", "dist/**", "dist-mosaic/**", "scripts/**"] + "outputs": ["*/package.json", "dist/**"] }, "test": { "inputs": [ diff --git a/packages/ui/vitest.config.mts b/packages/ui/vitest.config.mts index eb75123e50d..fdf067b830d 100644 --- a/packages/ui/vitest.config.mts +++ b/packages/ui/vitest.config.mts @@ -1,4 +1,3 @@ -import stylex from '@stylexjs/unplugin/vite'; import react from '@vitejs/plugin-react'; import { resolve } from 'path'; import { defineConfig } from 'vitest/config'; @@ -27,14 +26,7 @@ function viteSvgMockPlugin() { } export default defineConfig({ - plugins: [ - // Compile StyleX (`defineVars`/`create`/`props`) in tests so migrated Mosaic - // components return real classNames. `dev: true` emits readable, debuggable - // class names; the Button tests assert class/attr presence, not computed styles. - stylex({ dev: true, unstable_moduleResolution: { type: 'commonJS', rootDir: uiPath } }), - react({ jsxRuntime: 'automatic', jsxImportSource: '@emotion/react' }), - viteSvgMockPlugin(), - ], + plugins: [react({ jsxRuntime: 'automatic', jsxImportSource: '@emotion/react' }), viteSvgMockPlugin()], define: { __BUILD_DISABLE_RHC__: JSON.stringify(false), PACKAGE_NAME: JSON.stringify('@clerk/ui'), diff --git a/turbo.json b/turbo.json index c93746b2ffb..18be1f8026a 100644 --- a/turbo.json +++ b/turbo.json @@ -156,7 +156,7 @@ }, "lint:publint": { "dependsOn": ["build"], - "inputs": ["dist/**", "dist-mosaic/**", "package.json"], + "inputs": ["dist/**", "package.json"], "outputs": [] }, "lint:attw": { From ac18ba17b063e68fc7fabfe88ffc1f0ed84a422c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Tue, 15 Sep 2026 15:22:48 +0200 Subject: [PATCH 03/18] refactor(swingset): point stories at @clerk/mosaic --- packages/swingset/CLAUDE.md | 10 +-- packages/swingset/README.md | 4 +- packages/swingset/next.config.mjs | 8 +-- packages/swingset/package.json | 2 +- packages/swingset/postcss.config.mjs | 6 +- .../swingset/src/components/StoryEmbed.tsx | 2 +- .../swingset/src/components/StoryPreview.tsx | 2 +- packages/swingset/src/lib/types.ts | 2 +- packages/swingset/src/stories/avatar.mdx | 2 +- .../swingset/src/stories/avatar.stories.tsx | 8 +-- packages/swingset/src/stories/badge.mdx | 2 +- .../swingset/src/stories/badge.stories.tsx | 6 +- packages/swingset/src/stories/banner.mdx | 6 +- .../swingset/src/stories/banner.stories.tsx | 6 +- packages/swingset/src/stories/button.mdx | 2 +- .../swingset/src/stories/button.stories.tsx | 8 +-- .../swingset/src/stories/card.component.mdx | 2 +- .../src/stories/card.component.stories.tsx | 12 ++-- .../swingset/src/stories/combobox.stories.tsx | 12 ++-- packages/swingset/src/stories/destructive.mdx | 4 +- .../src/stories/destructive.stories.tsx | 6 +- .../swingset/src/stories/dialog.component.mdx | 61 ++++++++++++++++--- .../src/stories/dialog.component.stories.tsx | 18 +++--- .../swingset/src/stories/drawer.component.mdx | 4 +- .../src/stories/drawer.component.stories.tsx | 14 ++--- .../swingset/src/stories/field.component.mdx | 8 +-- .../src/stories/field.component.stories.tsx | 10 +-- .../fixtures/user-profile-add-email.ts | 4 +- .../fixtures/user-profile-add-phone.ts | 4 +- .../user-profile-connected-accounts.ts | 2 +- .../fixtures/user-profile-edit-name.ts | 6 +- .../fixtures/user-profile-edit-password.ts | 6 +- .../fixtures/user-profile-edit-username.ts | 4 +- .../user-profile-enterprise-accounts.ts | 2 +- .../fixtures/user-profile-web3-wallets.ts | 2 +- .../src/stories/fixtures/user-profile.ts | 10 +-- .../swingset/src/stories/flow.component.mdx | 4 +- .../src/stories/flow.component.stories.tsx | 8 +-- packages/swingset/src/stories/heading.mdx | 2 +- .../swingset/src/stories/heading.stories.tsx | 6 +- packages/swingset/src/stories/icon-frame.mdx | 2 +- .../src/stories/icon-frame.stories.tsx | 8 +-- packages/swingset/src/stories/icon.mdx | 2 +- .../swingset/src/stories/icon.stories.tsx | 10 +-- packages/swingset/src/stories/input-group.mdx | 6 +- .../src/stories/input-group.stories.tsx | 14 ++--- packages/swingset/src/stories/input.mdx | 2 +- .../swingset/src/stories/input.stories.tsx | 6 +- packages/swingset/src/stories/item.mdx | 6 +- .../swingset/src/stories/item.stories.tsx | 14 ++--- .../swingset/src/stories/menu.component.mdx | 8 +-- .../src/stories/menu.component.stories.tsx | 8 +-- .../swingset/src/stories/otp.component.mdx | 2 +- .../src/stories/otp.component.stories.tsx | 8 +-- packages/swingset/src/stories/phone-input.mdx | 2 +- .../src/stories/phone-input.stories.tsx | 8 +-- .../src/stories/popover.component.mdx | 10 +-- .../src/stories/popover.component.stories.tsx | 12 ++-- .../src/stories/profile.component.mdx | 4 +- .../src/stories/profile.component.stories.tsx | 14 ++--- .../swingset/src/stories/reverification.mdx | 2 +- .../src/stories/reverification.stories.tsx | 32 +++++----- packages/swingset/src/stories/scroll-area.mdx | 2 +- .../src/stories/scroll-area.stories.tsx | 12 ++-- packages/swingset/src/stories/section.mdx | 2 +- .../swingset/src/stories/section.stories.tsx | 14 ++--- packages/swingset/src/stories/text.mdx | 2 +- .../swingset/src/stories/text.stories.tsx | 6 +- packages/swingset/src/stories/user-button.mdx | 4 +- .../src/stories/user-button.stories.tsx | 6 +- .../user-profile-account-section.stories.tsx | 17 +++--- ...profile-active-devices-section.stories.tsx | 6 +- .../user-profile-api-keys-panel.stories.tsx | 6 +- ...rofile-billing-history-section.stories.tsx | 6 +- .../user-profile-billing-panel.stories.tsx | 6 +- ...ile-connected-accounts-section.stories.tsx | 4 +- .../user-profile-delete-section.stories.tsx | 5 +- ...le-enterprise-accounts-section.stories.tsx | 2 +- .../user-profile-mfa-section.stories.tsx | 6 +- .../user-profile-passkeys-section.stories.tsx | 6 +- .../user-profile-password-section.stories.tsx | 6 +- ...rofile-payment-methods-section.stories.tsx | 6 +- .../stories/user-profile-profile-panel.mdx | 2 +- .../user-profile-profile-panel.stories.tsx | 9 +-- .../user-profile-security-panel.stories.tsx | 6 +- ...r-profile-subscription-section.stories.tsx | 4 +- ...r-profile-web3-wallets-section.stories.tsx | 4 +- .../src/stories/user-profile.stories.tsx | 8 +-- .../swingset/src/stories/visually-hidden.mdx | 2 +- .../src/stories/visually-hidden.stories.tsx | 12 ++-- packages/swingset/tsconfig.json | 4 +- 91 files changed, 340 insertions(+), 302 deletions(-) diff --git a/packages/swingset/CLAUDE.md b/packages/swingset/CLAUDE.md index 920c73cf521..1eb41b490d1 100644 --- a/packages/swingset/CLAUDE.md +++ b/packages/swingset/CLAUDE.md @@ -2,7 +2,7 @@ This file provides guidance to Coding Agents when working with code in this repository. -`@clerk/swingset` is a private (unpublished) component explorer — a Storybook-like app — for the **Mosaic** design system that lives in `@clerk/ui`. It is a Next.js App Router app that renders Mosaic components interactively with live knobs and design-token overrides. +`@clerk/swingset` is a private (unpublished) component explorer — a Storybook-like app — for the **Mosaic** design system that lives in `@clerk/mosaic`. It is a Next.js App Router app that renders Mosaic components interactively with live knobs and design-token overrides. ## Commands @@ -20,7 +20,7 @@ There are no tests or lint scripts in this package, yet. These require reading several files together; the `README.md` covers the step-by-step "add a component" workflow. -- **Consumes Mosaic from source, not build.** `@clerk/ui/mosaic` is aliased to `../ui/src/mosaic` in *two* places that must stay in sync: `next.config.mjs` (webpack `resolve.alias`) and `tsconfig.json` (`paths`). Editing Mosaic source in `packages/ui` reflects live in swingset's dev server — no rebuild of `@clerk/ui` needed. +- **Consumes Mosaic from source, not build.** `@clerk/mosaic` is aliased to `../mosaic/src` in *two* places that must stay in sync: `next.config.mjs` (webpack `resolve.alias`) and `tsconfig.json` (`paths`). Editing Mosaic source in `packages/mosaic` reflects live in swingset's dev server — no rebuild of `@clerk/mosaic` needed. - **Knobs are generated from a story's declared variant surface.** A story's `meta.styles` is a hand-written `{ _variants, _defaultVariants }` object describing the component's variant props — StyleX compiles its styles away, so there is no runtime recipe to derive this from. `lib/generateKnobs.ts` turns each variant into a control: variants whose keys are only `true`/`false` become boolean toggles, everything else becomes a select. Knob values are passed as props straight into the story component. This is why story functions take `Record` and cast to the real prop type. @@ -40,7 +40,7 @@ These require reading several files together; the `README.md` covers the step-by - **`` examples can show their source in a collapsible code footer.** When a story module exposes its own source as `__source` — via a `?raw` self-import (`export { default as __source } from './x.stories?raw'`) — `StoryEmbed` runs `extractStorySource` (`lib/extractStorySource.ts`) to pull the *previewed story function's* source out of that raw text, then `toUsageSnippet` (`lib/exampleSnippet.ts`) to reduce that knob harness to a clean usage snippet (unwraps `export function …() { return (…) }` down to the returned JSX and strips the `{...knobsAsProps(props)}` / `{...props}` knob plumbing), and renders a `CodeFooter` (`CodeFooter.tsx`): a "View code" toggle that's collapsed by default and reveals the snippet with a height animation (Base UI's `--collapsible-panel-height` + `data-starting/ending-style`). It's **opt-in per module** — only modules that export `__source` get a footer, and it's keyed to whichever story `name` the `` renders, so each example shows its own code. Shiki highlighting is shared with the `
`/`CodeBlock` path through the `useShikiHtml` hook. A `` can carry both a code footer and a `composition` footer; they stack under the preview.
   - The `?raw` query is wired in `next.config.mjs`: an `asset/source` rule handles `?raw` imports, and — crucially — a recursive `excludeRawQuery` pass adds `resourceQuery: { not: [/raw/] }` to every *other* loader so Next's SWC loader doesn't compile the file first (otherwise `__source` would contain `_jsxDEV(…)` output instead of the authored source).
 
-- **Two component layers.** `src/components/ui/*` are shadcn/ui primitives (`components.json`, `base-nova` style, neutral base) used for swingset's *own* chrome (sidebar, tabs, inputs). The components being *documented* come from `@clerk/ui/mosaic`. Don't confuse the two.
+- **Two component layers.** `src/components/ui/*` are shadcn/ui primitives (`components.json`, `base-nova` style, neutral base) used for swingset's *own* chrome (sidebar, tabs, inputs). The components being *documented* come from `@clerk/mosaic`. Don't confuse the two.
 
 ## Documenting Mosaic components
 
@@ -85,7 +85,7 @@ export const meta: StoryMeta = {
   title: 'Button', // drives slug + the page 

label: 'Delete Org', // optional friendlier sidebar text status: 'stable', // maturity dot in sidebar + page badge; omit to show no status - source: 'packages/ui/src/mosaic/components/button/button.tsx', // repo-root path → "View source" + source: 'packages/mosaic/src/components/button/button.tsx', // repo-root path → "View source" styles: { // Hand-written variant surface — archetype A · simple only _variants: { variant: { primary: {}, outline: {} }, size: { sm: {}, md: {} } }, @@ -142,7 +142,7 @@ import * as ButtonStories from './button.stories'; Click me diff --git a/packages/swingset/README.md b/packages/swingset/README.md index 767dbf9aa57..bd1cd138cb9 100644 --- a/packages/swingset/README.md +++ b/packages/swingset/README.md @@ -14,12 +14,12 @@ pnpm dev --filter @clerk/swingset ```tsx import type { StoryMeta } from '@/lib/types'; -import { MyComponent, type MyComponentProps } from '@clerk/ui/mosaic/components/my-component'; +import { MyComponent, type MyComponentProps } from '@clerk/mosaic/components/my-component'; export const meta: StoryMeta = { group: 'Components', title: 'My Component', - source: 'packages/ui/src/mosaic/components/my-component/my-component.tsx', // repo-root path → "View source" link + source: 'packages/mosaic/src/components/my-component/my-component.tsx', // repo-root path → "View source" link // Variant surface, declared by hand — knobs are generated from `_variants` styles: { _variants: { variant: { primary: {}, outline: {} }, size: { sm: {}, md: {} } }, diff --git a/packages/swingset/next.config.mjs b/packages/swingset/next.config.mjs index e78d500f965..a7a32200130 100644 --- a/packages/swingset/next.config.mjs +++ b/packages/swingset/next.config.mjs @@ -5,7 +5,7 @@ import rehypeRaw from 'rehype-raw'; import remarkGfm from 'remark-gfm'; import { fileURLToPath } from 'url'; -import { mosaicLightningCssTargets } from '../ui/stylex-lightningcss.config.mjs'; +import { mosaicLightningCssTargets } from '../mosaic/stylex-lightningcss.config.mjs'; const __dirname = fileURLToPath(new URL('.', import.meta.url)); @@ -77,9 +77,9 @@ const nextConfig = { stylexPlugin({ dev: isDev, runtimeInjection: isDev, - unstable_moduleResolution: { type: 'commonJS', rootDir: resolve(__dirname, '../ui') }, + unstable_moduleResolution: { type: 'commonJS', rootDir: resolve(__dirname, '../mosaic') }, // Stories reach `tokens.stylex.ts` through the same alias; StyleX resolves it itself. - aliases: { '@clerk/ui/mosaic/*': [resolve(__dirname, '../ui/src/mosaic/*')] }, + aliases: { '@clerk/mosaic/*': [resolve(__dirname, '../mosaic/src/*')] }, useCSSLayers: true, lightningcssOptions: { targets: mosaicLightningCssTargets }, }), @@ -94,7 +94,7 @@ const nextConfig = { }); } - config.resolve.alias['@clerk/ui/mosaic'] = resolve(__dirname, '../ui/src/mosaic'); + config.resolve.alias['@clerk/mosaic'] = resolve(__dirname, '../mosaic/src'); // Consume @clerk/headless primitives from source (no dist build needed), mirroring Mosaic. // `/hooks` and `/utils` live outside `primitives/`, so alias them first (more specific wins). config.resolve.alias['@clerk/headless/hooks'] = resolve(__dirname, '../headless/src/hooks'); diff --git a/packages/swingset/package.json b/packages/swingset/package.json index 295e06175de..6d7c64cade8 100644 --- a/packages/swingset/package.json +++ b/packages/swingset/package.json @@ -12,7 +12,7 @@ "dependencies": { "@base-ui/react": "^1.5.0", "@clerk/headless": "workspace:*", - "@clerk/ui": "workspace:*", + "@clerk/mosaic": "workspace:*", "@stylexjs/stylex": "0.19.0", "@tailwindcss/typography": "^0.5.19", "class-variance-authority": "^0.7.1", diff --git a/packages/swingset/postcss.config.mjs b/packages/swingset/postcss.config.mjs index c3747ea8547..3466a51d4a4 100644 --- a/packages/swingset/postcss.config.mjs +++ b/packages/swingset/postcss.config.mjs @@ -5,7 +5,7 @@ import { fileURLToPath } from 'url'; const require = createRequire(import.meta.url); const __dirname = dirname(fileURLToPath(import.meta.url)); -const uiRoot = resolve(__dirname, '../ui'); +const mosaicRoot = resolve(__dirname, '../mosaic'); const isDev = process.env.NODE_ENV !== 'production'; // StyleX CSS. `@stylexjs/postcss-plugin` scans the Mosaic source, runs the StyleX babel @@ -35,8 +35,8 @@ const stylexExtraction = { { dev: isDev, runtimeInjection: false, - unstable_moduleResolution: { type: 'commonJS', rootDir: uiRoot }, - aliases: { '@clerk/ui/mosaic/*': [resolve(uiRoot, 'src/mosaic/*')] }, + unstable_moduleResolution: { type: 'commonJS', rootDir: mosaicRoot }, + aliases: { '@clerk/mosaic/*': [resolve(mosaicRoot, 'src/*')] }, }, ], ], diff --git a/packages/swingset/src/components/StoryEmbed.tsx b/packages/swingset/src/components/StoryEmbed.tsx index d093f01d243..b64c8b381ab 100644 --- a/packages/swingset/src/components/StoryEmbed.tsx +++ b/packages/swingset/src/components/StoryEmbed.tsx @@ -1,6 +1,6 @@ 'use client'; -import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; import { Layers2Icon } from 'lucide-react'; import type React from 'react'; import { useState } from 'react'; diff --git a/packages/swingset/src/components/StoryPreview.tsx b/packages/swingset/src/components/StoryPreview.tsx index 25519efc451..2f7ef71235c 100644 --- a/packages/swingset/src/components/StoryPreview.tsx +++ b/packages/swingset/src/components/StoryPreview.tsx @@ -1,6 +1,6 @@ 'use client'; -import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; import { RotateCcwIcon } from 'lucide-react'; import type React from 'react'; import { useEffect, useState } from 'react'; diff --git a/packages/swingset/src/lib/types.ts b/packages/swingset/src/lib/types.ts index e45155ce120..40b2484f4c7 100644 --- a/packages/swingset/src/lib/types.ts +++ b/packages/swingset/src/lib/types.ts @@ -77,7 +77,7 @@ export interface StoryMeta { }; /** * Path to the file that exports the documented component, relative to the monorepo - * root (e.g. `packages/ui/src/mosaic/components/button.tsx`). Rendered as a "View + * root (e.g. `packages/mosaic/src/components/button.tsx`). Rendered as a "View * source" link to the file on GitHub. See `lib/source.ts`. */ source?: string; diff --git a/packages/swingset/src/stories/avatar.mdx b/packages/swingset/src/stories/avatar.mdx index 9deae63120c..4c9e162d53d 100644 --- a/packages/swingset/src/stories/avatar.mdx +++ b/packages/swingset/src/stories/avatar.mdx @@ -22,7 +22,7 @@ The fallback still takes children — initials, an icon — but never paints the ## Usage ```tsx -import { Avatar } from '@clerk/ui/mosaic/components/avatar'; +import { Avatar } from '@clerk/mosaic/components/avatar'; Badge Label diff --git a/packages/swingset/src/stories/badge.stories.tsx b/packages/swingset/src/stories/badge.stories.tsx index ec1e0bbc72f..20416e429b7 100644 --- a/packages/swingset/src/stories/badge.stories.tsx +++ b/packages/swingset/src/stories/badge.stories.tsx @@ -1,5 +1,5 @@ -import type { BadgeProps } from '@clerk/ui/mosaic/components/badge'; -import { Badge } from '@clerk/ui/mosaic/components/badge'; +import type { BadgeProps } from '@clerk/mosaic/components/badge'; +import { Badge } from '@clerk/mosaic/components/badge'; import type { StoryMeta } from '@/lib/types'; @@ -13,7 +13,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Badge', - source: 'packages/ui/src/mosaic/components/badge/badge.tsx', + source: 'packages/mosaic/src/components/badge/badge.tsx', styles: { _variants: { color: { primary: {}, neutral: {}, warning: {}, negative: {}, positive: {} }, diff --git a/packages/swingset/src/stories/banner.mdx b/packages/swingset/src/stories/banner.mdx index 09bf18b40f4..70b84be53f1 100644 --- a/packages/swingset/src/stories/banner.mdx +++ b/packages/swingset/src/stories/banner.mdx @@ -18,7 +18,7 @@ import * as BannerStories from './banner.stories'; ## Usage ```tsx -import { Banner } from '@clerk/ui/mosaic/components/banner'; +import { Banner } from '@clerk/mosaic/components/banner'; Error banner @@ -40,10 +40,10 @@ import { Banner } from '@clerk/ui/mosaic/components/banner'; ## Styling -Each part carries its stable slot class alongside the generated StyleX atoms and reflects the active color as `data-color`. Override a `.cl-banner-*` class from a CSS layer that wins over `@clerk/ui/styles.css`: +Each part carries its stable slot class alongside the generated StyleX atoms and reflects the active color as `data-color`. Override a `.cl-banner-*` class from a CSS layer that wins over `@clerk/mosaic/styles.css`: ```css -@import '@clerk/ui/styles.css' layer(components); +@import '@clerk/mosaic/styles.css' layer(components); @layer overrides { .cl-banner-root[data-color='negative'] { diff --git a/packages/swingset/src/stories/banner.stories.tsx b/packages/swingset/src/stories/banner.stories.tsx index ba96e131d71..9fd7d4476ad 100644 --- a/packages/swingset/src/stories/banner.stories.tsx +++ b/packages/swingset/src/stories/banner.stories.tsx @@ -1,5 +1,5 @@ -import type { BannerRootProps } from '@clerk/ui/mosaic/components/banner'; -import { Banner } from '@clerk/ui/mosaic/components/banner'; +import type { BannerRootProps } from '@clerk/mosaic/components/banner'; +import { Banner } from '@clerk/mosaic/components/banner'; import type { StoryMeta } from '@/lib/types'; @@ -13,7 +13,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Banner', - source: 'packages/ui/src/mosaic/components/banner/banner.tsx', + source: 'packages/mosaic/src/components/banner/banner.tsx', styles: { _variants: { color: { neutral: {}, warning: {}, negative: {} }, diff --git a/packages/swingset/src/stories/button.mdx b/packages/swingset/src/stories/button.mdx index b438cbed16d..294b0718f3d 100644 --- a/packages/swingset/src/stories/button.mdx +++ b/packages/swingset/src/stories/button.mdx @@ -23,7 +23,7 @@ import * as ButtonStories from './button.stories'; Click me diff --git a/packages/swingset/src/stories/button.stories.tsx b/packages/swingset/src/stories/button.stories.tsx index 082d9d584c9..32f172238d2 100644 --- a/packages/swingset/src/stories/button.stories.tsx +++ b/packages/swingset/src/stories/button.stories.tsx @@ -1,6 +1,6 @@ -import type { ButtonProps } from '@clerk/ui/mosaic/components/button'; -import { Button, SubmitButton } from '@clerk/ui/mosaic/components/button'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; +import type { ButtonProps } from '@clerk/mosaic/components/button'; +import { Button, SubmitButton } from '@clerk/mosaic/components/button'; +import { Icon } from '@clerk/mosaic/components/icon'; import React from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -13,7 +13,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Button', - source: 'packages/ui/src/mosaic/components/button/button.tsx', + source: 'packages/mosaic/src/components/button/button.tsx', styles: { _variants: { color: { primary: {}, neutral: {}, negative: {} }, diff --git a/packages/swingset/src/stories/card.component.mdx b/packages/swingset/src/stories/card.component.mdx index 3f2bc5c2d57..5abfa0339d3 100644 --- a/packages/swingset/src/stories/card.component.mdx +++ b/packages/swingset/src/stories/card.component.mdx @@ -16,7 +16,7 @@ import * as CardStories from './card.component.stories'; ## Usage ```tsx -import { Card } from '@clerk/ui/mosaic/components/card'; +import { Card } from '@clerk/mosaic/components/card'; diff --git a/packages/swingset/src/stories/card.component.stories.tsx b/packages/swingset/src/stories/card.component.stories.tsx index 8536c02d870..f64958b33f5 100644 --- a/packages/swingset/src/stories/card.component.stories.tsx +++ b/packages/swingset/src/stories/card.component.stories.tsx @@ -1,8 +1,8 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import type { CardProps } from '@clerk/ui/mosaic/components/card'; -import { Card } from '@clerk/ui/mosaic/components/card'; -import { Field } from '@clerk/ui/mosaic/components/field'; -import { Input } from '@clerk/ui/mosaic/components/input'; +import { Button } from '@clerk/mosaic/components/button'; +import type { CardProps } from '@clerk/mosaic/components/card'; +import { Card } from '@clerk/mosaic/components/card'; +import { Field } from '@clerk/mosaic/components/field'; +import { Input } from '@clerk/mosaic/components/input'; import type { StoryMeta } from '@/lib/types'; @@ -14,7 +14,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Card', - source: 'packages/ui/src/mosaic/components/card/card.tsx', + source: 'packages/mosaic/src/components/card/card.tsx', styles: { _variants: { elevation: { card: {}, flush: {}, overlay: {} }, diff --git a/packages/swingset/src/stories/combobox.stories.tsx b/packages/swingset/src/stories/combobox.stories.tsx index 353272ee350..2ec13720f8b 100644 --- a/packages/swingset/src/stories/combobox.stories.tsx +++ b/packages/swingset/src/stories/combobox.stories.tsx @@ -1,10 +1,10 @@ 'use client'; -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Combobox } from '@clerk/ui/mosaic/components/combobox'; -import { Field } from '@clerk/ui/mosaic/components/field'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { InputGroup } from '@clerk/ui/mosaic/components/input-group'; +import { Button } from '@clerk/mosaic/components/button'; +import { Combobox } from '@clerk/mosaic/components/combobox'; +import { Field } from '@clerk/mosaic/components/field'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { InputGroup } from '@clerk/mosaic/components/input-group'; import * as stylex from '@stylexjs/stylex'; import type { StoryMeta } from '@/lib/types'; @@ -19,7 +19,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'Combobox', - source: 'packages/ui/src/mosaic/components/combobox/combobox.tsx', + source: 'packages/mosaic/src/components/combobox/combobox.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/destructive.mdx b/packages/swingset/src/stories/destructive.mdx index 73b728e1983..f1d5fffe9d5 100644 --- a/packages/swingset/src/stories/destructive.mdx +++ b/packages/swingset/src/stories/destructive.mdx @@ -22,8 +22,8 @@ The block holds one thing: the phrase the user types. Nothing outside the dialog Everything that decides what the dialog does next belongs to the caller. `open` closes it, `isDeleting` marks it busy, `errorMessage` explains a failure. ```tsx -import { Destructive } from '@clerk/ui/mosaic/blocks/destructive'; -import { Button } from '@clerk/ui/mosaic/components/button'; +import { Destructive } from '@clerk/mosaic/blocks/destructive'; +import { Button } from '@clerk/mosaic/components/button'; const [open, setOpen] = useState(false); const [isDeleting, setIsDeleting] = useState(false); diff --git a/packages/swingset/src/stories/destructive.stories.tsx b/packages/swingset/src/stories/destructive.stories.tsx index f32fe086e9d..1a14e24bf1f 100644 --- a/packages/swingset/src/stories/destructive.stories.tsx +++ b/packages/swingset/src/stories/destructive.stories.tsx @@ -1,5 +1,5 @@ -import { Destructive } from '@clerk/ui/mosaic/blocks/destructive'; -import { Button } from '@clerk/ui/mosaic/components/button'; +import { Destructive } from '@clerk/mosaic/blocks/destructive'; +import { Button } from '@clerk/mosaic/components/button'; import React from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { group: 'Blocks', status: 'stable', title: 'Destructive', - source: 'packages/ui/src/mosaic/blocks/destructive/destructive.tsx', + source: 'packages/mosaic/src/blocks/destructive/destructive.tsx', }; // A real delete is a network round trip. Without one the action never renders its pending diff --git a/packages/swingset/src/stories/dialog.component.mdx b/packages/swingset/src/stories/dialog.component.mdx index 2fa62c39776..3c34caec028 100644 --- a/packages/swingset/src/stories/dialog.component.mdx +++ b/packages/swingset/src/stories/dialog.component.mdx @@ -25,9 +25,9 @@ import * as DialogStories from './dialog.component.stories'; ## Usage ```tsx -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Card } from '@clerk/ui/mosaic/components/card'; -import { Dialog } from '@clerk/ui/mosaic/components/dialog'; +import { Button } from '@clerk/mosaic/components/button'; +import { Card } from '@clerk/mosaic/components/card'; +import { Dialog } from '@clerk/mosaic/components/dialog'; }>Open dialog @@ -87,9 +87,9 @@ A popup with no surface inside renders an unpainted box. A `profile` composes the same way, with the user page in place of the card. ```tsx -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Dialog } from '@clerk/ui/mosaic/components/dialog'; -import { UserProfileView } from '@clerk/ui/mosaic/features/user-profile/user-profile.view'; +import { Button } from '@clerk/mosaic/components/button'; +import { Dialog } from '@clerk/mosaic/components/dialog'; +import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; }>Manage account @@ -147,6 +147,51 @@ Press Cancel to open a discard confirmation above the profile form. Keep editing storyModule={DialogStories} /> +# <<<<<<< HEAD + +```tsx +import { createConfirmHandle, Dialog, useConfirmedClose } from '@clerk/mosaic/components/dialog'; + +const confirm = React.useMemo(() => createConfirmHandle(), []); + +const onOpenChange = useConfirmedClose({ + handle: confirm, + when: () => value !== '', + onOpenChange: setOpen, + confirm: { title: 'Discard changes?', description: '…', actionLabel: 'Discard', destructive: true }, +}); + + + + … + + +; +``` + +- Render `Dialog.Confirm` **inside** the popup it guards, so the two share a floating tree. +- The guarded dialog must be controlled — a veto is the absence of a commit. +- `confirm.show(options)` asks the same question directly and resolves `true`/`false`. It needs the + `Dialog.Confirm` mounted, and returns the in-flight promise if one is already showing. + +### Inline + +`inline` on the root renders the dialog in its host instead of over the page: no portal, scrim, +scroll lock or focus trap, and nothing dismisses it. For the account profile mounted in a page slot. + + + +- `open`, `modal`, `closedBy` are implied; `onOpenChange` is never called. +- No initial focus on mount. `Dialog.CloseButton` renders nothing; `Card.Header` carries no dismiss. +- Fills the host edge to edge. How the surface looks there is the surface's call — the page + paints the same frame modal or inline. +- Dialogs opened from inside it are normal modal dialogs over the page. + +> > > > > > > 12e3a52c54 (refactor(swingset): point stories at @clerk/mosaic) + ### Responsive behaviour The gap to the screen edge is a fixed inset, not a percentage: @@ -220,10 +265,10 @@ The name, the description and the button row come from the surface — `Card.Tit ## Styling -Override by targeting the `.cl-*` slot from a layer that wins over `@clerk/ui/styles.css`: +Override by targeting the `.cl-*` slot from a layer that wins over `@clerk/mosaic/styles.css`: ```css -@import '@clerk/ui/styles.css' layer(components); +@import '@clerk/mosaic/styles.css' layer(components); @layer overrides { .cl-dialog-popup[data-variant='profile'] { diff --git a/packages/swingset/src/stories/dialog.component.stories.tsx b/packages/swingset/src/stories/dialog.component.stories.tsx index a195b5c5d51..d981d2a9081 100644 --- a/packages/swingset/src/stories/dialog.component.stories.tsx +++ b/packages/swingset/src/stories/dialog.component.stories.tsx @@ -1,12 +1,12 @@ import type { RenderProps } from '@clerk/headless/utils'; -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Card } from '@clerk/ui/mosaic/components/card'; -import type { DialogCompactPlacement, DialogVariant } from '@clerk/ui/mosaic/components/dialog'; -import { Dialog } from '@clerk/ui/mosaic/components/dialog'; -import { Heading } from '@clerk/ui/mosaic/components/heading'; -import { Input } from '@clerk/ui/mosaic/components/input'; -import { Text } from '@clerk/ui/mosaic/components/text'; -import { UserProfileView } from '@clerk/ui/mosaic/features/user-profile/user-profile.view'; +import { Button } from '@clerk/mosaic/components/button'; +import { Card } from '@clerk/mosaic/components/card'; +import type { DialogCompactPlacement, DialogVariant } from '@clerk/mosaic/components/dialog'; +import { Dialog } from '@clerk/mosaic/components/dialog'; +import { Heading } from '@clerk/mosaic/components/heading'; +import { Input } from '@clerk/mosaic/components/input'; +import { Text } from '@clerk/mosaic/components/text'; +import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; import React from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -21,7 +21,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'Dialog', - source: 'packages/ui/src/mosaic/components/dialog/dialog.tsx', + source: 'packages/mosaic/src/components/dialog/dialog.tsx', styles: { _variants: { variant: { card: {}, profile: {} }, diff --git a/packages/swingset/src/stories/drawer.component.mdx b/packages/swingset/src/stories/drawer.component.mdx index 501a595bfa0..346ed99212d 100644 --- a/packages/swingset/src/stories/drawer.component.mdx +++ b/packages/swingset/src/stories/drawer.component.mdx @@ -20,8 +20,8 @@ custom properties it writes. ## Usage ```tsx -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Drawer } from '@clerk/ui/mosaic/components/drawer'; +import { Button } from '@clerk/mosaic/components/button'; +import { Drawer } from '@clerk/mosaic/components/drawer'; }>Sort diff --git a/packages/swingset/src/stories/drawer.component.stories.tsx b/packages/swingset/src/stories/drawer.component.stories.tsx index 7df605dc9a5..9e472b0fd9a 100644 --- a/packages/swingset/src/stories/drawer.component.stories.tsx +++ b/packages/swingset/src/stories/drawer.component.stories.tsx @@ -1,9 +1,9 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Dialog } from '@clerk/ui/mosaic/components/dialog'; -import { Drawer } from '@clerk/ui/mosaic/components/drawer'; -import { Heading } from '@clerk/ui/mosaic/components/heading'; -import { Text } from '@clerk/ui/mosaic/components/text'; -import { UserProfileView } from '@clerk/ui/mosaic/features/user-profile/user-profile.view'; +import { Button } from '@clerk/mosaic/components/button'; +import { Dialog } from '@clerk/mosaic/components/dialog'; +import { Drawer } from '@clerk/mosaic/components/drawer'; +import { Heading } from '@clerk/mosaic/components/heading'; +import { Text } from '@clerk/mosaic/components/text'; +import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; import type { StoryMeta } from '@/lib/types'; @@ -17,7 +17,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'Drawer', - source: 'packages/ui/src/mosaic/components/drawer/drawer.tsx', + source: 'packages/mosaic/src/components/drawer/drawer.tsx', }; function SheetContent() { diff --git a/packages/swingset/src/stories/field.component.mdx b/packages/swingset/src/stories/field.component.mdx index 7e4a8ecd82c..a0b2ef64be4 100644 --- a/packages/swingset/src/stories/field.component.mdx +++ b/packages/swingset/src/stories/field.component.mdx @@ -14,8 +14,8 @@ import * as FieldStories from './field.component.stories'; Compose one Mosaic control inside each `Field.Root` to generate its ID, the label relationship, and the message relationships. Rendering multiple controls logs a development warning. The caller owns validation and decides when to render an error. Use a separate `Field.Root` for each control; grouped controls should use native `
` and `` semantics until dedicated Mosaic `Fieldset` and `Field.Item` components are available. ```tsx -import { Field } from '@clerk/ui/mosaic/components/field'; -import { Input } from '@clerk/ui/mosaic/components/input'; +import { Field } from '@clerk/mosaic/components/field'; +import { Input } from '@clerk/mosaic/components/input'; Email address @@ -92,10 +92,10 @@ the native label. ## Styling -The Mosaic field is themed with **StyleX**. Each styled part carries the stable public slot class shown above alongside the generated StyleX atoms. Consumers never target the hashed atomic classes—override a `.cl-field-*` class from a CSS layer that wins over `@clerk/ui/styles.css`: +The Mosaic field is themed with **StyleX**. Each styled part carries the stable public slot class shown above alongside the generated StyleX atoms. Consumers never target the hashed atomic classes—override a `.cl-field-*` class from a CSS layer that wins over `@clerk/mosaic/styles.css`: ```css -@import '@clerk/ui/styles.css' layer(components); +@import '@clerk/mosaic/styles.css' layer(components); @layer overrides { .cl-field-label { diff --git a/packages/swingset/src/stories/field.component.stories.tsx b/packages/swingset/src/stories/field.component.stories.tsx index 49ed4a076f1..3b49a98e152 100644 --- a/packages/swingset/src/stories/field.component.stories.tsx +++ b/packages/swingset/src/stories/field.component.stories.tsx @@ -1,7 +1,7 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Field } from '@clerk/ui/mosaic/components/field'; -import { Input } from '@clerk/ui/mosaic/components/input'; -import { Select } from '@clerk/ui/mosaic/components/select'; +import { Button } from '@clerk/mosaic/components/button'; +import { Field } from '@clerk/mosaic/components/field'; +import { Input } from '@clerk/mosaic/components/input'; +import { Select } from '@clerk/mosaic/components/select'; import * as stylex from '@stylexjs/stylex'; import React from 'react'; @@ -15,7 +15,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Field', - source: 'packages/ui/src/mosaic/components/field/field.tsx', + source: 'packages/mosaic/src/components/field/field.tsx', }; const styles = stylex.create({ diff --git a/packages/swingset/src/stories/fixtures/user-profile-add-email.ts b/packages/swingset/src/stories/fixtures/user-profile-add-email.ts index b0f9fe7e7d7..3735331b61d 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-add-email.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-add-email.ts @@ -1,5 +1,5 @@ -import type { UserProfileAccountSectionViewProps } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; -import type { UserProfileAddEmailDialogProps } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.dialog'; +import type { UserProfileAccountSectionViewProps } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; +import type { UserProfileAddEmailDialogProps } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-add-email.dialog'; interface FixtureOptions { failAt?: UserProfileAddEmailDialogProps['step']; diff --git a/packages/swingset/src/stories/fixtures/user-profile-add-phone.ts b/packages/swingset/src/stories/fixtures/user-profile-add-phone.ts index ff4de709ad7..1e995db7c3a 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-add-phone.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-add-phone.ts @@ -1,5 +1,5 @@ -import type { UserProfileAccountSectionViewProps } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; -import type { UserProfileAddPhoneDialogProps } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog'; +import type { UserProfileAccountSectionViewProps } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; +import type { UserProfileAddPhoneDialogProps } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog'; interface FixtureOptions { failAt?: UserProfileAddPhoneDialogProps['step']; diff --git a/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts b/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts index 9f5218c2ec4..0211e4a54c8 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-connected-accounts.ts @@ -1,7 +1,7 @@ import type { UserProfileConnectedAccount, UserProfileConnectionProvider, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-connected-accounts-section.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-connected-accounts-section.view'; import { useState } from 'react'; export const connectedAccount = { diff --git a/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts b/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts index c9abef0bfae..109a38b9c33 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-edit-name.ts @@ -1,6 +1,6 @@ -import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; -import { UserProfileSaveError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; -import type { UserProfileEditNameValue } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog'; +import type { UserProfileFormError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import { UserProfileSaveError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import type { UserProfileEditNameValue } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-edit-name.dialog'; import { useState } from 'react'; export interface UserProfileEditNameFixtureOptions { diff --git a/packages/swingset/src/stories/fixtures/user-profile-edit-password.ts b/packages/swingset/src/stories/fixtures/user-profile-edit-password.ts index 2305b0f94ea..a00865cc05e 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-edit-password.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-edit-password.ts @@ -1,6 +1,6 @@ -import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; -import { UserProfileSaveError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; -import type { UserProfileEditPasswordValue } from '@clerk/ui/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.types'; +import type { UserProfileFormError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import { UserProfileSaveError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import type { UserProfileEditPasswordValue } from '@clerk/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.types'; import { useState } from 'react'; export interface UserProfileEditPasswordFixtureOptions { diff --git a/packages/swingset/src/stories/fixtures/user-profile-edit-username.ts b/packages/swingset/src/stories/fixtures/user-profile-edit-username.ts index 27f4e876bf7..469cc0c0204 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-edit-username.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-edit-username.ts @@ -1,5 +1,5 @@ -import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; -import { UserProfileSaveError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import type { UserProfileFormError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import { UserProfileSaveError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; import { useState } from 'react'; export interface UserProfileEditUsernameFixtureOptions { diff --git a/packages/swingset/src/stories/fixtures/user-profile-enterprise-accounts.ts b/packages/swingset/src/stories/fixtures/user-profile-enterprise-accounts.ts index cc4c8ca4ef8..8e9b12bc6dc 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-enterprise-accounts.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-enterprise-accounts.ts @@ -1,7 +1,7 @@ import type { UserProfileEnterpriseAccount, UserProfileEnterpriseConnection, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types'; +} from '@clerk/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types'; import { useState } from 'react'; export const accounts: UserProfileEnterpriseAccount[] = [ diff --git a/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts b/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts index c1d169d6ff6..a9a8d9b8067 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-web3-wallets.ts @@ -1,7 +1,7 @@ import type { UserProfileWeb3Provider, UserProfileWeb3Wallet, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-web3-wallets-section.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-web3-wallets-section.view'; import { useState } from 'react'; interface DemoWallet extends UserProfileWeb3Wallet { diff --git a/packages/swingset/src/stories/fixtures/user-profile.ts b/packages/swingset/src/stories/fixtures/user-profile.ts index 304aed8b005..e073830cadb 100644 --- a/packages/swingset/src/stories/fixtures/user-profile.ts +++ b/packages/swingset/src/stories/fixtures/user-profile.ts @@ -1,18 +1,18 @@ -import type { UserProfileViewProps } from '@clerk/ui/mosaic/features/user-profile/user-profile.view'; -import type { UserProfileAPIKey } from '@clerk/ui/mosaic/features/user-profile/user-profile-api-keys-panel.view'; +import type { UserProfileViewProps } from '@clerk/mosaic/features/user-profile/user-profile.view'; +import type { UserProfileAPIKey } from '@clerk/mosaic/features/user-profile/user-profile-api-keys-panel.view'; import type { UserProfilePaymentMethod, UserProfileSubscription, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-billing-panel.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-billing-panel.view'; import type { UserProfileEmail, UserProfilePhone, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-profile-panel.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view'; import type { UserProfileDevice, UserProfileMfaMethod, UserProfilePasskey, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-security-panel.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view'; import { useMemo, useState } from 'react'; import { usePreviewImage } from './use-preview-image'; diff --git a/packages/swingset/src/stories/flow.component.mdx b/packages/swingset/src/stories/flow.component.mdx index ee21fca0e04..cb2335330aa 100644 --- a/packages/swingset/src/stories/flow.component.mdx +++ b/packages/swingset/src/stories/flow.component.mdx @@ -16,8 +16,8 @@ import * as FlowStories from './flow.component.stories'; Keep `Card.Root` outside `Flow.Root` so the card remains stable while Flow clips and animates its step viewport. ```tsx -import { Card } from '@clerk/ui/mosaic/components/card'; -import { Flow } from '@clerk/ui/mosaic/components/flow'; +import { Card } from '@clerk/mosaic/components/card'; +import { Flow } from '@clerk/mosaic/components/flow'; Page Title diff --git a/packages/swingset/src/stories/heading.stories.tsx b/packages/swingset/src/stories/heading.stories.tsx index 18b4f2d7f7f..11cfca0aa3c 100644 --- a/packages/swingset/src/stories/heading.stories.tsx +++ b/packages/swingset/src/stories/heading.stories.tsx @@ -1,5 +1,5 @@ -import type { HeadingProps } from '@clerk/ui/mosaic/components/heading'; -import { Heading } from '@clerk/ui/mosaic/components/heading'; +import type { HeadingProps } from '@clerk/mosaic/components/heading'; +import { Heading } from '@clerk/mosaic/components/heading'; import type { StoryMeta } from '@/lib/types'; @@ -11,7 +11,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'Heading', - source: 'packages/ui/src/mosaic/components/heading/heading.tsx', + source: 'packages/mosaic/src/components/heading/heading.tsx', styles: { _variants: { size: { xs: {}, sm: {}, base: {}, lg: {}, xl: {}, '2xl': {} }, diff --git a/packages/swingset/src/stories/icon-frame.mdx b/packages/swingset/src/stories/icon-frame.mdx index 6eb7c679ada..38726faebfd 100644 --- a/packages/swingset/src/stories/icon-frame.mdx +++ b/packages/swingset/src/stories/icon-frame.mdx @@ -21,7 +21,7 @@ IconFrame centers an icon or other visual in a square Mosaic surface. `bordered` ## Usage ```tsx -import { Icon, IconFrame } from '@clerk/ui/mosaic/components/icon'; +import { Icon, IconFrame } from '@clerk/mosaic/components/icon'; diff --git a/packages/swingset/src/stories/icon.stories.tsx b/packages/swingset/src/stories/icon.stories.tsx index 85a01cd6751..ec27ad26610 100644 --- a/packages/swingset/src/stories/icon.stories.tsx +++ b/packages/swingset/src/stories/icon.stories.tsx @@ -1,7 +1,7 @@ -import type { IconProps } from '@clerk/ui/mosaic/components/icon'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { iconRegistry } from '@clerk/ui/mosaic/icons/registry'; -import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider'; +import type { IconProps } from '@clerk/mosaic/components/icon'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { iconRegistry } from '@clerk/mosaic/icons/registry'; +import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; import type { StoryMeta } from '@/lib/types'; @@ -13,7 +13,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Icon', - source: 'packages/ui/src/mosaic/components/icon/icon.tsx', + source: 'packages/mosaic/src/components/icon/icon.tsx', styles: { _variants: { size: { sm: {}, md: {}, lg: {} }, diff --git a/packages/swingset/src/stories/input-group.mdx b/packages/swingset/src/stories/input-group.mdx index 518e5827fc3..2acb80fd281 100644 --- a/packages/swingset/src/stories/input-group.mdx +++ b/packages/swingset/src/stories/input-group.mdx @@ -20,9 +20,9 @@ import * as InputGroupStories from './input-group.stories'; ## Usage ```tsx -import { Button } from '@clerk/ui/mosaic/components/button'; -import { InputGroup } from '@clerk/ui/mosaic/components/input-group'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; +import { Button } from '@clerk/mosaic/components/button'; +import { InputGroup } from '@clerk/mosaic/components/input-group'; +import { Icon } from '@clerk/mosaic/components/icon'; import { useState } from 'react'; function PasswordField() { diff --git a/packages/swingset/src/stories/input-group.stories.tsx b/packages/swingset/src/stories/input-group.stories.tsx index c1ff77c7815..08965fc42d1 100644 --- a/packages/swingset/src/stories/input-group.stories.tsx +++ b/packages/swingset/src/stories/input-group.stories.tsx @@ -1,9 +1,9 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Field } from '@clerk/ui/mosaic/components/field'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import type { InputGroupRootProps } from '@clerk/ui/mosaic/components/input-group'; -import { InputGroup } from '@clerk/ui/mosaic/components/input-group'; -import { colorVars, space } from '@clerk/ui/mosaic/tokens.stylex'; +import { Button } from '@clerk/mosaic/components/button'; +import { Field } from '@clerk/mosaic/components/field'; +import { Icon } from '@clerk/mosaic/components/icon'; +import type { InputGroupRootProps } from '@clerk/mosaic/components/input-group'; +import { InputGroup } from '@clerk/mosaic/components/input-group'; +import { colorVars, space } from '@clerk/mosaic/tokens.stylex'; import * as stylex from '@stylexjs/stylex'; import { useState } from 'react'; @@ -15,7 +15,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'InputGroup', - source: 'packages/ui/src/mosaic/components/input-group/input-group.tsx', + source: 'packages/mosaic/src/components/input-group/input-group.tsx', styles: { _variants: { size: { sm: {}, md: {}, lg: {} }, diff --git a/packages/swingset/src/stories/input.mdx b/packages/swingset/src/stories/input.mdx index 44c3bc0939b..6e9f33098d1 100644 --- a/packages/swingset/src/stories/input.mdx +++ b/packages/swingset/src/stories/input.mdx @@ -19,7 +19,7 @@ The snippet below reflects the props selected in the table above — change a pr diff --git a/packages/swingset/src/stories/input.stories.tsx b/packages/swingset/src/stories/input.stories.tsx index 29fca1a6fd6..64645e2bcf2 100644 --- a/packages/swingset/src/stories/input.stories.tsx +++ b/packages/swingset/src/stories/input.stories.tsx @@ -1,5 +1,5 @@ -import type { InputProps } from '@clerk/ui/mosaic/components/input'; -import { Input } from '@clerk/ui/mosaic/components/input'; +import type { InputProps } from '@clerk/mosaic/components/input'; +import { Input } from '@clerk/mosaic/components/input'; import type { StoryMeta } from '@/lib/types'; @@ -11,7 +11,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'Input', - source: 'packages/ui/src/mosaic/components/input/input.tsx', + source: 'packages/mosaic/src/components/input/input.tsx', styles: { _variants: { size: { sm: {}, md: {}, lg: {} }, diff --git a/packages/swingset/src/stories/item.mdx b/packages/swingset/src/stories/item.mdx index b5f18f87c0c..a4669833539 100644 --- a/packages/swingset/src/stories/item.mdx +++ b/packages/swingset/src/stories/item.mdx @@ -67,7 +67,7 @@ onto it, and it fades its content at whichever edge still has something to revea /> ```tsx -import { scrollAreaRoot, scrollAreaViewport } from '@clerk/ui/mosaic/components/scroll-area'; +import { scrollAreaRoot, scrollAreaViewport } from '@clerk/mosaic/components/scroll-area'; import * as stylex from '@stylexjs/stylex';
{children}}> diff --git a/packages/swingset/src/stories/item.stories.tsx b/packages/swingset/src/stories/item.stories.tsx index 6284e16da8e..bcedcc2c884 100644 --- a/packages/swingset/src/stories/item.stories.tsx +++ b/packages/swingset/src/stories/item.stories.tsx @@ -1,9 +1,9 @@ -import { Avatar } from '@clerk/ui/mosaic/components/avatar'; -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { Item } from '@clerk/ui/mosaic/components/item'; -import { scrollAreaRoot, scrollAreaViewport } from '@clerk/ui/mosaic/components/scroll-area'; -import { radiusVars, space } from '@clerk/ui/mosaic/tokens.stylex'; +import { Avatar } from '@clerk/mosaic/components/avatar'; +import { Button } from '@clerk/mosaic/components/button'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { Item } from '@clerk/mosaic/components/item'; +import { scrollAreaRoot, scrollAreaViewport } from '@clerk/mosaic/components/scroll-area'; +import { radiusVars, space } from '@clerk/mosaic/tokens.stylex'; import * as stylex from '@stylexjs/stylex'; import type { StoryMeta } from '@/lib/types'; @@ -22,7 +22,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Item', - source: 'packages/ui/src/mosaic/components/item/item.tsx', + source: 'packages/mosaic/src/components/item/item.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/menu.component.mdx b/packages/swingset/src/stories/menu.component.mdx index 8b0926f0534..9c93ba6a6a9 100644 --- a/packages/swingset/src/stories/menu.component.mdx +++ b/packages/swingset/src/stories/menu.component.mdx @@ -14,8 +14,8 @@ Click the trigger, then use the arrow keys or type to move between items. ## Usage ```tsx -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { Menu } from '@clerk/ui/mosaic/components/menu'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { Menu } from '@clerk/mosaic/components/menu'; @@ -216,10 +216,10 @@ const [open, setOpen] = useState(false); The Mosaic menu is themed with **StyleX**. Each styled part carries a stable `.cl-` class (the slots above) alongside the StyleX atoms. Consumers never target the hashed atomic classes — override by targeting the `.cl-*` slot from a CSS layer that wins -over `@clerk/ui/styles.css`: +over `@clerk/mosaic/styles.css`: ```css -@import '@clerk/ui/styles.css' layer(components); +@import '@clerk/mosaic/styles.css' layer(components); @layer overrides { .cl-menu-popup { diff --git a/packages/swingset/src/stories/menu.component.stories.tsx b/packages/swingset/src/stories/menu.component.stories.tsx index 57c44bc2b81..7b340c21e1a 100644 --- a/packages/swingset/src/stories/menu.component.stories.tsx +++ b/packages/swingset/src/stories/menu.component.stories.tsx @@ -1,6 +1,6 @@ -import { Avatar } from '@clerk/ui/mosaic/components/avatar'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { Menu } from '@clerk/ui/mosaic/components/menu'; +import { Avatar } from '@clerk/mosaic/components/avatar'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { Menu } from '@clerk/mosaic/components/menu'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Menu', - source: 'packages/ui/src/mosaic/components/menu/menu.tsx', + source: 'packages/mosaic/src/components/menu/menu.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/otp.component.mdx b/packages/swingset/src/stories/otp.component.mdx index a27f1291fe1..63441767d0e 100644 --- a/packages/swingset/src/stories/otp.component.mdx +++ b/packages/swingset/src/stories/otp.component.mdx @@ -33,7 +33,7 @@ Every prop of the headless [OTP primitive](/primitives/otp) passes through. The `length` defaults to `6`. Give the group an accessible name with `aria-label`, or place it in a `Field.Root` with a `Field.Label`. ```tsx -import { Otp } from '@clerk/ui/mosaic/components/otp'; +import { Otp } from '@clerk/mosaic/components/otp'; diff --git a/packages/swingset/src/stories/phone-input.stories.tsx b/packages/swingset/src/stories/phone-input.stories.tsx index 4eb44f5f828..a5b554fb9c6 100644 --- a/packages/swingset/src/stories/phone-input.stories.tsx +++ b/packages/swingset/src/stories/phone-input.stories.tsx @@ -1,8 +1,8 @@ 'use client'; -import { Field } from '@clerk/ui/mosaic/components/field'; -import type { PhoneInputProps } from '@clerk/ui/mosaic/components/phone-input'; -import { PhoneInput } from '@clerk/ui/mosaic/components/phone-input'; +import { Field } from '@clerk/mosaic/components/field'; +import type { PhoneInputProps } from '@clerk/mosaic/components/phone-input'; +import { PhoneInput } from '@clerk/mosaic/components/phone-input'; import * as stylex from '@stylexjs/stylex'; import type { StoryMeta } from '@/lib/types'; @@ -15,7 +15,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'PhoneInput', - source: 'packages/ui/src/mosaic/components/phone-input/phone-input.tsx', + source: 'packages/mosaic/src/components/phone-input/phone-input.tsx', styles: { _variants: { size: { sm: {}, md: {}, lg: {} }, diff --git a/packages/swingset/src/stories/popover.component.mdx b/packages/swingset/src/stories/popover.component.mdx index de466ce8971..53ea83deadd 100644 --- a/packages/swingset/src/stories/popover.component.mdx +++ b/packages/swingset/src/stories/popover.component.mdx @@ -16,9 +16,9 @@ anchor, and `Popover.Popup` is the floating box. Put the surface inside the popu see comes from the `Card`. ```tsx -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Card } from '@clerk/ui/mosaic/components/card'; -import { Popover } from '@clerk/ui/mosaic/components/popover'; +import { Button } from '@clerk/mosaic/components/button'; +import { Card } from '@clerk/mosaic/components/card'; +import { Popover } from '@clerk/mosaic/components/popover'; } /> @@ -183,10 +183,10 @@ them through your own typography (`Heading`, `Text`) inside the surface. The Mosaic popover is themed with **StyleX**. Each styled part carries a stable `.cl-` class (the slots in the table above) alongside the StyleX atoms. Consumers never target the hashed atomic classes — override by targeting the `.cl-*` slot from a -CSS layer that wins over `@clerk/ui/styles.css`: +CSS layer that wins over `@clerk/mosaic/styles.css`: ```css -@import '@clerk/ui/styles.css' layer(components); +@import '@clerk/mosaic/styles.css' layer(components); @layer overrides { .cl-popover-popup[data-size='lg'] { diff --git a/packages/swingset/src/stories/popover.component.stories.tsx b/packages/swingset/src/stories/popover.component.stories.tsx index 9decee751a4..8b905825a19 100644 --- a/packages/swingset/src/stories/popover.component.stories.tsx +++ b/packages/swingset/src/stories/popover.component.stories.tsx @@ -1,8 +1,8 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Card } from '@clerk/ui/mosaic/components/card'; -import { Heading } from '@clerk/ui/mosaic/components/heading'; -import { Popover } from '@clerk/ui/mosaic/components/popover'; -import { Text } from '@clerk/ui/mosaic/components/text'; +import { Button } from '@clerk/mosaic/components/button'; +import { Card } from '@clerk/mosaic/components/card'; +import { Heading } from '@clerk/mosaic/components/heading'; +import { Popover } from '@clerk/mosaic/components/popover'; +import { Text } from '@clerk/mosaic/components/text'; import * as stylex from '@stylexjs/stylex'; import type { StoryMeta } from '@/lib/types'; @@ -15,7 +15,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Popover', - source: 'packages/ui/src/mosaic/components/popover/popover.tsx', + source: 'packages/mosaic/src/components/popover/popover.tsx', }; const styles = stylex.create({ diff --git a/packages/swingset/src/stories/profile.component.mdx b/packages/swingset/src/stories/profile.component.mdx index 8b08f9d8df3..9331cc337d5 100644 --- a/packages/swingset/src/stories/profile.component.mdx +++ b/packages/swingset/src/stories/profile.component.mdx @@ -21,8 +21,8 @@ its dismiss, and fills the popup; standalone it paints the same frame and takes ## Usage ```tsx -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { Profile } from '@clerk/ui/mosaic/components/profile'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { Profile } from '@clerk/mosaic/components/profile'; new Promise(resolve => setTimeout(resolve, ms)); @@ -376,10 +376,10 @@ function OTPPanel({ resend={ renderResend ? { - label: isResending ? 'Sending a new code…' : 'Didn’t receive a code? Resend', - disabled: isResending, - onClick: () => setValue(''), - } + label: isResending ? 'Sending a new code…' : 'Didn’t receive a code? Resend', + disabled: isResending, + onClick: () => setValue(''), + } : undefined } onValueChange={setValue} diff --git a/packages/swingset/src/stories/scroll-area.mdx b/packages/swingset/src/stories/scroll-area.mdx index f6faf26245d..3419909dda2 100644 --- a/packages/swingset/src/stories/scroll-area.mdx +++ b/packages/swingset/src/stories/scroll-area.mdx @@ -21,7 +21,7 @@ slot class, which stays the hook a theme targets. spreads it into `stylex.props`. ```tsx -import { scrollAreaRoot, scrollAreaViewport } from '@clerk/ui/mosaic/components/scroll-area'; +import { scrollAreaRoot, scrollAreaViewport } from '@clerk/mosaic/components/scroll-area'; import * as stylex from '@stylexjs/stylex';
Account diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx index d1d2cbe3076..2947609d878 100644 --- a/packages/swingset/src/stories/section.stories.tsx +++ b/packages/swingset/src/stories/section.stories.tsx @@ -1,9 +1,9 @@ -import { Avatar } from '@clerk/ui/mosaic/components/avatar'; -import { Badge } from '@clerk/ui/mosaic/components/badge'; -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Icon, IconFrame } from '@clerk/ui/mosaic/components/icon'; -import { Section } from '@clerk/ui/mosaic/components/section'; -import { space } from '@clerk/ui/mosaic/tokens.stylex'; +import { Avatar } from '@clerk/mosaic/components/avatar'; +import { Badge } from '@clerk/mosaic/components/badge'; +import { Button } from '@clerk/mosaic/components/button'; +import { Icon, IconFrame } from '@clerk/mosaic/components/icon'; +import { Section } from '@clerk/mosaic/components/section'; +import { space } from '@clerk/mosaic/tokens.stylex'; import * as stylex from '@stylexjs/stylex'; import type { StoryMeta } from '@/lib/types'; @@ -41,7 +41,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'Section', - source: 'packages/ui/src/mosaic/components/section/section.tsx', + source: 'packages/mosaic/src/components/section/section.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/text.mdx b/packages/swingset/src/stories/text.mdx index a9a325cc4e9..45ef7fb987d 100644 --- a/packages/swingset/src/stories/text.mdx +++ b/packages/swingset/src/stories/text.mdx @@ -22,7 +22,7 @@ Text renders body copy in Mosaic. It renders as a `

` by default, forwards a r This is a paragraph of body text. diff --git a/packages/swingset/src/stories/text.stories.tsx b/packages/swingset/src/stories/text.stories.tsx index a40a0eaf8d2..8416adecb07 100644 --- a/packages/swingset/src/stories/text.stories.tsx +++ b/packages/swingset/src/stories/text.stories.tsx @@ -1,5 +1,5 @@ -import type { TextProps } from '@clerk/ui/mosaic/components/text'; -import { Text } from '@clerk/ui/mosaic/components/text'; +import type { TextProps } from '@clerk/mosaic/components/text'; +import { Text } from '@clerk/mosaic/components/text'; import type { StoryMeta } from '@/lib/types'; @@ -11,7 +11,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'wip', title: 'Text', - source: 'packages/ui/src/mosaic/components/text/text.tsx', + source: 'packages/mosaic/src/components/text/text.tsx', styles: { _variants: { size: { xs: {}, sm: {}, base: {}, lg: {}, xl: {}, '2xl': {} }, diff --git a/packages/swingset/src/stories/user-button.mdx b/packages/swingset/src/stories/user-button.mdx index fcde080d165..54f60b08a6e 100644 --- a/packages/swingset/src/stories/user-button.mdx +++ b/packages/swingset/src/stories/user-button.mdx @@ -34,7 +34,7 @@ that would navigate (Manage, Invite, Create organization, Add account) only clos `UserButtonView` renders trigger and popup from one prop-driven call: ```tsx -import { UserButtonView } from '@clerk/ui/mosaic/features/user-button/user-button.view'; +import { UserButtonView } from '@clerk/mosaic/features/user-button/user-button.view'; diff --git a/packages/swingset/src/stories/user-button.stories.tsx b/packages/swingset/src/stories/user-button.stories.tsx index c69edb070fd..32cef5540da 100644 --- a/packages/swingset/src/stories/user-button.stories.tsx +++ b/packages/swingset/src/stories/user-button.stories.tsx @@ -1,4 +1,4 @@ -import { Icon } from '@clerk/ui/mosaic/components/icon'; +import { Icon } from '@clerk/mosaic/components/icon'; import { userButtonBusyKeys, type UserButtonInvitation, @@ -7,7 +7,7 @@ import { type UserButtonSession, type UserButtonSuggestion, UserButtonView, -} from '@clerk/ui/mosaic/features/user-button/user-button.view'; +} from '@clerk/mosaic/features/user-button/user-button.view'; import { useEffect, useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -22,7 +22,7 @@ export const meta: StoryMeta = { label: 'User button', status: 'wip', substatus: 'needs wire-up', - source: 'packages/ui/src/mosaic/features/user-button/user-button.view.tsx', + source: 'packages/mosaic/src/features/user-button/user-button.view.tsx', }; // Accounts wear their own photo. Only the flagship workspace carries the Clerk mark; the rest wear diff --git a/packages/swingset/src/stories/user-profile-account-section.stories.tsx b/packages/swingset/src/stories/user-profile-account-section.stories.tsx index 3455995cda2..22aea5a1c8f 100644 --- a/packages/swingset/src/stories/user-profile-account-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-account-section.stories.tsx @@ -1,13 +1,13 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; +import { Button } from '@clerk/mosaic/components/button'; +import type { UserProfileFormError } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; import type { UserProfileEmail, UserProfilePhone, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; -import { UserProfileAccountSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; -import type { UserProfileAddPhoneDialogProps } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog'; -import { UserProfileVerifyEmailLinkDialog } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog'; -import { UserProfileVerifyEmailSsoDialog } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog'; +} from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; +import { UserProfileAccountSectionView } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view'; +import type { UserProfileAddPhoneDialogProps } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-add-phone.dialog'; +import { UserProfileVerifyEmailLinkDialog } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-link.dialog'; +import { UserProfileVerifyEmailSsoDialog } from '@clerk/mosaic/features/user-profile/user-profile-account-section/user-profile-verify-email-sso.dialog'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -28,8 +28,7 @@ export const meta: StoryMeta = { title: 'UserProfileAccountSection', label: 'Account', navigation: { category: 'Sections' }, - source: - 'packages/ui/src/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx', }; function AccountSection({ diff --git a/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx b/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx index 9b5500e959f..96b45b3ad0f 100644 --- a/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-active-devices-section.stories.tsx @@ -1,5 +1,5 @@ -import type { UserProfileDevice } from '@clerk/ui/mosaic/features/user-profile/user-profile-active-devices-section.view'; -import { UserProfileActiveDevicesSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-active-devices-section.view'; +import type { UserProfileDevice } from '@clerk/mosaic/features/user-profile/user-profile-active-devices-section.view'; +import { UserProfileActiveDevicesSectionView } from '@clerk/mosaic/features/user-profile/user-profile-active-devices-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfileActiveDevicesSection', label: 'Active devices', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-active-devices-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx b/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx index 3f2e5c6c73b..5f7c88fe296 100644 --- a/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx @@ -1,5 +1,5 @@ -import type { UserProfileAPIKey } from '@clerk/ui/mosaic/features/user-profile/user-profile-api-keys-panel.view'; -import { UserProfileApiKeysPanelView } from '@clerk/ui/mosaic/features/user-profile/user-profile-api-keys-panel.view'; +import type { UserProfileAPIKey } from '@clerk/mosaic/features/user-profile/user-profile-api-keys-panel.view'; +import { UserProfileApiKeysPanelView } from '@clerk/mosaic/features/user-profile/user-profile-api-keys-panel.view'; import { useMemo, useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfileApiKeysPanel', label: 'API keys panel', navigation: { category: 'Panels' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-api-keys-panel.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx', }; const initialAPIKeys: UserProfileAPIKey[] = [ diff --git a/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx b/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx index 8d6cddb3c96..b584a1d08b6 100644 --- a/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-billing-history-section.stories.tsx @@ -1,5 +1,5 @@ -import type { UserProfileBillingHistoryItem } from '@clerk/ui/mosaic/features/user-profile/user-profile-billing-history-section.view'; -import { UserProfileBillingHistorySectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-billing-history-section.view'; +import type { UserProfileBillingHistoryItem } from '@clerk/mosaic/features/user-profile/user-profile-billing-history-section.view'; +import { UserProfileBillingHistorySectionView } from '@clerk/mosaic/features/user-profile/user-profile-billing-history-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfileBillingHistorySection', label: 'Billing history', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-billing-history-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx', }; const items: UserProfileBillingHistoryItem[] = [ diff --git a/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx b/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx index 8bbe4130ab1..297c6533dd0 100644 --- a/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-billing-panel.stories.tsx @@ -2,8 +2,8 @@ import type { UserProfileBillingHistoryItem, UserProfilePaymentMethod, UserProfileSubscription, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-billing-panel.view'; -import { UserProfileBillingPanelView } from '@clerk/ui/mosaic/features/user-profile/user-profile-billing-panel.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-billing-panel.view'; +import { UserProfileBillingPanelView } from '@clerk/mosaic/features/user-profile/user-profile-billing-panel.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -16,7 +16,7 @@ export const meta: StoryMeta = { title: 'UserProfileBillingPanel', label: 'Billing panel', navigation: { category: 'Panels' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-billing-panel.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx', }; const initialSubscription: UserProfileSubscription = { diff --git a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx index bd4276360a7..63f7d06698e 100644 --- a/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-connected-accounts-section.stories.tsx @@ -1,4 +1,4 @@ -import { UserProfileConnectedAccountsSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-connected-accounts-section.view'; +import { UserProfileConnectedAccountsSectionView } from '@clerk/mosaic/features/user-profile/user-profile-connected-accounts-section.view'; import type { StoryMeta } from '@/lib/types'; @@ -11,7 +11,7 @@ export const meta: StoryMeta = { title: 'UserProfileConnectedAccountsSection', label: 'Connected accounts', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-connected-accounts-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx', }; export function Default() { const fixture = useConnectedAccountsFixture(); diff --git a/packages/swingset/src/stories/user-profile-delete-section.stories.tsx b/packages/swingset/src/stories/user-profile-delete-section.stories.tsx index 2e82a58cc04..9be6612ca04 100644 --- a/packages/swingset/src/stories/user-profile-delete-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-delete-section.stories.tsx @@ -1,4 +1,4 @@ -import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.view'; +import { UserProfileDeleteSectionView } from '@clerk/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -11,8 +11,7 @@ export const meta: StoryMeta = { title: 'UserProfileDeleteSection', label: 'Danger zone', navigation: { category: 'Sections' }, - source: - 'packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.view.tsx', }; // A real delete is a network round trip. Without one the button never renders its pending diff --git a/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx b/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx index c1877cb9eb3..1c7d969a6b4 100644 --- a/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx @@ -1,4 +1,4 @@ -import { UserProfileEnterpriseAccountsSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view'; +import { UserProfileEnterpriseAccountsSectionView } from '@clerk/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view'; import type { StoryMeta } from '@/lib/types'; diff --git a/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx b/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx index 74296624c8b..dc0c89f72a2 100644 --- a/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-mfa-section.stories.tsx @@ -1,5 +1,5 @@ -import type { UserProfileMfaMethod } from '@clerk/ui/mosaic/features/user-profile/user-profile-mfa-section.view'; -import { UserProfileMfaSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-mfa-section.view'; +import type { UserProfileMfaMethod } from '@clerk/mosaic/features/user-profile/user-profile-mfa-section.view'; +import { UserProfileMfaSectionView } from '@clerk/mosaic/features/user-profile/user-profile-mfa-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfileMfaSection', label: '2-step verification', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-mfa-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx index 571266f1f0d..42e928ae9dd 100644 --- a/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-passkeys-section.stories.tsx @@ -1,5 +1,5 @@ -import type { UserProfilePasskey } from '@clerk/ui/mosaic/features/user-profile/user-profile-passkeys-section.view'; -import { UserProfilePasskeysSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-passkeys-section.view'; +import type { UserProfilePasskey } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view'; +import { UserProfilePasskeysSectionView } from '@clerk/mosaic/features/user-profile/user-profile-passkeys-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfilePasskeysSection', label: 'Passkeys', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-passkeys-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile-password-section.stories.tsx b/packages/swingset/src/stories/user-profile-password-section.stories.tsx index 2a70194d300..a5c076671a3 100644 --- a/packages/swingset/src/stories/user-profile-password-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-password-section.stories.tsx @@ -1,5 +1,4 @@ -import type { UserProfileFormError } from '@clerk/ui/mosaic/features/user-profile/user-profile-account-section/user-profile-account-section.types'; -import { UserProfilePasswordSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view'; +import { UserProfilePasswordSectionView } from '@clerk/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view'; import type { StoryMeta } from '@/lib/types'; @@ -13,8 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfilePasswordSection', label: 'Password', navigation: { category: 'Sections' }, - source: - 'packages/ui/src/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx', }; function PasswordSection({ diff --git a/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx b/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx index 4275021a98d..029dd2d382a 100644 --- a/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-payment-methods-section.stories.tsx @@ -1,5 +1,5 @@ -import type { UserProfilePaymentMethod } from '@clerk/ui/mosaic/features/user-profile/user-profile-payment-methods-section.view'; -import { UserProfilePaymentMethodsSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-payment-methods-section.view'; +import type { UserProfilePaymentMethod } from '@clerk/mosaic/features/user-profile/user-profile-payment-methods-section.view'; +import { UserProfilePaymentMethodsSectionView } from '@clerk/mosaic/features/user-profile/user-profile-payment-methods-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { title: 'UserProfilePaymentMethodsSection', label: 'Payment methods', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-payment-methods-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile-profile-panel.mdx b/packages/swingset/src/stories/user-profile-profile-panel.mdx index b2c112dc61f..7e392ec0679 100644 --- a/packages/swingset/src/stories/user-profile-profile-panel.mdx +++ b/packages/swingset/src/stories/user-profile-profile-panel.mdx @@ -16,7 +16,7 @@ import * as UserProfileProfilePanelStories from './user-profile-profile-panel.st ## Usage ```tsx -import { UserProfileProfilePanelView } from '@clerk/ui/mosaic/features/user-profile/user-profile-profile-panel.view'; +import { UserProfileProfilePanelView } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view'; ) { diff --git a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx index 4536f8f51e8..5cb391dad9a 100644 --- a/packages/swingset/src/stories/user-profile-security-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-security-panel.stories.tsx @@ -2,8 +2,8 @@ import type { UserProfileDevice, UserProfileMfaMethod, UserProfilePasskey, -} from '@clerk/ui/mosaic/features/user-profile/user-profile-security-panel.view'; -import { UserProfileSecurityPanelView } from '@clerk/ui/mosaic/features/user-profile/user-profile-security-panel.view'; +} from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view'; +import { UserProfileSecurityPanelView } from '@clerk/mosaic/features/user-profile/user-profile-security-panel.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -18,7 +18,7 @@ export const meta: StoryMeta = { title: 'UserProfileSecurityPanel', label: 'Security panel', navigation: { category: 'Panels' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-security-panel.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx b/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx index 4a20ac0539f..6088d5cb3f6 100644 --- a/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-subscription-section.stories.tsx @@ -1,4 +1,4 @@ -import { UserProfileSubscriptionSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-subscription-section.view'; +import { UserProfileSubscriptionSectionView } from '@clerk/mosaic/features/user-profile/user-profile-subscription-section.view'; import { useState } from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -11,7 +11,7 @@ export const meta: StoryMeta = { title: 'UserProfileSubscriptionSection', label: 'Subscription', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-subscription-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-subscription-section.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx b/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx index cd446a95a9c..894cdd5963a 100644 --- a/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-web3-wallets-section.stories.tsx @@ -1,4 +1,4 @@ -import { UserProfileWeb3WalletsSectionView } from '@clerk/ui/mosaic/features/user-profile/user-profile-web3-wallets-section.view'; +import { UserProfileWeb3WalletsSectionView } from '@clerk/mosaic/features/user-profile/user-profile-web3-wallets-section.view'; import type { StoryMeta } from '@/lib/types'; @@ -13,7 +13,7 @@ export const meta: StoryMeta = { title: 'UserProfileWeb3WalletsSection', label: 'Web3 wallets', navigation: { category: 'Sections' }, - source: 'packages/ui/src/mosaic/features/user-profile/user-profile-web3-wallets-section.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx', }; export function Default() { diff --git a/packages/swingset/src/stories/user-profile.stories.tsx b/packages/swingset/src/stories/user-profile.stories.tsx index 5ecdaecdd7c..04a8034c036 100644 --- a/packages/swingset/src/stories/user-profile.stories.tsx +++ b/packages/swingset/src/stories/user-profile.stories.tsx @@ -1,6 +1,6 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Dialog } from '@clerk/ui/mosaic/components/dialog'; -import { UserProfileView } from '@clerk/ui/mosaic/features/user-profile/user-profile.view'; +import { Button } from '@clerk/mosaic/components/button'; +import { Dialog } from '@clerk/mosaic/components/dialog'; +import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; import type { StoryMeta } from '@/lib/types'; @@ -14,7 +14,7 @@ export const meta: StoryMeta = { title: 'UserProfile', label: 'User profile', layout: 'wide', - source: 'packages/ui/src/mosaic/features/user-profile/user-profile.view.tsx', + source: 'packages/mosaic/src/features/user-profile/user-profile.view.tsx', }; /** diff --git a/packages/swingset/src/stories/visually-hidden.mdx b/packages/swingset/src/stories/visually-hidden.mdx index e706d82c39b..74678b99ddb 100644 --- a/packages/swingset/src/stories/visually-hidden.mdx +++ b/packages/swingset/src/stories/visually-hidden.mdx @@ -22,7 +22,7 @@ Prefer it over `display: none` or `visibility: hidden`, which remove the content Sign out diff --git a/packages/swingset/src/stories/visually-hidden.stories.tsx b/packages/swingset/src/stories/visually-hidden.stories.tsx index c8d2f487713..f081a3e81d4 100644 --- a/packages/swingset/src/stories/visually-hidden.stories.tsx +++ b/packages/swingset/src/stories/visually-hidden.stories.tsx @@ -1,8 +1,8 @@ -import { Button } from '@clerk/ui/mosaic/components/button'; -import { Icon } from '@clerk/ui/mosaic/components/icon'; -import { Text } from '@clerk/ui/mosaic/components/text'; -import type { VisuallyHiddenProps } from '@clerk/ui/mosaic/components/visually-hidden'; -import { VisuallyHidden } from '@clerk/ui/mosaic/components/visually-hidden'; +import { Button } from '@clerk/mosaic/components/button'; +import { Icon } from '@clerk/mosaic/components/icon'; +import { Text } from '@clerk/mosaic/components/text'; +import type { VisuallyHiddenProps } from '@clerk/mosaic/components/visually-hidden'; +import { VisuallyHidden } from '@clerk/mosaic/components/visually-hidden'; import * as React from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -15,7 +15,7 @@ export const meta: StoryMeta = { group: 'Components', status: 'stable', title: 'VisuallyHidden', - source: 'packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx', + source: 'packages/mosaic/src/components/visually-hidden/visually-hidden.tsx', }; function knobsAsProps(props: Record) { diff --git a/packages/swingset/tsconfig.json b/packages/swingset/tsconfig.json index 10b28314518..ee71077ef99 100644 --- a/packages/swingset/tsconfig.json +++ b/packages/swingset/tsconfig.json @@ -11,8 +11,8 @@ "lib": ["ES2023", "DOM"], "paths": { "@/*": ["./src/*"], - "@clerk/ui/mosaic": ["../ui/src/mosaic"], - "@clerk/ui/mosaic/*": ["../ui/src/mosaic/*"], + "@clerk/mosaic": ["../mosaic/src"], + "@clerk/mosaic/*": ["../mosaic/src/*"], "@clerk/headless/hooks": ["../headless/src/hooks"], "@clerk/headless/*": ["../headless/src/primitives/*"] }, From 69698205ac2888076a686f253443f47373edfafe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Tue, 15 Sep 2026 15:36:12 +0200 Subject: [PATCH 04/18] docs(mosaic): retarget mosaic docs and eslint --- .changeset/extract-mosaic-package.md | 8 +++ .claude/skills/clerk-monorepo/SKILL.md | 5 +- .../clerk-monorepo/references/package-map.md | 11 ++-- .claude/skills/mosaic/SKILL.md | 4 +- .../skills/mosaic/references/controllers.md | 6 +- .claude/skills/mosaic/references/headless.md | 6 +- .claude/skills/mosaic/references/machines.md | 4 +- .claude/skills/mosaic/references/migration.md | 2 +- .claude/skills/mosaic/references/models.md | 2 +- .claude/skills/mosaic/references/motion.md | 2 +- .claude/skills/mosaic/references/stylex.md | 16 ++--- .claude/skills/mosaic/references/testing.md | 4 +- eslint.config.mjs | 10 +-- packages/headless/README.md | 2 +- packages/ui/stylex-lightningcss.config.mjs | 17 ----- references/mosaic-architecture.md | 62 +++++++++---------- 16 files changed, 78 insertions(+), 83 deletions(-) create mode 100644 .changeset/extract-mosaic-package.md delete mode 100644 packages/ui/stylex-lightningcss.config.mjs diff --git a/.changeset/extract-mosaic-package.md b/.changeset/extract-mosaic-package.md new file mode 100644 index 00000000000..bdcba31465a --- /dev/null +++ b/.changeset/extract-mosaic-package.md @@ -0,0 +1,8 @@ +--- +'@clerk/mosaic': minor +'@clerk/ui': patch +--- + +Add `@clerk/mosaic`, an experimental standalone package for next generation Clerk components. + +If you try this out, make sure to pin your version as breaking changes can happen in minors. diff --git a/.claude/skills/clerk-monorepo/SKILL.md b/.claude/skills/clerk-monorepo/SKILL.md index e94e35f3480..b42b93ffb3e 100644 --- a/.claude/skills/clerk-monorepo/SKILL.md +++ b/.claude/skills/clerk-monorepo/SKILL.md @@ -11,7 +11,7 @@ description: >- # Working in the clerk/javascript monorepo -This is Clerk's JavaScript SDK monorepo: 24 packages (21 published `@clerk/*` plus the private +This is Clerk's JavaScript SDK monorepo: 25 packages (22 published `@clerk/*` plus the private `@clerk/msw`, `@clerk/headless`, and `@clerk/swingset`) managed with pnpm workspaces and Turborepo. Read this before building, testing, committing, or touching anything under `packages/`. @@ -39,7 +39,7 @@ Full sequence, the 11 footguns, and the internal integration-test / 1Password se ## Package map: where does X live? -The ~10 packages people touch most. Full 24-package table, the dependency pyramid, and the complete +The ~10 packages people touch most. Full 25-package table, the dependency pyramid, and the complete "change X, touch Y" routing are in [`references/package-map.md`](references/package-map.md). | Package | You change it when... | @@ -48,6 +48,7 @@ The ~10 packages people touch most. Full 24-package table, the dependency pyrami | `@clerk/backend` | Server-side: JWT verification, the Backend API REST client, webhooks. Used by every framework adapter. | | `@clerk/clerk-js` | ⚠️ The browser runtime loaded via script tag. **Backwards-compat sensitive** (see rules). | | `@clerk/ui` | ⚠️ The React components powering the hosted sign-in / sign-up UI. **Backwards-compat sensitive**. | +| `@clerk/mosaic` | Experimental next-generation components (`UserButton` today). Independently releasable; reads Clerk context from the host SDK. | | `@clerk/react` | Shared React hooks/context (`useAuth`, `useUser`, ...) consumed by the React-based adapters. | | `@clerk/nextjs` | Next.js SDK: middleware, route handlers, server components. | | `@clerk/express` | Express middleware and server helpers. | diff --git a/.claude/skills/clerk-monorepo/references/package-map.md b/.claude/skills/clerk-monorepo/references/package-map.md index 450f895e64c..6816c67dc40 100644 --- a/.claude/skills/clerk-monorepo/references/package-map.md +++ b/.claude/skills/clerk-monorepo/references/package-map.md @@ -1,6 +1,6 @@ # Package map -The 24 active, git-tracked packages, the dependency shape, and the full "change X, touch Y" routing. +The 25 active, git-tracked packages, the dependency shape, and the full "change X, touch Y" routing. `SKILL.md` has the short version (the ~10 packages people touch most). > The authoritative package list is the set of `packages/*/package.json` files tracked in git. The @@ -22,7 +22,8 @@ backwards-compatibility contract (see `breaking-changes.md`). | `@clerk/backend` | foundational | | Backend API REST client, JWT verification, webhook helpers. Used by every server adapter. | | `@clerk/clerk-js` | browser-runtime | ⚠️ | The browser runtime (script tag). Backwards-compat sensitive. | | `@clerk/ui` | ui | ⚠️ | React components for the hosted sign-in / sign-up flows (`packages/ui/src/components`). Consumed by the react/astro/vue/chrome-extension adapters. Backwards-compat sensitive. | -| `@clerk/headless` | ui | | Unstyled, accessible UI primitives (dialog, menu, popover, ...) consumed by `@clerk/ui`. Private (not published). | +| `@clerk/mosaic` | ui | | Experimental next-generation React components. Public ESM package (`UserButton` + `styles.css`). Reads Clerk context from the host SDK via `@clerk/shared`. | +| `@clerk/headless` | ui | | Unstyled, accessible UI primitives (dialog, menu, popover, ...) consumed by `@clerk/mosaic`. Private (not published); bundled into Mosaic's published artifact. | | `@clerk/react` | adapter (core) | | React hooks and context (`useAuth`, `useUser`, `useOrganization`, ...). Shared by the React-based adapters. | | `@clerk/nextjs` | adapter | | Next.js SDK: middleware, route handlers, server components. | | `@clerk/express` | adapter | | Express middleware and server helpers. | @@ -39,7 +40,7 @@ backwards-compatibility contract (see `breaking-changes.md`). | `@clerk/localizations` | ui/i18n | | Translation strings for the UI components. Consumed by `ui`. | | `@clerk/testing` | tooling | | E2E test helpers for consumers (Playwright + Cypress). | | `@clerk/msw` | tooling | | MSW request handlers for mocking the Clerk API in tests. Private (not published). | -| `@clerk/swingset` | tooling | | Component explorer for `@clerk/ui`'s Mosaic design system. Private (not published). | +| `@clerk/swingset` | tooling | | Component explorer for `@clerk/mosaic`. Private (not published). | | `@clerk/upgrade` | tooling | | CLI codemod tool for upgrading consumers between SDK versions. | | `@clerk/eslint-plugin` | tooling | | ESLint plugin enforcing Clerk patterns across JavaScript frameworks (lint rules shipped to apps). Published. | @@ -57,7 +58,8 @@ script. / | \ nextjs react-router expo ... (framework adapters: consume react + backend + shared) - @clerk/ui ──uses──▶ @clerk/localizations, @clerk/headless (UI components; consumed by react / astro / vue / chrome-extension) + @clerk/mosaic ──uses──▶ @clerk/shared; bundles @clerk/headless + @clerk/ui ──uses──▶ @clerk/localizations (hosted UI; consumed by react / astro / vue / chrome-extension) @clerk/clerk-js (standalone browser runtime, script tag; delivered alongside @clerk/ui) ``` @@ -77,6 +79,7 @@ error traces back to it, rebuild shared: `pnpm turbo build --filter=@clerk/share `@clerk/react`. Changes propagate to `nextjs`, `react-router`, `tanstack-react-start`, `expo`, `chrome-extension` (all consume `@clerk/react`; note `expo` wraps `useAuth` rather than just re-exporting it). +- **Mosaic components (`UserButton`, StyleX parts, flow views)**: `packages/mosaic/src` (`@clerk/mosaic`). Preview in Swingset (`pnpm dev:swingset`). Headless primitives stay in `packages/headless` and are bundled into Mosaic. Mosaic-only changesets should not list `@clerk/react` or `@clerk/nextjs`. - **The hosted sign-in / sign-up UI (components, layout)**: `packages/ui/src/components` (`@clerk/ui`). Strings live in `packages/localizations/src`. `@clerk/ui` is consumed by the `react`/`astro`/`vue`/`chrome-extension` adapters; its compiled runtime is delivered alongside diff --git a/.claude/skills/mosaic/SKILL.md b/.claude/skills/mosaic/SKILL.md index 5142aeb49c4..c69d35916f1 100644 --- a/.claude/skills/mosaic/SKILL.md +++ b/.claude/skills/mosaic/SKILL.md @@ -48,7 +48,7 @@ ways a controller can hold its state, and picking one is a complexity call: interaction has an async lifecycle or two values that must change together, and sometimes both in one controller. Either way the controller returns plain props, so the view cannot tell and neither can its tests. Criteria and worked -before/afters: `packages/ui/src/mosaic/machine/ADOPTION.md`. +before/afters: `packages/mosaic/src/machine/ADOPTION.md`. `references/mosaic-architecture.md` (repo root, read by all agents) is the canonical contract for the whole design system — the `--cl-*` tokens, the @@ -56,7 +56,7 @@ canonical contract for the whole design system — the `--cl-*` tokens, the architecture" section that defines the split. Read it for the _what_; this skill is the _how-to_. -`packages/ui/src/mosaic/features/user-button/` is the fullest worked example of the split +`packages/mosaic/src/features/user-button/` is the fullest worked example of the split in the repo — model, controller, view, wrapper, types, messages, and a test per layer. Copy from it. diff --git a/.claude/skills/mosaic/references/controllers.md b/.claude/skills/mosaic/references/controllers.md index d419af5c5d9..804f1b823d7 100644 --- a/.claude/skills/mosaic/references/controllers.md +++ b/.claude/skills/mosaic/references/controllers.md @@ -11,8 +11,8 @@ against a fake object instead of a mocked Clerk. Worked examples: -- `packages/ui/src/mosaic/features/user-button/user-button.controller.tsx` — wraps a model -- `packages/ui/src/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts` +- `packages/mosaic/src/features/user-button/user-button.controller.tsx` — wraps a model +- `packages/mosaic/src/features/user-profile/user-profile-delete-section/user-profile-delete-section.controller.ts` — takes its one effect as a prop See `references/mosaic-architecture.md` → "Controllers" for the layer contract. @@ -55,7 +55,7 @@ later is a change to one file. Don't front-load a machine for a flow that has not earned one; don't leave a coordinated async flow in flag soup because it started as one boolean. -`packages/ui/src/mosaic/machine/ADOPTION.md` is the full criteria, including its +`packages/mosaic/src/machine/ADOPTION.md` is the full criteria, including its "honest boundary" table of what stays `useState` inside a component that does have a machine. diff --git a/.claude/skills/mosaic/references/headless.md b/.claude/skills/mosaic/references/headless.md index 828902d76af..b1c8ab4c7eb 100644 --- a/.claude/skills/mosaic/references/headless.md +++ b/.claude/skills/mosaic/references/headless.md @@ -7,9 +7,9 @@ styles** — positioning, keyboard nav, focus management, dismiss, and ARIA are delegated to `@floating-ui/react`; all appearance is applied externally via `data-*` selectors and consumer classNames. -The package is `private: true` and consumed by `@clerk/ui`. It's a separate -package because `@clerk/ui` sets `jsxImportSource: '@emotion/react'`, which -conflicts with the standard `react-jsx` transform these primitives need. +The package is `private: true` and consumed by `@clerk/mosaic`. It is planned +to later move into the Mosaic package. Mosaic currently bundles Headless into +its published artifact. ## Read this for the _what_ diff --git a/.claude/skills/mosaic/references/machines.md b/.claude/skills/mosaic/references/machines.md index 252055d9165..ea1db234cdb 100644 --- a/.claude/skills/mosaic/references/machines.md +++ b/.claude/skills/mosaic/references/machines.md @@ -18,12 +18,12 @@ The machine runtime is documented **next to the code**, and that in-tree doc is the source of truth (it is updated in the same diff when the runtime changes and is readable by every tool, not just Claude Code). Read: -- **`packages/ui/src/mosaic/machine/README.md`** — the mental model (state / +- **`packages/mosaic/src/machine/README.md`** — the mental model (state / event / context / transition), your first machine, `setup` to drop the type boilerplate, running it with `createActor` / `useMachine`, and the API at a glance (`assign`, `invoke`, `guard`, `always`, `entry`/`exit`, `final`, `mockActor`, `useActor`, `useSelector`, `recheck()`). -- **`packages/ui/src/mosaic/machine/ADOPTION.md`** — when a flow is worth a +- **`packages/mosaic/src/machine/ADOPTION.md`** — when a flow is worth a machine and when it isn't. Two directories one letter apart: `machine/` is the runtime, `machines/` holds diff --git a/.claude/skills/mosaic/references/migration.md b/.claude/skills/mosaic/references/migration.md index f41723cdf7c..b05f8ec5568 100644 --- a/.claude/skills/mosaic/references/migration.md +++ b/.claude/skills/mosaic/references/migration.md @@ -3,7 +3,7 @@ Migrating a legacy component means taking logic that was fused into one file and pulling it apart into the model / controller / view layers (see the skill overview and `references/mosaic-architecture.md` → "Flow and data architecture"). -`packages/ui/src/mosaic/features/user-button/` is the fullest worked example of the +`packages/mosaic/src/features/user-button/` is the fullest worked example of the finished shape. **The core risk this workflow exists to manage:** a legacy component fuses diff --git a/.claude/skills/mosaic/references/models.md b/.claude/skills/mosaic/references/models.md index 8f1106532e7..f685f84ac73 100644 --- a/.claude/skills/mosaic/references/models.md +++ b/.claude/skills/mosaic/references/models.md @@ -5,7 +5,7 @@ Mosaic flow that may import Clerk hooks or call Clerk resource methods** — the controller (`controllers.md`) and the view (`views.md`) stay Clerk-free, which is what makes both testable without a Clerk fixture. -Worked example: `packages/ui/src/mosaic/features/user-button/user-button.model.tsx`. See +Worked example: `packages/mosaic/src/features/user-button/user-button.model.tsx`. See `references/mosaic-architecture.md` → "Models" for the layer contract. ## Shape diff --git a/.claude/skills/mosaic/references/motion.md b/.claude/skills/mosaic/references/motion.md index 7a1504090ed..1b9eb34ebc5 100644 --- a/.claude/skills/mosaic/references/motion.md +++ b/.claude/skills/mosaic/references/motion.md @@ -1,6 +1,6 @@ # Motion: entrances and exits -Token semantics live in `packages/ui/src/mosaic/tokens.stylex.ts`, above +Token semantics live in `packages/mosaic/src/tokens.stylex.ts`, above `durationDefaults` / `easingDefaults` — read those comments first. This file is the how-to layer: the rules that decide a transition's shape, and how to check one rather than eyeball it. diff --git a/.claude/skills/mosaic/references/stylex.md b/.claude/skills/mosaic/references/stylex.md index abf9e762a9c..49a9041db4a 100644 --- a/.claude/skills/mosaic/references/stylex.md +++ b/.claude/skills/mosaic/references/stylex.md @@ -3,7 +3,7 @@ Mosaic is styled with **StyleX** (`@stylexjs/stylex` 0.19). StyleX is compile-time atomic CSS: the style objects become hashed atom classes plus one static stylesheet, with zero runtime. This file is the authoring model; read it -against the reference component, `packages/ui/src/mosaic/components/button/`. +against the reference component, `packages/mosaic/src/components/button/`. Consumers target `--cl-*` vars, the `.cl-` class, and `data-` attrs, never StyleX's hashed `x…` atoms. That public contract is fixed; everything @@ -303,8 +303,8 @@ device, while touch devices look correct. but it depends on StyleX's emission order for the tiebreak and duplicates the value in every cell. - Applies to any state pair where one side is inside an at-rule and the other is - not. Confirm the output rather than trusting it: `pnpm build:mosaic --filter @clerk/ui`, - then grep `dist-mosaic/styles.css` for the two selectors and compare their + not. Confirm the output rather than trusting it: `pnpm build --filter @clerk/mosaic`, + then grep `dist/styles.css` for the two selectors and compare their specificity. - **A button that opens something takes the pressed fill while open**, so a @@ -329,7 +329,7 @@ device, while touch devices look correct. Worked example: `button.styles.ts`, applied across every filled/outline/ghost cell (`link` opts out — it reads as text, not a control). -Worked example: `packages/ui/src/mosaic/components/button/button.styles.ts`. +Worked example: `packages/mosaic/src/components/button/button.styles.ts`. - **DON'T** write a focus ring by hand. Compose `focusOutline` from `utils/focus-outline.styles.ts` into the element's `stylex.props(...)`: @@ -682,10 +682,10 @@ export interface PopoverPopupProps extends MosaicComponentProps<'div'> { … } ## Build & CSS delivery (two contexts, same babel) -- **Published** (`build:mosaic` → `@stylexjs/rollup-plugin`): compiles the - `styles/index.ts` barrel into `dist-mosaic/styles.css`, exported as - `@clerk/ui/styles.css`. Consumers choose the cascade layer at import: - `@import '@clerk/ui/styles.css' layer(components)`. +- **Published** (`pnpm build` in `@clerk/mosaic` → `@stylexjs/rollup-plugin`): compiles the + `styles/index.ts` barrel into `dist/styles.css`, exported as + `@clerk/mosaic/styles.css`. Consumers choose the cascade layer at import: + `@import '@clerk/mosaic/styles.css' layer(components)`. - **Swingset** (source-consumed): `@stylexjs/unplugin/webpack` in `next.config` transforms StyleX **JS only** (calls → static atoms; SWC/Emotion untouched); `@stylexjs/postcss-plugin` extracts the **CSS** by replacing `@stylex;` in diff --git a/.claude/skills/mosaic/references/testing.md b/.claude/skills/mosaic/references/testing.md index 4a56f1e38af..1b80035d6c9 100644 --- a/.claude/skills/mosaic/references/testing.md +++ b/.claude/skills/mosaic/references/testing.md @@ -8,7 +8,7 @@ against plain props. Tests are Vitest + React Testing Library, co-located in `__tests__/` next to the feature and named for the layer they cover. -`packages/ui/src/mosaic/features/user-button/__tests__/` is the canonical set to copy from: +`packages/mosaic/src/features/user-button/__tests__/` is the canonical set to copy from: | File | Covers | | ---------------------------------- | ----------------------------------------------------------- | @@ -20,7 +20,7 @@ feature and named for the layer they cover. | `user-button.layout.test.ts` | Pure derivation, no React. | | `user-button.utils.test.ts` | Pure helpers, no React. | -Shared helpers live in `packages/ui/src/mosaic/machines/__tests__/test-utils.ts`: +Shared helpers live in `packages/mosaic/src/machines/__tests__/test-utils.ts`: `deferred()` (a promise whose `resolve`/`reject` are captured, so you can assert an in-flight state before settling it), `tick()` (flush microtasks so an `invoke`'s `onDone`/`onError` runs), and `noop`. diff --git a/eslint.config.mjs b/eslint.config.mjs index 325bcc948d7..6e5c5ab6e3a 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -537,9 +537,9 @@ export default tseslint.config([ }, }, { - name: 'packages/ui/mosaic', - files: ['packages/ui/src/mosaic/**/*'], - ignores: ['packages/ui/src/mosaic/utils.ts', 'packages/ui/src/mosaic/__tests__/**'], + name: 'packages/mosaic', + files: ['packages/mosaic/src/**/*'], + ignores: ['packages/mosaic/src/__tests__/**'], plugins: { '@stylexjs': pluginStylex, }, @@ -604,8 +604,8 @@ export default tseslint.config([ // is compile-time and cannot inline a `hover()`/`motionSafe()` helper imported into `create`, // so the media-query restrictions above (an Emotion-runtime convention) can't apply here. The // `@stylexjs/*` rules from the mosaic block still cover these files. - name: 'packages/ui/mosaic - stylex styles', - files: ['packages/ui/src/mosaic/**/*.styles.ts'], + name: 'packages/mosaic - stylex styles', + files: ['packages/mosaic/src/**/*.styles.ts'], rules: { 'no-restricted-syntax': 'off', }, diff --git a/packages/headless/README.md b/packages/headless/README.md index 871728e6336..eacbc3dc498 100644 --- a/packages/headless/README.md +++ b/packages/headless/README.md @@ -2,7 +2,7 @@ Headless UI primitives for Clerk's component library. These are unstyled, accessible React components built on [Floating UI](https://floating-ui.com/) that handle positioning, keyboard navigation, focus management, and ARIA attributes. -This package is **internal** (`private: true`) and consumed by `@clerk/ui`. It exists as a separate package because `@clerk/ui` uses `@emotion/react` as its JSX source, which conflicts with the standard `react-jsx` transform these primitives require. +This package is **internal** (`private: true`) and consumed by `@clerk/mosaic`. It is planned to later move into the Mosaic package. Mosaic currently bundles Headless into its published artifact. ## Primitives diff --git a/packages/ui/stylex-lightningcss.config.mjs b/packages/ui/stylex-lightningcss.config.mjs deleted file mode 100644 index 18f5179a8a6..00000000000 --- a/packages/ui/stylex-lightningcss.config.mjs +++ /dev/null @@ -1,17 +0,0 @@ -// Lightning CSS encodes browser versions as (major << 16) | (minor << 8) | patch. -const version = (major, minor = 0) => (major << 16) | (minor << 8); - -// Pin targets to browsers that natively support `light-dark()` and `oklch()` -// (the token color model). Without this, the plugin defaults to a broad -// browserslist and Lightning CSS down-levels `light-dark()` into an incomplete -// `--lightningcss-*` polyfill, producing invalid two-token color values. -// -// Firefox is 121, not the 120 that `light-dark()` alone would allow: 121 is where -// `:has()` shipped, which the styles now use (see `button.styles.ts`). -export const mosaicLightningCssTargets = { - chrome: version(123), - edge: version(123), - firefox: version(121), - safari: version(17, 5), - ios_saf: version(17, 5), -}; diff --git a/references/mosaic-architecture.md b/references/mosaic-architecture.md index eedd271d621..0c2b7757f09 100644 --- a/references/mosaic-architecture.md +++ b/references/mosaic-architecture.md @@ -2,7 +2,7 @@ ## Overview -Mosaic is the next-generation design system for Clerk's UI components, replacing the existing styled system. Both systems coexist during migration — Mosaic lives under `packages/ui/src/mosaic/` as a self-contained module that doesn't touch any existing code. +Mosaic is the next-generation design system for Clerk's UI components, replacing the existing styled system. Both systems coexist during migration — Mosaic ships as `@clerk/mosaic` from `packages/mosaic`, independently of the Emotion-based `@clerk/ui` package. Mosaic components are authored with **StyleX** (`stylex.create` plus the `themeProps` / `mergeStyleProps` helpers in `props.ts`). StyleX compiles the styles out to a static stylesheet at build time, so Mosaic ships no CSS-in-JS runtime and does not use Emotion. (Swingset's dev server is the one exception: it enables StyleX's `runtimeInjection` so edits hot-reload.) @@ -15,7 +15,7 @@ Once migration is complete, the old system is removed and Mosaic becomes the sol Tokens are CSS custom properties declared through `stylex.defineVars` in `tokens.stylex.ts`. Each var is named explicitly (`'--cl-color-brand'`, not a generated hash) so it is a stable, documented handle a consumer can override: ```ts -// packages/ui/src/mosaic/tokens.stylex.ts +// packages/mosaic/src/tokens.stylex.ts export const colorVars = stylex.defineVars({ '--cl-color-brand': 'light-dark(oklch(0.2046 0 0), oklch(0.9851 0 0))', '--cl-color-brand-foreground': 'light-dark(oklch(1 0 0), oklch(0.2046 0 0))', @@ -55,7 +55,7 @@ A theme styles a part from CSS, against that class and its attributes: } ``` -A part exposes no `className` or `style` prop. Inside `packages/ui`, code that renders a part and needs to nudge it passes StyleX atoms through `xstyle`, declared in its own `stylex.create` and composed last so they win: +A part exposes no `className` or `style` prop. Inside `@clerk/mosaic`, code that renders a part and needs to nudge it passes StyleX atoms through `xstyle`, declared in its own `stylex.create` and composed last so they win: ```tsx const styles = stylex.create({ helpText: { textAlign: 'center' } }); @@ -77,7 +77,7 @@ State styling uses real class + attribute-selector specificity — no `&&` boost Mosaic components need no provider to render or to be styled — the stylesheet and the `--cl-*` tokens do that work. `MosaicProvider` exists for one thing: per-name icon glyph overrides. ```tsx -import { MosaicProvider } from '../mosaic/MosaicProvider'; +import { MosaicProvider } from './MosaicProvider'; }}>{children}; ``` @@ -123,7 +123,7 @@ export const Button = React.forwardRef(function `mergeStyleProps` applies its bags in order — stable class + data attrs, then StyleX atoms, then the props the component was called with — concatenating `className`, shallow-merging `style`, and letting the later bag overwrite anything else. `ButtonProps` extends `MosaicElementProps<'button'>`, which omits `className`/`style` and adds `xstyle`, so the caller's only styling lever is StyleX atoms composed last inside `stylex.props`. The `rest` bag still goes through the merge rather than a trailing spread because a `render` source (`Dialog.Title render={}`) hands its own merged `className`/`style` to the part it renders; the merge fuses that pair, a spread would clobber the part's own class. -A theme's CSS wins over the Mosaic sheet without any prop: the sheet is imported into a cascade layer (`@import '@clerk/ui/styles.css' layer(components)`) and an unlayered rule beats any layered one. +A theme's CSS wins over the Mosaic sheet without any prop: the sheet is imported into a cascade layer (`@import '@clerk/mosaic/styles.css' layer(components)`) and an unlayered rule beats any layered one. `utils/reset.styles.ts` holds the per-element resets so a component does not re-declare UA-normalization; `utils/typography.styles.ts` and `utils/focus-outline.styles.ts` do the same for the treatments several components share. @@ -131,9 +131,9 @@ For the full StyleX authoring rules (token usage, the local `s(n)` spacing helpe ## CSS build -`styles/index.ts` is a StyleX-only barrel re-exporting every Mosaic component, the token groups, and the styling helpers. `tsdown.mosaic.config.mts` walks that graph with the StyleX rollup plugin and extracts one static `dist-mosaic/styles.css`. A component is not shipped until it is exported from that barrel. +`styles/index.ts` is a StyleX-only barrel re-exporting every Mosaic component, the token groups, and the styling helpers. The Mosaic CSS build walks that graph with the StyleX rollup plugin and extracts one static `dist/styles.css`, exported as `@clerk/mosaic/styles.css`. A component is not shipped until it is exported from that barrel. -Run it with `pnpm build:mosaic` in `packages/ui`. +Run it with `pnpm build` in `packages/mosaic`. ## Flow and data architecture @@ -434,7 +434,7 @@ the only test that mocks Clerk, and the view needs no machinery at all. See the - **Do** type a part's props off `MosaicComponentProps` / `MosaicElementProps`; a part takes `xstyle`, never `className` / `style` - **Do not** use Emotion in Mosaic — no `css` prop, no `styled`, no theme callbacks - **Do** export every new component from `styles/index.ts`, or its CSS never ships -- **Do** import from `src/mosaic/` directly (no barrel files) inside `packages/ui` +- **Do** import from source paths directly (no published subpath barrels) inside `packages/mosaic` - **Do not** import Clerk hooks or call Clerk resource methods anywhere but a `*.model.tsx` ### What doesn't share @@ -463,29 +463,29 @@ The steps above cover the **styling** migration. For **flow** components — whe ## Files -| File | Purpose | -| ---------------------------------------------- | --------------------------------------------------------------------------- | -| `src/mosaic/tokens.stylex.ts` | `--cl-*` token groups declared with `stylex.defineVars` | -| `src/mosaic/props.ts` | `themeProps`, `mergeStyleProps`, `MosaicComponentProps`, `MosaicStyleProps` | -| `src/mosaic/MosaicProvider.tsx` | Provider for the `icons` prop (per-name glyph overrides) | -| `src/mosaic/icons/overrides.ts` | `MosaicIconOverrides` type + `useMosaicIcons()` context | -| `src/mosaic/icons/registry.tsx` | Built-in glyphs and the `IconName` union | -| `src/mosaic/components/` | One subdirectory per component, and nothing else | -| `src/mosaic/blocks/` | View fragments that own one piece of state of their own (`destructive`) | -| `src/mosaic/utils/*.styles.ts` | Atoms shared across components: `reset`, `typography`, `focus-outline` | -| `src/mosaic/hooks/` | Mosaic-only hooks (`useMosaicEnvironment`, `useMosaicRouter`, …) | -| `src/mosaic/styles/index.ts` | StyleX-only barrel — the entry the CSS build walks | -| `src/mosaic/machine/` | State-machine runtime (`createMachine`, `createActor`, `useMachine`) | -| `src/mosaic/machines/` | Standalone machines and the shared `__tests__/test-utils.ts` | -| `src/mosaic//*.model.tsx` | Clerk adapter — the only file in a feature that may import Clerk | -| `src/mosaic//*.controller.tsx` | Local state and action wrapping; holds the feature's machine | -| `src/mosaic//*.view.tsx` | Clerk-free rendering from plain props | -| `src/mosaic//*.types.ts` | The data contract the model and the view both agree on | -| `src/mosaic//*.messages.ts` | Every string the surface renders, shaped the way `@clerk/i18n` takes them | -| `src/mosaic/utils/reset.test.tsx` | Reset specs | -| `src/mosaic/__tests__/MosaicProvider.test.tsx` | Icon-override context specs | -| `src/mosaic/components/button/button.test.tsx` | Component-level slot/state/variant specs | -| `src/mosaic/features/user-button/__tests__/` | The canonical per-layer test set to copy from | +| File | Purpose | +| --------------------------------------- | --------------------------------------------------------------------------- | +| `src/tokens.stylex.ts` | `--cl-*` token groups declared with `stylex.defineVars` | +| `src/props.ts` | `themeProps`, `mergeStyleProps`, `MosaicComponentProps`, `MosaicStyleProps` | +| `src/MosaicProvider.tsx` | Provider for the `icons` prop (per-name glyph overrides) | +| `src/icons/overrides.ts` | `MosaicIconOverrides` type + `useMosaicIcons()` context | +| `src/icons/registry.tsx` | Built-in glyphs and the `IconName` union | +| `src/components/` | One subdirectory per component, and nothing else | +| `src/blocks/` | View fragments that own one piece of state of their own (`destructive`) | +| `src/utils/*.styles.ts` | Atoms shared across components: `reset`, `typography`, `focus-outline` | +| `src/hooks/` | Mosaic-only hooks (`useMosaicEnvironment`, `useMosaicRouter`, …) | +| `src/styles/index.ts` | StyleX-only barrel — the entry the CSS build walks | +| `src/machine/` | State-machine runtime (`createMachine`, `createActor`, `useMachine`) | +| `src/machines/` | Standalone machines and the shared `__tests__/test-utils.ts` | +| `src//*.model.tsx` | Clerk adapter — the only file in a feature that may import Clerk | +| `src//*.controller.tsx` | Local state and action wrapping; holds the feature's machine | +| `src//*.view.tsx` | Clerk-free rendering from plain props | +| `src//*.types.ts` | The data contract the model and the view both agree on | +| `src//*.messages.ts` | Every string the surface renders, shaped the way `@clerk/i18n` takes them | +| `src/utils/reset.test.tsx` | Reset specs | +| `src/__tests__/MosaicProvider.test.tsx` | Icon-override context specs | +| `src/components/button/button.test.tsx` | Component-level slot/state/variant specs | +| `src/features/user-button/__tests__/` | The canonical per-layer test set to copy from | `machine/` is the runtime; `machines/` is machines written with it. The one-letter difference is easy to misread — a feature's own machine belongs in its From 48d25f54800312e521b5cb3702aa71622d2197b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Tue, 15 Sep 2026 15:51:56 +0200 Subject: [PATCH 05/18] Add a first Mosaic Readme --- packages/mosaic/README.md | 77 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 packages/mosaic/README.md diff --git a/packages/mosaic/README.md b/packages/mosaic/README.md new file mode 100644 index 00000000000..4015fdf7c1a --- /dev/null +++ b/packages/mosaic/README.md @@ -0,0 +1,77 @@ +

+ + + + + + +
+

@clerk/mosaic

+

+ +
+ +[![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord) +[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_mosaic) +[![Follow on X](https://img.shields.io/twitter/follow/clerk?style=social)](https://x.com/intent/follow?screen_name=clerk) + +[Changelog](https://github.com/clerk/javascript/blob/main/packages/mosaic/CHANGELOG.md) +· +[Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml) +· +[Request a Feature](https://feedback.clerk.com/roadmap) +· +[Get help](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_mosaic) + +
+ +## Getting started + +`@clerk/mosaic` is Clerk's experimental next-generation React components. + +This package let's us build and iterate on our next component refresh in public, feel free to try them out and provide feedback. If you do, know that we reserve the right to make breaking changes in minors and pin your version. + +When stable, components will move to be exported through the regular packages. + +### Prerequisites + +- Node.js `>=20.9.0` or later +- A Clerk SDK that renders a `ClerkProvider` (`@clerk/react`, `@clerk/nextjs`, …) +- React 18 or 19 + +### Installation + +```shell +npm install @clerk/mosaic +``` + +## Usage + +Import the stylesheet and render Mosaic components beneath the SDK `ClerkProvider`: + +```tsx +import { ClerkProvider } from '@clerk/react'; +import { UserButton } from '@clerk/mosaic'; +import '@clerk/mosaic/styles.css'; + +export function App({ children }) { + return ( + + + {children} + + ); +} +``` + +To keep theme CSS ahead of Mosaic's sheet, import the stylesheet into a cascade layer: + +```css +@import '@clerk/mosaic/styles.css' layer(components); +``` + +## License + +This project is licensed under the **MIT license**. + +See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/mosaic/LICENSE) for more information. From 2a762f6a73438ac4292f9f3d7890008db387992d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Tue, 15 Sep 2026 16:23:12 +0200 Subject: [PATCH 06/18] Move confirmation --- .../blocks/confirmation/confirmation.controller.test.ts | 0 .../src}/blocks/confirmation/confirmation.controller.ts | 0 .../src}/blocks/confirmation/confirmation.test.tsx | 0 .../src}/blocks/confirmation/confirmation.tsx | 0 .../src/mosaic => mosaic/src}/blocks/confirmation/index.ts | 0 packages/swingset/src/stories/confirmation.mdx | 4 ++-- packages/swingset/src/stories/confirmation.stories.tsx | 6 +++--- 7 files changed, 5 insertions(+), 5 deletions(-) rename packages/{ui/src/mosaic => mosaic/src}/blocks/confirmation/confirmation.controller.test.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/confirmation/confirmation.controller.ts (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/confirmation/confirmation.test.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/confirmation/confirmation.tsx (100%) rename packages/{ui/src/mosaic => mosaic/src}/blocks/confirmation/index.ts (100%) diff --git a/packages/ui/src/mosaic/blocks/confirmation/confirmation.controller.test.ts b/packages/mosaic/src/blocks/confirmation/confirmation.controller.test.ts similarity index 100% rename from packages/ui/src/mosaic/blocks/confirmation/confirmation.controller.test.ts rename to packages/mosaic/src/blocks/confirmation/confirmation.controller.test.ts diff --git a/packages/ui/src/mosaic/blocks/confirmation/confirmation.controller.ts b/packages/mosaic/src/blocks/confirmation/confirmation.controller.ts similarity index 100% rename from packages/ui/src/mosaic/blocks/confirmation/confirmation.controller.ts rename to packages/mosaic/src/blocks/confirmation/confirmation.controller.ts diff --git a/packages/ui/src/mosaic/blocks/confirmation/confirmation.test.tsx b/packages/mosaic/src/blocks/confirmation/confirmation.test.tsx similarity index 100% rename from packages/ui/src/mosaic/blocks/confirmation/confirmation.test.tsx rename to packages/mosaic/src/blocks/confirmation/confirmation.test.tsx diff --git a/packages/ui/src/mosaic/blocks/confirmation/confirmation.tsx b/packages/mosaic/src/blocks/confirmation/confirmation.tsx similarity index 100% rename from packages/ui/src/mosaic/blocks/confirmation/confirmation.tsx rename to packages/mosaic/src/blocks/confirmation/confirmation.tsx diff --git a/packages/ui/src/mosaic/blocks/confirmation/index.ts b/packages/mosaic/src/blocks/confirmation/index.ts similarity index 100% rename from packages/ui/src/mosaic/blocks/confirmation/index.ts rename to packages/mosaic/src/blocks/confirmation/index.ts diff --git a/packages/swingset/src/stories/confirmation.mdx b/packages/swingset/src/stories/confirmation.mdx index c5aeb1a7ef3..9c6bb2f53a1 100644 --- a/packages/swingset/src/stories/confirmation.mdx +++ b/packages/swingset/src/stories/confirmation.mdx @@ -24,8 +24,8 @@ It is an `alertdialog`: it announces as an interruption, an outside press cannot The block holds nothing of its own. Everything that decides what the dialog does next belongs to the caller. `open` closes it, `isConfirming` marks it busy, `errorMessage` explains a failure. ```tsx -import { Confirmation } from '@clerk/ui/mosaic/blocks/confirmation'; -import { Button } from '@clerk/ui/mosaic/components/button'; +import { Confirmation } from '@clerk/mosaic/blocks/confirmation'; +import { Button } from '@clerk/mosaic/components/button'; import { useState } from 'react'; const [open, setOpen] = useState(false); diff --git a/packages/swingset/src/stories/confirmation.stories.tsx b/packages/swingset/src/stories/confirmation.stories.tsx index 8a2abe1f503..0ce92257727 100644 --- a/packages/swingset/src/stories/confirmation.stories.tsx +++ b/packages/swingset/src/stories/confirmation.stories.tsx @@ -1,5 +1,5 @@ -import { Confirmation } from '@clerk/ui/mosaic/blocks/confirmation'; -import { Button } from '@clerk/ui/mosaic/components/button'; +import { Confirmation } from '@clerk/mosaic/blocks/confirmation'; +import { Button } from '@clerk/mosaic/components/button'; import React from 'react'; import type { StoryMeta } from '@/lib/types'; @@ -12,7 +12,7 @@ export const meta: StoryMeta = { group: 'Blocks', status: 'wip', title: 'Confirmation', - source: 'packages/ui/src/mosaic/blocks/confirmation/confirmation.tsx', + source: 'packages/mosaic/src/blocks/confirmation/confirmation.tsx', }; // A real removal is a network round trip. Without one the action never renders its pending From e86dc1fbb0262f1516a6ba461ae79bc9d7dd4ce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Wed, 16 Sep 2026 11:28:03 +0200 Subject: [PATCH 07/18] Fix source that got messed up in rebase --- .../user-profile-enterprise-accounts-section.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx b/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx index 1c7d969a6b4..3f362cf7d45 100644 --- a/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-enterprise-accounts-section.stories.tsx @@ -13,7 +13,7 @@ export const meta: StoryMeta = { label: 'Enterprise accounts', navigation: { category: 'Sections' }, source: - 'packages/ui/src/mosaic/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx', + 'packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx', }; export function Default() { From caa8659cff47933996fb0fc79ddd279299523d86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Wed, 16 Sep 2026 19:14:05 +0200 Subject: [PATCH 08/18] Update packages/mosaic/README.md Co-authored-by: Dylan Staley <88163+dstaley@users.noreply.github.com> --- packages/mosaic/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mosaic/README.md b/packages/mosaic/README.md index 4015fdf7c1a..ce8014d13b9 100644 --- a/packages/mosaic/README.md +++ b/packages/mosaic/README.md @@ -29,7 +29,7 @@ `@clerk/mosaic` is Clerk's experimental next-generation React components. -This package let's us build and iterate on our next component refresh in public, feel free to try them out and provide feedback. If you do, know that we reserve the right to make breaking changes in minors and pin your version. +This package lets us build and iterate on our next component refresh in public, feel free to try them out and provide feedback. If you do, know that we reserve the right to make breaking changes in minors and pin your version. When stable, components will move to be exported through the regular packages. From dbfa9b6178be7e09b74028c9858499fb67653578 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 13:49:29 +0200 Subject: [PATCH 09/18] Remove Discord link from Readme --- packages/mosaic/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mosaic/README.md b/packages/mosaic/README.md index ce8014d13b9..f7c1f5ff740 100644 --- a/packages/mosaic/README.md +++ b/packages/mosaic/README.md @@ -11,7 +11,6 @@
-[![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord) [![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_mosaic) [![Follow on X](https://img.shields.io/twitter/follow/clerk?style=social)](https://x.com/intent/follow?screen_name=clerk) From 151a5fa759dc216940cde52d0c0b0989f2f4e920 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 15:10:38 +0200 Subject: [PATCH 10/18] Readme tweaks --- packages/mosaic/README.md | 42 ++++++++++++++++++++++++++++++++++----- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/packages/mosaic/README.md b/packages/mosaic/README.md index f7c1f5ff740..fc24e208204 100644 --- a/packages/mosaic/README.md +++ b/packages/mosaic/README.md @@ -26,22 +26,30 @@ ## Getting started -`@clerk/mosaic` is Clerk's experimental next-generation React components. +`@clerk/mosaic` provides Clerk's experimental next-generation React components. -This package lets us build and iterate on our next component refresh in public, feel free to try them out and provide feedback. If you do, know that we reserve the right to make breaking changes in minors and pin your version. +This package lets you preview and provide feedback on Clerk's next generation of components. When stable, components will move to be exported through the regular packages. +> We reserve the right to make breaking changes in minors, please pin your version. + ### Prerequisites - Node.js `>=20.9.0` or later -- A Clerk SDK that renders a `ClerkProvider` (`@clerk/react`, `@clerk/nextjs`, …) +- A supported React-based Clerk SDK that renders a `ClerkProvider` + - `@clerk/react` version 6 or later + - `@clerk/nextjs` version 7 or later + - Other React-based Clerk SDKs may also work, but are currently untested - React 18 or 19 ### Installation ```shell -npm install @clerk/mosaic +# npm +npm install --save-exact @clerk/mosaic +pnpm add --save-exact @clerk/mosaic +yarn add --exact @clerk/mosaic ``` ## Usage @@ -63,12 +71,36 @@ export function App({ children }) { } ``` -To keep theme CSS ahead of Mosaic's sheet, import the stylesheet into a cascade layer: +If you want to use custom CSS to theme the components, instead import the stylesheet into a cascade layer: ```css @import '@clerk/mosaic/styles.css' layer(components); ``` +This ensures your unlayered custom CSS takes priority. Expect more documentation on custom theming soon. + +## Troubleshooting + +### A Clerk hook says it can only be used within `` + +Mosaic and your Clerk framework SDK must resolve the same copy of `@clerk/shared`. If `` is present but you still see this error, deduplicate your dependencies: + +```shell +npm dedupe +pnpm dedupe +yarn dedupe @clerk/shared +``` + +Check the installed versions: + +```shell +npm ls @clerk/shared +pnpm why @clerk/shared +yarn why @clerk/shared +``` + +If multiple versions remain, the supported ranges are likely incompatible. Update Mosaic and your Clerk framework SDK to the latest versions, then deduplicate again. + ## License This project is licensed under the **MIT license**. From 543cde084f2c278aa41ee0683a107c50cb911cb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 15:18:32 +0200 Subject: [PATCH 11/18] Readme tweaks --- packages/mosaic/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mosaic/README.md b/packages/mosaic/README.md index fc24e208204..7475eb9e9e3 100644 --- a/packages/mosaic/README.md +++ b/packages/mosaic/README.md @@ -32,7 +32,7 @@ This package lets you preview and provide feedback on Clerk's next generation of When stable, components will move to be exported through the regular packages. -> We reserve the right to make breaking changes in minors, please pin your version. +> :construction: We reserve the right to make breaking changes in minors, please pin your version. ### Prerequisites @@ -46,7 +46,7 @@ When stable, components will move to be exported through the regular packages. ### Installation ```shell -# npm + npm install --save-exact @clerk/mosaic pnpm add --save-exact @clerk/mosaic yarn add --exact @clerk/mosaic From 7aa47654bf5dd204b5614471eb9a5148279b9202 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 15:36:43 +0200 Subject: [PATCH 12/18] Fix leftover broken rebase conflict --- .../swingset/src/stories/dialog.component.mdx | 45 ------------------- 1 file changed, 45 deletions(-) diff --git a/packages/swingset/src/stories/dialog.component.mdx b/packages/swingset/src/stories/dialog.component.mdx index 3c34caec028..b301da26cb0 100644 --- a/packages/swingset/src/stories/dialog.component.mdx +++ b/packages/swingset/src/stories/dialog.component.mdx @@ -147,51 +147,6 @@ Press Cancel to open a discard confirmation above the profile form. Keep editing storyModule={DialogStories} /> -# <<<<<<< HEAD - -```tsx -import { createConfirmHandle, Dialog, useConfirmedClose } from '@clerk/mosaic/components/dialog'; - -const confirm = React.useMemo(() => createConfirmHandle(), []); - -const onOpenChange = useConfirmedClose({ - handle: confirm, - when: () => value !== '', - onOpenChange: setOpen, - confirm: { title: 'Discard changes?', description: '…', actionLabel: 'Discard', destructive: true }, -}); - - - - … - - -; -``` - -- Render `Dialog.Confirm` **inside** the popup it guards, so the two share a floating tree. -- The guarded dialog must be controlled — a veto is the absence of a commit. -- `confirm.show(options)` asks the same question directly and resolves `true`/`false`. It needs the - `Dialog.Confirm` mounted, and returns the in-flight promise if one is already showing. - -### Inline - -`inline` on the root renders the dialog in its host instead of over the page: no portal, scrim, -scroll lock or focus trap, and nothing dismisses it. For the account profile mounted in a page slot. - - - -- `open`, `modal`, `closedBy` are implied; `onOpenChange` is never called. -- No initial focus on mount. `Dialog.CloseButton` renders nothing; `Card.Header` carries no dismiss. -- Fills the host edge to edge. How the surface looks there is the surface's call — the page - paints the same frame modal or inline. -- Dialogs opened from inside it are normal modal dialogs over the page. - -> > > > > > > 12e3a52c54 (refactor(swingset): point stories at @clerk/mosaic) - ### Responsive behaviour The gap to the screen edge is a fixed inset, not a percentage: From 51e8590913ded5a9b6681dff4cff6c1bf65828d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 15:44:43 +0200 Subject: [PATCH 13/18] Duplicate truncateTextWithEndVisible into Mosaic --- ...user-profile-web3-wallets-section.view.tsx | 14 +++---- .../src/utils/truncateTextWithEndVisible.ts | 38 +++++++++++++++++++ 2 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 packages/mosaic/src/utils/truncateTextWithEndVisible.ts diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx index ce30a1fd448..a7da92b813e 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx @@ -1,9 +1,9 @@ import { useMemo } from 'react'; -import { truncateWithEndVisible } from '../../../utils/truncateTextWithEndVisible'; import { Confirmation } from '../../blocks/confirmation'; import { Section } from '../../components/section'; import { fill } from '../../utils/messages'; +import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible'; import { UserProfileWeb3WalletRowView } from './user-profile-web3-wallet-row.view'; import { userProfileWeb3WalletsMessages as m } from './user-profile-web3-wallets.messages'; @@ -59,12 +59,12 @@ export function UserProfileWeb3WalletsSectionView({ ))} {onConnect ? availableProviders.map(provider => ( - - )) + + )) : null} diff --git a/packages/mosaic/src/utils/truncateTextWithEndVisible.ts b/packages/mosaic/src/utils/truncateTextWithEndVisible.ts new file mode 100644 index 00000000000..5d117336a87 --- /dev/null +++ b/packages/mosaic/src/utils/truncateTextWithEndVisible.ts @@ -0,0 +1,38 @@ +/** + * Truncates a string to show the beginning and the last N characters, + * with an ellipsis in the middle. + * + * @param {string} str - The string to truncate + * @param {number} maxLength - Maximum total length of the truncated string (including ellipsis). Default is 20. + * @param {number} endChars - Number of characters to preserve at the end. Default is 5. + * @return {string} - Truncated string with ellipsis in the middle + * + * @example + * truncateWithEndVisible('this is a very long string') // returns 'this is a ve...ring' + * truncateWithEndVisible('test@email.com', 10) // returns 'te...e.com' + */ +export function truncateWithEndVisible(str: string, maxLength = 20, endChars = 5): string { + const ELLIPSIS = '...'; + const ELLIPSIS_LENGTH = ELLIPSIS.length; + + if (!str) { + return str; + } + + const chars = Array.from(str); + const totalChars = chars.length; + + if (totalChars <= maxLength) { + return str; + } + + if (maxLength <= endChars + ELLIPSIS_LENGTH) { + return ELLIPSIS + chars.slice(-endChars).join(''); + } + + const beginLength = maxLength - endChars - ELLIPSIS_LENGTH; + const beginPortion = chars.slice(0, beginLength).join(''); + const endPortion = chars.slice(-endChars).join(''); + + return beginPortion + ELLIPSIS + endPortion; +} From 9fd9acc706893bd141d35ad6e21dd8485a3a3970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 15:59:52 +0200 Subject: [PATCH 14/18] Fix missing imports --- packages/swingset/src/stories/select.component.stories.tsx | 6 +++--- .../src/stories/user-profile-password-section.stories.tsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/swingset/src/stories/select.component.stories.tsx b/packages/swingset/src/stories/select.component.stories.tsx index bb439b22256..4b1d1df0759 100644 --- a/packages/swingset/src/stories/select.component.stories.tsx +++ b/packages/swingset/src/stories/select.component.stories.tsx @@ -1,6 +1,6 @@ -import { Field } from '@clerk/ui/mosaic/components/field'; -import { Select } from '@clerk/ui/mosaic/components/select'; -import { Text } from '@clerk/ui/mosaic/components/text'; +import { Field } from '@clerk/mosaic/components/field'; +import { Select } from '@clerk/mosaic/components/select'; +import { Text } from '@clerk/mosaic/components/text'; import * as stylex from '@stylexjs/stylex'; import { useState } from 'react'; diff --git a/packages/swingset/src/stories/user-profile-password-section.stories.tsx b/packages/swingset/src/stories/user-profile-password-section.stories.tsx index a5c076671a3..95e1f732a0e 100644 --- a/packages/swingset/src/stories/user-profile-password-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-password-section.stories.tsx @@ -1,4 +1,5 @@ import { UserProfilePasswordSectionView } from '@clerk/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section.view'; +import type { UserProfileFormError } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view'; import type { StoryMeta } from '@/lib/types'; From 56ed179683c20f3df588f9c0c16dee2e6389a2b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 16:00:27 +0200 Subject: [PATCH 15/18] Fix formatting --- .../user-profile-web3-wallets-section.view.tsx | 12 ++++++------ .../swingset/src/stories/reverification.stories.tsx | 8 ++++---- .../stories/user-profile-account-section.stories.tsx | 3 ++- .../user-profile-password-section.stories.tsx | 3 ++- .../stories/user-profile-profile-panel.stories.tsx | 5 ++++- 5 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx index a7da92b813e..7cd546b46ba 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx @@ -59,12 +59,12 @@ export function UserProfileWeb3WalletsSectionView({ ))} {onConnect ? availableProviders.map(provider => ( - - )) + + )) : null} diff --git a/packages/swingset/src/stories/reverification.stories.tsx b/packages/swingset/src/stories/reverification.stories.tsx index 0a93e6fca12..2a839ef3e5f 100644 --- a/packages/swingset/src/stories/reverification.stories.tsx +++ b/packages/swingset/src/stories/reverification.stories.tsx @@ -376,10 +376,10 @@ function OTPPanel({ resend={ renderResend ? { - label: isResending ? 'Sending a new code…' : 'Didn’t receive a code? Resend', - disabled: isResending, - onClick: () => setValue(''), - } + label: isResending ? 'Sending a new code…' : 'Didn’t receive a code? Resend', + disabled: isResending, + onClick: () => setValue(''), + } : undefined } onValueChange={setValue} diff --git a/packages/swingset/src/stories/user-profile-account-section.stories.tsx b/packages/swingset/src/stories/user-profile-account-section.stories.tsx index 22aea5a1c8f..3b17983b1c4 100644 --- a/packages/swingset/src/stories/user-profile-account-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-account-section.stories.tsx @@ -28,7 +28,8 @@ export const meta: StoryMeta = { title: 'UserProfileAccountSection', label: 'Account', navigation: { category: 'Sections' }, - source: 'packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx', + source: + 'packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.view.tsx', }; function AccountSection({ diff --git a/packages/swingset/src/stories/user-profile-password-section.stories.tsx b/packages/swingset/src/stories/user-profile-password-section.stories.tsx index 95e1f732a0e..a9162984b5c 100644 --- a/packages/swingset/src/stories/user-profile-password-section.stories.tsx +++ b/packages/swingset/src/stories/user-profile-password-section.stories.tsx @@ -13,7 +13,8 @@ export const meta: StoryMeta = { title: 'UserProfilePasswordSection', label: 'Password', navigation: { category: 'Sections' }, - source: 'packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx', + source: + 'packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.view.tsx', }; function PasswordSection({ diff --git a/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx b/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx index 5ac77de2daf..c0fb9ce4bf4 100644 --- a/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx +++ b/packages/swingset/src/stories/user-profile-profile-panel.stories.tsx @@ -1,4 +1,7 @@ -import type { UserProfileEmail, UserProfilePhone } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view'; +import type { + UserProfileEmail, + UserProfilePhone, +} from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view'; import { UserProfileProfilePanelView } from '@clerk/mosaic/features/user-profile/user-profile-profile-panel.view'; import { useState } from 'react'; From db75b7686923c818db31fa86cd74e81ad4738674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 16:21:45 +0200 Subject: [PATCH 16/18] Split tsconfig setup just like ui now has --- packages/mosaic/tsconfig.base.json | 19 +++++++++++++++++++ packages/mosaic/tsconfig.json | 19 +++---------------- packages/mosaic/tsconfig.test.json | 20 ++++++++++++++++++++ packages/mosaic/turbo.json | 1 + 4 files changed, 43 insertions(+), 16 deletions(-) create mode 100644 packages/mosaic/tsconfig.base.json create mode 100644 packages/mosaic/tsconfig.test.json diff --git a/packages/mosaic/tsconfig.base.json b/packages/mosaic/tsconfig.base.json new file mode 100644 index 00000000000..10d30f1477f --- /dev/null +++ b/packages/mosaic/tsconfig.base.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "verbatimModuleSyntax": true, + "target": "es2022", + "strict": true, + "skipLibCheck": true, + "resolveJsonModule": true, + "preserveWatchOutput": true, + "noUnusedLocals": true, + "moduleResolution": "bundler", + "moduleDetection": "force", + "module": "preserve", + "lib": ["ES2023", "DOM", "DOM.Iterable"], + "jsx": "react-jsx", + "isolatedModules": true, + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true + } +} diff --git a/packages/mosaic/tsconfig.json b/packages/mosaic/tsconfig.json index 90212123bb7..5ae7c712e13 100644 --- a/packages/mosaic/tsconfig.json +++ b/packages/mosaic/tsconfig.json @@ -1,25 +1,12 @@ { + "extends": "./tsconfig.base.json", "compilerOptions": { "rootDir": "src", - "verbatimModuleSyntax": true, - "target": "es2022", - "strict": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "preserveWatchOutput": true, "outDir": "dist", - "noUnusedLocals": true, - "moduleResolution": "bundler", - "moduleDetection": "force", - "module": "preserve", - "lib": ["ES2023", "DOM", "DOM.Iterable"], - "jsx": "react-jsx", - "isolatedModules": true, - "forceConsistentCasingInFileNames": true, - "esModuleInterop": true, "declaration": true, "declarationMap": true }, "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx", "**/__tests__/**"], - "include": ["src"] + "include": ["src"], + "references": [{ "path": "./tsconfig.test.json" }] } diff --git a/packages/mosaic/tsconfig.test.json b/packages/mosaic/tsconfig.test.json new file mode 100644 index 00000000000..ad80709c17e --- /dev/null +++ b/packages/mosaic/tsconfig.test.json @@ -0,0 +1,20 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "composite": true, + "declaration": true, + "emitDeclarationOnly": true, + "outDir": "node_modules/.cache/tsconfig-test", + "tsBuildInfoFile": "node_modules/.cache/tsconfig-test.tsbuildinfo" + }, + "include": [ + "src/**/*.test.ts", + "src/**/*.test.tsx", + "src/**/*.spec.ts", + "src/**/*.spec.tsx", + "src/**/__tests__/**/*.ts", + "src/**/__tests__/**/*.tsx", + "src/global.d.ts" + ], + "exclude": ["node_modules", "dist"] +} diff --git a/packages/mosaic/turbo.json b/packages/mosaic/turbo.json index 87a7f9a3ffc..e14c1e99e96 100644 --- a/packages/mosaic/turbo.json +++ b/packages/mosaic/turbo.json @@ -7,6 +7,7 @@ "*.d.ts", "src/**", "tsconfig.json", + "tsconfig.base.json", "tsconfig.build.json", "tsdown.config.mts", "tsdown.css.config.mts", From 954ee383a74a16e3170ed23df4bb1ee8aa0dd1ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Thu, 17 Sep 2026 16:57:28 +0200 Subject: [PATCH 17/18] Fix a few leftovers --- packages/swingset/src/stories/select.component.mdx | 4 ++-- packages/swingset/src/stories/select.component.stories.tsx | 2 +- references/mosaic-architecture.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/swingset/src/stories/select.component.mdx b/packages/swingset/src/stories/select.component.mdx index 41dfddc399a..b38715c5a09 100644 --- a/packages/swingset/src/stories/select.component.mdx +++ b/packages/swingset/src/stories/select.component.mdx @@ -15,7 +15,7 @@ opens directly over the trigger, the way a native `