@nyaruka/temba-components 0.156.18 → 0.157.1

package/src/styles/pillVariants.ts

@@ -0,0 +1,147 @@
+import { css } from 'lit';
+
+/**
+ * TextIt Design System pill color variants — single source of truth.
+ *
+ * Provides the color triple (background / foreground / border) keyed
+ * off `.pill-{type}` plus the JS-side taxonomy (`PILL_TYPES`,
+ * `PILL_TYPE_ICONS`, `iconToPillType`) consumed by Select.ts and
+ * flow/utils.ts.
+ *
+ * Variant theming:
+ *   - .pill-contact / .pill-group: derived from --recipient (a fixed
+ *     blue), NOT the accent ramp. This keeps recipient pills stable
+ *     across brand re-theming via --primary-rgb.
+ *   - .pill-flow, .pill-channel: bg/border derived from --flow /
+ *     --channel via color-mix; text + icon use the anchor directly.
+ *   - .pill-field: bg/border are fixed at the Tailwind yellow ramp
+ *     (yellow-100 / yellow-300) because yellow has too little
+ *     contrast against white to color-mix into a recognizable swatch.
+ *     Text uses yellow-900 for readability; the icon uses --field
+ *     directly, which is the only knob a host page can re-theme.
+ *   - .pill-neutral / .pill-label / .pill-keyword: greys; not
+ *     anchor-driven.
+ *
+ * Shape (height, padding, radius, icon spacing) is the consumer's
+ * concern, since pill use-cases differ: Select chips have a remove
+ * button on the right, ContactDetails pills are clickable links, etc.
+ *
+ * To add a new variant: extend `PILL_TYPES`, optionally add an entry
+ * to `PILL_TYPE_ICONS` / `ICON_TO_PILL_TYPE`, append a `.pill-{type}`
+ * block below, and reference an anchor in `designTokens.ts`.
+ */
+
+/** Recognized pill variants. Anything outside this set falls back to
+ * `pill-neutral` (or is rejected by callers as not a pill at all). */
+export const PILL_TYPES: ReadonlySet<string> = new Set([
+  'neutral',
+  'flow',
+  'group',
+  'contact',
+  'field',
+  'label',
+  'keyword',
+  'channel',
+  'topic'
+]);
+
+/** Default icon name for each pill variant. Used when a consumer
+ * specifies `type` but not `icon` — keeps Omnibox-style options and
+ * Django-form-rendered options visually consistent without making the
+ * data layer set both fields. */
+export const PILL_TYPE_ICONS: Readonly<Record<string, string>> = {
+  group: 'group',
+  contact: 'contact',
+  field: 'fields',
+  flow: 'flow',
+  label: 'label',
+  topic: 'topic'
+};
+
+/** Inverse mapping: icon name (alias or resolved SVG id) → pill type.
+ * Both forms are valid since flow-action items pass through either. */
+const ICON_TO_PILL_TYPE: Readonly<Record<string, string>> = {
+  flow: 'flow',
+  group: 'group',
+  contact: 'contact',
+  contacts: 'contact',
+  field: 'field',
+  fields: 'field',
+  label: 'label',
+  // resolved Icon enum SVG ids
+  'users-01': 'group',
+  'atom-01': 'group',
+  'user-01': 'contact',
+  'tag-01': 'label'
+};
+
+export const iconToPillType = (icon?: string): string | undefined => {
+  if (!icon) return undefined;
+  if (ICON_TO_PILL_TYPE[icon]) return ICON_TO_PILL_TYPE[icon];
+  // Legacy alias prefix (e.g. 'group_smart' → 'group').
+  if (icon.startsWith('group')) return 'group';
+  return undefined;
+};
+
+export const pillVariants = css`
+  .pill-neutral {
+    background: var(--sunken);
+    color: var(--text-1);
+    border-color: var(--border);
+    --icon-color: var(--text-2);
+  }
+  .pill-flow {
+    background: color-mix(in srgb, var(--flow) 12%, white);
+    color: var(--flow);
+    border-color: color-mix(in srgb, var(--flow) 25%, white);
+    --icon-color: var(--flow);
+  }
+  /* Recipient color — shared by contacts and groups. Anchored to
+     --recipient (fixed blue), NOT the accent ramp, so pills keep their
+     identity even when the host page re-themes via --primary-rgb. */
+  .pill-contact,
+  .pill-group {
+    background: color-mix(in srgb, var(--recipient) 12%, white);
+    color: var(--recipient);
+    border-color: color-mix(in srgb, var(--recipient) 25%, white);
+    --icon-color: var(--recipient);
+  }
+  .pill-channel {
+    background: color-mix(in srgb, var(--channel) 12%, white);
+    color: var(--channel);
+    border-color: color-mix(in srgb, var(--channel) 25%, white);
+    --icon-color: var(--channel);
+  }
+  .pill-topic {
+    background: color-mix(in srgb, var(--topic) 12%, white);
+    color: var(--topic);
+    border-color: color-mix(in srgb, var(--topic) 25%, white);
+    --icon-color: var(--topic);
+  }
+  .pill-field {
+    /* Yellow has very low contrast against white, so the color-mix
+       approach used by other variants washes out at any readable mix
+       percentage. We use the Tailwind yellow ramp directly for bg
+       (yellow-100) / border (yellow-300) / text (yellow-900). The
+       icon hue stays anchored to --field so a host page can still
+       re-theme the variant by overriding that one token. */
+    background: #fef9c3;
+    color: #854d0e;
+    border-color: #fde68a;
+    --icon-color: var(--field);
+  }
+  .pill-keyword {
+    background: var(--sunken);
+    color: var(--text-1);
+    border-color: var(--border);
+    --icon-color: var(--text-2);
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+  }
+  .pill-label {
+    background: var(--sunken);
+    color: var(--text-2);
+    border-color: var(--border);
+    --icon-color: var(--text-2);
+  }
+`;

