@umodeapporg/ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -14,6 +14,7 @@ import { default as default13 } from "./components/Navigation/ControlledBreadcru
 import { default as default14 } from "./components/Navigation/ErrorPage.js";
 import { default as default15 } from "./components/Navigation/PageTitle.js";
 import { PageTitleNavigationProvider, usePageTitleNavigation } from "./components/Navigation/PageTitleNavigationContext.js";
+import { UiNavigationProvider, useUiNavigation } from "./components/Navigation/UiNavigationContext.js";
 import { default as default16 } from "./components/Search/UnifiedSearchBar.js";
 import { UiAccessProvider, useUiAccess } from "./components/UI/access/UiAccessContext.js";
 import { default as default17 } from "./components/UI/BaseDataCard.js";
@@ -34,6 +35,7 @@ import { default as default31 } from "./components/UI/LoadingSpinner.js";
 import { MaterialSymbol, combineClasses } from "./components/UI/MaterialSymbol/index.js";
 import { default as default32 } from "./components/UI/NoDataFound/index.js";
 import { default as default33 } from "./components/UI/SkeletonLoading.js";
+import { default as default34 } from "./components/UI/UserMenu.js";
 import { composeRefs } from "./helpers/composeRefs.js";
 import { isPressOnLayeredSurface } from "./helpers/layeredSurfaces.js";
 import { readThemeToken, useThemeChartTokens } from "./helpers/themeTokens.js";
