@reykjavik/hanna-react 0.10.56 → 0.10.57

package/GridBlocks.jsx

@@ -1,40 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const assets_1 = require("@reykjavik/hanna-utils/assets");
-const Image_1 = __importDefault(require("./_abstract/Image"));
-const Link_1 = require("./_abstract/Link");
-const seenEffect_1 = require("./utils/seenEffect");
-const ButtonTertiary_1 = __importDefault(require("./ButtonTertiary"));
-const GridBlocks = (props) => {
-    const { blocks, twocol, startSeen } = props;
-    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<div className={(0, getBemClass_1.default)('GridBlocks', [twocol && 'twocol'])} ref={ref}>
-      {blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
-            const imageProps = icon ? { src: (0, assets_1.getEfnistaknUrl)(icon) } : image;
-            return (<div key={i} className="GridBlocks__item">
-            {imageProps && <Image_1.default className="GridBlocks__illustration" {...imageProps}/>}
-            <div className="GridBlocks__textwrap">
-              <h3 className="GridBlocks__item__title">
-                {href != null ? (<Link_1.Link className="GridBlocks__item__titlelink" href={href}>
-                    {title}
-                  </Link_1.Link>) : (title)}
-              </h3>
-              <div className="GridBlocks__item__summary">{summary}</div>
-              <ul className="GridBlocks__links">
-                {links.map((link, i) => {
-                    return (<li key={i} className="GridBlocks__link">
-                      <ButtonTertiary_1.default {...link}/>
-                    </li>);
-                })}
-              </ul>
-            </div>
-          </div>);
-        })}
-    </div>);
-};
-exports.default = GridBlocks;

package/InfoBlock.jsx

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const seenEffect_1 = require("./utils/seenEffect");
-const InfoBlock = (props) => {
-    const { title, subtitle, items, startSeen } = props;
-    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<div className="InfoBlock" ref={ref}>
-      <h2 className="InfoBlock__title">{title}</h2>
-      <div className="InfoBlock__subtitle">{subtitle}</div>
-      <ul className="InfoBlock__items">
-        {items.map((item, i) => (<li key={i} className="InfoBlock__item">
-            {item}
-          </li>))}
-      </ul>
-      {'extraInfo' in props && (<div className="InfoBlock__extrainfo">{props.extraInfo}</div>)}
-      {'attention' in props && (<div className="InfoBlock__attention">{props.attention}</div>)}
-    </div>);
-};
-exports.default = InfoBlock;

package/Layout.jsx

