@reykjavik/hanna-react 0.10.122 → 0.10.124

package/CHANGELOG.md

@@ -4,6 +4,20 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.124
+
+_2024-04-05_
+
+- feat: Add prop `openBtnLabel` to `ContactBubble`
+- feat: Make `FileInput`'s `dropzoneText` prop optional
+
+## 0.10.123
+
+_2024-03-21_
+
+- feat: Add component `HannaCssLink` for flicker-free CSS URL changes
+- feat: Make `'is'` the default language for `ReadSpeakerPlayer`
+
 ## 0.10.122
 
 _2024-03-18_

package/ContactBubble.d.ts

@@ -46,6 +46,8 @@ export type ContactBubbleProps = {
      * magic and always show the bubble toggler
      */
     alwaysShow?: boolean;
+    /** Shorthand override for texts.openBtn, for quick customization */
+    openBtnLabel?: string;
     texts?: ContactBubbleI18n;
     lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps & ({

package/ContactBubble.js

@@ -42,6 +42,8 @@ exports.ensureIcon = ensureIcon;
 const ContactBubble = (props) => {
     const { title, links, onToggle, alwaysShow, wrapperProps = {} } = props;
     const txt = (0, i18n_1.getTexts)(props, exports.defaultTexts);
+    const openLabel = props.openBtnLabel || txt.openBtn;
+    const openLabelLong = !props.openBtnLabel ? txt.openBtnLong : undefined;
     const useLocalState = props.open == null;
     const [localOpen, setLocalOpen] = (0, react_1.useState)(false);
     const open = useLocalState ? localOpen : props.open;
@@ -132,8 +134,8 @@ const ContactBubble = (props) => {
     if (links.length === 0) {
         return null;
     }
-    const menu = (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContactBubble', null, wrapperProps.className), id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser }),
-        react_1.default.createElement("h2", { className: "ContactBubble__title" }, title || txt.openBtn),
+    const menu = (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContactBubble', null, wrapperProps.className), id: isBrowser && domid, hidden: isBrowser && !open, "data-label-openbtn": props.openBtnLabel, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser }),
+        react_1.default.createElement("h2", { className: "ContactBubble__title" }, title || openLabel),
         react_1.default.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = (0, exports.ensureIcon)(linkInfo.icon);
@@ -159,7 +161,7 @@ const ContactBubble = (props) => {
         '\n\n',
         isBrowser && (react_1.default.createElement("button", { className: "ContactBubble__closebtn", "aria-controls": domid, "aria-label": txt.closeBtnLong, onClick: () => closeBubble(), type: "button" }, txt.closeBtn))));
     return isBrowser ? (react_1.default.createElement("div", { className: "ContactBubble__wrapper", ref: wrapperRef },
-        react_1.default.createElement("button", { className: "ContactBubble__openbtn", "aria-controls": domid, "aria-expanded": open, "aria-label": txt.openBtnLong, onClick: open ? () => closeBubble() : openBubble, type: "button" }, txt.openBtn),
+        react_1.default.createElement("button", { className: "ContactBubble__openbtn", "aria-controls": domid, "aria-expanded": open, "aria-label": openLabelLong, onClick: open ? () => closeBubble() : openBubble, type: "button" }, openLabel),
         '\n\n',
         menu)) : (menu);
 };

package/FileInput.d.ts

@@ -14,7 +14,7 @@ export type FileInputProps = FormFieldWrappingProps & {
      * Default: no restrictions.
      */
     accept?: string | Array<string>;
-    dropzoneText: string | JSX.Element;
+    dropzoneText?: string | JSX.Element;
     removeFileText?: string;
     lang?: HannaLang;
     showFileSize?: boolean;

package/FileInput.js

@@ -15,6 +15,20 @@ const defaultRemoveFileText = {
     en: 'Remove',
     pl: 'Usuń',
 };
+const defaultDropzoneText = {
+    is: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        "Drag\u00F0u skr\u00E1 hinga\u00F0, e\u00F0a ",
+        react_1.default.createElement("strong", null, "smelltu"),
+        " til a\u00F0 velja.")),
+    en: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        "Drag files here, or ",
+        react_1.default.createElement("strong", null, "click"),
+        " to select.")),
+    pl: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        "Przeci\u0105gnij plik tutaj, lub ",
+        react_1.default.createElement("strong", null, "kliknij"),
+        " by wybra\u0107.")),
+};
 const defaultOnFilesRejected = (rejectedFiles) => {
     window.alert(`Error:\n${rejectedFiles
         .map((elm) => {
@@ -31,11 +45,11 @@ const arrayToFileList = (arr) => {
 };
 const FileInput = (props) => {
     var _a, _b, _c;
-    const lang = props.lang || i18n_1.DEFAULT_LANG;
+    const lang = (0, i18n_1.ensureHannaLang)(props.lang) || i18n_1.DEFAULT_LANG;
     const _d = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
-    dropzoneText, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[i18n_1.DEFAULT_LANG], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    dropzoneText = defaultDropzoneText[lang](), removeFileText = defaultRemoveFileText[lang], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
     const domid = (0, useDomid_js_1.useDomid)(props.id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);

package/HannaCssLink.d.ts

@@ -0,0 +1,15 @@
+import { CssModuleToken, getCssBundleUrl } from '@reykjavik/hanna-css';
+import { EitherObj } from '@reykjavik/hanna-utils';
+type HannaCssLinkProps = EitherObj<{
+    tokens: Array<CssModuleToken> | string;
+    options?: Parameters<typeof getCssBundleUrl>[1];
+}, {
+    href: string;
+}>;
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+export declare const HannaCssLink: (props: HannaCssLinkProps) => JSX.Element;
+export {};

package/HannaCssLink.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HannaCssLink = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const hanna_css_1 = require("@reykjavik/hanna-css");
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+const HannaCssLink = (props) => {
+    var _a;
+    const newHref = (_a = props.href) !== null && _a !== void 0 ? _a : (0, hanna_css_1.getCssBundleUrl)(props.tokens, props.options);
+    const linkRef = (0, react_1.useRef)(null);
+    const currentHrefRef = (0, react_1.useRef)(newHref);
+    (0, react_1.useEffect)(() => {
+        const linkElm = linkRef.current;
+        if (!linkElm || newHref === currentHrefRef.current) {
+            return;
+        }
+        let newLinkElm = document.createElement('link');
+        newLinkElm.rel = 'stylesheet';
+        newLinkElm.href = newHref;
+        linkElm.after(newLinkElm);
+        newLinkElm.onload = () => {
+            if (!newLinkElm) {
+                return;
+            }
+            linkElm.href = newHref;
+            currentHrefRef.current = newHref;
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+        return () => {
+            if (!newLinkElm) {
+                return;
+            }
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+    }, [newHref]);
+    return react_1.default.createElement("link", { ref: linkRef, rel: "stylesheet", href: currentHrefRef.current });
+};
+exports.HannaCssLink = HannaCssLink;

package/ReadSpeakerPlayer.d.ts

@@ -15,8 +15,7 @@ export type ReadSpeakerPlayerProps = {
     /**
      * Reading language/locale for the ReadSpeaker player.
      *
-     * If you don't specify a `lang`, the player will try to auto-detect
-     * the language of the page, and pick a default `voice` for that language.
+     * Default: `is`
      *
      * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
      */

package/ReadSpeakerPlayer.js

@@ -16,7 +16,7 @@ const scriptTagSelector = `script#${scriptTagId}`;
  */
 let buttons = 0;
 exports.defaultReadSpeakerPlayerTexts = {
-    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read out loud' },
     is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
     pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
 };
@@ -26,7 +26,7 @@ exports.defaultReadSpeakerPlayerTexts = {
  * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
  */
 const ReadSpeakerPlayer = (props) => {
-    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
+    const { align, float, customerId = '11315', lang = 'is', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
     const { linkText, linkLabel } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
     (0, react_1.useEffect)(() => {
         var _a, _b;

package/esm/ContactBubble.d.ts

@@ -46,6 +46,8 @@ export type ContactBubbleProps = {
      * magic and always show the bubble toggler
      */
     alwaysShow?: boolean;
+    /** Shorthand override for texts.openBtn, for quick customization */
+    openBtnLabel?: string;
     texts?: ContactBubbleI18n;
     lang?: HannaLang;
 } & SSRSupportProps & WrapperElmProps & ({

package/esm/ContactBubble.js

@@ -37,6 +37,8 @@ export const ensureIcon = (maybeIcon) => maybeIcon && icons[maybeIcon]
 export const ContactBubble = (props) => {
     const { title, links, onToggle, alwaysShow, wrapperProps = {} } = props;
     const txt = getTexts(props, defaultTexts);
+    const openLabel = props.openBtnLabel || txt.openBtn;
+    const openLabelLong = !props.openBtnLabel ? txt.openBtnLong : undefined;
     const useLocalState = props.open == null;
     const [localOpen, setLocalOpen] = useState(false);
     const open = useLocalState ? localOpen : props.open;
@@ -127,8 +129,8 @@ export const ContactBubble = (props) => {
     if (links.length === 0) {
         return null;
     }
-    const menu = (React.createElement("div", Object.assign({}, props.wrapperProps, { className: modifiedClass('ContactBubble', null, wrapperProps.className), id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser }),
-        React.createElement("h2", { className: "ContactBubble__title" }, title || txt.openBtn),
+    const menu = (React.createElement("div", Object.assign({}, props.wrapperProps, { className: modifiedClass('ContactBubble', null, wrapperProps.className), id: isBrowser && domid, hidden: isBrowser && !open, "data-label-openbtn": props.openBtnLabel, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser }),
+        React.createElement("h2", { className: "ContactBubble__title" }, title || openLabel),
         React.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = ensureIcon(linkInfo.icon);
@@ -154,7 +156,7 @@ export const ContactBubble = (props) => {
         '\n\n',
         isBrowser && (React.createElement("button", { className: "ContactBubble__closebtn", "aria-controls": domid, "aria-label": txt.closeBtnLong, onClick: () => closeBubble(), type: "button" }, txt.closeBtn))));
     return isBrowser ? (React.createElement("div", { className: "ContactBubble__wrapper", ref: wrapperRef },
-        React.createElement("button", { className: "ContactBubble__openbtn", "aria-controls": domid, "aria-expanded": open, "aria-label": txt.openBtnLong, onClick: open ? () => closeBubble() : openBubble, type: "button" }, txt.openBtn),
+        React.createElement("button", { className: "ContactBubble__openbtn", "aria-controls": domid, "aria-expanded": open, "aria-label": openLabelLong, onClick: open ? () => closeBubble() : openBubble, type: "button" }, openLabel),
         '\n\n',
         menu)) : (menu);
 };

package/esm/FileInput.d.ts

@@ -14,7 +14,7 @@ export type FileInputProps = FormFieldWrappingProps & {
      * Default: no restrictions.
      */
     accept?: string | Array<string>;
-    dropzoneText: string | JSX.Element;
+    dropzoneText?: string | JSX.Element;
     removeFileText?: string;
     lang?: HannaLang;
     showFileSize?: boolean;

package/esm/FileInput.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
+import { DEFAULT_LANG, ensureHannaLang } from '@reykjavik/hanna-utils/i18n';
 import { useDropzone } from './_mixed_export_resolution_/ReactDropzone.js';
 import { addPreview, formatBytes, getFileListUpdate, releasePreview, } from './FileInput/_FileInput.utils.js';
 import { DefaultFileList } from './FileInput/_FileInputFileList.js';
@@ -12,6 +12,20 @@ const defaultRemoveFileText = {
     en: 'Remove',
     pl: 'Usuń',
 };
+const defaultDropzoneText = {
+    is: () => (React.createElement(React.Fragment, null,
+        "Drag\u00F0u skr\u00E1 hinga\u00F0, e\u00F0a ",
+        React.createElement("strong", null, "smelltu"),
+        " til a\u00F0 velja.")),
+    en: () => (React.createElement(React.Fragment, null,
+        "Drag files here, or ",
+        React.createElement("strong", null, "click"),
+        " to select.")),
+    pl: () => (React.createElement(React.Fragment, null,
+        "Przeci\u0105gnij plik tutaj, lub ",
+        React.createElement("strong", null, "kliknij"),
+        " by wybra\u0107.")),
+};
 const defaultOnFilesRejected = (rejectedFiles) => {
     window.alert(`Error:\n${rejectedFiles
         .map((elm) => {
@@ -28,11 +42,11 @@ const arrayToFileList = (arr) => {
 };
 export const FileInput = (props) => {
     var _a, _b, _c;
-    const lang = props.lang || DEFAULT_LANG;
+    const lang = ensureHannaLang(props.lang) || DEFAULT_LANG;
     const _d = groupFormFieldWrapperProps(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
-    dropzoneText, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[DEFAULT_LANG], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    dropzoneText = defaultDropzoneText[lang](), removeFileText = defaultRemoveFileText[lang], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
     const domid = useDomid(props.id);
     const fileInputWrapper = useRef(null);
     const fileInput = useRef(null);

package/esm/HannaCssLink.d.ts

@@ -0,0 +1,15 @@
+import { CssModuleToken, getCssBundleUrl } from '@reykjavik/hanna-css';
+import { EitherObj } from '@reykjavik/hanna-utils';
+type HannaCssLinkProps = EitherObj<{
+    tokens: Array<CssModuleToken> | string;
+    options?: Parameters<typeof getCssBundleUrl>[1];
+}, {
+    href: string;
+}>;
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+export declare const HannaCssLink: (props: HannaCssLinkProps) => JSX.Element;
+export {};

package/esm/HannaCssLink.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react';
+import { getCssBundleUrl } from '@reykjavik/hanna-css';
+/**
+ * A component that returns a `<link rel="stylesheet" ... />` element that
+ * loads the Hanna CSS bundle, in a way that prevents FOUC when the token list
+ * changes.
+ */
+export const HannaCssLink = (props) => {
+    var _a;
+    const newHref = (_a = props.href) !== null && _a !== void 0 ? _a : getCssBundleUrl(props.tokens, props.options);
+    const linkRef = useRef(null);
+    const currentHrefRef = useRef(newHref);
+    useEffect(() => {
+        const linkElm = linkRef.current;
+        if (!linkElm || newHref === currentHrefRef.current) {
+            return;
+        }
+        let newLinkElm = document.createElement('link');
+        newLinkElm.rel = 'stylesheet';
+        newLinkElm.href = newHref;
+        linkElm.after(newLinkElm);
+        newLinkElm.onload = () => {
+            if (!newLinkElm) {
+                return;
+            }
+            linkElm.href = newHref;
+            currentHrefRef.current = newHref;
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+        return () => {
+            if (!newLinkElm) {
+                return;
+            }
+            newLinkElm.remove();
+            newLinkElm = undefined;
+        };
+    }, [newHref]);
+    return React.createElement("link", { ref: linkRef, rel: "stylesheet", href: currentHrefRef.current });
+};

package/esm/ReadSpeakerPlayer.d.ts

@@ -15,8 +15,7 @@ export type ReadSpeakerPlayerProps = {
     /**
      * Reading language/locale for the ReadSpeaker player.
      *
-     * If you don't specify a `lang`, the player will try to auto-detect
-     * the language of the page, and pick a default `voice` for that language.
+     * Default: `is`
      *
      * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
      */

package/esm/ReadSpeakerPlayer.js

@@ -12,7 +12,7 @@ const scriptTagSelector = `script#${scriptTagId}`;
  */
 let buttons = 0;
 export const defaultReadSpeakerPlayerTexts = {
-    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read out loud' },
     is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
     pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
 };
@@ -22,7 +22,7 @@ export const defaultReadSpeakerPlayerTexts = {
  * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
  */
 export const ReadSpeakerPlayer = (props) => {
-    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
+    const { align, float, customerId = '11315', lang = 'is', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
     const { linkText, linkLabel } = getTexts({ lang: lang.slice(0, 2), texts }, defaultReadSpeakerPlayerTexts);
     useEffect(() => {
         var _a, _b;

package/esm/index.d.ts

@@ -59,6 +59,7 @@
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />
+/// <reference path="./HannaCssLink.d.tsx" />
 /// <reference path="./GridBlocks.d.tsx" />
 /// <reference path="./Gallery.d.tsx" />
 /// <reference path="./FormField.d.tsx" />

package/index.d.ts

@@ -59,6 +59,7 @@
 /// <reference path="./IframeBlock.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />
+/// <reference path="./HannaCssLink.d.tsx" />
 /// <reference path="./GridBlocks.d.tsx" />
 /// <reference path="./Gallery.d.tsx" />
 /// <reference path="./FormField.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.122",
+	"version": "0.10.124",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -18,7 +18,7 @@
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.14",
-		"@reykjavik/hanna-utils": "^0.2.14",
+		"@reykjavik/hanna-utils": "^0.2.15",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",
@@ -289,6 +289,10 @@
 			"import": "./esm/Heading.js",
 			"require": "./Heading.js"
 		},
+		"./HannaCssLink": {
+			"import": "./esm/HannaCssLink.js",
+			"require": "./HannaCssLink.js"
+		},
 		"./GridBlocks": {
 			"import": "./esm/GridBlocks.js",
 			"require": "./GridBlocks.js"