@reykjavik/hanna-react 0.10.55 → 0.10.56

package/esm/_abstract/TogglerInput.d.ts

@@ -0,0 +1,22 @@
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+export declare type TogglerInputProps = {
+    label: string | JSX.Element;
+    children?: undefined;
+    Wrapper?: 'div' | 'li';
+    invalid?: boolean;
+    /** Hidden label prefix text to indicate that the field is required.
+     *
+     * If your field is required but should not say so in its label
+     * then set this prop to `false`
+     *
+     * Default: `"Þarf að fylla út"`
+     * */
+    reqText?: string | false;
+    errorMessage?: string | JSX.Element;
+} & BemPropsModifier & Omit<JSX.IntrinsicElements['input'], 'type'>;
+declare type _TogglerInputProps = {
+    bem: string;
+    type: 'radio' | 'checkbox';
+};
+declare const TogglerInput: (props: TogglerInputProps & _TogglerInputProps) => JSX.Element;
+export default TogglerInput;

package/esm/_abstract/TogglerInput.jsx

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const TogglerInput = (props) => {
+    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id } = props, inputProps = __rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id"]);
+    const domid = useDomid(id);
+    const errorId = errorMessage && 'error' + domid;
+    const reqStar = required && reqText !== false && (<abbr className={bem + '__label__reqstar'} 
+    // TODO: add mo-better i18n thinking
+    title={(reqText || 'Þarf að haka í') + ': '}>
+      *
+    </abbr>);
+    return (<Wrapper className={getBemClass(bem, modifier, className)}>
+      <input className={bem + '__input'} type={type} id={domid} aria-invalid={invalid || !!errorMessage || undefined} aria-describedby={errorId} {...inputProps}/>{' '}
+      <label className={bem + '__label'} htmlFor={domid}>
+        {' '}
+        {reqStar} {label}{' '}
+      </label>
+      {errorMessage && (<div className={bem + '__error'} id={errorId}>
+          {errorMessage}
+        </div>)}
+    </Wrapper>);
+};
+export default TogglerInput;

package/esm/_abstract/_AbstractCarousel.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { BemProps } from '@hugsmidjan/react/types';
+import { SeenProp } from '../utils/seenEffect';
+export declare type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
+    className?: string;
+    ssr?: SSRSupport;
+    /** @deprecated Ingored because never used (Will be removed in v0.11) */
+    scrollRight?: boolean;
+} & ({
+    children?: never;
+    items: Array<I>;
+    Component: (props: P extends undefined ? I : I & P) => ReactElement | null;
+    ComponentProps?: P;
+} | {
+    children: Array<ReactElement>;
+    items?: never;
+    Component?: never;
+    ComponentProps?: never;
+}) & SeenProp;
+declare type AbstractCarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = CarouselProps<I, P> & BemProps & {
+    title?: string;
+};
+declare const AbstractCarousel: <I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}>(props: AbstractCarouselProps<I, P>) => JSX.Element | null;
+export default AbstractCarousel;

