@reykjavik/hanna-react 0.10.84 → 0.10.85

package/esm/ArticleCarousel/_ArticleCarouselCard.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Image } from '../_abstract/_Image.js';
+import { Link } from '../_abstract/_Link.js';
+import { colorFamilies, themeOptions } from '../constants.js';
+export const ArticleCarouselCard = (props) => {
+    const { date, title, summary, href, target, moreLabel, color, theme, illustration, image, } = props;
+    const photo = image === null || image === void 0 ? void 0 : image.photo;
+    const imageProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
+    return (React.createElement("div", { className: "ArticleCarouselCard", "data-color": color && colorFamilies[color], "data-color-theme": !color ? theme && themeOptions[theme] : undefined },
+        React.createElement(Link, { className: "ArticleCarouselCard__link", href: href, target: target },
+            ' ',
+            React.createElement(Image, Object.assign({ placeholder: true, className: getBemClass('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            React.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
+            ' '),
+        ' ',
+        date && React.createElement("span", { className: "ArticleCarouselCard__date" }, date),
+        React.createElement("div", { className: "ArticleCarouselCard__summary" }, summary),
+        moreLabel && (React.createElement(Link, { className: "ArticleCarouselCard__morelink", href: href, target: target, "aria-label": title },
+            ' ',
+            moreLabel,
+            ' '))));
+};

package/esm/ArticleCarousel.d.ts

@@ -0,0 +1,12 @@
+import { ArticleCarouselCardProps, ArticleCarouselImageProps } from './ArticleCarousel/_ArticleCarouselCard.js';
+import { SeenProp } from './utils/seenEffect.js';
+import { SSRSupport } from './utils.js';
+export type ArticleCarouselProps = {
+    items: Array<ArticleCarouselCardProps>;
+    title?: string;
+    moreLabel?: string;
+    ssr?: SSRSupport;
+} & SeenProp;
+export type { ArticleCarouselCardProps, ArticleCarouselImageProps };
+export declare const ArticleCarousel: (props: ArticleCarouselProps) => JSX.Element;
+export default ArticleCarousel;

package/esm/ArticleCarousel.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AbstractCarousel } from './_abstract/_AbstractCarousel.js';
+import { ArticleCarouselCard, } from './ArticleCarousel/_ArticleCarouselCard.js';
+export const ArticleCarousel = (props) => {
+    const { title, items, moreLabel, ssr, startSeen } = props;
+    return (React.createElement(AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen }));
+};
+export default ArticleCarousel;

package/esm/ArticleMeta.d.ts

@@ -0,0 +1,10 @@
+export type ArticleMetaItem = {
+    label: string;
+    href?: string;
+};
+export type ArticleMetaProps = {
+    items: Array<ArticleMetaItem>;
+    small?: boolean;
+};
+export declare const ArticleMeta: (props: ArticleMetaProps) => JSX.Element | null;
+export default ArticleMeta;

package/esm/ArticleMeta.js

@@ -0,0 +1,19 @@
+import React, { Fragment } from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from './_abstract/_Link.js';
+export const ArticleMeta = (props) => {
+    const { items, small } = props;
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: getBemClass('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (React.createElement(Fragment, { key: i },
+        href == null ? (React.createElement("span", { className: "ArticleMeta__item" },
+            " ",
+            label,
+            " ")) : (React.createElement(Link, { className: "ArticleMeta__item", href: href },
+            ' ',
+            label,
+            ' ')),
+        ' ')))));
+};
+export default ArticleMeta;

package/esm/Attention.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type AttentionProps = {
+    small?: boolean;
+    children: ReactNode;
+};
+export declare const Attention: (props: AttentionProps) => JSX.Element;
+export default Attention;

package/esm/Attention.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+export const Attention = (props) => (React.createElement("div", { className: getBemClass('Attention', props.small && 'small') }, props.children));
+export default Attention;

package/esm/BasicTable.d.ts

@@ -0,0 +1,14 @@
+import { TableProps } from '@hugsmidjan/react/Table';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { SeenProp } from './utils/seenEffect.js';
+export type BasicTableProps = {
+    compact?: boolean;
+    type?: 'text' | 'number';
+    modifier?: string;
+} & EitherObj<{
+    fullWidth?: boolean;
+}, {
+    align?: 'right';
+}> & SeenProp & Omit<TableProps, 'className' | 'children'>;
+export declare const BasicTable: (props: BasicTableProps) => JSX.Element;
+export default BasicTable;