@@ -1,69 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultLayoutTexts = void 0;
-const react_1 = __importDefault(require("react"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const assets_1 = require("@reykjavik/hanna-utils/assets");
-const i18n_1 = require("@reykjavik/hanna-utils/i18n");
-const Image_1 = __importDefault(require("./_abstract/Image"));
-const Link_1 = require("./_abstract/Link");
-const useMenuToggling_1 = require("./utils/useMenuToggling");
-const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
-exports.defaultLayoutTexts = {
-    is: {
-        lang: 'is',
-        skipLinkLabel: 'Valmynd',
-        closeMenuLabel: 'Loka',
-        closeMenuLabelLong: 'Loka valmynd',
-    },
-    en: {
-        lang: 'en',
-        skipLinkLabel: 'Skip to navigation',
-        closeMenuLabel: 'Close',
-        closeMenuLabelLong: 'Close menu',
-    },
-};
-const Layout = (props) => {
-    (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
-    const { isMenuActive, closeMenu, toggleMenu } = (0, useMenuToggling_1.useMenuToggling)(ssr !== 'ssr-only');
-    const isBrowser = (0, hooks_1.useIsBrowserSide)( /* ssr */);
-    const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
-    return (<div className={(0, getBemClass_1.default)('Layout', props.modifier)} data-sprinkled={isBrowser} data-color-theme={colorTheme}>
-      {globalAlerts && (<div className="Layout__alerts" role="alert">
-          {globalAlerts}
-        </div>)}
-      <div className="Layout__content">
-        <div className="Layout__header" role="banner">
-          <Link_1.Link className="Layout__header__logo" href={logoLink}>
-            {' '}
-            <Image_1.default inline={true} src={(0, assets_1.getAssetUrl)('reykjavik-logo.svg')}/> {siteName}{' '}
-          </Link_1.Link>{' '}
-          {navChildren && (<Link_1.Link className="Layout__header__skiplink" href="#pagenav" onClick={isMenuActive &&
-                ((e) => {
-                    e.preventDefault();
-                    toggleMenu();
-                })} aria-label={txt.skipLinkLabel}>
-              {txt.skipLinkLabel}
-            </Link_1.Link>)}
-        </div>
-        <div className="Layout__main" role="main">
-          {mainChildren || children}
-        </div>
-        {navChildren && (<div className="Layout__nav" id="pagenav" role="navigation">
-            {navChildren}
-            {isMenuActive && (<button className="Layout__nav__closebutton" onClick={closeMenu} aria-label={txt.closeMenuLabelLong} type="button">
-                {txt.closeMenuLabel}
-              </button>)}
-          </div>)}
-        <div className="Layout__footer" role="complementary">
-          {footerChildren}
-        </div>
-      </div>
-    </div>);
-};
-exports.default = Layout;

package/MainMenu/_PrimaryPanel.jsx

@@ -1,37 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PrimaryPanel = void 0;
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const Link_1 = require("../_abstract/Link");
-const PrimaryPanel = (props) => {
-    const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
-    const { items } = panel;
-    return (<li ref={isActive ? props.activeRef : undefined} className={(0, getBemClass_1.default)('PrimaryPanel', [
-            isParent && 'parent',
-            isActive && 'active',
-            items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
-        ])} id={panel.id}>
-      <h3 className="PrimaryPanel__title">
-        {' '}
-        {isBrowser && !isActive ? (<button className="MainMenu__mega__title-toggler" aria-controls={panel.id} onClick={() => setActivePanel(panel, false)} aria-pressed={isActive} type="button">
-            {panel.title}
-          </button>) : (panel.title)}
-      </h3>
-      <ul className="PrimaryPanel__items">
-        {items.map((item, i) => (<li key={i} className="PrimaryPanel__item" aria-current={item.current || undefined}>
-            <Link_1.Link className="PrimaryPanel__link" href={item.href} target={item.target} lang={item.lang}>
-              <span className="PrimaryPanel__linkTitle">{item.label}</span>{' '}
-              <small className="PrimaryPanel__summary">{item.summary}</small>{' '}
-            </Link_1.Link>
-          </li>))}
-      </ul>
-      {isBrowser && isActive && (<button className="MainMenu__megapanel__backtomenu" aria-controls={panel.id} aria-label={texts.backToMenuLong} onClick={() => setActivePanel(undefined)} type="button">
-          {texts.backToMenu}
-        </button>)}
-    </li>);
-};
-exports.PrimaryPanel = PrimaryPanel;

package/Modal.jsx

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Modal_1 = __importDefault(require("@hugsmidjan/react/Modal"));
-const Modal = (props) => {
-    const { closeDelay = 500, texts = {
-        closeButton: 'Loka ',
-    }, bling, children, render = () => children, } = props;
-    return (<Modal_1.default {...props} bodyWrap={false} bem="Modal" closeDelay={closeDelay} texts={texts} render={(args) => bling ? (<>
-            {render(args)}
-            <div className="Modal__blings">
-              <div className="Modal__blings__inner">{bling}</div>
-            </div>
-          </>) : (render(args))} 
-    // eslint-disable-next-line react/no-children-prop
-    children={undefined}/>);
-};
-exports.default = Modal;

package/ProcessOverview.jsx

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const ProcessOverview = (props) => {
-    const { title, items, attention, transparent, narrow } = props;
-    return (<div className={(0, getBemClass_1.default)('ProcessOverview', [
-            transparent && 'transparent',
-            narrow && 'narrow',
-        ])}>
-      <h2 className="ProcessOverview__title">{title}</h2>
-      {items.map(({ title, content }, i) => {
-            return (<div key={i} className="ProcessOverview__item">
-            <h3 className="ProcessOverview__item__title">{title}</h3>
-            <div className="ProcessOverview__item__content">{content}</div>
-          </div>);
-        })}
-
-      {attention && <div className="ProcessOverview__attention">{attention}</div>}
-    </div>);
-};
-exports.default = ProcessOverview;

package/SearchResults/_SearchResultsItem.jsx

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Image_1 = __importDefault(require("../_abstract/Image"));
-const Link_1 = require("../_abstract/Link");
-const SearchResultsItem = (props) => {
-    const { highlight, title, summary, href, meta, image } = props;
-    const bem = highlight ? 'SearchResultsHighlightItem' : 'SearchResultsItem';
-    const metaArr = (Array.isArray(meta) ? meta : [meta]);
-    return (<li className={bem}>
-      <Link_1.Link className={bem + '__link'} href={href}>
-        <h3 className={bem + '__title'}>{title}</h3>
-        {metaArr.length > 0 && (<span className={bem + '__meta'}>
-            {metaArr.map((item, i) => typeof item === 'function' ? item() : item && <span key={i}>{item}</span>)}
-          </span>)}
-        {highlight && image && <Image_1.default className={bem + '__image'} src={image}/>}
-        <div className={bem + '__summary'} dangerouslySetInnerHTML={{ __html: summary }}/>
-      </Link_1.Link>
-    </li>);
-};
-exports.default = SearchResultsItem;

package/WizardLayout.jsx

@@ -1,44 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
-const assets_1 = require("@reykjavik/hanna-utils/assets");
-const Image_1 = __importDefault(require("./_abstract/Image"));
-const Link_1 = require("./_abstract/Link");
-const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
-const WizardLayout = (props) => {
-    (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
-    const { 
-    // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
-    const isBrowser = (0, hooks_1.useIsBrowserSide)( /* ssr */);
-    return (<div className="WizardLayout" data-sprinkled={isBrowser} data-color-theme={colorTheme}>
-      {globalAlerts && (<div className="WizardLayout__alerts" role="alert">
-          {globalAlerts}
-        </div>)}
-      <div className="WizardLayout__content">
-        <div className="WizardLayout__header" role="banner">
-          <Link_1.Link className="WizardLayout__header__logo" href={logoLink}>
-            {' '}
-            <Image_1.default inline={true} src={(0, assets_1.getAssetUrl)('reykjavik-logo.svg')}/> {siteName}{' '}
-          </Link_1.Link>{' '}
-        </div>
-        <div className="WizardLayout__wrap">
-          {wizardStepper && (<div className="WizardLayout__stepper" role="navigation">
-              {wizardStepper}
-            </div>)}
-          <div className="WizardLayout__main" role="main">
-            {children}
-          </div>
-          <div className="WizardLayout__deco WizardLayout__deco--geometry"/>
-        </div>
-        <div className="WizardLayout__footer" role="complementary">
-          {wizardFooter}
-        </div>
-      </div>
-    </div>);
-};
-exports.default = WizardLayout;

package/WizardStepper.jsx

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const WizardStepper = (props) => {
-    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (<div className={(0, getBemClass_1.default)('WizardStepper', activeStep === -1 && 'preview')}>
-      {steps.map((step, i) => {
-            const { label, clickable, done, neutral } = step;
-            const stepClass = (0, getBemClass_1.default)('WizardStepper__step', [
-                (done || (done == null && i < activeStep)) && 'done',
-                neutral && 'neutral',
-            ]);
-            const isClickable = clickable === 'always' ||
-                (clickable &&
-                    (activeStep === i ||
-                        (i > activeStep && allowForwardSkip) ||
-                        (i < activeStep && !disableBacktrack)));
-            const ariaCurrent = activeStep === i ? 'step' : undefined;
-            return (<react_1.default.Fragment key={i}>
-            {isClickable ? (<button type="button" className={stepClass} onClick={() => onClick(i)} aria-current={ariaCurrent}>
-                {label}
-              </button>) : (<span className={stepClass} aria-current={ariaCurrent}>
-                {' '}
-                {label}{' '}
-              </span>)}{' '}
-          </react_1.default.Fragment>);
-        })}
-    </div>);
-};
-exports.default = WizardStepper;

package/_abstract/CardList.jsx

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardList = void 0;
-const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./Button"));
-const Image_1 = __importDefault(require("./Image"));
-const Card = (props) => {
-    const { bem, href, title, imgPlaceholder } = props;
-    const cardClass = `${bem}__card`;
-    const image = 'image' in props && props.image;
-    const meta = 'meta' in props && props.meta;
-    const summary = 'summary' in props && props.summary;
-    return (<>
-      <Button_1.default bem={cardClass} href={href}>
-        {' '}
-        <Image_1.default className={`${bem}__image`} {...image} placeholder={imgPlaceholder}/>
-        <span className={`${cardClass}__title`}>{title}</span>{' '}
-        {meta && <span className={`${cardClass}__meta`}>{meta}</span>}{' '}
-        {summary && <span className={`${cardClass}__summary`}>{summary}</span>}{' '}
-      </Button_1.default>{' '}
-    </>);
-};
-const CardList = (props) => {
-    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
-    const TitleTag = titleTag;
-    const fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
-    const fallbackImageStyle = fallbackImage
-        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
-        : undefined;
-    return (<>
-      {summaryElement ? (<div className={bemPrefix + '__summary'}>
-          {title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>}
-          {summaryElement}
-        </div>) : (title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>)}
-      <ul className={bemPrefix + '__list'} style={fallbackImageStyle}>
-        {cards.map((card, i) => (<li key={i} className={bemPrefix + '__item'}>
-            <Card {...card} bem={bemPrefix} imgPlaceholder={!!imgPlaceholder}/>
-          </li>))}
-      </ul>
-      {children}
-    </>);
-};
-exports.CardList = CardList;

package/_abstract/TogglerGroup.jsx

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const TogglerGroup = (props) => {
-    const { 
-    // id,
-    className, bem, name, disabled, Toggler, onSelected, options, inputProps = {}, } = props;
-    const values = props.value || [];
-    return (<ul className={(0, getBemClass_1.default)(bem, null, className)} role="group" aria-labelledby={props['aria-labelledby']} aria-describedby={props['aria-describedby']} aria-required={props.required}>
-      {options.map((option, i) => {
-            const isDisabled = option.disabled != null
-                ? option.disabled
-                : disabled && typeof disabled !== 'boolean'
-                    ? disabled.includes(i)
-                    : disabled;
-            const isChecked = values.includes(option.value);
-            return (<Toggler key={i} {...inputProps} className={bem + '__item'} name={name} Wrapper="li" {...option} label={option.label || option.value} onChange={onSelected
-                    ? (e) => {
-                        const { value } = option;
-                        const checked = e.currentTarget.checked;
-                        inputProps.onChange && inputProps.onChange(e);
-                        const selectedValues = values.filter((val) => val !== value);
-                        if (checked) {
-                            selectedValues.push(value);
-                        }
-                        onSelected({ value, checked, option, selectedValues });
-                    }
-                    : inputProps.onChange} disabled={isDisabled} aria-invalid={props['aria-invalid']} checked={isChecked}/>);
-        })}
-    </ul>);
-};
-exports.default = TogglerGroup;

package/_abstract/_Block.jsx

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const seenEffect_1 = require("../utils/seenEffect");
-const Button_1 = __importDefault(require("./Button"));
-const Image_1 = __importDefault(require("./Image"));
-const Block = (props) => {
-    const { image, modifier, bem, content, startSeen } = props;
-    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    const contentItems = Array.isArray(content) ? content : [content];
-    return (<div className={(0, getBemClass_1.default)(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_1.default bem={`${bem}__button`} key={i} {...buttonProps}/>{' '}
-                  </>))}
-              </div>)}
-          </div>);
-        })}
-      {image && <Image_1.default className={`${bem}__image`} {...image}/>}
-    </div>);
-};
-exports.default = Block;

