@guardian/interactive-component-library 0.3.0 → 0.3.2-rc1

package/dist/style.css

@@ -2372,7 +2372,79 @@ body ._header_1xpz0_150._fullWidth_1xpz0_39 {
   line-height: var(--sans-line-height);
   color: var(--primary-text-color);
 }
-._svg_1dms8_1 {
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._path_1cwd5_9 {
+  stroke: var(--secondary-line-color);
+  fill: none;
+}._container_9pdyv_1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+._svg_9pdyv_7 {
+  fill: none;
+  stroke: #121212;
+  stroke-width: 1;
+}
+body {
+  --top-inset: 0;
+}
+
+body.android {
+  --top-inset: 58px;
+}
+
+._mapContainer_1ogf3_9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+._helpTextContainer_1ogf3_15 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  background-color: rgba(18, 18, 18, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s linear;
+}
+
+._helpText_1ogf3_15 {
+  margin-top: var(--space-5);
+  font-family: var(--text-sans);
+  font-weight: 700;
+  font-size: var(--sans-large);
+  line-height: var(--sans-line-height);
+  color: #fff !important;
+  margin-bottom: var(--space-3);
+}
+
+._desktopHelpText_1ogf3_40 {
+  display: none;
+}
+
+@media (any-hover: hover) {
+  ._desktopHelpText_1ogf3_40 {
+    display: block;
+  }
+  ._mobileHelpText_1ogf3_48 {
+    display: none;
+  }
+}._svg_1dms8_1 {
   width: 100%;
   height: 100%;
   fill: var(--primary-text-color);
@@ -2817,28 +2889,6 @@ body.android {
 ._checkmarkPath_6u92g_120 {
   fill: var(--primary-text-color);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._path_1cwd5_9 {
-  stroke: var(--secondary-line-color);
-  fill: none;
-}._container_9pdyv_1 {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-._svg_9pdyv_7 {
-  fill: none;
-  stroke: #121212;
-  stroke-width: 1;
-}
 ._zoomControl_13wd1_1 {
   display: inline-flex;
   flex-direction: column;
@@ -2871,57 +2921,7 @@ body.android {
   cursor: auto;
   background-color: var(--tertiary-bg-color);
 }
-body {
-  --top-inset: 0;
-}
-
-body.android {
-  --top-inset: 58px;
-}
-
-._mapContainer_1ogf3_9 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-._helpTextContainer_1ogf3_15 {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  pointer-events: none;
-  background-color: rgba(18, 18, 18, 0.4);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity 0.2s linear;
-}
-
-._helpText_1ogf3_15 {
-  margin-top: var(--space-5);
-  font-family: var(--text-sans);
-  font-weight: 700;
-  font-size: var(--sans-large);
-  line-height: var(--sans-line-height);
-  color: #fff !important;
-  margin-bottom: var(--space-3);
-}
-
-._desktopHelpText_1ogf3_40 {
-  display: none;
-}
-
-@media (any-hover: hover) {
-  ._desktopHelpText_1ogf3_40 {
-    display: block;
-  }
-  ._mobileHelpText_1ogf3_48 {
-    display: none;
-  }
-}._optionPicker_1b561_1 {
+._optionPicker_1b561_1 {
   background-color: rgba(255, 255, 255, 0.6);
   border: 1px solid var(--border-divider-color);
   border-radius: 8px;

package/dist/styles/helpers/mergeStyles.d.ts

@@ -0,0 +1 @@
+export function mergeStyles(firstStyle: any, secondStyle: any): any;

package/dist/styles/helpers/mergeStyles.js

@@ -0,0 +1,22 @@
+function mergeStyles(firstStyle, secondStyle) {
+  if (!firstStyle) return secondStyle;
+  if (!secondStyle) return firstStyle;
+  if (typeof firstStyle === "string") {
+    if (typeof secondStyle !== "string") {
+      throw new Error("Styles to merge must be of the same type");
+    }
+    return firstStyle.concat(" ", secondStyle);
+  }
+  const allKeys = /* @__PURE__ */ new Set([
+    ...Object.keys(firstStyle),
+    ...Object.keys(secondStyle)
+  ]);
+  const merged = Array.from(allKeys).reduce((result, key) => {
+    result[key] = mergeStyles(firstStyle[key], secondStyle[key]);
+    return result;
+  }, {});
+  return merged;
+}
+export {
+  mergeStyles
+};

package/dist/styles/helpers/mergeStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles/theme.config.d.ts

@@ -0,0 +1,124 @@
+declare namespace _default {
+    let resets: string;
+    let breakpoints: {
+        readonly mobile: 320;
+        readonly mobileMedium: 375;
+        readonly mobileLandscape: 480;
+        readonly phablet: 660;
+        readonly tablet: 740;
+        readonly desktop: 980;
+        readonly leftCol: 1140;
+        readonly wide: 1300;
+    };
+    let space: {
+        readonly 0: 2;
+        readonly 1: 4;
+        readonly 2: 8;
+        readonly 3: 12;
+        readonly 4: 16;
+        readonly 5: 20;
+        readonly 6: 24;
+        readonly 8: 32;
+        readonly 9: 36;
+        readonly 10: 40;
+        readonly 12: 48;
+        readonly 14: 56;
+        readonly 16: 64;
+        readonly 18: 72;
+        readonly 24: 96;
+    };
+    namespace fontFamily {
+        let sans: string[];
+        let serif: string[];
+        let headline: string[];
+        let titlepiece: string[];
+    }
+    namespace textSizes {
+        let headline_1: {
+            readonly xxxsmall: 17;
+            readonly xxsmall: 20;
+            readonly xsmall: 24;
+            readonly small: 28;
+            readonly medium: 34;
+            readonly large: 42;
+            readonly xlarge: 50;
+        };
+        export { headline_1 as headline };
+        let sans_1: {
+            readonly xxsmall: 12;
+            readonly xsmall: 14;
+            readonly small: 15;
+            readonly medium: 17;
+            readonly large: 20;
+            readonly xlarge: 24;
+            readonly xxlarge: 28;
+            readonly xxxlarge: 34;
+        };
+        export { sans_1 as sans };
+        let titlepiece_1: {
+            readonly small: 42;
+            readonly medium: 50;
+            readonly large: 70;
+        };
+        export { titlepiece_1 as titlepiece };
+        export let body: {
+            readonly xsmall: 14;
+            readonly small: 15;
+            readonly medium: 17;
+        };
+    }
+    namespace lineHeights {
+        let tight: number;
+        let regular: number;
+        let loose: number;
+    }
+    namespace defaultLineHeights {
+        let headline_2: string;
+        export { headline_2 as headline };
+        let sans_2: string;
+        export { sans_2 as sans };
+        let titlepiece_2: string;
+        export { titlepiece_2 as titlepiece };
+        let body_1: string;
+        export { body_1 as body };
+    }
+    namespace colors {
+        let transparent: string;
+        let current: string;
+        let white: string;
+        let neutral: {
+            7: string;
+            10: string;
+            20: string;
+            38: string;
+            46: string;
+            60: string;
+            86: string;
+            93: string;
+            97: string;
+            100: string;
+        };
+        namespace party {
+            let con: string;
+            let lab: string;
+            let ld: string;
+            let ukip: string;
+            let ind: string;
+            let snp: string;
+            let sdlp: string;
+            let pc: string;
+            let sf: string;
+            let dup: string;
+            let green: string;
+            let alliance: string;
+            let uup: string;
+            let reform: string;
+            let other: string;
+        }
+        namespace elex {
+            let nocontrol: string;
+            let undeclared: string;
+        }
+    }
+}
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.3.2-rc1",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",
@@ -11,13 +11,10 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/interactive-component-library.umd.cjs",
-  "module": "./dist/interactive-component-library.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/interactive-component-library.js",
-      "require": "./dist/interactive-component-library.umd.cjs"
-    },
+    ".": "./dist/index.js",
     "./dist/style.css": "./dist/style.css"
   },
   "engines": {
@@ -27,17 +24,29 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
-    "build:lib": "vite build",
-    "build:lib:watch": "vite build --watch",
+    "build:lib": "vite build --mode lib",
+    "build:lib:watch": "vite build --mode lib --watch",
     "lint": "eslint .",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
     "test": "vitest",
     "test:cov": "vitest run --coverage",
-    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
+    "prepack": "json -f package.json -I -e \"delete this.devDependencies\"",
     "generate:styles": "node scripts/generateStyles.js",
     "prepare": "husky"
   },
+  "dependencies": {
+    "@guardian/source": "^6.1.0",
+    "d3-composite-projections": "^1.4.0",
+    "d3-timer": "^3.0.1",
+    "d3-transition": "^3.0.1",
+    "dayjs": "^1.11.12",
+    "flatbush": "^4.4.0",
+    "preact-transitioning": "^1.4.2",
+    "rbush": "^4.0.0",
+    "rbush-knn": "^4.0.0",
+    "remark-gfm": "^4.0.0"
+  },
   "peerDependencies": {
     "d3-geo": "^3.1.1",
     "d3-scale": "^4.0.2",