{"_id":"@abcnews/components-storylab","_rev":"6-a4124155a20f8d689bb6d205bd98bf53","name":"@abcnews/components-storylab","dist-tags":{"latest":"0.3.1"},"versions":{"0.0.1":{"name":"@abcnews/components-storylab","version":"0.0.1","keywords":["svelte"],"license":"MIT","_id":"@abcnews/components-storylab@0.0.1","maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"homepage":"https://github.com/abcnews/components-storylab","bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"dist":{"shasum":"d560bc49c49b1aaf5f540efd25404bd2acd5a144","tarball":"https://registry.npmjs.org/@abcnews/components-storylab/-/components-storylab-0.0.1.tgz","fileCount":7,"integrity":"sha512-8QNpyU/leOd9DJu37rOMlrLU1mKz8f8QWRkpzBt5RpGEiYN72qH+U+wJUUoSo/2DcyEXXWmMLokR5yJ8vuytjw==","signatures":[{"sig":"MEYCIQCl4Ly0fBvOPH8pbBydXoiV/sP7YQLScoVTmfXTn764BwIhAIY29JDa1Xv86ApO4241RIjAS7ovuR8p7n0mY3P6hM94","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5795},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"gitHead":"9b150c53486b6ecaf027170f6369680c351c53e6","private":false,"scripts":{"dev":"vite dev","build":"vite build && npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"},"_npmUser":{"name":"ashkyd","email":"ash@kyd.com.au"},"repository":{"url":"git+https://github.com/abcnews/components-storylab.git","type":"git"},"_npmVersion":"11.6.2","description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.6","svelte":"^5.45.6","publint":"^0.3.15","typescript":"^5.9.3","svelte-check":"^4.3.4","@sveltejs/kit":"^2.49.1","@sveltejs/package":"^2.5.7","@sveltejs/adapter-auto":"^7.0.0","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components-storylab_0.0.1_1768544741838_0.7705984641859378","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@abcnews/components-storylab","version":"0.0.2","keywords":["svelte"],"license":"MIT","_id":"@abcnews/components-storylab@0.0.2","maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"homepage":"https://github.com/abcnews/components-storylab","bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"dist":{"shasum":"ec1e5cd5f4b6a7b13bbe8734d1b5c885befaab19","tarball":"https://registry.npmjs.org/@abcnews/components-storylab/-/components-storylab-0.0.2.tgz","fileCount":16,"integrity":"sha512-b2kz9Kv2VqdCJbhy4qMi8+jW2eoMRgLM+wM4F0V+3PsCNI8SBQ3/2udhS2cuYg/BS+oP/6Ykfz3f1BUPIbVEhg==","signatures":[{"sig":"MEQCIAn7q9xMNrInkZZtEunzbQk8dQwKXbJnTyHdl0O0QhgCAiBVgV842NjEXcpKPhIhOUHQkTzHajdRSTAGqhyzIMozUQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16323},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./mapLibre":{"types":"./dist/mapLibre/index.d.ts","default":"./dist/mapLibre/index.js"}},"gitHead":"ff12a221fa5cf70cc97296de649eade33d186ae9","scripts":{"dev":"npm run storybook","test":"npm run test:unit -- --run","build":"npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","storybook":"export AUNTY_HOST=${AUNTY_HOST:-localhost} && storybook dev -p 6006 --host $AUNTY_HOST --ci","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","build-storybook":"storybook build"},"_npmUser":{"name":"ashkyd","email":"ash@kyd.com.au"},"repository":{"url":"git+https://github.com/abcnews/components-storylab.git","type":"git"},"_npmVersion":"11.6.2","description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.6","svelte":"^5.45.6","vitest":"^4.0.15","publint":"^0.3.15","storybook":"^10.1.11","playwright":"^1.57.0","typescript":"^5.9.3","@types/node":"^24","maplibre-gl":"^5.16.0","svelte-check":"^4.3.4","@sveltejs/kit":"^2.49.1","sass-embedded":"^1.97.2","@sveltejs/package":"^2.5.7","@storybook/sveltekit":"^10.1.11","vitest-browser-svelte":"^2.0.1","@sveltejs/adapter-auto":"^7.0.0","@vitest/browser-playwright":"^4.0.15","@storybook/addon-svelte-csf":"^5.0.10","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components-storylab_0.0.2_1769049233079_0.7779523094126712","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@abcnews/components-storylab","version":"0.1.0","keywords":["svelte"],"license":"MIT","_id":"@abcnews/components-storylab@0.1.0","maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"homepage":"https://github.com/abcnews/components-storylab","bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"dist":{"shasum":"b5a670a1d1c8d17d151dbe044c354441a9588b7b","tarball":"https://registry.npmjs.org/@abcnews/components-storylab/-/components-storylab-0.1.0.tgz","fileCount":22,"integrity":"sha512-qntPAf+6KXaVHkQl6ocKrhHIxXTTJRZLTVDcjMSDUJPgi/HPEmfKGQ7QiS/4DhrJeltfKVdNs+hAiGk4YNQemQ==","signatures":[{"sig":"MEQCICkRxNIIn/ewq7n7ER1bksFfE1MDuMIW7qrb7mnMd86JAiBOXhBwT41Dj45rA5i5CpEgyBaxFCmH7Lmkuy2T9PnByA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27673},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./mapLibre":{"types":"./dist/mapLibre/index.d.ts","default":"./dist/mapLibre/index.js"}},"gitHead":"03e93df8e4c634adca4ce4ffbee96dc3ebf5487d","scripts":{"dev":"npm run storybook","test":"npm run test:unit -- --run","build":"npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","storybook":"export AUNTY_HOST=${AUNTY_HOST:-localhost} && storybook dev -p 6006 --host $AUNTY_HOST --ci","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","build-storybook":"storybook build"},"_npmUser":{"name":"drzax","email":"simon@elvery.net"},"repository":{"url":"git+https://github.com/abcnews/components-storylab.git","type":"git"},"_npmVersion":"11.6.1","description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.6","svelte":"^5.45.6","vitest":"^4.0.15","publint":"^0.3.15","storybook":"^10.1.11","playwright":"^1.57.0","typescript":"^5.9.3","@types/node":"^24","maplibre-gl":"^5.16.0","svelte-check":"^4.3.4","@sveltejs/kit":"^2.49.1","sass-embedded":"^1.97.2","@sveltejs/package":"^2.5.7","@storybook/sveltekit":"^10.1.11","vitest-browser-svelte":"^2.0.1","@sveltejs/adapter-auto":"^7.0.0","@vitest/browser-playwright":"^4.0.15","@storybook/addon-svelte-csf":"^5.0.10","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components-storylab_0.1.0_1770850548280_0.2987597689218904","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@abcnews/components-storylab","version":"0.2.0","keywords":["svelte"],"license":"MIT","_id":"@abcnews/components-storylab@0.2.0","maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"homepage":"https://github.com/abcnews/components-storylab","bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"dist":{"shasum":"cacc7168a5d9d982ec8a103deaf46324772f2154","tarball":"https://registry.npmjs.org/@abcnews/components-storylab/-/components-storylab-0.2.0.tgz","fileCount":34,"integrity":"sha512-60Zq5e5j0g0e709UTLlScvyw7mhFkEvgRRZA1z/ty4xHmcftc/TQ8D9ip0G5wjTjxUyqouMh9g+a82Go7DQYEQ==","signatures":[{"sig":"MEYCIQDKOpAKU3DI7Hg3Lqk/UHLEDkhc15V70nf3Q3WdP9L33wIhAM7DVuIfwevlP/o1fE5PVV4TdhwfMCcT6/E3GcA0OoSf","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42561},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"gitHead":"6a177893b568027fc7c350a9e33b17fe44485531","scripts":{"dev":"npm run storybook","test":"npm run test:unit -- --run","build":"npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","storybook":"export AUNTY_HOST=${AUNTY_HOST:-localhost} && storybook dev -p 6006 --host $AUNTY_HOST --ci","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","build-storybook":"storybook build"},"_npmUser":{"name":"drzax","email":"simon@elvery.net"},"repository":{"url":"git+https://github.com/abcnews/components-storylab.git","type":"git"},"_npmVersion":"11.6.1","description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.6","svelte":"^5.45.6","vitest":"^4.0.15","publint":"^0.3.15","storybook":"^10.1.11","playwright":"^1.57.0","typescript":"^5.9.3","@types/node":"^24","maplibre-gl":"^5.16.0","svelte-check":"^4.3.4","@sveltejs/kit":"^2.49.1","sass-embedded":"^1.97.2","@sveltejs/package":"^2.5.7","@storybook/sveltekit":"^10.1.11","vitest-browser-svelte":"^2.0.1","@sveltejs/adapter-auto":"^7.0.0","@vitest/browser-playwright":"^4.0.15","@storybook/addon-svelte-csf":"^5.0.10","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components-storylab_0.2.0_1776662319300_0.8170013771985578","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@abcnews/components-storylab","version":"0.3.0","keywords":["svelte"],"license":"MIT","_id":"@abcnews/components-storylab@0.3.0","maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"homepage":"https://github.com/abcnews/components-storylab","bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"dist":{"shasum":"4ec5df6eb43fc764d458764764cfb5654083cd2c","tarball":"https://registry.npmjs.org/@abcnews/components-storylab/-/components-storylab-0.3.0.tgz","fileCount":34,"integrity":"sha512-uqHWj2YA6HfgKKUkqdK7VBjlFlKuGXr8EvA+Cp4XGiqCh1cwRjL4usFEwSw8PwwNW015UIvTOTvKbMFSTmfy4g==","signatures":[{"sig":"MEQCIDDxLsQru6sbP0E1cSWeq3POoy3wSmpektSuMXB0v5OsAiBXRXGINRORIG0f9/EwZ+TSY1J9BGIQ/8+X8jao7qSA1A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42561},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"gitHead":"0e4e60cec820697b15567367d6a37c7ab09f366a","scripts":{"dev":"npm run storybook","test":"npm run test:unit -- --run","build":"npm run prepack","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","prepack":"svelte-kit sync && svelte-package && publint","prepare":"svelte-kit sync || echo ''","preview":"vite preview","storybook":"export AUNTY_HOST=${AUNTY_HOST:-localhost} && storybook dev -p 6006 --host $AUNTY_HOST --ci","test:unit":"vitest","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","build-storybook":"storybook build"},"_npmUser":{"name":"drzax","email":"simon@elvery.net"},"repository":{"url":"git+https://github.com/abcnews/components-storylab.git","type":"git"},"_npmVersion":"11.6.1","description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.6","svelte":"^5.45.6","vitest":"^4.0.15","publint":"^0.3.15","storybook":"^10.1.11","playwright":"^1.57.0","typescript":"^5.9.3","@types/node":"^24","maplibre-gl":"^5.16.0","svelte-check":"^4.3.4","@sveltejs/kit":"^2.49.1","sass-embedded":"^1.97.2","@sveltejs/package":"^2.5.7","@storybook/sveltekit":"^10.1.11","vitest-browser-svelte":"^2.0.1","@sveltejs/adapter-auto":"^7.0.0","@vitest/browser-playwright":"^4.0.15","@storybook/addon-svelte-csf":"^5.0.10","@sveltejs/vite-plugin-svelte":"^6.2.1"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components-storylab_0.3.0_1776662547195_0.5522295970236641","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@abcnews/components-storylab","version":"0.3.1","scripts":{"dev":"npm run storybook","build":"npm run prepack","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-kit sync && svelte-package && publint","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:unit":"vitest","test":"npm run test:unit -- --run","storybook":"export AUNTY_HOST=${AUNTY_HOST:-localhost} && storybook dev -p 6006 --host $AUNTY_HOST --ci","build-storybook":"storybook build"},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"peerDependencies":{"svelte":"^5.0.0"},"devDependencies":{"@storybook/addon-svelte-csf":"^5.0.10","@storybook/sveltekit":"^10.1.11","@sveltejs/adapter-auto":"^7.0.0","@sveltejs/kit":"^2.49.1","@sveltejs/package":"^2.5.7","@sveltejs/vite-plugin-svelte":"^6.2.1","@types/node":"^24","@vitest/browser-playwright":"^4.0.15","maplibre-gl":"^5.16.0","playwright":"^1.57.0","publint":"^0.3.15","sass-embedded":"^1.97.2","storybook":"^10.1.11","svelte":"^5.45.6","svelte-check":"^4.3.4","typescript":"^5.9.3","vite":"^7.2.6","vitest":"^4.0.15","vitest-browser-svelte":"^2.0.1"},"keywords":["svelte"],"license":"MIT","homepage":"https://github.com/abcnews/components-storylab","repository":{"type":"git","url":"git+https://github.com/abcnews/components-storylab.git"},"gitHead":"82d3841dcf25c70351af87251dfdea2f1809fb05","_id":"@abcnews/components-storylab@0.3.1","description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"_nodeVersion":"24.14.1","_npmVersion":"11.12.1","dist":{"integrity":"sha512-01ogc0Je6duJ9CchEJZE6gFU1RpWQV2jR+J8NYBNorLrFhTT64ZczQ4FVIBskr7UaVcSBdrkxszfu46CNK+wjw==","shasum":"2ca3565e7696ae6a4ee2757b979072566b8f71bf","tarball":"https://registry.npmjs.org/@abcnews/components-storylab/-/components-storylab-0.3.1.tgz","fileCount":32,"unpackedSize":39225,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDOPrheo4wKbCKoXiAQmQA1xVKwp8bbmFEz8Z43KolvqwIhAMCgpR59LbDJCDe91/mOKzafcDV90IqQVxrhzs1446Ug"}]},"_npmUser":{"name":"ashkyd","email":"ash@kyd.com.au"},"directories":{},"maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/components-storylab_0.3.1_1777007207472_0.5470661187298067"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-16T06:25:41.619Z","modified":"2026-04-24T05:06:47.837Z","0.0.1":"2026-01-16T06:25:41.994Z","0.0.2":"2026-01-22T02:33:53.230Z","0.1.0":"2026-02-11T22:55:48.437Z","0.2.0":"2026-04-20T05:18:39.458Z","0.3.0":"2026-04-20T05:22:27.331Z","0.3.1":"2026-04-24T05:06:47.630Z"},"bugs":{"url":"https://github.com/abcnews/components-storylab/issues"},"license":"MIT","homepage":"https://github.com/abcnews/components-storylab","keywords":["svelte"],"repository":{"type":"git","url":"git+https://github.com/abcnews/components-storylab.git"},"description":"A live repo containing reusable components and snippts by Story Lab. This repo is subject to change.","maintainers":[{"name":"drzax","email":"simon@elvery.net"},{"name":"andrewkesper","email":"andy@andrewkesper.com"},{"name":"phocks","email":"phocks@gmail.com"},{"name":"jtfell","email":"hi@jtfell.com"},{"name":"ashkyd","email":"ash@kyd.com.au"}],"readme":"# 📖 🧪 components-storylab\n\nA live repo containing reusable components and snippts by Story Lab. This repo is subject to change.\n\n## Installation\n\n1. Install the package:\n   ```sh\n   npm i @abcnews/components-storylab\n   ```\n2. Add the package to your `aunty` config's `includedDependencies` array in `package.json` so it gets built properly:\n   ```js\n     \"aunty\": {\n       \"type\": \"svelte\",\n       \"build\": {\n         \"includedDependencies\": [\n           \"@abcnews/components-storylab\"\n         ]\n       }\n     }\n   ```\n\n## Components\n\n### 🌃 initDarkModeIframe\n\nInitializes dark mode inside an iframe, synchronizing with the parent site or system preferences.\n\n```ts\nimport { initDarkModeIframe } from \"@abcnews/components-storylab\";\n\n// Initialise this as early as possible to prevent flashes\n// of the wrong background colour.\ninitDarkModeIframe();\n```\n\n### 🌏 MapLibre\n\nTools and components for working with MapLibre. The `utils` export gives you the\ntools to do this yourself, whereas the MapLibreLoader component handles it for\nyou in Svelte. Import these from `@abcnews/components-storylab/mapLibre`.\n\n#### MapLibreLoader\n\nCall back when MapLibre is loaded. Passes the `maplibre` namespace and a root\nnode for you to use.\n\n```ts\nimport type { maplibregl } from \"@abcnews/components-storylab/mapLibre\";\nimport { MapLibreLoader, utils } from \"@abcnews/components-storylab/mapLibre\";\n\n// Load MapLibre and use it in your component\nconst { loadMapLibre, STYLE_BRIGHT, STYLE_LIGHT } = utils;\n\n// Example of using MapLibreLoader in a Svelte component\n<MapLibreLoader\n  onLoad={({ rootNode, maplibregl }) => {\n    const map = new maplibregl.Map({\n      container: rootNode,\n      style: STYLE_BRIGHT,\n    });\n    return map;\n  }}\n/>\n```\n\nIf you return the Map from `onLoad`, you can componentise your viz and access it\nfrom child components with:\n\n```ts\nlet { map } = getContext<Map>(\"mapInstance\");\n```\n\nThis component will attempt to keep the map stable, so you can not change\nprops after the fact. If you want to destroy the map and create a new one\nwhen props change, wrap it in a {#key}{/key} block/\n\n### TypographyProvider\n\nWrap your app in this component to get easy access to ABC fonts and use ABCSans by default for all child components.\n\n```svelte\n<script>\n  import {TypographyProvider} from '@abcnews/components-storylab';\n</script>\n\n<TypographyProvider>\n  <p>This will be typeset in ABC Sans</p>\n</TypographyProvider>\n```\nIt also provides CSS custom props you can use to apply various ABC font stacks in your own styles. They're namespaced `--sl-` for Story Lab to avoid clashes.\n\n```\n--sl-font-stack-sans\n--sl-font-stack-serif\n--sl-font-stack-rounded\n--sl-font-stack-contensed\n--sl-font-stack-monospace\n```\n\n## Developing\n\nSee [DEVELOPMENT.md](DEVELOPMENT.md)\n","readmeFilename":"README.md"}