package/esm/AccordionList.jsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { useSeenEffect } from './utils/seenEffect';
-const AccordionListItem = (props) => {
-    const { title, content, id, disabled = false, defaultOpen, ssr } = props;
-    const [open, setOpen] = useState(defaultOpen);
-    useEffect(() => setOpen(defaultOpen), [defaultOpen]);
-    const domid = useDomid();
-    const isBrowser = useIsBrowserSide(ssr);
-    const itemDisabled = (isBrowser && disabled) || !content;
-    return (<div className={getBemClass('AccordionList__item', [itemDisabled && 'disabled'])} id={id} data-start-open={defaultOpen || undefined} data-sprinkled={isBrowser}>
-      <h3 className="AccordionList__title">
-        {isBrowser ? (<button type="button" className="AccordionList__button" aria-controls={domid} aria-expanded={open || undefined} onClick={() => {
-                setOpen(!open);
-            }} disabled={itemDisabled}>
-            {title}
-          </button>) : (title)}
-      </h3>
-      <div id={isBrowser && domid} className="AccordionList__content" hidden={isBrowser && (!open || itemDisabled)}>
-        {content}
-      </div>
-    </div>);
-};
-// ---------------------------------------------------------------------------
-const AccordionList = (props) => {
-    const { items, ssr, wide, defaultOpen, startSeen } = props;
-    const [ref] = useSeenEffect(startSeen);
-    return (<div className={getBemClass('AccordionList', [wide && 'wide'])} ref={ref}>
-      {items.map((item, i) => (<AccordionListItem key={i} {...item} ssr={ssr} defaultOpen={defaultOpen && defaultOpen.includes(i)}/>))}
-    </div>);
-};
-export default AccordionList;

