@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

package/src/composables/workspaceRecipes.ts

@@ -0,0 +1,267 @@
+import type { TopBarVariant } from '../types'
+import type { FormEnhancements } from '../types/form-builder'
+import type {
+  ControlModel,
+  ControlModelBinding,
+  ControlSchema,
+  ControlWorkspaceOptions,
+  UseControlWorkspaceReturn,
+} from './useControlSchema'
+import { mergeControlWorkspaceOptions, resolveControlModel } from './useControlSchema'
+
+/**
+ * Merges `initialValues`/external `modelValue`/`values` on top of a base
+ * `ControlWorkspaceOptions.initialValues`, matching the layering FormBuilder expects: base
+ * defaults, then caller-supplied initial values, then live external values win last. Shared by
+ * {@link controlWorkspaceProps} and {@link bioTemplatePresetWorkspaceProps} so both "generate a
+ * workspace from options, initialValues, and v-model" views merge options identically.
+ */
+export function resolveControlOptionsWithExternalValues<TOptions extends ControlWorkspaceOptions>(
+  base: TOptions,
+  initialValues: Record<string, unknown> | undefined,
+  externalValues: Record<string, unknown> | undefined,
+): TOptions {
+  if (initialValues === undefined && externalValues === undefined) return base
+
+  return {
+    ...base,
+    initialValues: {
+      ...(base.initialValues ?? {}),
+      ...(initialValues ?? {}),
+      ...(externalValues ?? {}),
+    },
+  }
+}
+
+export interface ControlWorkspaceModelProps {
+  model?: ControlModel | ControlModelBinding
+  controls?: ControlSchema
+  controlOptions?: ControlWorkspaceOptions
+  initialValues?: Record<string, unknown>
+  modelValue?: Record<string, unknown>
+  values?: Record<string, unknown>
+}
+
+export interface ResolvedControlWorkspaceModel {
+  /** `modelValue` if provided, else `values` — the single external v-model source of truth. */
+  externalValues: Record<string, unknown> | undefined
+  /** `model` resolved through `resolveControlModel()`, or undefined for a raw `controls` schema. */
+  resolvedModel: ControlModelBinding | undefined
+  /** `controls` if provided, else the resolved model's controls, else `{}`. */
+  resolvedControls: ControlSchema
+  /** `controlOptions` merged over the resolved model's own options, with initialValues/external values layered on top. */
+  resolvedControlOptions: ControlWorkspaceOptions
+}
+
+/**
+ * Resolves ControlWorkspaceView's `model`/`controls`/`controlOptions`/`initialValues`/
+ * `modelValue`/`values` props into the schema + options pair `useControlWorkspace()` needs.
+ * Pure and framework-free so callers wrap each field in their own `computed()`.
+ *
+ * @example Recommended
+ * ```ts
+ * const resolved = computed(() => controlWorkspaceProps(props))
+ * const resolvedControls = computed(() => resolved.value.resolvedControls)
+ * ```
+ */
+export function controlWorkspaceProps(props: ControlWorkspaceModelProps): ResolvedControlWorkspaceModel {
+  const externalValues = props.modelValue ?? props.values
+  const resolvedModel = resolveControlModel(props.model)
+  const resolvedControls: ControlSchema = props.controls ?? resolvedModel?.controls ?? {}
+  const baseControlOptions = mergeControlWorkspaceOptions(resolvedModel?.controlOptions, props.controlOptions)
+  const resolvedControlOptions = resolveControlOptionsWithExternalValues(
+    baseControlOptions,
+    props.initialValues,
+    externalValues,
+  )
+
+  return { externalValues, resolvedModel, resolvedControls, resolvedControlOptions }
+}
+
+export interface DoseDesignWorkspacePassthroughProps {
+  workspace?: UseControlWorkspaceReturn<ControlSchema>
+  controlOptions?: ControlWorkspaceOptions
+  initialValues?: Record<string, unknown>
+  modelValue?: Record<string, unknown>
+  values?: Record<string, unknown>
+  title?: string
+  subtitle?: string
+  topBarVariant?: TopBarVariant
+  sidebarWidth?: string
+  sidebarVariant?: 'default' | 'analysis'
+  responsiveSidebar?: boolean
+  sidebarPosition?: 'left' | 'right'
+  sidebarTitle?: string
+  sidebarSubtitle?: string
+  sidebarBadge?: string | number
+  floating?: boolean
+  dense?: boolean
+  showSettings?: boolean
+  showFormActions?: boolean
+  formEnhancements?: FormEnhancements<Record<string, unknown>>
+  formLoading?: boolean
+  formDisabled?: boolean
+  formReadonly?: boolean
+  formSize?: 'sm' | 'md' | 'lg'
+}
+
+/**
+ * Maps DoseDesignWorkspaceView's props straight through to the identically-named
+ * ControlWorkspaceView props it wraps — the ~25-key pass-through list that used to be spelled
+ * out attribute-by-attribute in the template. `model` is the caller's already-resolved dose
+ * design model, not the raw (possibly absent) `props.model`.
+ *
+ * @example Recommended
+ * ```vue
+ * <ControlWorkspaceView v-bind="doseDesignWorkspaceProps(props, resolvedModel)" />
+ * ```
+ */
+export function doseDesignWorkspaceProps(
+  props: DoseDesignWorkspacePassthroughProps,
+  model: ControlModel | ControlModelBinding,
+) {
+  return {
+    model,
+    workspace: props.workspace,
+    controlOptions: props.controlOptions,
+    initialValues: props.initialValues,
+    modelValue: props.modelValue,
+    values: props.values,
+    title: props.title,
+    subtitle: props.subtitle,
+    topBarVariant: props.topBarVariant,
+    sidebarWidth: props.sidebarWidth,
+    sidebarVariant: props.sidebarVariant,
+    responsiveSidebar: props.responsiveSidebar,
+    sidebarPosition: props.sidebarPosition,
+    sidebarTitle: props.sidebarTitle,
+    sidebarSubtitle: props.sidebarSubtitle,
+    sidebarBadge: props.sidebarBadge,
+    floating: props.floating,
+    dense: props.dense,
+    showSettings: props.showSettings,
+    showFormActions: props.showFormActions,
+    formEnhancements: props.formEnhancements,
+    formLoading: props.formLoading,
+    formDisabled: props.formDisabled,
+    formReadonly: props.formReadonly,
+    formSize: props.formSize,
+  }
+}
+
+export interface BioTemplateExperimentWorkspaceStatusProps {
+  status?: {
+    loading?: boolean
+    saving?: boolean
+    error?: string | null
+    hasExperiment?: boolean
+    currentExperimentId?: number
+    lastLoadedAt?: Date | null
+    lastSavedAt?: Date | null
+  }
+  loading?: boolean
+  error?: string | null
+  hasExperiment?: boolean
+  currentExperimentId?: number
+  lastLoadedAt?: Date | null
+  lastSavedAt?: Date | null
+}
+
+export interface ResolvedBioTemplateExperimentStatus {
+  loading: boolean
+  error: string | null | undefined
+  hasExperiment: boolean
+  currentExperimentId: number | undefined
+  lastLoadedAt: Date | null | undefined
+  lastSavedAt: Date | null | undefined
+}
+
+/**
+ * Merges BioTemplateExperimentWorkspaceView's grouped `status` prop over its individual
+ * `loading`/`error`/`hasExperiment`/... props: `status` wins whenever the corresponding field
+ * on it is set, otherwise the flat prop (or its default) is used. Centralizes the six
+ * independent fallback rules generated plugin pages rely on when they pass a request/experiment
+ * `status` object instead of wiring each field by hand.
+ */
+export function bioTemplateExperimentWorkspaceProps(
+  props: BioTemplateExperimentWorkspaceStatusProps,
+): ResolvedBioTemplateExperimentStatus {
+  const status = props.status
+  return {
+    loading: status?.loading !== undefined || status?.saving !== undefined
+      ? Boolean(status?.loading) || Boolean(status?.saving)
+      : Boolean(props.loading),
+    error: status?.error !== undefined ? status.error : props.error,
+    hasExperiment: status?.hasExperiment ?? props.hasExperiment ?? false,
+    currentExperimentId: status?.currentExperimentId ?? props.currentExperimentId,
+    lastLoadedAt: status?.lastLoadedAt !== undefined ? status.lastLoadedAt : props.lastLoadedAt,
+    lastSavedAt: status?.lastSavedAt !== undefined ? status.lastSavedAt : props.lastSavedAt,
+  }
+}
+
+export interface BioTemplatePackWorkspacePassthroughProps {
+  message?: string
+  dense?: boolean
+  readonly?: boolean
+  showStatus?: boolean
+  showTemplateSummary?: boolean
+  loadLabel?: string
+  resetLabel?: string
+  saveLabel?: string
+}
+
+/**
+ * Assembles the prop object BioTemplatePackWorkspaceView binds onto the
+ * BioTemplateExperimentWorkspaceView it wraps: its own display props passed straight through,
+ * plus the pack-derived `target`/`label`/`status`/`actions` computed by the caller.
+ */
+export function bioTemplatePackWorkspaceProps<TTarget, TStatus, TActions>(
+  props: BioTemplatePackWorkspacePassthroughProps,
+  derived: {
+    target: TTarget
+    label: string
+    status: TStatus
+    actions: TActions
+  },
+) {
+  return {
+    target: derived.target,
+    kind: 'collection' as const,
+    label: derived.label,
+    message: props.message,
+    status: derived.status,
+    actions: derived.actions,
+    dense: props.dense,
+    readonly: props.readonly,
+    showStatus: props.showStatus,
+    showTemplateSummary: props.showTemplateSummary,
+    loadLabel: props.loadLabel,
+    resetLabel: props.resetLabel,
+    saveLabel: props.saveLabel,
+  }
+}
+
+export interface BioTemplatePresetWorkspaceOptionsProps<TOptions extends ControlWorkspaceOptions> {
+  workspaceOptions?: TOptions
+  initialValues?: Record<string, unknown>
+  modelValue?: Record<string, unknown>
+  values?: Record<string, unknown>
+}
+
+/**
+ * Resolves BioTemplatePresetWorkspaceView's `workspaceOptions`/`initialValues`/`modelValue`/
+ * `values` props into the single options object `useBioTemplatePresetWorkspace()` needs,
+ * reusing the same base/initialValues/external-values layering as {@link controlWorkspaceProps}.
+ */
+export function bioTemplatePresetWorkspaceProps<TOptions extends ControlWorkspaceOptions>(
+  props: BioTemplatePresetWorkspaceOptionsProps<TOptions>,
+): { externalValues: Record<string, unknown> | undefined; resolvedWorkspaceOptions: TOptions } {
+  const externalValues = props.modelValue ?? props.values
+  const resolvedWorkspaceOptions = resolveControlOptionsWithExternalValues(
+    (props.workspaceOptions ?? {}) as TOptions,
+    props.initialValues,
+    externalValues,
+  )
+
+  return { externalValues, resolvedWorkspaceOptions }
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 // Styles (import to ensure bundling)
 import './styles/index.css'
 
+// Typed API errors
+export * from './apiErrors'
+
 // Vue Plugin for global component registration
 export { MINTSdk, default } from './install'
 
@@ -41,6 +44,22 @@ export {
   deriveShade,
   type Hsl,
 } from './utils/color'
+export {
+  PLUGIN_SECRET_FORMAT_KEY,
+  PLUGIN_SECRET_FORMAT_REF,
+  PLUGIN_SECRET_REF_KEY,
+  clearPluginSecret,
+  isPluginSecretLocked,
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretId,
+  pluginSecretLabel,
+  pluginSecretState,
+  setPluginSecret,
+  usesPluginSecretReferences,
+  type PluginSecretRef,
+  type PluginSecretState,
+} from './utils/pluginSecrets'
 export {
   LCMS_DEFAULT_CONTROL_POSITIONS,
   createLcmsControlWellEditData,

package/src/permissions.ts

@@ -2,7 +2,6 @@ export const ADMIN_ROLE = 'admin'
 
 export const ADMIN_PANEL_PERMISSIONS = [
   'users.view',
-  'users.invite',
   'users.manage',
   'platform.configure',
   'platform.view_logs',
@@ -41,11 +40,36 @@ export interface AccessPolicy {
   plugin?: string
 }
 
+/**
+ * An object that carries an access rule.
+ *
+ * The nested `access` policy is the supported shape. The four flat fields are
+ * the pre-1.2 spelling of the same four `AccessPolicy` fields; they still work
+ * but are deprecated, and `normalizeAccessPolicy()` lets the nested policy win
+ * wherever both are given.
+ */
 export interface AccessControlled {
+  /** The access policy. Preferred over the flat fields below. */
   access?: AccessPolicy
+  /**
+   * @deprecated Since MINT 1.2; use `access.visibleFor` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   visibleFor?: AccessAudienceInput
+  /**
+   * @deprecated Since MINT 1.2; use `access.requiresAdmin` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   requiresAdmin?: boolean
+  /**
+   * @deprecated Since MINT 1.2; use `access.permissions` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   permissions?: readonly string[]
+  /**
+   * @deprecated Since MINT 1.2; use `access.anyPermissions` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   anyPermissions?: readonly string[]
 }
 
@@ -105,17 +129,32 @@ export function canAccessPlugin(
   return Array.isArray(access) && access.includes(pluginName)
 }
 
+/**
+ * Flatten an access rule — either shape, or a mix of both — into one policy.
+ *
+ * ## Precedence
+ *
+ * 1. A defined field on the nested `access` policy wins. It is the supported
+ *    spelling, so an object that carries both shapes is read as "the nested
+ *    policy, with the deprecated flat fields as leftovers".
+ * 2. Otherwise the flat field on the rule itself is used.
+ * 3. A field set to `undefined` on either side counts as unset and never
+ *    masks the other side.
+ *
+ * Only `AccessPolicy` fields the flat shape never had (`audience`,
+ * `requiresAuth`, `plugin`) can come from the nested policy alone; the four
+ * duplicated fields are the ones this ordering exists for.
+ */
 export function normalizeAccessPolicy(rule: AccessControlled | AccessPolicy | undefined): AccessPolicy {
   if (!rule) return {}
-  const { access: nested, ...direct } = rule as AccessPolicy & { access?: AccessPolicy }
-  return {
-    ...(nested ?? {}),
-    ...direct,
-    ...('visibleFor' in rule && rule.visibleFor !== undefined ? { visibleFor: rule.visibleFor } : {}),
-    ...('requiresAdmin' in rule && rule.requiresAdmin !== undefined ? { requiresAdmin: rule.requiresAdmin } : {}),
-    ...('permissions' in rule && rule.permissions !== undefined ? { permissions: rule.permissions } : {}),
-    ...('anyPermissions' in rule && rule.anyPermissions !== undefined ? { anyPermissions: rule.anyPermissions } : {}),
+  const { access: nested, ...flat } = rule as AccessPolicy & { access?: AccessPolicy }
+  const policy = { ...flat } as Record<string, unknown>
+
+  for (const [field, value] of Object.entries(nested ?? {})) {
+    if (value !== undefined) policy[field] = value
   }
+
+  return policy as AccessPolicy
 }
 
 export function canAccessByPolicy(

package/src/stores/auth.ts

@@ -58,6 +58,7 @@ export const useAuthStore = defineStore('mint-auth', () => {
     passkeyEnabled: false,
     passkeyRegistered: false,
     registrationEnabled: false,
+    databaseMode: 'none',
     experimentVisibilityMode: 'open',
   })
   const isInitialized = ref(false)

package/src/stores/experiment.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useApi } from '../composables/useApi'
+import { readErrorMessage } from '../utils/errors'
 import type { ExperimentSummary, PlatformContext } from '../types'
 
 function getPlatformApiUrl(): string | undefined {
@@ -9,12 +10,6 @@ function getPlatformApiUrl(): string | undefined {
     ?.platformApiUrl
 }
 
-function readErrorMessage(value: unknown): string {
-  if (value instanceof Error && value.message) return value.message
-  if (typeof value === 'string' && value.trim()) return value
-  return 'Failed to load experiment'
-}
-
 /**
  * The single source of truth for the experiment a plugin is currently working on.
  *
@@ -89,7 +84,7 @@ export const useExperimentStore = defineStore('mint-experiment', () => {
     } catch (err) {
       if (token !== selectionToken) return null
       current.value = null
-      error.value = readErrorMessage(err)
+      error.value = readErrorMessage(err, 'Failed to load experiment')
       return null
     } finally {
       // Only the newest request owns the loading flag; otherwise a superseded

package/src/stores/index.ts

@@ -1,3 +1,11 @@
 export { useAuthStore } from './auth'
-export { useSettingsStore, colorPalettes, type SettingsState } from './settings'
+export {
+  useSettingsStore,
+  tryUseSettingsStore,
+  colorPalettes,
+  paletteCssVariables,
+  tableDensityToSize,
+  PALETTE_CSS_VARIABLES,
+  type SettingsState,
+} from './settings'
 export { useExperimentStore } from './experiment'

package/src/stores/settings.ts

@@ -1,4 +1,4 @@
-import { defineStore } from 'pinia'
+import { defineStore, getActivePinia } from 'pinia'
 import { ref, watch } from 'vue'
 import type { ThemeMode, ColorPalette, TableDensity } from '../types'
 
@@ -62,6 +62,46 @@ export const colorPalettes: Record<ColorPalette, { name: string; hues: [number,
   pastel: { name: 'Pastel', hues: [200, 340] },
 }
 
+/**
+ * Custom properties a non-default palette overrides on `<html>`.
+ *
+ * The saturation/lightness pairs are lifted from the canonical indigo/orange
+ * tokens in `styles/variables.css` so only the hue moves; the `default`
+ * palette writes nothing at all and the stylesheet values stand.
+ */
+export const PALETTE_CSS_VARIABLES = [
+  '--color-primary',
+  '--color-primary-hover',
+  '--color-primary-soft',
+  '--color-cta',
+  '--color-cta-hover',
+] as const
+
+/** Build the `<html>` custom-property overrides for a palette. */
+export function paletteCssVariables(palette: ColorPalette): Record<string, string> {
+  if (palette === 'default') return {}
+  const [primaryHue, accentHue] = colorPalettes[palette].hues
+  return {
+    '--color-primary': `hsl(${primaryHue} 84% 67%)`,
+    '--color-primary-hover': `hsl(${primaryHue} 75% 59%)`,
+    '--color-primary-soft': `hsl(${primaryHue} 84% 67% / 0.12)`,
+    '--color-cta': `hsl(${accentHue} 95% 53%)`,
+    '--color-cta-hover': `hsl(${accentHue} 90% 48%)`,
+  }
+}
+
+/** `DataFrame`-style size that each table density maps onto. */
+const DENSITY_TABLE_SIZE: Record<TableDensity, 'sm' | 'md' | 'lg'> = {
+  compact: 'sm',
+  normal: 'md',
+  comfortable: 'lg',
+}
+
+/** Map a table density onto the `size` prop shared by the SDK table components. */
+export function tableDensityToSize(density: TableDensity): 'sm' | 'md' | 'lg' {
+  return DENSITY_TABLE_SIZE[density]
+}
+
 function loadSettings(): SettingsState {
   try {
     const stored = localStorage.getItem(STORAGE_KEY)
@@ -152,6 +192,8 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     tableDensity.value = loaded.tableDensity
 
     applyTheme()
+    applyPalette()
+    applyDensity()
   }
 
   function applyTheme() {
@@ -160,11 +202,36 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     document.documentElement.classList.toggle('dark', dark)
   }
 
+  /**
+   * Write the selected palette's hues onto `<html>` as custom-property
+   * overrides. The `default` palette clears them so `styles/variables.css`
+   * keeps ownership of the brand colors.
+   */
+  function applyPalette() {
+    if (typeof document === 'undefined') return
+    const style = document.documentElement.style
+    const overrides = paletteCssVariables(colorPalette.value)
+    for (const name of PALETTE_CSS_VARIABLES) {
+      const value = overrides[name]
+      if (value) style.setProperty(name, value)
+      else style.removeProperty(name)
+    }
+  }
+
+  /** Mirror the table density onto `<html data-density>` for CSS consumers. */
+  function applyDensity() {
+    if (typeof document === 'undefined') return
+    document.documentElement.dataset.density = tableDensity.value
+  }
+
   watch(theme, () => {
     applyTheme()
     persistSettings()
   })
 
+  watch(colorPalette, applyPalette)
+  watch(tableDensity, applyDensity)
+
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
       systemPrefersDark.value = event.matches
@@ -206,6 +273,11 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     return colorPalettes[colorPalette.value].hues
   }
 
+  /** The `size` the SDK table components default to for the current density. */
+  function getTableSize(): 'sm' | 'md' | 'lg' {
+    return tableDensityToSize(tableDensity.value)
+  }
+
   function isDark(): boolean {
     return theme.value === 'system' ? systemPrefersDark.value : theme.value === 'dark'
   }
@@ -222,11 +294,31 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     tableDensity,
     initialize,
     applyTheme,
+    applyPalette,
+    applyDensity,
     persistSettings,
     resetToDefaults,
     getPaletteHues,
+    getTableSize,
     isDark,
     getApiBaseUrl,
     getWsBaseUrl,
   }
 })
+
+/**
+ * Read the settings store without requiring Pinia to be installed.
+ *
+ * SDK components are mounted standalone (unit tests, Histoire stories, plugin
+ * previews) where no Pinia instance exists. They use this to pick up a user's
+ * preferences when the platform is running and fall back to their own defaults
+ * otherwise, instead of throwing.
+ */
+export function tryUseSettingsStore(): ReturnType<typeof useSettingsStore> | null {
+  if (!getActivePinia()) return null
+  try {
+    return useSettingsStore()
+  } catch {
+    return null
+  }
+}

package/src/styles/components/audit-trail.css

@@ -126,11 +126,11 @@
   margin-right: 0.125rem;
 }
 
-.mint-audit-trail__empty {
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-muted);
-  font-size: 0.875rem;
+/* Empty / loading / error placeholder host (content comes from EmptyState) */
+.mint-audit-trail__state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* Size variants */

package/src/styles/components/batch-progress-list.css

@@ -194,3 +194,10 @@
   background-color: var(--bg-hover);
   color: var(--text-primary);
 }
+
+/* Empty / loading / error placeholder host (content comes from EmptyState) */
+.mint-batch-progress__state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/styles/components/color-slider.css

@@ -61,7 +61,7 @@
   border-radius: 50%;
   background: white;
   cursor: pointer;
-  border: 2px solid var(--mint-primary, #6366f1);
+  border: 2px solid var(--color-primary);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   transition: transform 0.15s ease;
 }
@@ -80,7 +80,7 @@
   border-radius: 50%;
   background: white;
   cursor: pointer;
-  border: 2px solid var(--mint-primary, #6366f1);
+  border: 2px solid var(--color-primary);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   transition: transform 0.15s ease;
 }

package/src/styles/components/data-state.css

@@ -0,0 +1,30 @@
+/* DataStateInternal — shared loading / error / empty presentation for data components */
+
+.mint-data-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-primary);
+}
+
+.mint-data-state--loading {
+  gap: 0.75rem;
+  padding: 2.5rem 2rem;
+  color: var(--text-muted);
+}
+
+.mint-data-state--loading.mint-data-state--sm {
+  padding: 1.25rem 1rem;
+}
+
+.mint-data-state--loading.mint-data-state--lg {
+  padding: 3.5rem 2rem;
+}
+
+.mint-data-state__loading-text {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  margin: 0 !important;
+  padding: 0 !important;
+}