package/esm/_abstract/_AbstractCarousel.jsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState, } from 'react';
+import A from '@hugsmidjan/qj/A';
+import focusElm from '@hugsmidjan/qj/focusElm';
+import throttle from '@hugsmidjan/qj/throttle';
+import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { notNully } from '@reykjavik/hanna-utils';
+import CarouselStepper from '../CarouselStepper';
+import { useSeenEffect } from '../utils/seenEffect';
+const WHEEL_AMPLIFIER = 3;
+const WHEEL_HIJACK_TIMEOUT_MS = 667;
+const scrollXBy = (elm, deltaX) => {
+    const left = elm.scrollLeft + deltaX;
+    elm.scrollTo(left, elm.scrollTop);
+    // NOTE 1: using elm.scrollTo({ left, behavior: 'smooth' }); seems to be too much
+    // as `behavior: 'smooth'` starts some weird interactions with the browser's
+    // `scroll-snap-type` behavior.
+    //
+    // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
+    // while Firefox is more smooth. Haven't found a way around that.
+};
+const exitWheelHijack = (elm) => () => {
+    elm.style.scrollSnapType = '';
+    const lastElmOffset = elm.lastElementChild
+        ? elm.lastElementChild.offsetLeft
+        : 0;
+    // trigger one last scroll event, to make sure the element's
+    // `style.scrollSnapType`'s behavior kicks in.
+    // Otherwise the list may stay stuck in an over-scrolled state —
+    // off to the right.
+    scrollXBy(elm, Math.min(0, lastElmOffset - elm.scrollLeft));
+};
+const handleMouseWheel = (e) => {
+    const elm = e.currentTarget;
+    if (e.deltaX || elm.$hasXDeltaed) {
+        elm.$hasXDeltaed = true;
+        exitWheelHijack(elm);
+        return;
+    }
+    if (e.deltaY && !e.deltaX) {
+        if (e.deltaY < 0) {
+            // Stop scroll-capture when list is at left-edge
+            if (elm.scrollLeft < 50) {
+                return;
+            }
+        }
+        else {
+            // Stop scroll-capture when list is beyond left edge of last list item
+            if (elm.scrollLeft >
+                (elm.lastElementChild ? elm.lastElementChild.offsetLeft : 0)) {
+                exitWheelHijack(elm);
+                return;
+            }
+        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        // Disable `scroll-snap-style` because otherwise
+        // small-scale elm.scrollTo() calls have no effect
+        elm.style.scrollSnapType = 'initial';
+        scrollXBy(elm, e.deltaY * WHEEL_AMPLIFIER);
+        clearTimeout(elm.$timeout);
+        elm.$timeout = setTimeout(exitWheelHijack(elm), WHEEL_HIJACK_TIMEOUT_MS);
+    }
+};
+const handleMouseLeave = (e) => {
+    const elm = e.currentTarget;
+    exitWheelHijack(elm);
+    elm.$hasXDeltaed = undefined;
+};
+const AbstractCarousel = (props) => {
+    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
+    const children = props.children && props.children.filter(notNully);
+    const [leftOffset, setLeftOffset] = useState();
+    const itemCount = (children || items).length;
+    const listRef = useRef(null);
+    const [activeItem, setActiveItem] = useState(0);
+    const isBrowser = useIsBrowserSide(ssr);
+    // update on activeItem state change
+    useEffect(() => {
+        const listElm = listRef.current;
+        if (!listElm) {
+            return;
+        }
+        const calcLeftOffset = () => {
+            var _a;
+            setLeftOffset((_a = listElm.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
+            scrollXBy(listElm, 0);
+        };
+        const calcActiveItem = throttle(() => {
+            const { scrollLeft, children } = listElm;
+            // using Array#find as forEachUntil
+            A(children).find((item, i) => {
+                if (scrollLeft <= item.offsetLeft + item.offsetWidth / 2) {
+                    setActiveItem(i);
+                    return true;
+                }
+            });
+        }, 300, true);
+        calcLeftOffset();
+        listElm.addEventListener('wheel', handleMouseWheel);
+        listElm.addEventListener('scroll', calcActiveItem, { passive: true });
+        window.addEventListener('resize', calcLeftOffset, { passive: true });
+        return () => {
+            listElm.removeEventListener('wheel', handleMouseWheel);
+            listElm.removeEventListener('scroll', calcActiveItem);
+            window.removeEventListener('resize', calcLeftOffset);
+        };
+    }, []);
+    const scrollToItem = (newActive) => {
+        setActiveItem(newActive);
+        const listElm = listRef.current;
+        const newItem = listElm.children[newActive];
+        listElm.scrollTo(newItem ? newItem.offsetLeft : 0, 0);
+        setTimeout(() => focusElm(newItem), 500);
+    };
+    const [outerRef] = useSeenEffect(startSeen);
+    if (!itemCount) {
+        return null;
+    }
+    return (<div className={getBemClass(bem, modifier, props.className)} ref={outerRef} data-sprinkled={isBrowser}>
+      {title && <h2 className={bem + '__title'}>{title}</h2>}
+      <div className={bem + '__itemlist'} style={leftOffset
+            ? { '--Carousel--leftOffset': `${leftOffset}px` }
+            : undefined} data-scroll-snapping={leftOffset ? 'true' : undefined} onMouseLeave={handleMouseLeave} ref={listRef}>
+        {children ||
+            items.map((item, i) => (
+            // @ts-expect-error  (Can't be arsed...)
+            <Component key={i} {...ComponentProps} {...item}/>))}
+      </div>
+      {isBrowser && (<CarouselStepper itemCount={itemCount} setCurrent={scrollToItem} current={activeItem}/>)}
+    </div>);
+};
+export default AbstractCarousel;

package/esm/_abstract/_Blings.d.ts

@@ -0,0 +1,11 @@
+import { BlingType } from '@reykjavik/hanna-utils/assets';
+import { BlingProps } from '../Bling';
+export declare type BlingComboProps = Array<Omit<BlingProps, 'type' | 'blingUrl'> & {
+    type: BlingType;
+}>;
+declare type BlingsProps = {
+    blings: BlingComboProps;
+    mirror?: boolean;
+};
+declare const Blings: (props: BlingsProps) => JSX.Element;
+export default Blings;

package/esm/_abstract/_Blings.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Bling from '../Bling';
+const inverseAlignments = {
+    left: 'right',
+    'left-ish': 'right-ish',
+    'left-center': 'right-center',
+    'right-center': 'left-center',
+    'right-ish': 'left-ish',
+    right: 'left',
+};
+const Blings = (props) => (<>
+    {props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (<Bling key={type + '-' + i} type={type} align={props.mirror ? inverseAlignments[align || 'left'] : align} vertical={vertical} color={color} overlay={overlay} parent={parent}/>))}
+  </>);
+export default Blings;

package/esm/_abstract/_Block.d.ts

@@ -0,0 +1,22 @@
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { SeenProp } from '../utils/seenEffect';
+import { ButtonProps } from './Button';
+import { ImageProps } from './Image';
+export declare type BlockItem = {
+    title: string;
+    summary?: string | JSX.Element;
+    buttons?: Array<ButtonProps>;
+};
+export declare type ContentImageBlock = {
+    content: BlockItem;
+    image: ImageProps;
+} & SeenProp;
+export declare type ContentBlock = {
+    content: Array<BlockItem>;
+    image?: undefined;
+} & SeenProp;
+export declare type BlockProps = BemPropsModifier & (ContentBlock | ContentImageBlock);
+declare const Block: (props: BlockProps & {
+    bem: string;
+}) => JSX.Element;
+export default Block;

package/esm/_abstract/_Block.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from '../utils/seenEffect';
+import Button from './Button';
+import Image from './Image';
+const Block = (props) => {
+    const { image, modifier, bem, content, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const contentItems = Array.isArray(content) ? content : [content];
+    return (<div className={getBemClass(bem, modifier)} ref={ref}>
+      {contentItems.map(({ title, summary, buttons = [] }, i) => {
+            const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
+            return (<div key={i} className={`${bem}__content`}>
+            <h2 className={`${bem}__title`}>{title}</h2>
+            {hasSummary && <div className={`${bem}__summary`}>{summary}</div>}
+            {buttons.length > 0 && (<div className={`${bem}__buttons`}>
+                {' '}
+                {buttons.map((buttonProps, i) => (<>
+                    <Button bem={`${bem}__button`} key={i} {...buttonProps}/>{' '}
+                  </>))}
+              </div>)}
+          </div>);
+        })}
+      {image && <Image className={`${bem}__image`} {...image}/>}
+    </div>);
+};
+export default Block;

package/esm/_abstract/_Quote.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type QuoteProps = {
+    children: ReactNode;
+    by?: string | JSX.Element;
+    byHref?: string;
+};
+export declare const _Quote: (props: {
+    bem: string;
+} & QuoteProps) => JSX.Element;

package/esm/_abstract/_Quote.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from './Link';
+export const _Quote = (props) => {
+    const { bem, children, by, byHref } = props;
+    return (<figure className={bem}>
+      <blockquote className={bem + '__quote'}>{children}</blockquote>
+      {by && (<figcaption className={bem + '__by'}>
+          {byHref ? (<Link href={byHref}>{by}</Link>) : typeof by === 'string' ? (<span>{by}</span>) : (by)}
+        </figcaption>)}
+    </figure>);
+};

package/esm/_abstract/breakOnNL.d.ts

@@ -0,0 +1,2 @@
+declare const breakOnNL: (text: string | undefined) => "" | (string | JSX.Element)[] | undefined;
+export default breakOnNL;

package/esm/_abstract/breakOnNL.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+const breakOnNL = (text) => text &&
+    text
+        .trim()
+        .replace(/(?:\n\s*)+/g, '\n\n')
+        .split(/\n/)
+        .map((bit) => bit || <br />);
+export default breakOnNL;

package/esm/assets.d.ts

@@ -0,0 +1,42 @@
+import type { BlingType, Efnistakn, Formheimur, Illustration } from '@reykjavik/hanna-utils/assets';
+import { blingTypes, efnistakn, getAssetUrl, getBlingUrl, getEfnistaknUrl, getFormheimurUrl, getIllustrationUrl, illustrations } from '@reykjavik/hanna-utils/assets';
+export type { 
+/** @deprecated  Instead `import type { BlingType } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+BlingType, 
+/** @deprecated  Instead `import type { Efnistakn } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+Efnistakn, 
+/** @deprecated  Instead `import type { Formheimur } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+Formheimur, 
+/** @deprecated  Instead `import type { Illustration } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+Illustration, };
+export { 
+/** @deprecated  Instead `import type { blingTypes } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+blingTypes, 
+/** @deprecated  Instead `import type { efnistakn } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+efnistakn, 
+/** @deprecated  Instead `import type { getAssetUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getAssetUrl, 
+/** @deprecated  Instead `import type { getBlingUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getBlingUrl, 
+/** @deprecated  Instead `import type { getEfnistaknUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getEfnistaknUrl, 
+/** @deprecated  Instead `import type { getFormheimurUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getFormheimurUrl, 
+/** @deprecated  Instead `import type { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getIllustrationUrl, 
+/** @deprecated  Instead `import type { illustrations } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+illustrations, };
+/** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
+export declare const getCssBundleUrl: (cssTokens: string | Array<string>, version?: string | undefined) => string;
+/** @deprecated  (Will be removed in v0.11) */
+export declare const efnistakn_menu: readonly ["menu/borgarstjori", "menu/borgarstjorn", "menu/bygg_framkv", "menu/fjarmal", "menu/fundargerdir", "menu/itrottir_aftreying", "menu/log_reglugerdir", "menu/mannaudur", "menu/menning", "menu/rad_nefndir", "menu/skipulag", "menu/skolar_fristund", "menu/svid_deildir", "menu/umhverfi_samgongur", "menu/velferd_fjolskylda"];
+/** @deprecated  (Will be removed in v0.11) */
+export declare type Efnistakn_Menu = typeof efnistakn_menu[number];
+/** @deprecated  (Will be removed in v0.11) */
+export declare const auxiliary_menu_images: Array<Illustration>;
+/** @deprecated  Instead `import type { AuxilaryPanelIllustration } from '@reykjavik/hanna-react/MainMenu';` (Will be removed in v0.11) */
+export declare type Auxilary_MenuImages = typeof auxiliary_menu_images[number];
+/** @deprecated  Instead `import type { BlingType } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+export declare type BlingTypes = BlingType;
+/** @deprecated  Instead `import type { Illustration } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+export declare type Illustrations = Illustration;

package/esm/assets.js

@@ -0,0 +1,56 @@
+import { getCssBundleUrl as _getCssBundleUrl } from '@reykjavik/hanna-css';
+import { blingTypes, efnistakn, getAssetUrl, getBlingUrl, getEfnistaknUrl, getFormheimurUrl, getIllustrationUrl, illustrations, } from '@reykjavik/hanna-utils/assets';
+export { 
+/** @deprecated  Instead `import type { blingTypes } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+blingTypes, 
+/** @deprecated  Instead `import type { efnistakn } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+efnistakn, 
+/** @deprecated  Instead `import type { getAssetUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getAssetUrl, 
+/** @deprecated  Instead `import type { getBlingUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getBlingUrl, 
+/** @deprecated  Instead `import type { getEfnistaknUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getEfnistaknUrl, 
+/** @deprecated  Instead `import type { getFormheimurUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getFormheimurUrl, 
+/** @deprecated  Instead `import type { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+getIllustrationUrl, 
+/** @deprecated  Instead `import type { illustrations } from '@reykjavik/hanna-utils/assets';` (Will be removed in v0.11) */
+illustrations, };
+/** @deprecated Use `getCssBundleUrl` from '@reykjavik/hanna-css' instead  (Will be reomved in v0.11) */
+export const getCssBundleUrl = (cssTokens, 
+/** If you want to pin your CSS files to a specific version */
+version) => _getCssBundleUrl(cssTokens, { version });
+// ---------------------------------------------------------------------------
+// Based on "https://styles.reykjavik.is/assets/efnistakn/menu/files.json"
+/** @deprecated  (Will be removed in v0.11) */
+export const efnistakn_menu = [
+    'menu/borgarstjori',
+    'menu/borgarstjorn',
+    'menu/bygg_framkv',
+    'menu/fjarmal',
+    'menu/fundargerdir',
+    'menu/itrottir_aftreying',
+    'menu/log_reglugerdir',
+    'menu/mannaudur',
+    'menu/menning',
+    'menu/rad_nefndir',
+    'menu/skipulag',
+    'menu/skolar_fristund',
+    'menu/svid_deildir',
+    'menu/umhverfi_samgongur',
+    'menu/velferd_fjolskylda',
+];
+// ---------------------------------------------------------------------------
+/** @deprecated  (Will be removed in v0.11) */
+export const auxiliary_menu_images = [
+    'hanna-veitiggi',
+    'hanna-vandro',
+    'hanna-hugsi',
+    'hanna-hissa',
+    'hanna-hahaha',
+    'hanna-hae',
+    'hanna-god_spurning',
+    'hanna-gjuggiborg',
+    'hanna-benda',
+];

package/esm/constants.d.ts

@@ -0,0 +1,39 @@
+/** @depcrecated import `colorFamilies` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export declare const colorFamilies: readonly ["esja", "faxafloi", "nautholsvik", "heidmork", "ellidaardalur", "blafjoll", "sund", "rokkur", "suld"] & {
+    readonly esja: "esja";
+    readonly faxafloi: "faxafloi";
+    readonly nautholsvik: "nautholsvik";
+    readonly heidmork: "heidmork";
+    readonly ellidaardalur: "ellidaardalur";
+    readonly blafjoll: "blafjoll";
+    readonly sund: "sund";
+    readonly rokkur: "rokkur";
+    readonly suld: "suld";
+} & {
+    /** @deprecated  This is a typo  (Will be removed in v0.11) */
+    ellidarardalur: string;
+};
+/** @depcrecated import type `ColorFamily` from `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export type { ColorFamily } from '@reykjavik/hanna-css';
+/** @depcrecated import `colorThemes` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export declare const themeOptions: readonly ["trustworthy", "dependable", "friendly", "lively", "colorful"] & {
+    readonly trustworthy: "trustworthy";
+    readonly dependable: "dependable";
+    readonly friendly: "friendly";
+    readonly lively: "lively";
+    readonly colorful: "colorful";
+};
+/** @depcrecated import type `HannaColorTheme` from `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export type { HannaColorTheme as ThemeOption } from '@reykjavik/hanna-css';
+export declare type Alignment = 'right' | 'left';
+export declare const aligns: Record<string, true | undefined>;
+export declare type ComponentLayoutProps<Align extends string = 'right'> = {
+    wide?: undefined;
+    align?: undefined;
+} | {
+    wide: boolean;
+    align?: undefined;
+} | {
+    wide?: undefined;
+    align: Align;
+};

package/esm/constants.js

@@ -0,0 +1,22 @@
+import { colorFamilies as _colorFamilies, colorThemes } from '@reykjavik/hanna-css';
+/** @depcrecated import `colorFamilies` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export const colorFamilies = Object.assign([
+    'esja',
+    'faxafloi',
+    'nautholsvik',
+    'heidmork',
+    'ellidaardalur',
+    'blafjoll',
+    'sund',
+    'rokkur',
+    'suld',
+], _colorFamilies, {
+    /** @deprecated  This is a typo  (Will be removed in v0.11) */
+    ellidarardalur: 'ellidaardalur',
+});
+/** @depcrecated import `colorThemes` from  `@reykjavik/hanna-css` instead  (Will be removed in v0.11) */
+export const themeOptions = Object.assign(['trustworthy', 'dependable', 'friendly', 'lively', 'colorful'], colorThemes);
+export const aligns = {
+    right: true,
+    left: true,
+};