package/esm/BasicTable.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Table from '@hugsmidjan/react/Table';
+import TableWrapper from '@hugsmidjan/react/TableWrapper';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect.js';
+export const BasicTable = (props) => {
+    const { cols, caption, thead, tfoot, align, fullWidth, startSeen } = props;
+    const tbodyProps = props.tbodies
+        ? { tbodies: props.tbodies }
+        : { tbody: props.tbody || [] };
+    const modifier = props.modifier;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement(TableWrapper, { modifier: [
+            'BasicTable',
+            modifier && 'BasicTable--' + modifier,
+            fullWidth && 'BasicTable--fullwidth',
+            align === 'right' && !fullWidth && 'BasicTable--align--' + align,
+        ], wrapperRef: ref },
+        React.createElement(Table, Object.assign({ className: getBemClass('BasicTable', [
+                props.compact && 'compact',
+                modifier && modifier,
+            ]) }, {
+            cols,
+            caption,
+            thead,
+            tfoot,
+        }, tbodyProps))));
+};
+export default BasicTable;

package/esm/BgBox.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { EffectProp, SeenProp } from './utils/seenEffect.js';
+export type BgBoxProps = {
+    className?: string;
+    children: ReactNode;
+} & SeenProp & EffectProp;
+export declare const BgBox: (props: BgBoxProps) => JSX.Element;
+export default BgBox;

package/esm/BgBox.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getEffectAttr, useSeenEffect, } from './utils/seenEffect.js';
+export const BgBox = (props) => {
+    const { className, children, effectType, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", Object.assign({ className: getBemClass('BgBox', undefined, className), ref: ref }, getEffectAttr(effectType)), children));
+};
+export default BgBox;

package/esm/Bling.d.ts

@@ -0,0 +1,81 @@
+import { BlingType } from '@reykjavik/hanna-utils/assets';
+declare const colors: {
+    tertiary: boolean;
+    secondary: boolean;
+    primary: boolean;
+};
+export type BlingColor = keyof typeof colors;
+declare const aligns: {
+    left: boolean;
+    'left-ish': boolean;
+    'left-center': boolean;
+    'right-center': boolean;
+    'right-ish': boolean;
+    right: boolean;
+};
+export type BlingAlignment = keyof typeof aligns;
+declare const valigns: {
+    up: boolean;
+    'up-ish': boolean;
+    center: boolean;
+    'down-ish': boolean;
+    down: boolean;
+};
+export type BlingVAlignment = keyof typeof valigns;
+declare const parentOffset: {
+    top: boolean;
+    'top-ish': boolean;
+    center: boolean;
+    'bottom-ish': boolean;
+    bottom: boolean;
+};
+export type BlingParentOffset = keyof typeof parentOffset;
+export type BlingProps = {
+    /**
+     * Horizontal alignment relative to the bling container's
+     * full width
+     *
+     * NOTE: Blings should always be placed in a layout context
+     * where they can stretch to a full (12 columns) width
+     */
+    align?: BlingAlignment;
+    /**
+     * Vertical shift along the vertical insertion point
+     *
+     * Defult: `center`
+     */
+    vertical?: BlingVAlignment;
+    /**
+     * Vertical positioning of the insertion point within
+     * the Bling's offset parent element.
+     *
+     * Default is the natural layout flow position of the
+     * Bling element (no vertical re-positioning)
+     */
+    parent?: BlingParentOffset;
+    /**
+     * Theme color (combo) for the elelment
+     *
+     * Default: `tertiary`
+     */
+    color?: BlingColor;
+    /**
+     * Gives the Bling a positive `z-index` value.
+     *
+     * By default Blings layer themselves *underneath* other page content.
+     */
+    overlay?: boolean;
+    /** Additional className (use sparingly) */
+    className?: string;
+} & ({
+    /** The name of the Bling shape to display */
+    type: BlingType;
+    /** Not allowed when `type` is set */
+    blingUrl?: undefined;
+} | {
+    type?: undefined;
+    /** Custom SVG URL to load (use sparingly) */
+    blingUrl: string;
+});
+export declare const Bling: (props: BlingProps) => JSX.Element;
+export default Bling;

package/esm/Bling.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getBlingUrl } from '@reykjavik/hanna-utils/assets';
+import { useGetSVGtext } from './utils/useGetSVGtext.js';
+const colors = {
+    tertiary: true,
+    secondary: true,
+    primary: true,
+};
+const aligns = {
+    left: true,
+    'left-ish': true,
+    'left-center': true,
+    'right-center': true,
+    'right-ish': true,
+    right: true,
+};
+const valigns = {
+    up: true,
+    'up-ish': true,
+    center: true,
+    'down-ish': true,
+    down: true,
+};
+const parentOffset = {
+    top: true,
+    'top-ish': true,
+    center: true,
+    'bottom-ish': true,
+    bottom: true,
+};
+export const Bling = (props) => {
+    const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
+    const imageUrl = type ? getBlingUrl(type) : blingUrl;
+    const inlineSvg = useGetSVGtext(imageUrl);
+    return (React.createElement("div", { className: getBemClass('Bling', [
+            'align--' + (align && align in aligns ? align : 'left'),
+            vertical && vertical in valigns && 'vertical--' + vertical,
+            color && color in colors && 'color--' + color,
+            parent && parent in parentOffset && 'parent--' + parent,
+            overlay && 'overlay',
+        ], className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } }));
+};
+export default Bling;