package/esm/ArticleCarousel/_ArticleCarouselCard.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
-import Image from '../_abstract/Image';
-import { Link } from '../_abstract/Link';
-import { colorFamilies, themeOptions } from '../constants';
-export const ArticleCarouselCard = (props) => {
-    const { date, title, summary, href, 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 (<div className="ArticleCarouselCard" data-color={color && colorFamilies[color]} data-color-theme={!color ? theme && themeOptions[theme] : undefined} // color takes precedence over "theme"
-    >
-      <Link className="ArticleCarouselCard__link" href={href}>
-        {' '}
-        <Image placeholder className={getBemClass('ArticleCarouselCard__illustration', photo && 'photo')} {...imageProps}/>
-        <h3 className="ArticleCarouselCard__title">{title}</h3>{' '}
-      </Link>{' '}
-      {date && <span className="ArticleCarouselCard__date">{date}</span>}
-      <div className="ArticleCarouselCard__summary">{summary}</div>
-      {moreLabel && (<Link className="ArticleCarouselCard__morelink" href={href} aria-label={title}>
-          {' '}
-          {moreLabel}{' '}
-        </Link>)}
-    </div>);
-};

package/esm/ArticleMeta.jsx

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

package/esm/Attention.jsx

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

package/esm/BlockBreak.jsx

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

package/esm/BlockQuote.jsx

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

package/esm/BreadCrumbs.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Link } from './_abstract/Link';
-const BreadCrumbs__item = (props) => {
-    const { link, current } = props;
-    return link.href != null ? (<Link className="BreadCrumbs__item" href={link.href} aria-current={current || undefined}>
-      {link.label}
-    </Link>) : (<span className="BreadCrumbs__item" aria-current={current || undefined}>
-      {link.label}
-    </span>);
-};
-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 (<nav className="BreadCrumbs" aria-label={title}>
-      <span className="BreadCrumbs__title">{title}:</span>{' '}
-      {ancestors.map((link, i) => {
-            return (<React.Fragment key={i}>
-            <BreadCrumbs__item link={link}/>{' '}
-            <span className="BreadCrumbs__separator" aria-label="">
-              &gt;
-            </span>{' '}
-          </React.Fragment>);
-        })}
-      <BreadCrumbs__item link={current} current/>
-    </nav>);
-};
-export default BreadCrumbs;

package/esm/ButtonBack.jsx

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

package/esm/ButtonPrimary.jsx

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

package/esm/ButtonSecondary.jsx

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

package/esm/Carousel.jsx

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

package/esm/CarouselStepper.jsx

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

package/esm/CenterColumn.jsx

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

package/esm/Checkbox.jsx

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