package/static/css/temba-components.css

@@ -6,12 +6,88 @@
 
   html {
 
-    --font-family: 'Roboto', Helvetica, Arial, sans-serif;
-    --primary-rgb: 35, 135, 202;
+    /* ─── TextIt Design System tokens ─────────────────────────────────────
+       Single source of truth. Cascades through Shadow DOM into every
+       component. Legacy tokens below are aliased to these — keep both in
+       sync if the design system evolves. */
+
+    /* accent ramp — the primary color sits at 400 and the ramp is
+       derived from it in both directions via sRGB mixing.
+       The anchor reads from --primary-rgb so host pages can re-theme
+       the entire ramp by setting e.g. --primary-rgb: 112, 0, 132. */
+    --accent:      rgb(var(--primary-rgb, 98, 147, 201));
+    --accent-50:   color-mix(in srgb, var(--accent) 6%,  white);
+    --accent-100:  color-mix(in srgb, var(--accent) 16%, white);
+    --accent-200:  color-mix(in srgb, var(--accent) 32%, white);
+    --accent-300:  color-mix(in srgb, var(--accent) 60%, white);
+    --accent-400:  var(--accent);
+    --accent-500:  color-mix(in srgb, var(--accent) 90%, black);
+    --accent-600:  color-mix(in srgb, var(--accent) 80%, black);
+    --accent-700:  color-mix(in srgb, var(--accent) 65%, black);
+    --accent-800:  color-mix(in srgb, var(--accent) 50%, black);
+    --accent-900:  color-mix(in srgb, var(--accent) 35%, black);
+
+    /* neutrals */
+    --bg:            #F6F7F9;
+    --surface:       #FFFFFF;
+    --sunken:        #F1F3F5;
+    --border:        #E6E8EC;
+    --border-strong: #D2D6DC;
+    --text-1:        #1A1F26;
+    --text-2:        #4D5664;
+    --text-3:        #7B8593;
+    --text-4:        #A2ABB8;
+
+    /* status — full set */
+    --success:        #16A34A;
+    --success-bg:     #E8F6EE;
+    --success-border: #BFE5CD;
+    --info:           #2563EB;
+    --info-bg:        #E8F0FE;
+    --info-border:    #C7D7F8;
+    --warning:        #B45309;
+    --warning-bg:     #FDF3E2;
+    --warning-border: #F2D9A9;
+    --danger:         #D03F3F;
+    --danger-bg:      #FCEBEB;
+    --danger-border:  #F4C8C8;
+    --neutral:        #6B7280;
+    --neutral-bg:     #EEF0F3;
+    --neutral-border: #D8DCE2;
+
+    /* type */
+    --font:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --w-regular:   400;
+    --w-medium:    500;
+    --w-semibold:  600;
+    --w-bold:      600;
+
+    /* shape */
+    --r:      8px;
+    --r-xs:   2px;
+    --r-sm:   4px;
+    --r-lg:   12px;
+
+    /* density */
+    --row-h:   36px;
+    --input-h: 34px;
+    --pad:     10px;
+    --gap:     14px;
+
+    /* shadows */
+    --shadow-1: 0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);
+    --shadow-2: 0 1px 1px rgba(15, 22, 36, 0.04), 0 4px 12px rgba(15, 22, 36, 0.06);
+    --shadow-3: 0 6px 20px rgba(15, 22, 36, 0.10), 0 2px 6px rgba(15, 22, 36, 0.06);
+
+    /* ─── legacy aliases — point at the DS tokens above ────────────────── */
+
+    --font-family: var(--font);
+    --primary-rgb: 58, 102, 150;
     --secondary-rgb: 140, 51, 140;
     --tertiary-rgb: 135, 202, 35;
 
