@streamoid/ui 0.6.17 → 0.6.18

package/README.md

@@ -1,6 +1,7 @@
 # @streamoid/ui
 
-A comprehensive React UI component library for Streamoid applications.
+The Streamoid design system — ~125 React components (`Sc*`) shared by CXO,
+Photogenix, Catalogix and Artifax.
 
 ## Installation
 
@@ -12,34 +13,50 @@ yarn add @streamoid/ui
 pnpm add @streamoid/ui
 ```
 
-**Note:** This package requires `@streamoid/icons` as a peer dependency.
+`@streamoid/icons` and `@streamoid/tokens` come along as dependencies; `react` and
+`react-dom` (18 or 19) are peers.
 
 ## Usage
 
-Import components directly:
-
 ```tsx
 import { ScButton } from "@streamoid/ui";
-import "@streamoid/ui/dist/index.css"; // Don't forget to import styles
+import "@streamoid/ui/dist/index.css"; // once, at your app root — don't forget this
 
 function App() {
-  return (
-    <ScButton
-      text="Click me"
-      variant="primary"
-      onClick={() => console.log("Clicked")}
-    />
-  );
+  return <ScButton text="Click me" variant="mono" size="md" onClick={handleClick} />;
 }
 ```
 
-## Features
+## 📖 Per-component docs (start here — especially if you're an AI agent)
+
+Every component ships its own doc answering **how / where / when / why** to use it,
+with a full props table (real defaults), copy-paste recipes, the traps specific to
+it, and a real call site from a host app.
+
+| File | What it's for |
+|---|---|
+| `node_modules/@streamoid/ui/dist/docs/AGENTS.md` | **Read this first.** One line per component grouped by category, plus an "easily confused" table. Route from here. |
+| `node_modules/@streamoid/ui/dist/docs/<ScName>.md` | The full doc for one component, e.g. `ScButton.md`. |
+| `node_modules/@streamoid/ui/dist/docs/components.json` | The same metadata as data — category, tags, related, required props, status — for programmatic lookup. |
+
+Working inside this monorepo instead? The docs are authored next to each component,
+at `packages/ui/src/SC-<Name>/README.md`, and the shape they must follow is
+`docs/COMPONENT-README-TEMPLATE.md`. `npm run build:docs` flattens them into
+`dist/docs/` — that step is part of `npm run build`, so **new components need a
+README or they ship undocumented** (the build prints a list of folders missing one).
+
+A broader map of the system — the 5 packages, per-app adoption, cross-app patterns —
+is in `docs/COMPONENT-CATALOG.md`.
+
+## What you get
 
-- 60+ Reusable Components (desktop + mobile)
-- TypeScript Support
-- CSS Modules with Design Tokens
-- Controlled & Uncontrolled component patterns
-- Mobile-first components for Teams, Settings, Billing, Workspace
+- **Theme-aware by construction.** Every component is styled off the `--alias-*`
+  semantic tokens in `@streamoid/tokens` (dark on `:root`, light override). No
+  component contains a hex value, so light/dark works with no work at the call site.
+- **CSS Modules**, bundled to a single `dist/index.css`.
+- **TypeScript** types for every component and its props.
+- Desktop **and** mobile variants (`*Mobile`) for teams, settings, billing, workspace.
+- **Figma parity** — `variant` / `size` / `state` prop names map onto the design library.
 
 ## License
 

package/dist/docs/AGENTS.md

@@ -0,0 +1,321 @@
+# @streamoid/ui — component router (for AI agents)
+
+124 components. Full docs for each live beside this file as `<ScName>.md`;
+the same metadata is machine-readable in `components.json`.
+
+**How to use this file:** scan for the job you need below, then open only that
+component's `.md`. Each doc answers how / where / when / why to use it, lists every
+prop with its real default, and ends with the traps specific to it.
+
+```tsx
+import { ScButton } from "@streamoid/ui";
+import "@streamoid/ui/dist/index.css"; // once, at your app root
+```
+
+Every component is styled off `--alias-*` tokens from `@streamoid/tokens` and is
+theme-aware (dark on `:root`, light override) — never hardcode a colour.
+
+---
+
+## actions
+
+- **`ScButton`** — use when you need any clickable action with a label, an icon, or both.
+- **`ScFieldButton`** — use when you need a low-emphasis, compact action **beside** an input or inside a composer toolbar, and a full `ScButton` would shout.
+- **`ScGoogleSignIn`** _(legacy)_ — use when you want the Figma-exact Google row *and* you already have the "G" asset in your app's bundle.
+- **`ScOnlyIcon`** _(legacy)_ — use when essentially never. The only honest use is a bare settings-gear affordance where you also don't need keyboard access.
+- **`ScPendingAction`** — use when you are rendering a **pending invite** row and want the exact Cancel/Resend pair used in CXO Teams.
+
+## billing
+
+- **`ScBillingHistoryHeader`** — use when you are rendering the Billing → *Invoice history* table and are about to stack `ScBillingHistoryTableList` rows under it.
+- **`ScBillingHistoryTableList`** — use when you are listing invoices under a `ScBillingHistoryHeader`.
+- **`ScBillingLogsTableHeader`** _(legacy)_ — use when you genuinely want the original six columns *including* a per-row running `Balance`, and you are pairing it with `ScBillingLogsTableList`.
+- **`ScBillingLogsTableList`** _(legacy)_ — use when you have logs with a genuine per-row running balance and every row is a deduction.
+- **`ScCreditsUsageCard`** — use when you need the credits-consumed meter, normally to the right of `ScPlanDetailsCard`.
+- **`ScPlanCard`** — use when you are building the 3-up "choose a plan" grid (Free / Pro / Enterprise) where each tile ends in an Upgrade/Downgrade/Contact CTA.
+- **`ScPlanComparison`** — use when you have static marketing copy comparing N plans across many features and want it collapsed under the pricing tiles.
+- **`ScPlanDetailsCard`** — use when you need the single current-subscription summary strip, usually side by side with `ScCreditsUsageCard`.
+
+## brand
+
+- **`ScAppcardLogos`** — use when you need a product's *name as artwork* — inside a card, chip or pill where a hover/theme colour change should recolour the mark for free.
+- **`ScStreamoidWordmark`** — use when you need the *Streamoid* wordmark or mascot, or the *CXO Copilot* logo, as a bare mark you position yourself — typically as the `wordmark` node you hand to `ScSideBarLogoUnit`.
+  - also documented here: `ScStreamoidMascot`, `ScCxoCopilotLogo`
+- **`ScStrLogo`** _(legacy)_ — use when you specifically need the **combined** wordmark + mascot lockup at large size (a splash / auth / print-ish surface), and you are willing to size it yourself. That combination exists nowhere else in the library.
+
+## cards
+
+- **`ScAppCard`** — use when you need to identify an app inside a row that already has its own container and its own control (a toggle, a checkbox, a chevron).
+- **`ScAppCardForCopilot`** — use when the copilot / agent panel needs a compact "jump to this product" affordance floating over content, identified by a **wordmark** rather than an icon and label.
+- **`ScAppCardV3`** — use when you are building the cross-product app-switcher grid (or any dense grid of equal-height product tiles) and want the coral gradient-border + glow treatment.
+- **`ScAppListingCard`** — use when you are building a grid of *entry points into a product* (Catalogix / Photogenix / Artifax landing pages in CXO) and each tile is icon + title + one-line description.
+- **`ScArtifaxInvite`** — use when you are building the per-app access list in an invite or edit-user flow and need the **Artifax** row (or any app whose access is a plain on/off with no sub-scope).
+- **`ScCatalogixInvite`** — use when you're building the per-app access list in an invite / edit-user flow and the Catalogix row has to pick **which stores** the user can see.
+- **`ScDefaultCard`** — use when a screen asks "which of these routes do you want?" and each route is a title plus a one-line cost/time hint — stacked vertically, often with "or" separators between them.
+- **`ScPhtogenixInvite`** — use when you need the **Photogenix** row in a per-app access list and want it to match the neighbouring rows exactly.
+- **`ScStoreCard`** — use when you are rendering the **grid** view of a stores listing and each tile is name + status + counts + date.
+- **`ScWorkspaceCard`** _(legacy)_ — use when essentially never in new code. Use `ScWorkspaceSwitchCard`, or `StreamoidWorkspaceSwitcher` if you want the whole switch-workspace overlay.
+- **`ScWorkspaceSwitchCard`** — use when you are building a workspace list where each row shows role, plan and owner and can be switched into, configured or left.
+  - also documented here: `NscWorkspaceSwitch`
+
+## chat-agent
+
+- **`ScBriefCard`** — use when you are building the agent's suggested-prompt / "brief" grid and each card is a single sentence the user can click to send.
+- **`ScInChatList`** — use when you are rendering the agent's thinking/tool steps in a chat transcript, one row per step, each with a pending/working/done/error status.
+- **`ScInChatMessage`** — use when you need the bubble chrome for one turn of a chat transcript.
+- **`ScMediaApproval`** — use when the agent generated media and the user must review it one item at a time and optionally say what to change.
+- **`ScMediaSelect`** — use when the agent produced a batch of images/videos and the user must choose a subset.
+- **`ScQuickPrompt`** — use when you're building the chat/copilot empty state and want a row or grid of 2–4 clickable starter prompts.
+- **`ScSelection`** — use when the agent asks the user to pick **one** of several labelled options inside the chat transcript (the `radio` field type of the agent's DynamicForm).
+- **`ScSelectionList`** — use when the agent proposes a value (or a comma-joined set of values) and the user must accept or decline **that one line**.
+- **`ScSubAgent`** — use when a step in the transcript **is** a delegation — the agent invoked a named sub-agent and you want to say so in one chip.
+  - also documented here: `formatSubAgentLabel`
+- **`ScThinkingStepIcon`** — use when you are laying out your own step/progress row and need the product's pending → working → done → failed glyph.
+- **`ScTodoList`** — use when the agent produced a plan or task list and the user must be able to tick, rename, remove and add items — the `todo_list` field of the agent's in-chat DynamicForm.
+
+## feed-taxonomy
+
+- **`ScMappingCard`** — use when you are building a source→target mapping review list where each row can be confirmed, ignored, or is still pending.
+- **`ScSelectionPillGroup`** — use when you need a segmented control — 2–5 mutually exclusive views or filters, all visible at once — and you don't want to hand-roll the map/compare/set boilerplate.
+- **`ScTaxonomyPill`** — use when you're drawing a category/ontology tree and need the node chips and their expand/collapse controls to look like one family.
+- **`ScValueMappingL1`** — use when you need a vertical list of *values* (attribute values, categories, enum members) where exactly one is the current selection and some carry an "updated" marker.
+
+## forms
+
+- **`ScAppField`** — use when you are building the *invite a user* / *manage a user* form and need the standard per-app permission section.
+- **`ScCalendar`** _(legacy)_ — use when you're fixing or finishing this component. Otherwise, don't.
+- **`ScCalendarDateComps`** — use when you are building your own calendar grid and want the DS's day-cell skins — including the half-rounded range ends.
+- **`ScCheckbox`** — use when you need a tickable box next to content you are laying out yourself — table-row selection, grid-cell selection, a "select all" header.
+- **`ScCheckField`** — use when a form needs 2 (maybe 3) boolean options under one caption — "Permission: Can Use Credits / Can Invite User".
+- **`ScCounter`** — use when the user nudges a small bounded integer — page size, image count, retry limit, a PLP range bound.
+- **`ScFileField`** — use when a form needs any *non-image* file — a CSV/XLSX feed, a PDF, a ZIP — and you want a filename + progress + error line for free.
+- **`ScImageField`** — use when a form takes **one image** and the user should see it — workspace logo, brand mark, cover image.
+- **`ScOnlyField`** — use when you need a search box, a filter input, or a compact input inside a toolbar, sidebar or modal row — with no label above it.
+- **`ScPairtext`** — use when you are composing a DS component and need the standard "control + label" or "icon + label" row, and you want it to line up with the rest of the library.
+- **`ScRadio`** — use when you are building a single-choice option list and laying out the rows (label, description, disabled styling) yourself.
+- **`ScSelect`** — use when the user picks **one** value from a list that is too long or too wordy for inline pills, and you want DS chrome without wiring a trigger yourself.
+- **`ScSlider`** _(legacy)_ — use when essentially never in its current form. There is no host call site, and it cannot report or receive a value.
+- **`ScTabField`** — use when a form needs **exactly two** mutually exclusive values under one caption, and you want it to match the `ScTextField` / `ScCheckField` rhythm.
+- **`ScTextArea`** — use when the user types more than one line — descriptions, product copy, notes, prompts, feedback.
+- **`ScTextField`** — use when you need a labelled single-line input inside a form, modal or settings panel.
+- **`ScToggleSwitch`** — use when a single boolean setting applies immediately — enable a feature, mute a rule, turn on an app for a user.
+
+## layout
+
+- **`ScHDivider`** — use when you need a horizontal rule between stacked sections, rows, or card regions.
+- **`ScHeader`** — use when you are building a bespoke table header row and want the column captions to match every other table in the product.
+- **`ScSettingsNav`** _(legacy)_ — use when you need a static visual placeholder of the settings nav (a design mock, a screenshot, a Figma-parity check).
+- **`ScSettingsTabComp`** — use when you need a settings-style tab strip — Profile / Workspace, or a modal's section tabs — where the active tab is marked by an underline.
+- **`ScTabComp`** — use when you need one segment of a compact 2–5 way view toggle — theme switcher, grid/list, Active/Pending, Fast/Pro.
+- **`ScTabs`** — use when you have an arbitrary-length list of views/filters (6, 12, 20 tabs) and want them as a wrapping row of pills.
+- **`ScTabSwitcher`** — use when you have a compact 2–5 way view toggle and want the standard track: theme switcher, Active/Pending, grid/list, Fast/Pro.
+- **`ScVDivider`** — use when you need a rule between two things sitting side by side — a search field and a close button, two stat columns, a toolbar's action groups.
+
+## mobile
+
+- **`InvoiceHistoryMobile`** — use when you are rendering the "Invoice history" tab of a mobile billing screen, one component per invoice.
+- **`ScCreditsUsageCardMobile`** — use when you are laying out the mobile (narrow, single-column) billing screen and need the credits meter above the invoice/usage tabs.
+- **`ScInvoiceHistoryMobile`** _(deprecated, NOT exported — internal only)_ — use when never. Use `InvoiceHistoryMobile` instead.
+- **`ScMobileBottomAction`** — use when a mobile screen or sheet ends in a committed action — Save / Cancel, Continue, Delete.
+- **`ScMobileTopNav`** — use when a mobile screen needs the standard top bar — hamburger on the left, a title, and an optional search or overflow affordance on the right.
+- **`ScPlanDetailsCardMobile`** — use when the mobile billing screen needs the "what plan am I on" block at the top.
+- **`ScProfileV2Mobile`** — use when a mobile sheet or header needs "who is signed in" as an avatar plus name/email, and nothing else.
+- **`ScReferralCardMobile`** — use when you are building the mobile view of a referral programme screen — one card per person referred.
+- **`ScRoleMobile`** — use when a mobile list row or card needs the user's role as a chip and the only two roles are admin and member.
+- **`ScTableListMobile`** — use when you are rendering the Teams / members list on CXO mobile, or a single member's summary card in a mobile drawer or popup.
+- **`ScUsageHistoryMobile`** _(deprecated, NOT exported — internal only)_ — use when never. Use `UsageHistoryMobile` instead.
+- **`ScWorkspaceSettingsMobile`** — use when a mobile workspace-settings screen needs a workspace summary that also shows how many people are in it.
+- **`ScWorkspaceSwitchMobile`** _(legacy)_ — use when you specifically need the V1 look — a two-block card with a divider and an owner row that carries your own icon. In new code, don't.
+- **`ScWorkspaceSwitchMobileV2`** — use when you need a workspace identity row on mobile — in the workspace switcher sheet, in mobile settings, or as the header of a workspace popup.
+- **`UsageHistoryMobile`** — use when you are rendering the "Usage history" tab of a mobile billing screen, one component per credit-debit log entry.
+
+## overlays
+
+- **`ScBadges`** — use when you need to state a status, a count or a tag next to something — "Revoked", "Active", "1,240 credits", "Needs attention".
+- **`ScBeacon`** — use when a row or card needs a colour-coded state marker that sits beside a text label ("● Live", "● Needs attention").
+- **`ScDrawer`** — use when you need a create/edit panel or a detail pane that slides in from the screen edge and stays full height.
+- **`ScGuide`** — use when you are building a product walkthrough / coachmark sequence and need the step card.
+- **`ScInfoPopup`** — use when a label or a table header needs a short explanation, and you want the standard ⓘ affordance next to it.
+- **`ScMenuOptions`** — use when you need a row in a profile flyout, an account/settings menu, or a kebab/overflow menu.
+- **`ScModal`** — use when you need a centered dialog that blocks the page — confirm, create/edit form, image preview, invite flow.
+- **`ScPagination`** — use when you have a server-paged table or list and you already hold `page` + `offset` state and a refetch function.
+- **`ScPopUpMenu`** _(legacy)_ — use when never, in new code.
+- **`ScProgressBar`** — use when you have a known-percentage operation to show — an upload, a batch render, credits consumed.
+- **`StreamoidWorkspaceSwitcher`** _(legacy)_ — use when your host already runs Tailwind and you want the whole switch-workspace modal without building the shell.
+
+## profile
+
+- **`ScAccess`** — use when you need a compact, non-interactive icon group summarising entitlements in a dense table row.
+- **`ScDp`** — use when you need any avatar — a user's face, a workspace logo, an assignee chip, a sidebar profile button.
+- **`ScIntialProfileCover`** — use when you need the workspace/profile *initials block* from the Figma workspace rows and you know you will never have an image.
+- **`ScProfile`** — use when you need "avatar, name, second line" as one unit inside a DS composite you are building.
+- **`ScProfileImageUpdate`** — use when a **profile settings** screen needs "change your picture" — circle above, two icon buttons below.
+- **`ScProfileOptions`** _(legacy)_ — use when never, in new code. Keep it only to avoid breaking an existing import.
+- **`ScProfilePopup`** — use when you need the app's profile/account menu. This is the one.
+- **`ScProfileSettingsComp`** _(legacy)_ — use when you want a pixel reference for the account card's layout (24px padding, avatar column + 16px-gapped field stack).
+- **`ScRole`** — use when you are showing someone's role in a team table or workspace row and want the standard admin-vs-member colour coding.
+- **`ScWorkspace`** _(NOT exported — internal only)_ — use when you are editing a component **inside** `packages/ui/src` and need the workspace identity row. Import it by relative path.
+
+## selection
+
+- **`ScSelectionPill`** — use when you need a segmented control — 2–5 mutually exclusive views or filters shown as pills, all visible at once.
+
+## sidebar
+
+- **`CreditWarningBanner`** — use when you need the "you're nearly out of credits" nudge in a sidebar rail, in either expanded or collapsed form.
+- **`ScAppSwitchPanel`** — use when you need the "go to another Streamoid product" list — in `StreamoidSidebar`'s `switchPanel`, or in your own portalled flyout.
+  - also documented here: `ScAppSwitchRow`
+- **`ScArtifaxSidebar`** — use when you are working on the Artifax (or Tactix) shell, or you need a sidebar whose sections the user can collapse.
+- **`ScAskAgentButton`** — use when you need the assistant-panel CTA **outside** a DS sidebar. Inside one, use the sidebar's `assistantCta` prop instead.
+  - also documented here: `ScAskAgentSlot`, `AssistantCta`
+- **`ScCatalogixSidebar`** _(legacy)_ — use when essentially never in new code. It is useful mainly as a worked example of how to preset `StreamoidSidebar`.
+- **`ScLogoUnit`** _(legacy)_ — use when never. It cannot be clicked and cannot show a product.
+- **`ScSidebar`** _(legacy)_ — use when never, in product code. It exists so old imports keep resolving, and as a pixel reference for the original design.
+- **`ScSidebarIcons`** _(legacy)_ — use when never. It has no click path.
+- **`ScSideBarLogoUnit`** — use when you are filling `StreamoidSidebar`/`ScArtifaxSidebar`'s `expandedLogo` / `collapsedLogo` slots.
+  - also documented here: `ProductWordmark`, `ProductCollapsedMark`, `hasCollapsedMark`
+- **`ScSidebarMenu`** — use when you are laying out sidebar nav rows yourself, or building a vertical nav that isn't the app rail (e.g. a settings nav, a panel's section list).
+- **`ScSidebarProfile`** _(legacy)_ — use when never. There is no way to pass a real user through it.
+- **`ScSidebarSwitchMenu`** — use when you're building a "switch to another product" list inside a sidebar and each entry needs a name **and** a subtitle.
+- **`ScVersion`** _(legacy)_ — use when never. `StreamoidSidebar` renders its own version footer inline from `versionText`.
+- **`StreamoidSidebar`** — use when you are building (or fixing) a desktop app's primary left navigation and you want the same chrome CXO, Photogenix and Catalogix use.
+
+## tables
+
+- **`ScCatalogixStoreHeader`** — use when you are rendering the Catalogix stores list view and need the header above `ScCatalogixStoreTableList` rows.
+- **`ScCatalogixStoreTableList`** — use when you're rendering the Catalogix stores list view, one row per store, under a `ScCatalogixStoreHeader`.
+- **`ScReferralTableHeader`** — use when you are building the Settings → Referral "Referral History" table and need the header above `ScReferralTableList` rows.
+- **`ScReferralTableList`** — use when you are rendering Settings → Referral → "Referral History" and have a list of `{ name, email, date, status, points }`.
+- **`ScTableHeader`** — use when you are building the Teams / members / pending-invites table and need the header strip above the rows.
+- **`ScTableList`** — use when you want a quick, visually correct members-table row and the *only* real data you need to show is the user's **email**, who **invited** them, and the **signed-on date**.
+
+---
+
+## Easily confused — check before you pick
+
+| Component | Do not confuse with |
+|---|---|
+| `ScAccess` | `ScAppField`, `ScRole`, `ScBadges`, `ScAppSwitchPanel`, `ScAppCard` |
+| `ScAppCardForCopilot` | `ScAppCardV3`, `ScAppCard`, `ScAppListingCard`, `ScAppcardLogos` |
+| `ScAppCardV3` | `ScAppCard`, `ScAppListingCard`, `ScBriefCard`, `ScAppCardForCopilot` |
+| `ScAppSwitchPanel` | `ScSidebarSwitchMenu`, `StreamoidWorkspaceSwitcher`, `ScWorkspaceSwitchCard`, `ScAppListingCard`, `ScAppCard` |
+| `ScAppcardLogos` | `ProductWordmark`, `ScStreamoidWordmark`, `ScStreamoidMascot`, `ScCxoCopilotLogo`, `ScAppCard` |
+| `ScArtifaxSidebar` | `StreamoidSidebar`, `ScCatalogixSidebar`, `ScArtifaxInvite`, `ScSidebar` |
+| `ScAskAgentButton` | `ScButton`, `ScCxoCopilotLogo`, `ScQuickPrompt`, `ScSidebarMenu` |
+| `ScBadges` | `ScBeacon`, `ScSelectionPill`, `ScTaxonomyPill`, `ScRole`, `ScButton` |
+| `ScBeacon` | `ScBadges`, `ScProgressBar` |
+| `ScBillingLogsTableHeader` | `ScBillingHistoryHeader`, `ScHeader`, `ScTableHeader` |
+| `ScBillingLogsTableList` | `ScBillingHistoryTableList`, `ScTableList`, `ScBillingLogsTableHeader` |
+| `ScBillingHistoryTableList` | `ScBillingLogsTableList`, `ScTableList`, `InvoiceHistoryMobile` |
+| `ScStreamoidWordmark` | `ScStrLogo`, `ScLogoUnit`, `ScAppcardLogos`, `ProductWordmark`, `ScSideBarLogoUnit`, `ScCxoCopilotLogo` |
+| `ScBriefCard` | `ScQuickPrompt`, `ScAppCardV3`, `ScDefaultCard`, `ScAppCardForCopilot` |
+| `ScButton` | `ScFieldButton`, `ScOnlyIcon`, `ScPopUpMenu` |
+| `ScCalendar` | `ScCalendarDateComps`, `ScCounter`, `ScPagination` |
+| `ScCalendarDateComps` | `ScCalendar`, `ScBadges`, `ScCounter` |
+| `ScCatalogixSidebar` | `StreamoidSidebar`, `ScArtifaxSidebar`, `ScCatalogixInvite`, `ScCatalogixStoreHeader` |
+| `ScCatalogixStoreHeader` | `ScTableHeader`, `ScHeader`, `ScBillingHistoryHeader`, `ScBillingLogsTableHeader`, `ScReferralTableHeader`, `ScMobileTopNav` |
+| `ScCatalogixStoreTableList` | `ScTableList`, `ScTableListMobile`, `ScStoreCard`, `ScBillingHistoryTableList`, `ScBillingLogsTableList`, `ScReferralTableList` |
+| `ScCounter` | `ScSlider`, `ScTextField`, `ScBadges`, `ScProgressBar` |
+| `CreditWarningBanner` | `ScCreditsUsageCard`, `ScGuide`, `ScBadges`, `ScInfoPopup` |
+| `ScCreditsUsageCard` | `ScCreditsUsageCardMobile`, `ScPlanDetailsCard`, `ScProgressBar`, `CreditWarningBanner` |
+| `ScCreditsUsageCardMobile` | `ScCreditsUsageCard`, `ScPlanDetailsCardMobile`, `CreditWarningBanner` |
+| `ScDefaultCard` | `ScAppListingCard`, `ScStoreCard`, `ScMappingCard`, `ScBriefCard`, `ScRadio` |
+| `ScDp` | `ScIntialProfileCover`, `ScProfileImageUpdate`, `ScProfile` |
+| `ScDrawer` | `ScModal`, `ScSidebar`, `StreamoidSidebar`, `ScProfilePopup` |
+| `ScGoogleSignIn` | `ScButton`, `ScAppSwitchPanel`, `ScAppCard` |
+| `ScGuide` | `ScInfoPopup`, `ScModal`, `ScDrawer`, `ScBeacon`, `ScPopUpMenu` |
+| `ScHDivider` | `ScVDivider` |
+| `ScHeader` | `ScTableHeader`, `ScMobileTopNav`, `ScSideBarLogoUnit`, `ScHDivider` |
+| `ScInChatList` | `ScSubAgent`, `ScInChatMessage`, `ScTableList`, `ScMenuOptions` |
+| `ScInChatMessage` | `ScInChatList`, `ScInfoPopup`, `ScBriefCard` |
+| `ScInfoPopup` | `ScModal`, `ScPopUpMenu`, `ScProfilePopup`, `ScGuide` |
+| `ScIntialProfileCover` | `ScDp`, `ScProfileImageUpdate`, `ScProfile`, `ScBadges` |
+| `ScInvoiceHistoryMobile` | `InvoiceHistoryMobile`, `ScUsageHistoryMobile`, `UsageHistoryMobile` |
+| `InvoiceHistoryMobile` | `ScInvoiceHistoryMobile`, `UsageHistoryMobile`, `ScBillingHistoryTableList`, `ScTableListMobile` |
+| `ScLogoUnit` | `ScSideBarLogoUnit`, `ScStrLogo`, `ScStreamoidWordmark`, `ScStreamoidMascot`, `ScCxoCopilotLogo`, `ScAppcardLogos` |
+| `ScMappingCard` | `ScValueMappingL1`, `ScDefaultCard`, `ScTableList` |
+| `ScMenuOptions` | `ScPopUpMenu`, `ScSidebarMenu`, `ScProfileOptions`, `ScTabComp` |
+| `ScMobileBottomAction` | `ScButton`, `ScMobileTopNav`, `ScFieldButton`, `ScOnlyIcon` |
+| `ScMobileTopNav` | `ScHeader`, `ScTableHeader`, `ScSideBarLogoUnit`, `ScMobileBottomAction`, `ScTabSwitcher` |
+| `ScModal` | `ScDrawer`, `ScInfoPopup`, `ScProfilePopup` |
+| `ScOnlyIcon` | `ScOnlyField`, `ScButton`, `ScFieldButton`, `ScSidebarIcons` |
+| `ScPagination` | `ScCounter`, `ScTabs`, `ScOnlyField` |
+| `ScPairtext` | `ScCheckField`, `ScCheckbox`, `ScRadio`, `ScSelection`, `ScSelectionPill`, `ScMenuOptions` |
+| `ScPlanCard` | `ScPlanDetailsCard`, `ScPlanDetailsCardMobile`, `ScPlanComparison`, `ScAppCard` |
+| `ScPlanDetailsCard` | `ScPlanCard`, `ScPlanDetailsCardMobile`, `ScCreditsUsageCard`, `ScPlanComparison` |
+| `ScPlanDetailsCardMobile` | `ScPlanDetailsCard`, `ScPlanCard`, `ScPlanComparison`, `ScCreditsUsageCardMobile` |
+| `ScPlanComparison` | `ScPlanCard`, `ScTableList`, `ScTabSwitcher`, `ScBillingLogsTableHeader` |
+| `ScPopUpMenu` | `ScMenuOptions`, `ScProfilePopup`, `ScModal`, `ScInfoPopup` |
+| `ScProfile` | `ScWorkspace`, `ScProfileOptions`, `ScProfilePopup`, `ScProfileSettingsComp`, `ScProfileV2Mobile` |
+| `ScProfileImageUpdate` | `ScImageField`, `ScDp`, `ScIntialProfileCover`, `ScProfile`, `ScProfileSettingsComp` |
+| `ScProfileOptions` | `ScProfilePopup`, `ScProfileSettingsComp`, `ScProfile`, `ScPopUpMenu`, `ScMenuOptions` |
+| `ScProfileV2Mobile` | `ScProfile`, `ScProfileOptions`, `ScProfilePopup`, `ScProfileSettingsComp`, `ScDp`, `ScTableListMobile` |
+| `ScProfilePopup` | `ScProfileOptions`, `ScProfileSettingsComp`, `ScProfile`, `ScPopUpMenu`, `ScAppSwitchPanel` |
+| `ScProfileSettingsComp` | `ScProfileOptions`, `ScProfilePopup`, `ScProfileImageUpdate`, `ScProfile`, `ScSettingsTabComp` |
+| `ScProgressBar` | `ScSlider`, `ScBadges`, `ScCounter` |
+| `ScRole` | `ScBadges`, `ScRoleMobile`, `ScAccess`, `ScSelectionPill`, `ScTaxonomyPill` |
+| `ScRoleMobile` | `ScRole`, `ScBadges`, `ScTaxonomyPill`, `ScSelectionPill` |
+| `ScSelection` | `ScSelectionPill`, `ScSelectionPillGroup`, `ScSelectionList`, `ScRadio`, `ScSelect` |
+| `ScSelectionList` | `ScSelection`, `ScSelectionPill`, `ScSelectionPillGroup`, `ScTodoList`, `ScMediaApproval` |
+| `ScSelectionPill` | `ScSelection`, `ScTaxonomyPill`, `ScBadges`, `ScTabComp` |
+| `ScSelectionPillGroup` | `ScSelection`, `ScSelectionList`, `ScTabs`, `ScTabSwitcher`, `ScSettingsTabComp` |
+| `ScSideBarLogoUnit` | `ScLogoUnit`, `ScStreamoidWordmark`, `ScStreamoidMascot`, `ScStrLogo`, `ScAppcardLogos`, `ScCxoCopilotLogo` |
+| `ScSidebar` | `StreamoidSidebar`, `ScSidebarMenu`, `ScCatalogixSidebar`, `ScArtifaxSidebar`, `ScMobileTopNav` |
+| `ScSidebarSwitchMenu` | `ScSidebarMenu`, `ScAppSwitchPanel`, `ScWorkspaceSwitchCard`, `StreamoidWorkspaceSwitcher`, `ScAppCard` |
+| `ScSidebarMenu` | `ScSidebarSwitchMenu`, `ScSidebar`, `ScMenuOptions`, `ScSettingsTabComp` |
+| `ScSidebarProfile` | `ScProfile`, `ScProfileOptions`, `ScProfilePopup`, `ScProfileSettingsComp`, `ScProfileV2Mobile`, `ScIntialProfileCover` |
+| `StreamoidSidebar` | `ScSidebar`, `ScArtifaxSidebar`, `ScCatalogixSidebar`, `ScSidebarMenu`, `ScLogoUnit` |
+| `ScSlider` | `ScProgressBar`, `ScCounter`, `ScSelectionPillGroup`, `ScTabSwitcher` |
+| `ScStoreCard` | `ScCatalogixStoreTableList`, `ScDefaultCard`, `ScAppListingCard`, `ScWorkspaceCard` |
+| `ScSubAgent` | `ScInChatList`, `ScBadges`, `ScTaxonomyPill`, `ScSelectionPill` |
+| `ScTabs` | `ScTabComp`, `ScTabSwitcher`, `ScTabField`, `ScSettingsTabComp`, `ScSelectionPill` |
+| `ScTaxonomyPill` | `ScSelectionPill`, `ScSelectionPillGroup`, `ScBadges`, `ScSelection` |
+| `ScThinkingStepIcon` | `ScBeacon`, `ScProgressBar`, `ScBadges`, `ScInChatList` |
+| `ScUsageHistoryMobile` | `UsageHistoryMobile`, `ScInvoiceHistoryMobile`, `InvoiceHistoryMobile` |
+| `UsageHistoryMobile` | `ScUsageHistoryMobile`, `InvoiceHistoryMobile`, `ScBillingLogsTableList`, `ScCreditsUsageCardMobile` |
+| `ScVDivider` | `ScHDivider` |
+| `ScValueMappingL1` | `ScMappingCard`, `ScSelectionPill`, `ScDefaultCard`, `ScTableList` |
+| `ScWorkspace` | `ScProfile`, `ScWorkspaceCard`, `ScWorkspaceSwitchCard`, `StreamoidWorkspaceSwitcher`, `ScWorkspaceSwitchMobileV2` |
+| `ScWorkspaceSwitchCard` | `ScWorkspaceCard`, `ScWorkspace`, `StreamoidWorkspaceSwitcher`, `ScWorkspaceSwitchMobile`, `ScWorkspaceSwitchMobileV2` |
+| `ScWorkspaceSwitchMobileV2` | `ScWorkspaceSwitchMobile`, `ScWorkspaceSettingsMobile`, `ScWorkspaceCard`, `ScWorkspaceSwitchCard`, `StreamoidWorkspaceSwitcher` |
+| `StreamoidWorkspaceSwitcher` | `ScWorkspaceSwitchCard`, `ScWorkspaceCard`, `ScWorkspace`, `ScWorkspaceSwitchMobileV2`, `ScModal` |
+| `ScAppListingCard` | `ScAppCard`, `ScAppCardV3`, `ScAppCardForCopilot`, `ScDefaultCard` |
+| `ScAppCard` | `ScAppCardV3`, `ScAppListingCard`, `ScAppCardForCopilot`, `ScAppSwitchRow` |
+| `ScAppField` | `ScTextField`, `ScOnlyField`, `ScAppCard`, `ScAppSwitchPanel`, `ScCheckField` |
+| `ScArtifaxInvite` | `ScPhtogenixInvite`, `ScCatalogixInvite`, `ScAppCard`, `ScAppListingCard`, `ScAppCardV3`, `ScAppCardForCopilot`, `ScAccess` |
+| `ScBillingHistoryHeader` | `ScBillingLogsTableHeader`, `ScTableHeader`, `ScHeader`, `ScMobileTopNav` |
+| `ScCatalogixInvite` | `ScArtifaxInvite`, `ScPhtogenixInvite`, `ScAppCard`, `ScAppListingCard`, `ScAccess`, `ScCatalogixStoreTableList`, `ScCheckField` |
+| `ScCheckField` | `ScCheckbox`, `ScPairtext`, `ScTabField`, `ScAppField` |
+| `ScCheckbox` | `ScCheckField`, `ScPairtext`, `ScToggleSwitch`, `ScRadio` |
+| `ScFieldButton` | `ScButton`, `ScOnlyIcon`, `ScMenuOptions`, `ScTabComp` |
+| `ScFileField` | `ScImageField`, `ScProfileImageUpdate`, `ScAppField`, `ScProgressBar` |
+| `ScImageField` | `ScFileField`, `ScProfileImageUpdate`, `ScDp`, `ScIntialProfileCover` |
+| `ScMediaApproval` | `ScMediaSelect`, `ScSelectionList`, `ScImageField`, `ScFileField`, `ScTodoList` |
+| `ScMediaSelect` | `ScMediaApproval`, `ScImageField`, `ScSelectionList`, `ScCheckField`, `ScStoreCard` |
+| `ScOnlyField` | `ScOnlyIcon`, `ScTextField`, `ScAppField` |
+| `ScPendingAction` | `ScButton`, `ScMobileBottomAction`, `ScSelectionList`, `ScMenuOptions` |
+| `ScPhtogenixInvite` | `ScArtifaxInvite`, `ScCatalogixInvite`, `ScAppCard`, `ScAppListingCard`, `ScAppCardV3`, `ScAppCardForCopilot`, `ScAccess` |
+| `ScQuickPrompt` | `ScBriefCard`, `ScDefaultCard`, `ScAppCardForCopilot`, `ScAppListingCard` |
+| `ScRadio` | `ScCheckbox`, `ScPairtext`, `ScSelection`, `ScSelectionPill`, `ScTabField` |
+| `ScReferralCardMobile` | `ScReferralTableList`, `ScTableListMobile`, `ScProfileV2Mobile`, `ScBadges` |
+| `ScReferralTableHeader` | `ScTableHeader`, `ScHeader`, `ScReferralCardMobile`, `ScBillingHistoryHeader`, `ScBillingLogsTableHeader`, `ScCatalogixStoreHeader` |
+| `ScReferralTableList` | `ScTableList`, `ScReferralTableHeader`, `ScReferralCardMobile`, `ScBillingHistoryTableList`, `ScBillingLogsTableList`, `ScBadges` |
+| `ScSelect` | `ScSelection`, `ScSelectionList`, `ScSelectionPill`, `ScSelectionPillGroup`, `ScPopUpMenu`, `ScMenuOptions` |
+| `ScSettingsNav` | `ScSettingsTabComp`, `ScSidebarMenu`, `ScSidebar`, `StreamoidSidebar`, `ScProfileSettingsComp` |
+| `ScSettingsTabComp` | `ScTabComp`, `ScTabSwitcher`, `ScTabs`, `ScSettingsNav`, `ScSelectionPill` |
+| `ScSidebarIcons` | `ScOnlyIcon`, `ScSidebarMenu`, `ScAppcardLogos`, `ScButton` |
+| `ScStrLogo` | `ScStreamoidWordmark`, `ScStreamoidMascot`, `ScLogoUnit`, `ScSideBarLogoUnit`, `ScAppcardLogos` |
+| `ScTabComp` | `ScTabs`, `ScTabSwitcher`, `ScTabField`, `ScSettingsTabComp`, `ScSelectionPill` |
+| `ScTabField` | `ScTabSwitcher`, `ScTabComp`, `ScTabs`, `ScSettingsTabComp`, `ScSelectionPillGroup`, `ScCheckField` |
+| `ScTabSwitcher` | `ScTabs`, `ScTabComp`, `ScTabField`, `ScSettingsTabComp`, `ScSelectionPillGroup` |
+| `ScTableHeader` | `ScHeader`, `ScReferralTableHeader`, `ScCatalogixStoreHeader`, `ScBillingHistoryHeader`, `ScBillingLogsTableHeader`, `ScMobileTopNav`, `ScTableList` |
+| `ScTableList` | `ScTableHeader`, `ScTableListMobile`, `ScReferralTableList`, `ScBillingLogsTableList`, `ScBillingHistoryTableList`, `ScCatalogixStoreTableList` |
+| `ScTableListMobile` | `ScTableList`, `ScTableHeader`, `ScReferralCardMobile`, `ScProfileV2Mobile`, `ScRoleMobile`, `ScRole` |
+| `ScTextArea` | `ScTextField`, `ScOnlyField` |
+| `ScTextField` | `ScOnlyField`, `ScTextArea`, `ScAppField`, `ScOnlyIcon` |
+| `ScTodoList` | `ScCheckField`, `ScCheckbox`, `ScInChatList`, `ScTableList`, `ScMenuOptions` |
+| `ScToggleSwitch` | `ScCheckbox`, `ScAppSwitchPanel`, `ScWorkspaceSwitchCard`, `ScTabSwitcher`, `ScAppField` |
+| `ScVersion` | `StreamoidSidebar`, `ScSidebarIcons`, `ScMenuOptions`, `ScBadges` |
+| `ScWorkspaceCard` | `ScWorkspaceSwitchCard`, `StreamoidWorkspaceSwitcher`, `ScSidebarSwitchMenu`, `ScWorkspaceSwitchMobile`, `ScWorkspaceSwitchMobileV2` |
+| `ScWorkspaceSettingsMobile` | `ScWorkspaceSwitchMobile`, `ScWorkspaceSwitchMobileV2`, `ScWorkspaceCard`, `ScWorkspaceSwitchCard`, `ScProfileSettingsComp` |
+| `ScWorkspaceSwitchMobile` | `ScWorkspaceSwitchMobileV2`, `ScWorkspaceSettingsMobile`, `ScWorkspaceCard`, `ScWorkspaceSwitchCard`, `StreamoidWorkspaceSwitcher` |