package/esm/BlockBreak.d.ts

@@ -0,0 +1,2 @@
+export declare const BlockBreak: () => JSX.Element;
+export default BlockBreak;

package/esm/BlockBreak.js

@@ -0,0 +1,6 @@
+import React from 'react';
+/*
+  TODO: Add story
+*/
+export const BlockBreak = () => React.createElement("div", { className: "BlockBreak" });
+export default BlockBreak;

package/esm/BlockQuote.d.ts

@@ -0,0 +1,4 @@
+import { QuoteProps } from './_abstract/_Quote.js';
+export type BlockQuoteProps = QuoteProps;
+export declare const BlockQuote: (props: BlockQuoteProps) => JSX.Element;
+export default BlockQuote;

package/esm/BlockQuote.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { _Quote } from './_abstract/_Quote.js';
+export const BlockQuote = (props) => (React.createElement(_Quote, Object.assign({ bem: "BlockQuote" }, props)));
+export default BlockQuote;

package/esm/BreadCrumbs.d.ts

@@ -0,0 +1,11 @@
+export type BreadCrumb = {
+    href?: string;
+    label: string;
+};
+export type BreadCrumbTrail = Array<BreadCrumb>;
+export type BreadCrumbsProps = {
+    title: string;
+    trail: BreadCrumbTrail;
+};
+export declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element | null;
+export default BreadCrumbs;

package/esm/BreadCrumbs.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from './_abstract/_Link.js';
+const BreadCrumbs__item = (props) => {
+    const { link, current } = props;
+    return link.href != null ? (React.createElement(Link, { className: "BreadCrumbs__item", href: link.href, "aria-current": current || undefined }, link.label)) : (React.createElement("span", { className: "BreadCrumbs__item", "aria-current": current || undefined }, link.label));
+};
+export const BreadCrumbs = (props) => {
+    const { title, trail } = props;
+    if (trail.length === 0) {
+        return null;
+    }
+    const ancestors = trail.slice(0, -1);
+    const current = trail[trail.length - 1];
+    return (React.createElement("nav", { className: "BreadCrumbs", "aria-label": title },
+        React.createElement("span", { className: "BreadCrumbs__title" },
+            title,
+            ":"),
+        ' ',
+        ancestors.map((link, i) => {
+            return (React.createElement(React.Fragment, { key: i },
+                React.createElement(BreadCrumbs__item, { link: link }),
+                ' ',
+                React.createElement("span", { className: "BreadCrumbs__separator", "aria-label": "" }, ">"),
+                ' '));
+        }),
+        React.createElement(BreadCrumbs__item, { link: current, current: true })));
+};
+export default BreadCrumbs;

package/esm/ButtonBack.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from './_abstract/_Button.js';
+export type ButtonBackProps = ButtonProps;
+export declare const ButtonBack: (props: ButtonBackProps & {
+    children?: ReactNode;
+}) => JSX.Element;
+export default ButtonBack;

package/esm/ButtonBack.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Button } from './_abstract/_Button.js';
+export const ButtonBack = (props) => (React.createElement(Button, Object.assign({ bem: "ButtonBack" }, props)));
+export default ButtonBack;

package/esm/ButtonBar.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type ButtonBarProps = {
+    align?: 'right';
+    children: ReactNode;
+};
+export declare const ButtonBar: {
+    (props: ButtonBarProps): JSX.Element;
+    /** A Splitter token to use directly inside <ButtonBar/> wrappers */
+    Split(): JSX.Element;
+};
+/**
+ * @deprecated Prefer using `ButtonBar.Split` instead.
+ *
+ * (This export token is only to aid discovery.)
+ */
+export declare const ButtonBar__split: () => JSX.Element;
+export default ButtonBar;