-    --focus-rgb: 82, 168, 236;
+    --focus-rgb: 91, 156, 229;
     --error-rgb: 255, 99, 71;
     --success-rgb: 102, 186, 104;
 
@@ -23,50 +99,68 @@
     --disabled-opacity: 0.6;
     --curvature: 6px;
     --curvature-widget: 6px;
+    --focus: rgb(var(--focus-rgb, 91, 156, 229));
+    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+    --focus-halo: 0 0 0 3px
+      color-mix(in srgb, var(--focus) 30%, transparent);
     --color-focus: #a4cafe;
     --color-widget-bg: #fff;
     --color-widget-bg-focused: #fff;
     --color-widget-border: rgb(225, 225, 225);
 
-    --color-options-bg: var(--color-widget-bg);
+    --color-options-bg: var(--surface);
 
-    /* primary colors, should be dark */
+    /* primary colors */
     --color-selection: #f0f6ff;
     --color-success: #3ca96a;
-
-    --widget-box-shadow: rgba(-1, -1, 0, .15) 0px 1px 7px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-    --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, .45);
+    --color-row-hover: rgba(var(--selection-light-rgb), 0.4);
+    --color-message: #3c92dd;
+    --color-available: #00f100;
+
+    --widget-box-shadow: rgba(-1, -1, 0, 0.1) 0px 1px 7px 0px,
+      rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+    --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, 0.45),
+      rgba(0, 0, 0, 0.05) 0px 3px 7px 0px,
+      rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     --widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
 
     --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    --shadow-widget: 0 3px 20px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
+    --shadow-widget: 0 3px 20px 0 rgba(0, 0, 0, 0.04),
+      0 1px 2px 0 rgba(0, 0, 0, 0.02);
 
     /* page text, borders, widgets */
-    --color-text: #333;;
-    --color-widget-text: #333;
+    --color-text: #555;
+    --color-widget-text: #555;
     --color-borders: rgba(0, 0, 0, 0.07);