@@ -87,7 +89,9 @@ export {
   PageTitleNavigationProvider,
   default33 as SkeletonLoading,
   UiAccessProvider,
+  UiNavigationProvider,
   default16 as UnifiedSearchBar,
+  default34 as UserMenu,
   collapseVariants,
   combineClasses,
   composeRefs,
@@ -120,6 +124,7 @@ export {
   useResolvedTheme,
   useThemeChartTokens,
   useUiAccess,
+  useUiNavigation,
   writeUiPreference
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/locales/en/ui.json.d.ts

@@ -459,6 +459,13 @@ declare const _default: {
   "urlLinkCell": {
     "clickToAccess": "Click to access"
   },
+  "userMenu": {
+    "loading": "Loading...",
+    "yourAccounts": "Your Accounts",
+    "searchAccount": "Search account",
+    "noAccounts": "No active accounts available",
+    "logout": "Sign out"
+  },
   "voiceInput": {
     "start": "Transcribe by voice",
     "stop": "Stop transcription",

package/dist/locales/en/ui.json.js

@@ -28,6 +28,7 @@ const toast = { "learnMore": "Learn more" };
 const unifiedSearchBar = { "clearFilter": "Clear filter" };
 const uploader = { "dragOr": "Drag or", "selectFile": "select a file", "orPaste": "or paste (Ctrl+V)", "allowedFormats": "Allowed formats:", "upTo": "up to", "megabytesSuffix": "MB", "sendFiles": "Send file(s)", "filesIgnoredMaxSize": "Some files were ignored because they exceeded the maximum size of {{size}}MB", "invalidFormat": "Please add files in the allowed formats", "allowedFormatsTooltip": "Allowed formats: {{formats}} up to {{size}}MB" };
 const urlLinkCell = { "clickToAccess": "Click to access" };
+const userMenu = { "loading": "Loading...", "yourAccounts": "Your Accounts", "searchAccount": "Search account", "noAccounts": "No active accounts available", "logout": "Sign out" };
 const voiceInput = { "start": "Transcribe by voice", "stop": "Stop transcription", "commandsHint": "Voice commands: say {{commands}} to insert punctuation or delete the last word." };
 const en = {
   accordion,
@@ -60,6 +61,7 @@ const en = {
   unifiedSearchBar,
   uploader,
   urlLinkCell,
+  userMenu,
   voiceInput
 };
 export {
@@ -94,6 +96,7 @@ export {
   unifiedSearchBar,
   uploader,
   urlLinkCell,
+  userMenu,
   voiceInput
 };
 //# sourceMappingURL=ui.json.js.map

package/dist/locales/en/ui.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/locales/index.d.ts

@@ -461,6 +461,13 @@ export declare const uiLocales: {
         urlLinkCell: {
             clickToAccess: string;
         };
+        userMenu: {
+            loading: string;
+            yourAccounts: string;
+            searchAccount: string;
+            noAccounts: string;
+            logout: string;
+        };
         voiceInput: {
             start: string;
             stop: string;
@@ -928,6 +935,13 @@ export declare const uiLocales: {
         urlLinkCell: {
             clickToAccess: string;
         };
+        userMenu: {
+            loading: string;
+            yourAccounts: string;
+            searchAccount: string;
+            noAccounts: string;
+            logout: string;
+        };
         voiceInput: {
             start: string;
             stop: string;

package/dist/locales/pt/ui.json.d.ts

@@ -459,6 +459,13 @@ declare const _default: {
   "urlLinkCell": {
     "clickToAccess": "Clique para acessar"
   },
+  "userMenu": {
+    "loading": "Carregando...",
+    "yourAccounts": "Suas Contas",
+    "searchAccount": "Buscar conta",
+    "noAccounts": "Nenhuma conta ativa disponível",
+    "logout": "Sair"
+  },
   "voiceInput": {
     "start": "Transcrever por voz",
     "stop": "Parar transcrição",

package/dist/locales/pt/ui.json.js

@@ -28,6 +28,7 @@ const toast = { "learnMore": "Saiba Mais" };
 const unifiedSearchBar = { "clearFilter": "Limpar Filtro" };
 const uploader = { "dragOr": "Arraste ou", "selectFile": "selecione um arquivo", "orPaste": "ou cole (Ctrl+V)", "allowedFormats": "Formatos permitidos:", "upTo": "até", "megabytesSuffix": "MB", "sendFiles": "Enviar arquivo(s)", "filesIgnoredMaxSize": "Alguns arquivos foram ignorados porque excederam o tamanho máximo de {{size}}MB", "invalidFormat": "Por favor, insira arquivos nos formatos permitidos", "allowedFormatsTooltip": "Formatos permitidos: {{formats}} até {{size}}MB" };
 const urlLinkCell = { "clickToAccess": "Clique para acessar" };
+const userMenu = { "loading": "Carregando...", "yourAccounts": "Suas Contas", "searchAccount": "Buscar conta", "noAccounts": "Nenhuma conta ativa disponível", "logout": "Sair" };
 const voiceInput = { "start": "Transcrever por voz", "stop": "Parar transcrição", "commandsHint": "Comandos de voz: diga {{commands}} para inserir pontuação ou apagar a última palavra." };
 const pt = {
   accordion,
@@ -60,6 +61,7 @@ const pt = {
   unifiedSearchBar,
   uploader,
   urlLinkCell,
+  userMenu,
   voiceInput
 };
 export {
@@ -94,6 +96,7 @@ export {
   unifiedSearchBar,
   uploader,
   urlLinkCell,
+  userMenu,
   voiceInput
 };
 //# sourceMappingURL=ui.json.js.map

package/dist/locales/pt/ui.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ui.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
@@ -8,7 +8,7 @@
   ],
   "files": [
     "dist",
-    "src/assets/styles/theme.css",
+    "src/assets/styles",
     "tailwind.preset.js",
     "tailwind-plugins"
   ],
@@ -19,6 +19,7 @@
     },
     "./styles.css": "./dist/assets/umode-ui.css",
     "./theme.css": "./src/assets/styles/theme.css",
+    "./base.css": "./src/assets/styles/base.css",
     "./tailwind-preset": "./tailwind.preset.js",
     "./locales": {
       "types": "./dist/locales/index.d.ts",
@@ -103,10 +104,10 @@
     "i18next": ">=23",
     "konva": "^9.3.22",
     "motion": "^13.1.0",
-    "react": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
     "react-apexcharts": ">=1.4.1 <2",
     "react-day-picker": "^9.3.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^18.3.1 || ^19.0.0",
     "react-i18next": ">=14",
     "react-infinite-scroll-component": "^6.1.0",
     "react-konva": "^18.2.16",
@@ -162,6 +163,9 @@
     },
     "remark-gfm": {
       "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
     }
   },
   "devDependencies": {

package/src/assets/styles/base.css

@@ -0,0 +1,489 @@
+@import './theme.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fluid interface density. Tailwind utilities are rem-based, so scaling the root
+   font-size scales typography, spacing, control heights and icons together as one
+   system. Full size (1rem = the user's default, 16px) on viewports >= 1368px (the
+   `desktop` breakpoint), so fullscreen notebooks stay pixel-identical; shrinks
+   linearly below that down to 94% at <= 1152px (compact windows, split screens).
+   The rem-based clamp keeps user font-size preferences and browser zoom working,
+   and breakpoints stay px-based so layout switches do not feed back into this
+   scale. */
+html {
+  font-size: clamp(0.94rem, 0.62rem + 0.4444vw, 1rem);
+  background-color: rgb(var(--color-canvas));
+}
+
+body {
+  background-color: rgb(var(--color-canvas));
+  color: rgb(var(--color-foreground));
+}
+
+/* ---------------------------------------------------------------------------
+   Theme switch.
+
+   The swap itself is instant: every colour resolves from a CSS variable, so one
+   attribute write repaints the whole UI already correct.
+
+   This class exists because instant was NOT instant. Around 350 components carry
+   their own `transition-colors`, so on a theme change each of them animated on its
+   own clock (140ms here, 200ms there, 280ms on a collapse) while untransitioned
+   elements changed at once. The page arrived in waves and the borders landed last.
+   Cancelling those transitions for the duration of the swap is what makes it read
+   as ONE change.
+
+   Measured on a 5.4k-node page carrying the app's real transition classes:
+     instant, components still transitioning ...... 406ms of blocked main thread
+     instant + this suppression ...................  49ms
+     one uniform transition on `*` ................ 627ms
+     tokens typed with @property and morphed ......  13fps, main thread starved
+
+   The last two are why there is no animation here. Any smooth transition between
+   two full-page themes is either a BLEND of both (illegible at the midpoint: dark
+   text on light mixed with light text on dark is grey on grey) or a repaint of
+   every element on every frame. Neither is acceptable, so the swap is atomic and
+   the only motion left is the toggle's own knob.
+   --------------------------------------------------------------------------- */
+.theme-switching,
+.theme-switching *,
+.theme-switching *::before,
+.theme-switching *::after {
+  transition: none !important;
+}
+
+/* ---------------------------------------------------------------------------
+   Motion.
+
+   One vocabulary so a dropdown, a drawer and a card hover do not each invent a
+   duration. Entering uses a decelerating curve (arrives and settles), leaving
+   uses an accelerating one (gets out of the way). Everything animates only
+   `opacity` and `transform`, which the compositor handles without layout.
+
+   Durations are deliberately short: this is a work tool, and animation that
+   delays a click is a tax, not a delight.
+   --------------------------------------------------------------------------- */
+@keyframes surface-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -0.375rem, 0) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Floating surfaces that Material Tailwind mounts on open. Targeting the roles
+   rather than the components means a new menu inherits the motion for free. */
+[role='menu'],
+[role='tooltip'],
+[data-popover='true'],
+.glass,
+.glass-elevated {
+  animation: surface-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glass-scrim {
+  animation: scrim-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* The interaction contract for anything clickable: colour and elevation move on
+   the same clock, so hover feels like one system instead of per-component taste. */
+.interactive {
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: 140ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.interactive:active {
+  transform: scale(0.985);
+}
+
+/* Reduced motion: movement goes, feedback stays. Opacity-only transitions are
+   kept because removing them entirely makes state changes feel broken, and a
+   crossfade is not the motion this setting protects against. */
+@media (prefers-reduced-motion: reduce) {
+  [role='menu'],
+  [role='tooltip'],
+  [data-popover='true'],
+  .glass,
+  .glass-elevated,
+  .glass-scrim {
+    animation-name: scrim-in;
+    animation-duration: 100ms;
+  }
+
+  .interactive:active {
+    transform: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Forced theme islands.
+
+   `data-theme` re-declares the whole token set, so any subtree can pin itself to a
+   theme. This is how print previews stay truthful: what the user sees on screen is
+   what comes out of the printer, regardless of the app theme.
+   --------------------------------------------------------------------------- */
+[data-theme='light'],
+[data-theme='dark'] {
+  background-color: rgb(var(--color-canvas));
+  color: rgb(var(--color-foreground));
+}
+
+@media print {
+  :root {
+    color-scheme: light;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Focus visibility (WCAG 2.4.7 / 1.4.11).
+
+   One ring for the whole app, driven by the `ring` token, so it has 3:1 against
+   both canvas and surface in either theme. `:focus-visible` (not `:focus`) keeps
+   it off mouse clicks. Components that draw their own ring opt out by setting
+   `outline: none` plus their own `focus-visible:` classes.
+   --------------------------------------------------------------------------- */
+:focus-visible {
+  outline: 2px solid rgb(var(--color-ring));
+  outline-offset: 2px;
+}
+
+/* The MT primitives ship `focus:outline-none`, which would swallow the ring above;
+   these re-assert it for keyboard users only. */
+button:focus-visible,
+a:focus-visible,
+[role='button']:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid rgb(var(--color-ring));
+  outline-offset: 2px;
+}
+
+/* Editable text fields always match :focus-visible in Chromium, and this block sits
+   after the utilities layer, so their `outline-none` class loses the cascade. They
+   draw their own focus chrome (RichTextEditor border/ring, or the host's
+   focus-within ring around the bare variant), so the global rectangle would double
+   the indicator and ignore the rounded container. */
+[contenteditable]:focus-visible {
+  outline: none;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--color-border-strong) / 0.55);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--color-border-strong) / 0.8);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
+input:focus {
+  box-shadow: none !important;
+}
+
+/* Chrome paints its own autofill background, which ignores every theme token. The
+   giant inset shadow is the only way to repaint it, and it has to follow the theme
+   or autofilled fields turn into white blocks in dark mode. */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  -webkit-text-fill-color: rgb(var(--color-foreground)) !important;
+  caret-color: rgb(var(--color-foreground));
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+/* @tailwindcss/forms paints every form control from `colors.gray.500` and `colors.blue.600`,
+   and withMT replaced those with the Material palette. The result is a white fill, a 2.6:1
+   border and a blue focus ring frozen into the base layer of every input, select and
+   textarea, so a control that does not name its own background renders white in dark mode.
+   The selectors below mirror the plugin's at the same specificity, so a utility class still
+   wins and only the frozen colors change.
+
+   The control names its own `field` tokens rather than borrowing `surface` + `border-strong`,
+   because the two themes identify a control differently. In LIGHT nothing changed: a white
+   field with a 3.28:1 outline. In DARK the control is a FILLED field with a soft rim, which
+   is the trade recorded below. */
+input:where(
+  [type='text'],
+  :not([type]),
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week']
+),
+select,
+textarea {
+  background-color: rgb(var(--color-field));
+  border-color: rgb(var(--color-field-border));
+}
+
+input:where(
+    [type='text'],
+    :not([type]),
+    [type='email'],
+    [type='url'],
+    [type='password'],
+    [type='number'],
+    [type='date'],
+    [type='datetime-local'],
+    [type='month'],
+    [type='search'],
+    [type='tel'],
+    [type='time'],
+    [type='week']
+  ):focus,
+select:focus,
+textarea:focus {
+  border-color: rgb(var(--color-ring));
+  --tw-ring-color: rgb(var(--color-ring));
+}
+
+/* Checkbox and radio keep `border-strong`: they are tiny, they have no fill to be
+   identified by, and their whole shape IS the outline. */
+input:where([type='checkbox'], [type='radio']) {
+  color: rgb(var(--color-primary));
+  background-color: rgb(var(--color-field));
+  border-color: rgb(var(--color-border-strong));
+}
+
+input:where([type='checkbox'], [type='radio']):focus {
+  --tw-ring-color: rgb(var(--color-ring));
+}
+
+::placeholder {
+  color: rgb(var(--color-foreground-faint));
+  opacity: 1;
+}
+
+/* The plugin's own `input::placeholder` outranks the bare `::placeholder` above. */
+input::placeholder,
+textarea::placeholder {
+  color: rgb(var(--color-foreground-faint));
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+   Text selection.
+
+   The band is an OPAQUE token, not the brand colour at low alpha. Alpha over a
+   dark canvas is what made the selection invisible: `primary / 0.24` composited
+   to 1.21:1 against the page in the dark theme, so a selected paragraph looked
+   identical to an unselected one. Opaque values land at 2.07:1 (light) and
+   2.16:1 (dark) against every surface, with the ink above 6:1 on the band.
+
+   Both channels are tokens, so a `data-theme` island (the print preview) selects
+   with its own theme instead of the app's.
+   --------------------------------------------------------------------------- */
+::selection {
+  background-color: rgb(var(--color-selection));
+  color: rgb(var(--color-selection-fg));
+}
+
+/* ---------------------------------------------------------------------------
+   Disabled and read-only.
+
+   Two different facts, and they must not share a visual: disabled means "you
+   cannot use this", read-only means "this is real content you may read and copy
+   but not edit". Neither had any rule here, so a disabled field kept the enabled
+   fill and a read-only field was indistinguishable from an editable one.
+
+   The ink is `foreground-faint`, which is the token's documented job (the 3:1
+   non-textual tier), NOT an opacity. Opacity multiplies against the backdrop:
+   the same icon at `opacity-40` measures 1.82:1 in light and 2.03:1 in dark,
+   while the token holds 4.06:1 / 4.19:1. The fill drops to `muted-active` and
+   the border to `border-emphasis` so the control keeps its shape and still reads
+   as switched off.
+   --------------------------------------------------------------------------- */
+input:where(:disabled),
+select:where(:disabled),
+textarea:where(:disabled) {
+  background-color: rgb(var(--color-field-disabled));
+  border-color: rgb(var(--color-border-emphasis));
+  color: rgb(var(--color-foreground-subtle));
+  cursor: not-allowed;
+}
+
+input:where(:disabled)::placeholder,
+textarea:where(:disabled)::placeholder {
+  color: rgb(var(--color-foreground-faint));
+}
+
+input:where([type='checkbox'], [type='radio']):where(:disabled) {
+  background-color: rgb(var(--color-field-disabled));
+  border-color: rgb(var(--color-border-emphasis));
+  color: rgb(var(--color-foreground-faint));
+  cursor: not-allowed;
+}
+
+/* There is deliberately NO `[readonly]` rule here. In this codebase the attribute
+   does not mean "locked content": four of its six uses are combobox triggers
+   (`ControlledSelect`, `DatePicker`, `DateRangePicker`), where it only blocks
+   typing. Styling it as a distinct state would repaint every select in the app. */
+
+button:disabled,
+[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.material-symbols {
+  user-select: none;
+  font-weight: normal;
+  font-style: normal;
+  font-size: inherit;
+  display: block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.wf-loading,
+.wf-materialicons-n4-inactive {
+  .material-icons {
+    display: none;
+  }
+}
+
+textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.Toastify__toast-container {
+  width: min(40rem, calc(100vw - 2rem)) !important;
+  z-index: 2147483647 !important;
+}
+
+[role='tooltip'] {
+  z-index: 9999 !important;
+  cursor: help !important;
+}
+
+[role='menu'] {
+  overflow: hidden !important;
+}
+
+.inter-font {
+  font-family: 'Inter', sans-serif !important;
+}
+
+.zIndexMax {
+  z-index: 9999 !important;
+}
+
+/* Rich text authored in RichTextEditor. Colour is stored as a role, never as a literal value,
+   so the same message stays legible after a theme switch. Both the editor and every surface
+   that renders the sanitized body share these rules. */
+.rt-color-brand {
+  color: rgb(var(--color-brand-emphasis));
+}
+
+.rt-color-secondary {
+  color: rgb(var(--color-secondary-emphasis));
+}
+
+.rt-color-accent {
+  color: rgb(var(--color-accent-emphasis));
+}
+
+.rt-color-success {
+  color: rgb(var(--color-success-emphasis));
+}
+
+.rt-color-warning {
+  color: rgb(var(--color-warning-emphasis));
+}
+
+.rt-color-danger {
+  color: rgb(var(--color-danger-emphasis));
+}
+
+.rt-color-info {
+  color: rgb(var(--color-info-emphasis));
+}
+
+.rt-color-muted {
+  color: rgb(var(--color-foreground-muted));
+}
+
+.rt-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
+  border: 1px solid rgb(var(--color-border));
+  border-radius: 0.5rem;
+  background-color: rgb(var(--color-muted));
+  color: rgb(var(--color-foreground-muted));
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-decoration: none;
+  vertical-align: baseline;
+}
+
+.rt-file:hover {
+  background-color: rgb(var(--color-muted-hover));
+  color: rgb(var(--color-foreground));
+}
+
+.rt-file::before {
+  content: 'attach_file';
+  font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: normal;
+  letter-spacing: normal;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+}

package/src/assets/styles/index.css

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import './base.css';