@genesislcap/rapid-design-system 15.28.1 → 15.29.0

package/dist/dts/react.d.ts

@@ -613,23 +613,23 @@ export declare const RadioGroup: React.ForwardRefExoticComponent<
 >;
 export type RadioGroupRef = RadioGroupWC;
 
-export declare const Scheduler: React.ForwardRefExoticComponent<
+export declare const RapidRouter: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
-    Omit<PublicOf<SchedulerWC>, 'children' | 'style'> &
+    Omit<PublicOf<RapidRouterWC>, 'children' | 'style'> &
     HTMLWCProps & {
     }
-  > & React.RefAttributes<SchedulerWC>
+  > & React.RefAttributes<RapidRouterWC>
 >;
-export type SchedulerRef = SchedulerWC;
+export type RapidRouterRef = RapidRouterWC;
 
-export declare const RapidRouter: React.ForwardRefExoticComponent<
+export declare const Scheduler: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
-    Omit<PublicOf<RapidRouterWC>, 'children' | 'style'> &
+    Omit<PublicOf<SchedulerWC>, 'children' | 'style'> &
     HTMLWCProps & {
     }
-  > & React.RefAttributes<RapidRouterWC>
+  > & React.RefAttributes<SchedulerWC>
 >;
-export type RapidRouterRef = RapidRouterWC;
+export type SchedulerRef = SchedulerWC;
 
 export declare const SchedulerCronBuilder: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
@@ -649,6 +649,19 @@ export declare const SchedulerTimezone: React.ForwardRefExoticComponent<
 >;
 export type SchedulerTimezoneRef = SchedulerTimezoneWC;
 
+export declare const SectionNavigator: React.ForwardRefExoticComponent<
+  React.PropsWithChildren<
+    Omit<PublicOf<SectionNavigatorWC>, 'children' | 'style'> &
+    HTMLWCProps & {
+      onSectionNavigatorSetState?: (event: CustomEvent<unknown>) => void;
+      onSectionNavigatorSetStates?: (event: CustomEvent<unknown>) => void;
+      onSectionNavigatorClearState?: (event: CustomEvent<unknown>) => void;
+      onSectionNavigatorClearAllStates?: (event: CustomEvent<unknown>) => void;
+    }
+  > & React.RefAttributes<SectionNavigatorWC>
+>;
+export type SectionNavigatorRef = SectionNavigatorWC;
+
 export declare const SearchBarCombobox: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<SearchBarComboboxWC>, 'children' | 'style'> &
@@ -669,19 +682,6 @@ export declare const SearchBar: React.ForwardRefExoticComponent<
 >;
 export type SearchBarRef = SearchBarWC;
 
-export declare const SectionNavigator: React.ForwardRefExoticComponent<
-  React.PropsWithChildren<
-    Omit<PublicOf<SectionNavigatorWC>, 'children' | 'style'> &
-    HTMLWCProps & {
-      onSectionNavigatorSetState?: (event: CustomEvent<unknown>) => void;
-      onSectionNavigatorSetStates?: (event: CustomEvent<unknown>) => void;
-      onSectionNavigatorClearState?: (event: CustomEvent<unknown>) => void;
-      onSectionNavigatorClearAllStates?: (event: CustomEvent<unknown>) => void;
-    }
-  > & React.RefAttributes<SectionNavigatorWC>
->;
-export type SectionNavigatorRef = SectionNavigatorWC;
-
 export declare const SegmentedControl: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<SegmentedControlWC>, 'children' | 'style'> &

package/dist/react.cjs

@@ -678,14 +678,14 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   return React.createElement(customElements.getName(RadioGroupWC) ?? '%%prefix%%-radio-group', { ...rest, ref }, children);
 });
 