-    --color-placeholder: rgb(167, 167, 167);
+    --color-placeholder: #ccc;
 
     /* light colors, panel backgrounds, selection, etc */
     --color-primary-light: #eee;
-    --color-secondary-light: #ccc;
+    --color-secondary-light: rgba(var(--secondary-rgb), 0.3);
 
-    --color-label: #333;
+    --color-label: var(--text-1);
 
-    /* dark colors, nav bar, buttons, etc */
-    --color-primary-dark: rgb(var(--primary-rgb));
+    /* dark colors, nav bar, buttons, etc — default to a ramp step
+       so they auto-theme when --primary-rgb changes. Hosts can still
+       override the legacy variable directly to break out of the ramp. */
+    --color-primary-dark: var(--accent-500);
     --color-secondary-dark: rgb(var(--secondary-rgb));
 
     /* light text goes over dark, dark over lights */
     --color-text-light: rgba(255, 255, 255, 1);
-    --color-text-dark: rgba(0, 0, 0, 0.8);
+    --color-text-dark: #555;
     --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
     --color-text-help: rgb(120, 120, 120);
     --color-tertiary: rgb(var(--tertiary-rgb));
 
     --help-text-size: 0.85em;
     --help-text-margin-left: 0.3em;
-    --color-text-help: rgb(120, 120, 120);
 
     /* solid overlays with text */
     --color-overlay-dark: rgba(0, 0, 0, 0.2);
@@ -74,12 +168,13 @@
     --color-overlay-light: rgba(0, 0, 0, 0.05);
     --color-overlay-light-text: rgba(0, 0, 0, 0.6);
 
-    /* links, buttons, and label badges */
-    --color-link-primary: rgba(var(--primary-rgb), 0.8);
-    --color-link-primary-hover: rgba(var(--primary-rgb), 0.9);
+    /* links, buttons, and label badges — default to ramp steps so
+       they auto-theme; overridable via direct variable setting. */
+    --color-link-primary: var(--accent-500);
+    --color-link-primary-hover: var(--accent-600);
     --color-link-secondary: rgba(var(--secondary-rgb), 0.8);
     --color-link-secondary-hover: rgba(var(--secondary-rgb), 0.9);
-    --color-button-primary: var(--color-primary-dark);
+    --color-button-primary: var(--accent-500);
     --color-button-primary-text: var(--color-text-light);
     --color-button-light: rgb(246, 248, 250);
     --color-button-light-text: rgb(36, 41, 47);
@@ -89,10 +184,17 @@
     --color-button-destructive: rgb(var(--error-rgb));
     --color-button-destructive-text: var(--color-text-light);
 
-    --color-button-attention: #2ecc71;
+    --color-button-attention: #3ca96a;
 
     --color-connectors: #95cbef;
 
+    --color-label-primary: var(--color-primary-dark);
+    --color-label-primary-text: var(--color-text-light);
+    --color-label-secondary: var(--color-secondary-dark);
+    --color-label-secondary-text: var(--color-text-light);
+    --color-label-tertiary: var(--color-tertiary);
+    --color-label-tertiary-text: var(--color-text-light);
+
     --color-nav-unselected: #fff;
     --color-nav-selected-bg: #fff;
     --color-nav-selected-text: var(--color-primary-dark);
@@ -116,9 +218,10 @@
 
     --transition-speed: 250ms;
     --event-padding: 0.5em 1em;
-    --temba-select-selected-padding: 9px;
-    --temba-select-selected-line-height: 16px;
-    --temba-select-selected-font-size: 13px;
+    --temba-select-selected-padding: 0 var(--pad);
+    --temba-select-selected-line-height: 1.4;
+    --temba-select-selected-font-size: 13.5px;
+    --temba-select-min-height: var(--input-h);
 
     --font-size: 14px;
     --button-font-size: 1.125rem;
@@ -126,23 +229,25 @@
     --header-bg: var(--color-primary-dark);
     --header-text: var(--color-text-light);
 