package/esm/focus-visible.d.ts

@@ -0,0 +1 @@
+import '@reykjavik/hanna-utils/focus-visible';

package/esm/focus-visible.js

@@ -0,0 +1 @@
+import '@reykjavik/hanna-utils/focus-visible';

package/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/esm/utils/env.d.ts

@@ -0,0 +1 @@
+export declare const isPreact: true | undefined;

package/esm/utils/env.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const isPreact = 
+// imported from 'preact'
+'h' in React ||
+    // imported from 'preact/compat' (has all of `react-dom` bundled)
+    ('hydrate' in React && 'render' in React) ||
+    // `undefined` instead of `false` for nicer prop usage
+    undefined;

package/esm/utils/seenEffect.d.ts

@@ -0,0 +1,28 @@
+import { RefObject } from 'react';
+export declare const DATA_ATTR_NAME = "is-seen";
+export declare const getObserver: {
+    (target: Element, callback?: ((target: Element) => void) | undefined): (() => void) | undefined;
+    DATA_ATTR_NAME: string;
+};
+export declare const seenEffectOptOut: (target: Element, setFlag?: boolean) => void;
+declare const effects: {
+    readonly fadein: 1;
+    readonly fadeup: 1;
+    readonly fadeleft: 1;
+};
+export declare type SeenEffectType = keyof typeof effects;
+export declare type EffectProp = {
+    /** Should the component appear instantly, and not transition-in once seen */
+    effectType?: SeenEffectType;
+};
+/** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
+export declare const assertEffectType: (maybeType?: string | undefined) => SeenEffectType | undefined;
+export declare const getEffectAttr: (maybeType?: string | undefined) => {
+    'data-seen-effect': string;
+};
+export declare type SeenProp = {
+    /** Should the component appear instantly, and not transition-in once seen */
+    startSeen?: boolean;
+};
+export declare const useSeenEffect: <E extends Element = HTMLDivElement>(startSeen?: boolean | undefined, customRef?: RefObject<E> | undefined) => [RefObject<E> | undefined, true | undefined];
+export {};