-const Scheduler = React.forwardRef(function Scheduler(props, ref) {
+const RapidRouter = React.forwardRef(function RapidRouter(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(SchedulerWC) ?? '%%prefix%%-scheduler', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(RapidRouterWC) ?? 'rapid-router', { ...rest, ref }, children);
 });
 
-const RapidRouter = React.forwardRef(function RapidRouter(props, ref) {
+const Scheduler = React.forwardRef(function Scheduler(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(RapidRouterWC) ?? 'rapid-router', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(SchedulerWC) ?? '%%prefix%%-scheduler', { ...rest, ref }, children);
 });
 
 const SchedulerCronBuilder = React.forwardRef(function SchedulerCronBuilder(props, ref) {
@@ -698,6 +698,38 @@ const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(props, ref
   return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
 });
 
+const SectionNavigator = React.forwardRef(function SectionNavigator(props, ref) {
+  const { onSectionNavigatorSetState, onSectionNavigatorSetStates, onSectionNavigatorClearState, onSectionNavigatorClearAllStates, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSectionNavigatorSetStateRef = React.useRef(onSectionNavigatorSetState);
+  _onSectionNavigatorSetStateRef.current = onSectionNavigatorSetState;
+  const _onSectionNavigatorSetStatesRef = React.useRef(onSectionNavigatorSetStates);
+  _onSectionNavigatorSetStatesRef.current = onSectionNavigatorSetStates;
+  const _onSectionNavigatorClearStateRef = React.useRef(onSectionNavigatorClearState);
+  _onSectionNavigatorClearStateRef.current = onSectionNavigatorClearState;
+  const _onSectionNavigatorClearAllStatesRef = React.useRef(onSectionNavigatorClearAllStates);
+  _onSectionNavigatorClearAllStatesRef.current = onSectionNavigatorClearAllStates;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSectionNavigatorSetStateFn = (e) => _onSectionNavigatorSetStateRef.current?.(e);
+    el.addEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+    const _onSectionNavigatorSetStatesFn = (e) => _onSectionNavigatorSetStatesRef.current?.(e);
+    el.addEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+    const _onSectionNavigatorClearStateFn = (e) => _onSectionNavigatorClearStateRef.current?.(e);
+    el.addEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+    const _onSectionNavigatorClearAllStatesFn = (e) => _onSectionNavigatorClearAllStatesRef.current?.(e);
+    el.addEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    return () => {
+      el.removeEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+      el.removeEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+      el.removeEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+      el.removeEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SectionNavigatorWC) ?? '%%prefix%%-section-navigator', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
 const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
   const { onOpenChange, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -732,38 +764,6 @@ const SearchBar = React.forwardRef(function SearchBar(props, ref) {
   return React.createElement(customElements.getName(SearchBarWC) ?? '%%prefix%%-search-bar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const SectionNavigator = React.forwardRef(function SectionNavigator(props, ref) {
-  const { onSectionNavigatorSetState, onSectionNavigatorSetStates, onSectionNavigatorClearState, onSectionNavigatorClearAllStates, children, ...rest } = props;
-  const _innerRef = React.useRef(null);
-  const _onSectionNavigatorSetStateRef = React.useRef(onSectionNavigatorSetState);
-  _onSectionNavigatorSetStateRef.current = onSectionNavigatorSetState;
-  const _onSectionNavigatorSetStatesRef = React.useRef(onSectionNavigatorSetStates);
-  _onSectionNavigatorSetStatesRef.current = onSectionNavigatorSetStates;
-  const _onSectionNavigatorClearStateRef = React.useRef(onSectionNavigatorClearState);
-  _onSectionNavigatorClearStateRef.current = onSectionNavigatorClearState;
-  const _onSectionNavigatorClearAllStatesRef = React.useRef(onSectionNavigatorClearAllStates);
-  _onSectionNavigatorClearAllStatesRef.current = onSectionNavigatorClearAllStates;
-  React.useLayoutEffect(() => {
-    const el = _innerRef.current;
-    if (!el) return;
-    const _onSectionNavigatorSetStateFn = (e) => _onSectionNavigatorSetStateRef.current?.(e);
-    el.addEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
-    const _onSectionNavigatorSetStatesFn = (e) => _onSectionNavigatorSetStatesRef.current?.(e);
-    el.addEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
-    const _onSectionNavigatorClearStateFn = (e) => _onSectionNavigatorClearStateRef.current?.(e);
-    el.addEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
-    const _onSectionNavigatorClearAllStatesFn = (e) => _onSectionNavigatorClearAllStatesRef.current?.(e);
-    el.addEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
-    return () => {
-      el.removeEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
-      el.removeEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
-      el.removeEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
-      el.removeEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
-    };
-  }, []);
-  return React.createElement(customElements.getName(SectionNavigatorWC) ?? '%%prefix%%-section-navigator', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
-});
-
 const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(SegmentedControlWC) ?? '%%prefix%%-segmented-control', { ...rest, ref }, children);
@@ -1049,13 +1049,13 @@ module.exports = {
   ProgressRing,
   Radio,
   RadioGroup,
-  Scheduler,
   RapidRouter,
+  Scheduler,
   SchedulerCronBuilder,
   SchedulerTimezone,
+  SectionNavigator,
   SearchBarCombobox,
   SearchBar,
-  SectionNavigator,
   SegmentedControl,
   SegmentedItem,
   Select,

package/dist/react.mjs

@@ -676,14 +676,14 @@ export const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   return React.createElement(customElements.getName(RadioGroupWC) ?? '%%prefix%%-radio-group', { ...rest, ref }, children);
 });
 
-export const Scheduler = React.forwardRef(function Scheduler(props, ref) {
+export const RapidRouter = React.forwardRef(function RapidRouter(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(SchedulerWC) ?? '%%prefix%%-scheduler', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(RapidRouterWC) ?? 'rapid-router', { ...rest, ref }, children);
 });
 
-export const RapidRouter = React.forwardRef(function RapidRouter(props, ref) {
+export const Scheduler = React.forwardRef(function Scheduler(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(RapidRouterWC) ?? 'rapid-router', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(SchedulerWC) ?? '%%prefix%%-scheduler', { ...rest, ref }, children);
 });
 
 export const SchedulerCronBuilder = React.forwardRef(function SchedulerCronBuilder(props, ref) {
@@ -696,6 +696,38 @@ export const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(pro
   return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
 });
 
+export const SectionNavigator = React.forwardRef(function SectionNavigator(props, ref) {
+  const { onSectionNavigatorSetState, onSectionNavigatorSetStates, onSectionNavigatorClearState, onSectionNavigatorClearAllStates, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSectionNavigatorSetStateRef = React.useRef(onSectionNavigatorSetState);
+  _onSectionNavigatorSetStateRef.current = onSectionNavigatorSetState;
+  const _onSectionNavigatorSetStatesRef = React.useRef(onSectionNavigatorSetStates);
+  _onSectionNavigatorSetStatesRef.current = onSectionNavigatorSetStates;
+  const _onSectionNavigatorClearStateRef = React.useRef(onSectionNavigatorClearState);
+  _onSectionNavigatorClearStateRef.current = onSectionNavigatorClearState;
+  const _onSectionNavigatorClearAllStatesRef = React.useRef(onSectionNavigatorClearAllStates);
+  _onSectionNavigatorClearAllStatesRef.current = onSectionNavigatorClearAllStates;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSectionNavigatorSetStateFn = (e) => _onSectionNavigatorSetStateRef.current?.(e);
+    el.addEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+    const _onSectionNavigatorSetStatesFn = (e) => _onSectionNavigatorSetStatesRef.current?.(e);
+    el.addEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+    const _onSectionNavigatorClearStateFn = (e) => _onSectionNavigatorClearStateRef.current?.(e);
+    el.addEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+    const _onSectionNavigatorClearAllStatesFn = (e) => _onSectionNavigatorClearAllStatesRef.current?.(e);
+    el.addEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    return () => {
+      el.removeEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+      el.removeEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+      el.removeEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+      el.removeEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SectionNavigatorWC) ?? '%%prefix%%-section-navigator', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
 export const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
   const { onOpenChange, children, ...rest } = props;
   const _innerRef = React.useRef(null);
@@ -730,38 +762,6 @@ export const SearchBar = React.forwardRef(function SearchBar(props, ref) {
   return React.createElement(customElements.getName(SearchBarWC) ?? '%%prefix%%-search-bar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const SectionNavigator = React.forwardRef(function SectionNavigator(props, ref) {
-  const { onSectionNavigatorSetState, onSectionNavigatorSetStates, onSectionNavigatorClearState, onSectionNavigatorClearAllStates, children, ...rest } = props;
-  const _innerRef = React.useRef(null);
-  const _onSectionNavigatorSetStateRef = React.useRef(onSectionNavigatorSetState);
-  _onSectionNavigatorSetStateRef.current = onSectionNavigatorSetState;
-  const _onSectionNavigatorSetStatesRef = React.useRef(onSectionNavigatorSetStates);
-  _onSectionNavigatorSetStatesRef.current = onSectionNavigatorSetStates;
-  const _onSectionNavigatorClearStateRef = React.useRef(onSectionNavigatorClearState);
-  _onSectionNavigatorClearStateRef.current = onSectionNavigatorClearState;
-  const _onSectionNavigatorClearAllStatesRef = React.useRef(onSectionNavigatorClearAllStates);
-  _onSectionNavigatorClearAllStatesRef.current = onSectionNavigatorClearAllStates;
-  React.useLayoutEffect(() => {
-    const el = _innerRef.current;
-    if (!el) return;
-    const _onSectionNavigatorSetStateFn = (e) => _onSectionNavigatorSetStateRef.current?.(e);
-    el.addEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
-    const _onSectionNavigatorSetStatesFn = (e) => _onSectionNavigatorSetStatesRef.current?.(e);
-    el.addEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
-    const _onSectionNavigatorClearStateFn = (e) => _onSectionNavigatorClearStateRef.current?.(e);
-    el.addEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
-    const _onSectionNavigatorClearAllStatesFn = (e) => _onSectionNavigatorClearAllStatesRef.current?.(e);
-    el.addEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
-    return () => {
-      el.removeEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
-      el.removeEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
-      el.removeEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
-      el.removeEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
-    };
-  }, []);
-  return React.createElement(customElements.getName(SectionNavigatorWC) ?? '%%prefix%%-section-navigator', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
-});
-
 export const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref) {
   const { children, ...rest } = props;
   return React.createElement(customElements.getName(SegmentedControlWC) ?? '%%prefix%%-segmented-control', { ...rest, ref }, children);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "15.28.1",
+  "version": "15.29.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -40,17 +40,17 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/foundation-testing": "15.28.1",
-    "@genesislcap/genx": "15.28.1",
-    "@genesislcap/rollup-builder": "15.28.1",
-    "@genesislcap/ts-builder": "15.28.1",
-    "@genesislcap/uvu-playwright-builder": "15.28.1",
-    "@genesislcap/vite-builder": "15.28.1",
-    "@genesislcap/webpack-builder": "15.28.1",
-    "flexlayout-react": "^0.10.8"
+    "@genesislcap/foundation-testing": "15.29.0",
+    "@genesislcap/genx": "15.29.0",
+    "@genesislcap/rollup-builder": "15.29.0",
+    "@genesislcap/ts-builder": "15.29.0",
+    "@genesislcap/uvu-playwright-builder": "15.29.0",
+    "@genesislcap/vite-builder": "15.29.0",
+    "@genesislcap/webpack-builder": "15.29.0",
+    "flexlayout-react": "0.10.8"
   },
   "peerDependencies": {
-    "flexlayout-react": "^0.10.8"
+    "flexlayout-react": "0.10.8"
   },
   "peerDependenciesMeta": {
     "flexlayout-react": {
@@ -58,9 +58,9 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "15.28.1",
-    "@genesislcap/foundation-ui": "15.28.1",
-    "@genesislcap/foundation-utils": "15.28.1",
+    "@genesislcap/foundation-logger": "15.29.0",
+    "@genesislcap/foundation-ui": "15.29.0",
+    "@genesislcap/foundation-utils": "15.29.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",

package/scripts/generate-flexlayout-theme.mjs

@@ -23,6 +23,13 @@
  * The package `build` runs this in write mode, so a flexlayout-react version bump that is
  * not accompanied by a regenerated theme leaves the working tree dirty and fails CI's
  * "Check working tree" gate — turning silent, per-app drift into one loud build failure.
+ *
+ * It also asserts that every package declaring flexlayout-react pins the exact version the
+ * theme is built from (see PINNED_DECLARATIONS). Those declarations are what consumers
+ * resolve against, and nothing else compares them: a divergence installs cleanly, passes
+ * `pnpm peers check`, regenerates an unchanged theme, and leaves CI green while quietly
+ * resolving two copies of flexlayout-react — which breaks the `instanceof` checks the
+ * library relies on internally. This is the only gate on that.
  */
 import { existsSync, readFileSync, watch, writeFileSync } from 'node:fs';
 import { basename, dirname, join, resolve } from 'node:path';
@@ -77,9 +84,64 @@ function stripSourceMap(css) {
   return css.replace(/\/\*#\s*sourceMappingURL=[^*]*\*\/\s*$/, '').replace(/\s+$/, '');
 }
 
+/**
+ * Every workspace package that declares flexlayout-react to consumers, and the manifest fields
+ * it declares it in. All of them must name the exact version this theme is generated from —
+ * an exact pin, not a range, so a consumer cannot resolve a version the theme was not built
+ * against. Private packages are deliberately out of scope: only published declarations shape
+ * what a consumer's installer sees.
+ */
+const PINNED_DECLARATIONS = [
+  { dir: pkgRoot, fields: ['devDependencies', 'peerDependencies'] },
+  {
+    dir: resolve(pkgRoot, '..', '..', 'foundation-react-utils'),
+    fields: ['dependencies'],
+  },
+];
+
+/**
+ * Fail the build unless every declaration in PINNED_DECLARATIONS is an exact pin equal to the
+ * installed flexlayout-react version.
+ * @param {string} version the resolved flexlayout-react version the theme is built from
+ */
+function assertPinnedVersionsMatch(version) {
+  const problems = [];
+
+  for (const { dir, fields } of PINNED_DECLARATIONS) {
+    const manifestPath = join(dir, 'package.json');
+    if (!existsSync(manifestPath)) {
+      // The relative hop above is the only thing tying these packages together; if it stops
+      // resolving, the check has silently stopped checking, so say so rather than skipping.
+      throw new Error(
+        `Could not read ${manifestPath} to verify its flexlayout-react pin. If the package ` +
+          'moved, update PINNED_DECLARATIONS in this script.',
+      );
+    }
+    const manifest = JSON.parse(readFileSync(manifestPath, 'utf8'));
+    for (const field of fields) {
+      const declared = manifest[field]?.['flexlayout-react'];
+      if (declared === undefined) {
+        problems.push(`${manifest.name} has no flexlayout-react in ${field}`);
+      } else if (declared !== version) {
+        problems.push(`${manifest.name} ${field} declares "${declared}", expected "${version}"`);
+      }
+    }
+  }
+
+  if (problems.length > 0) {
+    throw new Error(
+      `flexlayout-react is pinned inconsistently (installed: ${version}):\n` +
+        problems.map((problem) => `  - ${problem}`).join('\n') +
+        '\nEvery declaration must be the same exact version, so consumers cannot resolve a ' +
+        'version this theme was not generated against.',
+    );
+  }
+}
+
 function buildGeneratedFile() {
   const flexlayoutPkg = findFlexlayoutPackage();
   const version = JSON.parse(readFileSync(join(flexlayoutPkg, 'package.json'), 'utf8')).version;
+  assertPinnedVersionsMatch(version);
   const basePath = join(flexlayoutPkg, 'style', 'dark.css');
   if (!existsSync(basePath)) {
     throw new Error(`flexlayout-react base theme not found at ${basePath}`);