@dxos/react-ui 0.10.0 → 0.11.1

package/src/primitives/ThemeProvider/icon-registry.ts

@@ -0,0 +1,272 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+// Kept out of `IconRegistry.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so the registry, context and hooks exported beside the provider force a full page
+// reload on every edit.
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const SPRITE_URL = '/icons.svg';
+
+const SYMBOL_PATTERN = /^([a-z0-9]+)--([a-z0-9-]+)--([a-z]+)$/;
+
+/**
+ * Locates the standalone SVG for one icon set, so glyphs missing from the static sprite can be
+ * fetched at runtime. The route must be served by the host (see the `assets` option of
+ * `@dxos/vite-plugin-icons`); sets without a source stay sprite-only.
+ */
+export type IconSource = {
+  /** Symbol-name prefix, e.g. `ph` for `ph--house--regular`. */
+  iconSet: string;
+  /** Resolves a parsed symbol name to a URL. */
+  url: (name: string, variant: string) => string;
+};
+
+/**
+ * Phosphor's published layout: `{variant}/{name}[-{variant}].svg`, regular being unsuffixed.
+ */
+export const phosphorIconSource = (route = '/phosphor'): IconSource => ({
+  iconSet: 'ph',
+  url: (name, variant) => `${route}/${variant}/${name}${variant === 'regular' ? '' : `-${variant}`}.svg`,
+});
+
+export const defaultSources: IconSource[] = [phosphorIconSource()];
+
+export type IconRegistry = {
+  hasIcon(name: string): boolean;
+  requestIcon(name: string): void;
+  /**
+   * Subscribe to changes — fires whenever a new symbol becomes available (static sprite
+   * finished ingesting, or a runtime fetch resolved). Returns an unsubscribe function.
+   */
+  subscribe(listener: () => void): () => void;
+};
+
+export const NoopRegistry: IconRegistry = {
+  hasIcon: () => false,
+  requestIcon: () => {},
+  subscribe: () => () => {},
+};
+
+export const IconRegistryContext = createContext<IconRegistry>(NoopRegistry);
+
+// Singleton bridge so non-React renderers (Lit's <dx-icon>, etc.) and packages that don't
+// depend on @dxos/react-ui can access the same registry. The convention is intentionally a
+// globalThis property so that any package can read it without importing from this module.
+const REGISTRY_GLOBAL = '__dxIconRegistry' as const;
+
+type RegistryHost = { [REGISTRY_GLOBAL]?: IconRegistry };
+
+const getHost = (): RegistryHost => globalThis as unknown as RegistryHost;
+
+const setActiveRegistry = (registry: IconRegistry | undefined): void => {
+  const host = getHost();
+  if (registry === undefined) {
+    delete host[REGISTRY_GLOBAL];
+  } else {
+    host[REGISTRY_GLOBAL] = registry;
+  }
+};
+
+export const getIconRegistry = (): IconRegistry => getHost()[REGISTRY_GLOBAL] ?? NoopRegistry;
+
+export const useIconRegistry = (): IconRegistry => useContext(IconRegistryContext);
+
+type RegistryHandle = {
+  registry: IconRegistry;
+  dispose: () => void;
+};
+
+const createDefsContainer = (): SVGSVGElement => {
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('data-dx-icon-sprite', '');
+  svg.style.position = 'absolute';
+  svg.style.width = '0';
+  svg.style.height = '0';
+  svg.style.overflow = 'hidden';
+  document.body.appendChild(svg);
+  return svg;
+};
+
+const parseSymbolName = (name: string) => {
+  const match = name.match(SYMBOL_PATTERN);
+  if (!match) {
+    return undefined;
+  }
+  return { iconSet: match[1], iconName: match[2], variant: match[3] };
+};
+
+type RegistryState = {
+  defs: SVGSVGElement;
+  sources: IconSource[];
+  loaded: Set<string>;
+  inflight: Map<string, Promise<void>>;
+  // Permanent misses (no source for the set, 404, malformed source) — never re-fetched, so a
+  // component that re-renders with a bad icon name doesn't produce repeated network churn.
+  failed: Set<string>;
+};
+
+const ingestSvgChildrenAsSymbol = (sourceSvg: Element, id: string): SVGSymbolElement | undefined => {
+  if (sourceSvg.tagName.toLowerCase() !== 'svg') {
+    return undefined;
+  }
+  const symbol = document.createElementNS(SVG_NS, 'symbol') as SVGSymbolElement;
+  symbol.setAttribute('id', id);
+  const viewBox = sourceSvg.getAttribute('viewBox');
+  if (viewBox) {
+    symbol.setAttribute('viewBox', viewBox);
+  }
+  // Standalone sources don't set fill; the sprite convention is fill="currentColor" on each symbol.
+  symbol.setAttribute('fill', 'currentColor');
+  for (const child of Array.from(sourceSvg.children)) {
+    symbol.appendChild(child.cloneNode(true));
+  }
+  return symbol;
+};
+
+const loadStaticSprite = async (state: RegistryState): Promise<void> => {
+  let text: string;
+  try {
+    const response = await fetch(SPRITE_URL);
+    if (!response.ok) {
+      return;
+    }
+    text = await response.text();
+  } catch {
+    return;
+  }
+  const doc = new DOMParser().parseFromString(text, 'image/svg+xml');
+  const root = doc.documentElement;
+  if (root.tagName.toLowerCase() !== 'svg') {
+    return;
+  }
+  for (const child of Array.from(root.children)) {
+    const node = state.defs.ownerDocument.importNode(child, true);
+    state.defs.appendChild(node);
+  }
+  for (const symbol of state.defs.querySelectorAll('symbol[id]')) {
+    state.loaded.add(symbol.id);
+  }
+};
+
+const resolveDynamic = async (state: RegistryState, staticReady: Promise<void>, name: string): Promise<void> => {
+  // Wait until the static sprite has been ingested before deciding to fetch — the icon may already be present.
+  await staticReady;
+  if (state.loaded.has(name)) {
+    return;
+  }
+  const parsed = parseSymbolName(name);
+  const source = parsed && state.sources.find(({ iconSet }) => iconSet === parsed.iconSet);
+  if (!parsed || !source) {
+    // Sets without a configured source (custom brand glyphs, plugin namespaces) are sprite-only.
+    state.failed.add(name);
+    return;
+  }
+  let svgText: string;
+  try {
+    const response = await fetch(source.url(parsed.iconName, parsed.variant));
+    if (!response.ok) {
+      if (response.status === 404) {
+        state.failed.add(name);
+      }
+      return;
+    }
+    svgText = await response.text();
+  } catch {
+    // Network errors are transient — leave the name eligible for a retry.
+    return;
+  }
+  const doc = new DOMParser().parseFromString(svgText, 'image/svg+xml');
+  const symbol = ingestSvgChildrenAsSymbol(doc.documentElement, name);
+  if (!symbol) {
+    state.failed.add(name);
+    return;
+  }
+  state.defs.appendChild(symbol);
+  state.loaded.add(name);
+};
+
+const createRegistry = (sources: IconSource[]): RegistryHandle => {
+  const defs = createDefsContainer();
+  const listeners = new Set<() => void>();
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  const state: RegistryState = {
+    defs,
+    sources,
+    loaded: new Set<string>(),
+    inflight: new Map<string, Promise<void>>(),
+    failed: new Set<string>(),
+  };
+  const staticReady = loadStaticSprite(state).then(notify);
+
+  const registry: IconRegistry = {
+    hasIcon: (name) => state.loaded.has(name),
+    requestIcon: (name) => {
+      if (state.loaded.has(name) || state.inflight.has(name) || state.failed.has(name)) {
+        return;
+      }
+      const promise = resolveDynamic(state, staticReady, name)
+        .then(notify)
+        .finally(() => {
+          state.inflight.delete(name);
+        });
+      state.inflight.set(name, promise);
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+
+  return {
+    registry,
+    dispose: () => {
+      listeners.clear();
+      defs.remove();
+    },
+  };
+};
+
+// Refcounted document-level singleton: ThemeProvider mounts many times in one document
+// (editor tooltip roots, the shell, dialogs), and a registry per mount would re-fetch the
+// static sprite and duplicate every symbol id in the DOM on each mount.
+type SharedRegistry = RegistryHandle & { refCount: number };
+
+let sharedRegistry: SharedRegistry | undefined;
+
+export const acquireRegistry = (sources: IconSource[]): { registry: IconRegistry; release: () => void } => {
+  if (!sharedRegistry) {
+    sharedRegistry = { ...createRegistry(sources), refCount: 0 };
+    setActiveRegistry(sharedRegistry.registry);
+  }
+  const handle = sharedRegistry;
+  handle.refCount += 1;
+  let released = false;
+  return {
+    registry: handle.registry,
+    release: () => {
+      if (released) {
+        return;
+      }
+      released = true;
+      handle.refCount -= 1;
+      if (handle.refCount === 0 && sharedRegistry === handle) {
+        sharedRegistry = undefined;
+        if (getIconRegistry() === handle.registry) {
+          setActiveRegistry(undefined);
+        }
+        handle.dispose();
+      }
+    },
+  };
+};

package/src/primitives/ThemeProvider/index.ts

@@ -4,5 +4,13 @@
 
 export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types/translations';
 
+export {
+  type IconRegistry,
+  type IconSource,
+  getIconRegistry,
+  phosphorIconSource,
+  useIconRegistry,
+} from './icon-registry';
+export * from './IconRegistry';
 export * from './ThemeProvider';
-export { TranslationsContext, useTranslation } from './TranslationsProvider';
+export { TranslationsContext, useTranslation } from './TranslationsContext';

package/src/testing/decorators/withLayout.tsx

@@ -54,14 +54,14 @@ const layouts: Record<ContainerType, FC<ContainerProps>> = {
   ),
 
   centered: ({ classNames, children }: ContainerProps) => (
-    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-trim-surface')}>
-      <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center dx-deck-surface')}>
+      <div className={mx('flex flex-col dx-base-surface', classNames)}>{children}</div>
     </div>
   ),
 
   column: ({ classNames, children }: ContainerProps) => (
-    <div className='fixed inset-0 flex overflow-hidden justify-center bg-trim-surface'>
-      <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
+    <div className='fixed inset-0 flex overflow-hidden justify-center dx-deck-surface'>
+      <div className={mx('flex flex-col w-[40rem] dx-base-surface', classNames)}>{children}</div>
     </div>
   ),
 };

package/src/testing/decorators/withLayoutVariants.tsx

@@ -38,9 +38,9 @@ const Panel = ({
 
 export const withLayoutVariants = ({
   elevations = [
-    { elevation: 'dialog', surface: 'bg-modal-surface' },
-    { elevation: 'positioned', surface: 'bg-card-surface' },
-    { elevation: 'base', surface: 'bg-base-surface' },
+    { elevation: 'dialog', surface: 'dx-modal-surface' },
+    { elevation: 'positioned', surface: 'dx-card-surface' },
+    { elevation: 'base', surface: 'dx-base-surface' },
   ],
   densities = ['md'],
 }: Config = {}): Decorator => {

package/src/testing/decorators/withTheme.tsx

@@ -20,7 +20,7 @@ import { defaultTx } from '../../theme';
  * empty.
  */
 export const withTheme =
-  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
+  ({ tx = defaultTx, platform }: Partial<ThemeContextValue> = {}): Decorator =>
   (Story, context) => {
     const {
       globals: { theme },
@@ -33,7 +33,6 @@ export const withTheme =
           tx={tx}
           themeMode={(theme as ThemeMode) || 'dark'}
           resourceExtensions={translations}
-          noCache={noCache}
           platform={platform}
         >
           <Tooltip.Provider>

package/src/theme/defaultTheme.ts

@@ -26,6 +26,7 @@ import { scrollAreaTheme } from '../components/ScrollArea/ScrollArea.theme';
 import { selectTheme } from '../components/Select/Select.theme';
 import { separatorTheme } from '../components/Separator/Separator.theme';
 import { skeletonTheme } from '../components/Skeleton/Skeleton.theme';
+import { sliderTheme } from '../components/Slider/Slider.theme';
 import { splitterTheme } from '../components/Splitter/Splitter.theme';
 import { statusTheme } from '../components/Status/Status.theme';
 import { tagTheme } from '../components/Tag/Tag.theme';
@@ -68,6 +69,7 @@ export const defaultTheme: Theme<Record<string, any>> = {
   select: selectTheme,
   separator: separatorTheme,
   skeleton: skeletonTheme,
+  slider: sliderTheme,
   splitter: splitterTheme,
   status: statusTheme,
   tag: tagTheme,

package/src/theme/index.ts

@@ -25,6 +25,7 @@ export * from '../components/ScrollArea/ScrollArea.theme';
 export * from '../components/Select/Select.theme';
 export * from '../components/Separator/Separator.theme';
 export * from '../components/Skeleton/Skeleton.theme';
+export * from '../components/Slider/Slider.theme';
 export * from '../components/Splitter/Splitter.theme';
 export * from '../components/Status/Status.theme';
 export * from '../components/Tag/Tag.theme';

package/src/util/slots.stories.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Slot } from '@radix-ui/react-slot';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type ReactNode, forwardRef } from 'react';
+
+import { withLayout, withTheme } from '../testing';
+import { composable, composableProps, slottable } from './slots';
+
+//
+// A slottable host and two candidate children: one built with `composable()`, one a plain
+// `forwardRef`. Radix `Slot` merges its props into whichever child it is given, but a child that
+// does not spread them drops the injected `className` and `ref` — silently, with no error and no
+// type complaint. `slottable()` detects that in dev builds and marks the rendered element with
+// `dx-slot-warning` (a dashed rose outline).
+//
+
+const Host = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const Comp: any = asChild ? Slot : 'div';
+  return (
+    <Comp {...composableProps(props, { classNames: 'p-2 rounded-sm bg-base-surface text-base-fg' })} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+/** Correct: built with `composable()`, so it carries the COMPOSABLE marker and spreads props. */
+const GoodChild = composable<HTMLDivElement>(({ children, ...props }, forwardedRef) => (
+  <div {...composableProps(props)} ref={forwardedRef}>
+    {children}
+  </div>
+));
+
+/** Incorrect: a plain `forwardRef`. It renders fine on its own, but as an `asChild` target the
+ *  host's className never reaches the DOM — the failure this diagnostic exists to surface. */
+const BadChild = forwardRef<HTMLDivElement, { children?: ReactNode }>(({ children }, forwardedRef) => (
+  <div ref={forwardedRef}>{children}</div>
+));
+
+const Row = ({ label, children }: { label: string; children: ReactNode }) => (
+  <div className='flex flex-col gap-1'>
+    <span className='text-sm text-description'>{label}</span>
+    {children}
+  </div>
+);
+
+const DefaultStory = () => (
+  <div className='flex flex-col gap-6 p-4 w-96'>
+    <Row label='No asChild — host renders its own element.'>
+      <Host>Plain host</Host>
+    </Row>
+
+    <Row label='asChild with a composable child — no warning.'>
+      <Host asChild>
+        <GoodChild>Composable child</GoodChild>
+      </Host>
+    </Row>
+
+    <Row label='asChild with a non-composable child — dashed rose outline, and a console warning.'>
+      <Host asChild>
+        <BadChild>Non-composable child</BadChild>
+      </Host>
+    </Row>
+  </div>
+);
+
+const meta = {
+  title: 'ui/react-ui-core/util/slots',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout()],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/util/slots.ts

@@ -21,12 +21,13 @@ import { type ComposableProps, type SlottableProps, type ThemedClassName } from
 
 /**
  * Reconciles className properties from a parent slot.
- * - `className` is set by the Slot merge mechanism.
+ * - `className` is injected at runtime by the Slot merge mechanism; it is absent from
+ *   `ComposableProps` so consumers cannot pass it, hence the widened parameter type here.
  * - `classNames` is the consumer-facing prop for theming overrides.
  * Use `composableProps` to reconcile both into a single `className`.
  */
 export const composableProps = <P extends HTMLElement = HTMLElement>(
-  { className, classNames, role, style, ...props }: ComposableProps,
+  { className, classNames, role, style, ...props }: ComposableProps & { className?: string },
   { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
 ) => ({
   // Default props.
@@ -35,8 +36,10 @@ export const composableProps = <P extends HTMLElement = HTMLElement>(
   // Spread supplied props.
   ...props,
 
-  // Prefer explicit role, then defaults role, then 'none'.
-  role: role ?? defaults.role ?? 'none',
+  // No `role='none'` default. On a div it is a no-op, so the only elements it ever reached were the
+  // semantic ones — `Card.Header` renders a <header>, `Main.Content` a <main> — where it stripped
+  // the landmark. A part that genuinely wants its element ignored passes the role itself.
+  ...((role ?? defaults.role) ? { role: role ?? defaults.role } : null),
 
   // Merge styles.
   style: { ...defaults.style, ...style } as CSSProperties,
@@ -73,7 +76,9 @@ export function slottable<E extends HTMLElement, P extends object = {}>(
 ): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {
   const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
     let warn = false;
-    if (props.asChild) {
+    // Dev-only: the check walks children on every render of every `asChild` part, and the marker it
+    // paints is a developer diagnostic, not a product affordance.
+    if (process.env.NODE_ENV !== 'production' && props.asChild) {
       try {
         const child = Children.only(props.children);
         if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
@@ -89,6 +94,10 @@ export function slottable<E extends HTMLElement, P extends object = {}>(
 
     const result = render(props, forwardedRef);
     if (warn) {
+      // The marker cannot go on the rendered element: under `asChild` that element is the `Slot`,
+      // which merges the class into the very child that is dropping props — the bug being flagged
+      // swallows its own diagnostic. So it goes on a wrapper, which `dx-slot-warning` renders as
+      // `display: contents` so it adds no layout box; the outline is drawn on its children instead.
       return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
     }
 

package/dist/lib/browser/chunk-CMHHVHX3.mjs

@@ -1,46 +0,0 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "toolbar-menu.label": "Action menu",
-        "toolbar-drag-handle.label": "Drag to rearrange",
-        "toolbar-close.label": "Close",
-        "toolbar-delete.label": "Delete",
-        "system-button.star.label": "Star",
-        "system-button.unstar.label": "Unstar",
-        "system-button.bookmark.label": "Bookmark",
-        "system-button.unbookmark.label": "Remove bookmark",
-        "system-button.expand.label": "Expand",
-        "system-button.collapse.label": "Collapse",
-        "system-button.add.label": "Add",
-        "system-button.delete.label": "Delete",
-        "system-button.edit.label": "Edit",
-        "system-button.close.label": "Close",
-        "system-button.upload.label": "Upload",
-        "system-button.download.label": "Download",
-        "system-button.clipboard.label": "Copy",
-        "carousel-viewport.label": "Carousel",
-        "carousel-prev.label": "Previous slide",
-        "carousel-next.label": "Next slide",
-        "carousel-indicators.label": "Carousel slides",
-        "carousel-go-to.label": "Go to slide {{index}}",
-        "date-picker.placeholder.single.label": "Pick a date",
-        "date-picker.placeholder.range.label": "Pick a date range",
-        "date-picker.placeholder.multiple.label": "Pick dates",
-        "date-picker.clear.label": "Clear",
-        "calendar.nav.previous.label": "Previous month",
-        "calendar.nav.next.label": "Next month",
-        "calendar.footer.today.label": "Today",
-        "trigger-button.label": "Open"
-      }
-    }
-  }
-];
-
-export {
-  translationKey,
-  translations
-};
-//# sourceMappingURL=chunk-CMHHVHX3.mjs.map

package/dist/lib/browser/chunk-CMHHVHX3.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'toolbar-menu.label': 'Action menu',\n        'toolbar-drag-handle.label': 'Drag to rearrange',\n        'toolbar-close.label': 'Close',\n        'toolbar-delete.label': 'Delete',\n\n        'system-button.star.label': 'Star',\n        'system-button.unstar.label': 'Unstar',\n        'system-button.bookmark.label': 'Bookmark',\n        'system-button.unbookmark.label': 'Remove bookmark',\n        'system-button.expand.label': 'Expand',\n        'system-button.collapse.label': 'Collapse',\n        'system-button.add.label': 'Add',\n        'system-button.delete.label': 'Delete',\n        'system-button.edit.label': 'Edit',\n        'system-button.close.label': 'Close',\n        'system-button.upload.label': 'Upload',\n        'system-button.download.label': 'Download',\n        'system-button.clipboard.label': 'Copy',\n\n        'carousel-viewport.label': 'Carousel',\n        'carousel-prev.label': 'Previous slide',\n        'carousel-next.label': 'Next slide',\n        'carousel-indicators.label': 'Carousel slides',\n        'carousel-go-to.label': 'Go to slide {{index}}',\n\n        'date-picker.placeholder.single.label': 'Pick a date',\n        'date-picker.placeholder.range.label': 'Pick a date range',\n        'date-picker.placeholder.multiple.label': 'Pick dates',\n        'date-picker.clear.label': 'Clear',\n\n        'calendar.nav.previous.label': 'Previous month',\n        'calendar.nav.next.label': 'Next month',\n        'calendar.footer.today.label': 'Today',\n\n        'trigger-button.label': 'Open',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,sBAAsB;QACtB,6BAA6B;QAC7B,uBAAuB;QACvB,wBAAwB;QAExB,4BAA4B;QAC5B,8BAA8B;QAC9B,gCAAgC;QAChC,kCAAkC;QAClC,8BAA8B;QAC9B,gCAAgC;QAChC,2BAA2B;QAC3B,8BAA8B;QAC9B,4BAA4B;QAC5B,6BAA6B;QAC7B,8BAA8B;QAC9B,gCAAgC;QAChC,iCAAiC;QAEjC,2BAA2B;QAC3B,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,wBAAwB;QAExB,wCAAwC;QACxC,uCAAuC;QACvC,0CAA0C;QAC1C,2BAA2B;QAE3B,+BAA+B;QAC/B,2BAA2B;QAC3B,+BAA+B;QAE/B,wBAAwB;MAC1B;IACF;EACF;;",
-  "names": ["translationKey", "translations"]
-}