package/esm/ButtonBar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+export const ButtonBar = (props) => {
+    const { align, children } = props;
+    return (React.createElement("div", { className: getBemClass('ButtonBar', align === 'right' && 'align--right') }, children));
+};
+/** A Splitter token to use directly inside <ButtonBar/> wrappers */
+ButtonBar.Split = () => React.createElement("span", { className: "ButtonBar__split" });
+/**
+ * @deprecated Prefer using `ButtonBar.Split` instead.
+ *
+ * (This export token is only to aid discovery.)
+ */
+export const ButtonBar__split = ButtonBar.Split;
+export default ButtonBar;

package/esm/ButtonPrimary.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button.js';
+export type ButtonPrimaryProps = ButtonProps & ButtonVariantProps;
+export declare const ButtonPrimary: (props: ButtonPrimaryProps & {
+    children?: ReactNode;
+}) => JSX.Element;
+export default ButtonPrimary;

package/esm/ButtonPrimary.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Button } from './_abstract/_Button.js';
+export const ButtonPrimary = (props) => (React.createElement(Button, Object.assign({ bem: "ButtonPrimary" }, props)));
+export default ButtonPrimary;

package/esm/ButtonSecondary.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button.js';
+export type ButtonSecondaryProps = ButtonProps & ButtonVariantProps;
+export declare const ButtonSecondary: (props: ButtonSecondaryProps & {
+    children?: ReactNode;
+}) => JSX.Element;
+export default ButtonSecondary;

package/esm/ButtonSecondary.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Button } from './_abstract/_Button.js';
+export const ButtonSecondary = (props) => React.createElement(Button, Object.assign({ bem: "ButtonSecondary" }, props));
+export default ButtonSecondary;

package/esm/ButtonTertiary.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button.js';
+type TertiarySize = Extract<ButtonVariantProps['size'], 'normal' | 'small'>;
+type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'none' | 'go-back'>;
+export type ButtonTertiaryProps = ButtonProps & Omit<ButtonVariantProps, 'icon' | 'size'> & {
+    size?: TertiarySize;
+    icon?: TertiaryIcon;
+};
+export declare const ButtonTertiary: (props: ButtonTertiaryProps & {
+    children?: ReactNode;
+}) => JSX.Element;
+export default ButtonTertiary;

package/esm/ButtonTertiary.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from './_abstract/_Button.js';
+const sizes = {
+    normal: 'normal',
+    small: 'small',
+};
+const icons = {
+    none: 'none',
+    'go-back': 'go-back',
+};
+export const ButtonTertiary = (props) => {
+    const { size = 'normal', icon = 'none' } = props;
+    return React.createElement(Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));
+};
+export default ButtonTertiary;

package/esm/Carousel.d.ts

@@ -0,0 +1,4 @@
+import { CarouselProps } from './_abstract/_AbstractCarousel.js';
+export type { CarouselProps } from './_abstract/_AbstractCarousel.js';
+export declare const Carousel: <I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}>(props: CarouselProps<I, P>) => JSX.Element;
+export default Carousel;

package/esm/Carousel.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AbstractCarousel } from './_abstract/_AbstractCarousel.js';
+export const Carousel = (props) => (React.createElement(AbstractCarousel, Object.assign({}, props, { bem: undefined, modifier: undefined, title: undefined })));
+export default Carousel;

package/esm/CarouselStepper.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '@hugsmidjan/react/CarouselStepper';
+type CarouselStepperProps = Omit<Props, 'bem' | 'modifier'>;
+export declare const CarouselStepper: (props: CarouselStepperProps) => JSX.Element;
+export default CarouselStepper;

package/esm/CarouselStepper.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import _CarouselStepper from '@hugsmidjan/react/CarouselStepper';
+export const CarouselStepper = (props) => (React.createElement(_CarouselStepper, Object.assign({}, props, { bem: undefined, modifier: undefined })));
+export default CarouselStepper;

package/esm/CenterColumn.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { EffectProp, SeenProp } from './utils/seenEffect.js';
+export type CenterColumnProps = {
+    children: ReactNode;
+} & SeenProp & EffectProp;
+export declare const CenterColumn: (props: CenterColumnProps) => JSX.Element;
+export default CenterColumn;