-    --temba-textinput-padding: 9px 14px;
-    --temba-textinput-font-size: 14px;
+    --temba-textinput-padding: 7px var(--pad);
+    --temba-textinput-font-size: 13.5px;
+    --temba-textinput-min-height: var(--input-h);
 
-    --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
-    --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    --dropdown-shadow: rgb(0 0 0 / 30%) 0px 0px 60px, rgb(0 0 0 / 12%) 0px 6px 12px;
+    --options-block-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+      0 1px 2px 0 rgba(0, 0, 0, 0.03);
+    --options-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --dropdown-shadow: rgb(0 0 0 / 15%) 0px 0px 30px,
+      rgb(0 0 0 / 12%) 0px 2px 6px;
 
     --label-size: 14px;
+    --control-margin-bottom: 15px;
 
     --menu-padding: 1em;
 
     font-size: var(--font-size);
     font-family: var(--font-family);
 
-    --button-y: 6px;
-    --button-x: 14px;
-
     --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
     --temba-charcount-counts-margin-top: 4px;
@@ -156,14 +261,14 @@
   }
 
   temba-button {
-    --button-bg: var(--color-primary-dark);
+    --button-bg: var(--accent-500);
     --button-text: var(--color-text-light);
     --button-border: none;
     --button-shadow: var(--widget-box-shadow);
   }
 
   temba-button:hover {
-    --button-bg-img: linear-gradient(to bottom, rgba(var(--primary-rgb), .1), transparent, transparent);
+    --button-bg-img: linear-gradient(to bottom, rgba(255, 255, 255, .1), transparent, transparent);
   }
 
   temba-button.active {

package/web-dev-server.config.mjs

@@ -255,7 +255,6 @@ export default {
             '/api/v2/contacts.json': 'contacts.json',
             '/api/v2/optins.json': 'optins.json',
             '/api/v2/topics.json': 'topics.json',
-            '/api/v2/languages.json': 'languages.json',
             '/api/v2/workspace.json': 'workspace.json',
             '/api/internal/locations.json': 'locations.json',
             '/api/internal/orgs.json': 'orgs.json',

package/web-test-runner.config.mjs

@@ -2,6 +2,100 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 process.env.PUPPETEER_DISABLE_HEADLESS_WARNING = '1';
 import { puppeteerLauncher } from '@web/test-runner-puppeteer';
+import { defaultReporter, summaryReporter } from '@web/test-runner';
+
+// Workaround for a wtr OOM under coverage on this branch. With our
+// volume of instrumented code, the merged istanbul-coverage payload
+// across all 121 test sessions overflows V8's max string length
+// (~512MB) when `getTestCoverage` deep-clones it via
+// `JSON.parse(JSON.stringify(coverages))`. That clone exists only to
+// insulate watch mode from istanbul's in-place mutation of the
+// originals — in non-watch coverage mode the clone is dead weight.
+// The throw is caught inside `onSessionFinished`'s try/catch, which
+// calls `runner.stop(error)` and silently exits 1 (the `console.error`
+// it logs is swallowed by wtr's BufferedLogger before the final
+// reportEnd flush ever runs).
+//
+// We can't import `getTestCoverage` directly (it's a transitive dep
+// not re-exported by `@web/test-runner`), so we shim JSON.parse: when
+// it's handed the sentinel produced by our JSON.stringify shim, it
+// returns the original `coverages` array instead of the stringified
+// copy. The shim is intentionally narrow:
+//
+//   - Gated on `WTR_COVERAGE_SHIM` (defaults on when --coverage is in
+//     argv; can be force-disabled by setting it to "0") so it never
+//     runs in plain `pnpm test`, only in the coverage path.
+//   - Sentinel is a runtime-random string, so a fixture/cached body
+//     containing the literal can't collide.
+//   - `__pendingCoverages` is cleared on every parse — matched OR not —
+//     so the ~512MB reference never lingers past one call pair, and
+//     mismatched call sequences never silently corrupt other parses.
+//   - The shape check `__looksLikeCoverageArray` only matches arrays
+//     whose first element is an object keyed by absolute file paths
+//     pointing at istanbul-shaped entries; it can't be triggered by
+//     ordinary JSON the orchestrator stringifies (HTTP responses, etc.)
+//
+// A wtr update that changes how getTestCoverage clones would make the
+// shim a no-op (`__looksLikeCoverageArray` returns false) — we'd then
+// regress to the original OOM rather than silently corrupt data, and
+// the next coverage run would surface it immediately. Long-term, the
+// right fix is patch-package on `@web/test-runner-core`'s
+// `getTestCoverage` to skip the clone in non-watch mode; this shim is
+// scoped to keep that scope-creep out of this PR.
+const __WTR_COVERAGE_SHIM_ON =
+  process.env.WTR_COVERAGE_SHIM !== '0' &&
+  (process.env.WTR_COVERAGE_SHIM === '1' ||
+    process.argv.some((a) => a === '--coverage' || a === '--watch-coverage'));
+
+if (__WTR_COVERAGE_SHIM_ON) {
+  const __origStringify = JSON.stringify;
+  const __origParse = JSON.parse;
+  // Random sentinel so the literal string in user content can't
+  // accidentally trigger the parse shim.
+  const __CLONE_SENTINEL =
+    '__WTR_COVERAGE_CLONE__' + Math.random().toString(36).slice(2);
+  let __pendingCoverages = null;
+
+  const __looksLikeCoverageArray = (value) => {
+    if (!Array.isArray(value) || value.length === 0) return false;
+    const first = value[0];
+    if (!first || typeof first !== 'object' || Array.isArray(first)) {
+      return false;
+    }
+    const keys = Object.keys(first);
+    if (keys.length === 0) return false;
+    if (!keys.every((k) => k.startsWith('/') || /^[a-zA-Z]:[\\/]/.test(k))) {
+      return false;
+    }
+    const entry = first[keys[0]];
+    return (
+      entry &&
+      typeof entry === 'object' &&
+      (entry.statementMap || entry.fnMap || entry.b || entry.s)
+    );
+  };
+
+  JSON.stringify = function (value, ...rest) {
+    if (__looksLikeCoverageArray(value)) {
+      // A second matched stringify before a matched parse would
+      // otherwise silently drop the first payload — clear first.
+      __pendingCoverages = value;
+      return __CLONE_SENTINEL;
+    }
+    return __origStringify(value, ...rest);
+  };
+  JSON.parse = function (text, ...rest) {
+    // Always clear pending on parse (matched or not). Keeps the ~512MB
+    // reference from outliving a single call pair even if the matched
+    // parse never arrives (e.g. wtr throws between the two calls).
+    const pending = __pendingCoverages;
+    __pendingCoverages = null;
+    if (text === __CLONE_SENTINEL && pending) {
+      return pending;
+    }
+    return __origParse(text, ...rest);
+  };
+}
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import fs from 'fs';
 import * as path from 'path';
@@ -346,6 +440,10 @@ export default {
   coverageConfig: {
     include: ['src/**']
   },
+  reporters: [
+    defaultReporter({ reportTestResults: true, reportTestProgress: true }),
+    summaryReporter({ flatten: true })
+  ],
   testFramework: {
     config: {
       timeout: '10000'
@@ -380,7 +478,6 @@ export default {
             '/api/v2/contacts.json': './static/api/contacts.json',
             '/api/v2/optins.json': './static/api/optins.json',
             '/api/v2/topics.json': './static/api/topics.json',
-            '/api/v2/languages.json': './static/api/languages.json',
             '/api/v2/workspace.json': './static/api/workspace.json',
             '/api/internal/locations.json': './static/api/locations.json',
             '/api/internal/orgs.json': './static/api/orgs.json'