Integrate new Text Component (for Component System)

[ItsJonQ]

This is an extension of Implementing a Component System

---

Context ✨

The FontSizePicker component was first to receive the upgrade to use the new Components System.

We opted for a strategy (proposed by @gziolo) that imports and uses the various system parts via npm dependencies, rather than migrating the code by copying/pasting them over.

This was largely to expedite us figuring out the process for integration.
Using the new Component System code via external packages is not the end goal.

---

Text Component 🔠

Continuing this work, we'll need to (effectively) "backfill" the dependencies required for FontSizePicker. It's worth repeating that this was the original plan, but it was adjusted to expedite integration testing.

After chatting with @saramarcondes , we felt like a good candidate for this would be <Text />.

Reasons being that Text is a low-level and common UI element we plan on using in many places. Also, Text already exists as an experimental component in the project. The one coming from the new system is vastly improved.

---

Tasks ✅

In order to integrate the Text component we need to move the following dependencies into the GB repo in this order:

• partial utils
  • is, everything depends on this ui-utils: Add new package with two type checking functions #28028
  • useIsomorphicLayoutEffect -> update compose to export this, dependency of context Compose: Export useIsomorphicLayoutEffect and use it #28023
  • getOptimalTextShade, dependency of Text
  • getDisplayName, dependency of create-styles and context
  • getComputedColor, dependency of styles
• substate substate: Add package #28116
  • Migrate package (updated with fork of zustand)
• create-styles
  • Update to use the following directly:
    • merge-refs
    • hoistNonReactStatics
    • memoize (from memize)
• styles
  • Update to use the following directly:
    • colorize (from tinycolor2)
    • reakit-warning
• context
  • Update to use deepmerge and deep-equal directly and useIsomorphicLayoutEffect from compose.
• Truncate - completely new
• Text - uses adapter system

---

Tracking 📆

I've added the tasks (above) on a Google Spreadsheet Gaant chart as another way of tracking progress.

https://docs.google.com/spreadsheets/d/1gfzznyJtTr3hHoGkGRdeBRjhuZVMRalF9NuLrxkl4Nk/edit?usp=sharing

---

cc'ing @saramarcondes

[ItsJonQ]

I think we can close this one for #28475