package/esm/CenterColumn.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import SeenEffect from './SeenEffect.js';
+export const CenterColumn = (props) => {
+    const { children, startSeen, effectType } = props;
+    return startSeen == null ? (React.createElement("div", { className: "CenterColumn" }, children)) : (React.createElement(SeenEffect, { className: "CenterColumn", startSeen: startSeen, effectType: effectType }, children));
+};
+export default CenterColumn;

package/esm/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { TogglerInputProps } from './_abstract/_TogglerInput.js';
+export type CheckboxProps = TogglerInputProps;
+export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/esm/Checkbox.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TogglerInput } from './_abstract/_TogglerInput.js';
+export const Checkbox = (props) => (React.createElement(TogglerInput, Object.assign({ bem: "Checkbox" }, props, { type: "checkbox" })));
+export default Checkbox;

package/esm/CheckboxButton.d.ts

@@ -0,0 +1,4 @@
+import { TogglerInputProps } from './_abstract/_TogglerInput.js';
+export type CheckboxProps = TogglerInputProps;
+export declare const CheckboxButton: (props: CheckboxProps) => JSX.Element;
+export default CheckboxButton;

package/esm/CheckboxButton.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TogglerInput } from './_abstract/_TogglerInput.js';
+export const CheckboxButton = (props) => (React.createElement(TogglerInput, Object.assign({ bem: "CheckboxButton" }, props, { type: "checkbox", innerWrap: true })));
+export default CheckboxButton;

package/esm/CheckboxButtonsGroup.d.ts

@@ -0,0 +1,12 @@
+import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
+export type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
+    value?: Array<string>;
+    defaultValue?: Array<string>;
+    /** @deprecated (Will be removed in v0.11) */
+    columns?: '2col' | '3col';
+    /** @deprecated (Will be removed in v0.11) */
+    layout?: 'slim';
+};
+export type CheckboxButtonsGroupOptions = TogglerGroupFieldOptions;
+export declare const CheckboxButtonsGroup: (props: CheckboxButtonsGroupProps) => JSX.Element;
+export default CheckboxButtonsGroup;

package/esm/CheckboxButtonsGroup.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TogglerGroupField, } from './_abstract/_TogglerGroupField.js';
+import CheckboxButton from './CheckboxButton.js';
+export const CheckboxButtonsGroup = (props) => {
+    if (props.layout) {
+        console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
+    }
+    if (props.columns) {
+        console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
+    }
+    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
+};
+export default CheckboxButtonsGroup;

package/esm/CheckboxGroup.d.ts

@@ -0,0 +1,10 @@
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
+export type CheckboxGroupProps = TogglerGroupFieldProps & {
+    layout?: 'inline';
+    value?: Array<string>;
+    defaultValue?: Array<string>;
+};
+export type CheckboxGroupOption = TogglerGroupFieldOption;
+export type CheckboxGroupOptions = TogglerGroupFieldOptions;
+export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
+export default CheckboxGroup;

package/esm/CheckboxGroup.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TogglerGroupField, } from './_abstract/_TogglerGroupField.js';
+import Checkbox from './Checkbox.js';
+export const CheckboxGroup = (props) => {
+    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxGroup", modifier: props.layout, Toggler: Checkbox })));
+};
+export default CheckboxGroup;

package/esm/CityBlock.d.ts

@@ -0,0 +1,21 @@
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { BlockItem } from './_abstract/_Block.js';
+import { ImageProps } from './_abstract/_Image.js';
+import { SeenProp } from './utils/seenEffect.js';
+import { Alignment } from './constants.js';
+declare const types: {
+    largebox: boolean;
+    largeimage: boolean;
+};
+export type CityBlockProps = {
+    align?: Alignment;
+    type?: keyof typeof types;
+    content: BlockItem;
+} & EitherObj<{
+    illustration: Illustration;
+}, {
+    image: ImageProps;
+}> & SeenProp;
+export declare const CityBlock: (props: CityBlockProps) => JSX.Element;
+export default CityBlock;

package/esm/CityBlock.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Block } from './_abstract/_Block.js';
+import { aligns } from './constants.js';
+const types = {
+    largebox: true,
+    largeimage: true,
+};
+export const CityBlock = (props) => {
+    const align = props.align || 'right';
+    const type = !props.illustration && props.type; // The presence of illustration prop suppresses type
+    const modifier = [aligns[align] && 'align--' + align, type && types[type] && type];
+    const imageProps = props.illustration != null
+        ? { src: getIllustrationUrl(props.illustration) }
+        : props.image;
+    return (React.createElement(Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
+};
+export default CityBlock;