package/esm/utils/seenEffect.js

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+export const DATA_ATTR_NAME = 'is-seen';
+const STACKING_DELAY = 400; // ms
+const dataAttr = 'data-' + DATA_ATTR_NAME;
+const inTargetSourceOrder = (a, b) => a.target.compareDocumentPosition(b.target) & Node.DOCUMENT_POSITION_PRECEDING ? 1 : -1;
+const options = {
+    // root: window
+    rootMargin: '-100px 0px 0px 0px',
+    threshold: 0, // 0
+};
+let observer;
+export const getObserver = (target, callback) => {
+    if (target.hasAttribute(dataAttr)) {
+        return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!observer) {
+        observer = new IntersectionObserver((entries, observer) => entries
+            .filter((e) => e.isIntersecting)
+            .sort(inTargetSourceOrder)
+            .forEach(({ target }, i) => {
+            setTimeout(() => {
+                target.setAttribute(dataAttr, 'true');
+                callback && callback(target);
+                observer.unobserve(target);
+            }, STACKING_DELAY * i);
+        }), options);
+    }
+    if (target.matches('[' + dataAttr + '] *')) {
+        // opt out if target is contained by another "seen-effect" element
+        target.setAttribute(dataAttr, '');
+        return;
+    }
+    target.setAttribute(dataAttr, 'false');
+    observer.observe(target);
+    return () => observer.unobserve(target);
+};
+export const seenEffectOptOut = (target, setFlag = true) => {
+    setFlag ? target.setAttribute(dataAttr, '') : target.removeAttribute(dataAttr);
+};
+getObserver.DATA_ATTR_NAME = DATA_ATTR_NAME;
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+const effects = {
+    fadein: 1,
+    fadeup: 1,
+    fadeleft: 1,
+};
+/** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
+export const assertEffectType = (maybeType) => maybeType && maybeType in effects ? maybeType : undefined;
+export const getEffectAttr = (maybeType) => ({
+    'data-seen-effect': assertEffectType(maybeType) || '',
+});
+export const useSeenEffect = (
+/** Should the component appear instantly, and not transition-in once seen */
+startSeen, 
+/** Bring Your Own RefObject */
+customRef) => {
+    const localRef = useRef(null);
+    const [isSeen, setSeen] = useState(startSeen || undefined);
+    const ref = !startSeen && (customRef || localRef);
+    useEffect(() => {
+        setSeen(startSeen || undefined);
+        if (ref && ref.current) {
+            // NOTE: Given that `ref` is defined, then
+            // `startSeen` is implicily `false | undefined` at
+            // this point.
+            seenEffectOptOut(ref.current, false);
+            return getObserver(ref.current, () => setSeen(true));
+        }
+    }, [ref, startSeen]);
+    return [ref || undefined, isSeen];
+};