@reykjavik/hanna-react 0.10.56 → 0.10.59

package/_abstract/{Image.jsx → _Image.js}

@@ -8,27 +8,25 @@ const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemCla
 const useGetSVGtext_1 = require("../utils/useGetSVGtext");
 // eslint-disable-next-line complexity
 const Image = (props) => {
-    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, } = props;
+    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, focalPoint, } = props;
     const _src = (sources.length && preloadSrc) || src;
     const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
     const imgLoading = preloadSrc ? 'eager' : 'lazy';
     const inlineSvg = (0, useGetSVGtext_1.useGetSVGtext)(inline ? imageSrc : undefined);
     if (!imageSrc) {
-        return placeholder ? (<span className={className && (0, getBemClass_1.default)(className, 'missing')}>
-        {placeholder !== true && placeholder()}
-      </span>) : null;
+        return placeholder ? (react_1.default.createElement("span", { className: className && (0, getBemClass_1.default)(className, 'missing') }, placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return <span className={className} dangerouslySetInnerHTML={{ __html }}/>;
+        return react_1.default.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
     }
-    return (<picture className={className}>
-      {' '}
-      {sources.map((source, i) => (<>
-          <source key={i} srcSet={source.srcset} media={source.media}/>{' '}
-        </>))}{' '}
-      <img src={imageSrc} alt={altText} loading={imgLoading}/>
-      {'  '}
-    </picture>);
+    return (react_1.default.createElement("picture", { className: className, style: focalPoint ? { '--focalPoint': focalPoint } : undefined },
+        ' ',
+        sources.map((source, i) => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),
+            ' '))),
+        ' ',
+        react_1.default.createElement("img", { src: imageSrc, alt: altText, loading: imgLoading }),
+        '  '));
 };
 exports.default = Image;

package/_abstract/_Quote.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._Quote = void 0;
+const react_1 = __importDefault(require("react"));
+const _Link_1 = require("./_Link");
+const _Quote = (props) => {
+    const { bem, children, by, byHref } = props;
+    return (react_1.default.createElement("figure", { className: bem },
+        react_1.default.createElement("blockquote", { className: bem + '__quote' }, children),
+        by && (react_1.default.createElement("figcaption", { className: bem + '__by' }, byHref ? (react_1.default.createElement(_Link_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
+};
+exports._Quote = _Quote;

package/{esm/_abstract/TogglerGroup.d.ts → _abstract/_TogglerGroup.d.ts}

@@ -1,5 +1,5 @@
 import { FormFieldInputProps } from '../FormField';
-import { TogglerInputProps } from './TogglerInput';
+import { TogglerInputProps } from './_TogglerInput';
 export declare type TogglerGroupOption = {
     value: string;
     label?: string | JSX.Element;

package/_abstract/_TogglerGroup.js

@@ -0,0 +1,34 @@
+"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 (react_1.default.createElement("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 (react_1.default.createElement(Toggler, Object.assign({ 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 })));
+    })));
+};
+exports.default = TogglerGroup;

package/_abstract/{TogglerGroupField.d.ts → _TogglerGroupField.d.ts}

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { FormFieldGroupWrappingProps } from '../FormField';
-import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './TogglerGroup';
-import { TogglerInputProps } from './TogglerInput';
+import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup';
+import { TogglerInputProps } from './_TogglerInput';
 export declare type TogglerGroupFieldProps = {
     className?: string;
 } & FormFieldGroupWrappingProps & TogglerGroupProps;

package/_abstract/{TogglerGroupField.jsx → _TogglerGroupField.js}

@@ -17,11 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const FormField_1 = __importDefault(require("../FormField"));
-const TogglerGroup_1 = __importDefault(require("./TogglerGroup"));
+const _TogglerGroup_1 = __importDefault(require("./_TogglerGroup"));
 const TogglerGroupField = (props) => {
     const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value } = props, togglerGroupProps = __rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value"]);
-    return (<FormField_1.default className={(0, getBemClass_1.default)(bem, modifier, className)} group label={label} LabelTag={LabelTag} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps) => {
-            return (<TogglerGroup_1.default bem={className.options} {...inputProps} {...togglerGroupProps} value={Array.isArray(value) ? value : value != null ? [value] : undefined} Toggler={Toggler}/>);
-        }}/>);
+    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
+            return (react_1.default.createElement(_TogglerGroup_1.default, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: Array.isArray(value) ? value : value != null ? [value] : undefined, Toggler: Toggler })));
+        } }));
 };
 exports.default = TogglerGroupField;

package/_abstract/{TogglerInput.jsx → _TogglerInput.js}

@@ -21,20 +21,18 @@ 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 = (0, hooks_1.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={(0, getBemClass_1.default)(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>);
+    const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
+        // TODO: add mo-better i18n thinking
+        title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
+    return (react_1.default.createElement(Wrapper, { className: (0, getBemClass_1.default)(bem, modifier, className) },
+        react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
+        ' ',
+        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' '),
+        errorMessage && (react_1.default.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };
 exports.default = TogglerInput;

package/_abstract/{breakOnNL.jsx → breakOnNL.js}

@@ -9,5 +9,5 @@ const breakOnNL = (text) => text &&
         .trim()
         .replace(/(?:\n\s*)+/g, '\n\n')
         .split(/\n/)
-        .map((bit) => bit || <br />);
+        .map((bit) => bit || react_1.default.createElement("br", null));
 exports.default = breakOnNL;

package/esm/AccordionList.js

@@ -0,0 +1,24 @@
+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 (React.createElement("div", { className: getBemClass('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen || undefined, "data-sprinkled": isBrowser },
+        React.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (React.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: () => {
+                setOpen(!open);
+            }, disabled: itemDisabled }, title)) : (title)),
+        React.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
+};
+// ---------------------------------------------------------------------------
+const AccordionList = (props) => {
+    const { items, ssr, wide, defaultOpen, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+};
+export default AccordionList;

package/esm/ActionCards.d.ts

@@ -1,4 +1,4 @@
-import { TextCardListProps } from './_abstract/CardList';
+import { TextCardListProps } from './_abstract/_CardList';
 import { SeenProp } from './utils/seenEffect';
 export declare type ActionCardsProps = TextCardListProps & SeenProp;
 declare const ActionCards: (props: ActionCardsProps) => JSX.Element;

package/esm/ActionCards.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CardList } from './_abstract/_CardList';
+import { useSeenEffect } from './utils/seenEffect';
+const ActionCards = (props) => {
+    const [ref] = useSeenEffect(props.startSeen);
+    return (React.createElement("div", { className: "ActionCards", ref: ref },
+        React.createElement(CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
+};
+export default ActionCards;

package/esm/{Alert.jsx → Alert.js}

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState, } from 'react';
 import { useIsBrowserSide, useOnMount } from '@hugsmidjan/react/hooks';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
-import Button from './_abstract/Button';
+import Button from './_abstract/_Button';
 import { isPreact } from './utils/env';
 // FIXME: Eventually import from @reykjavik/hanna-styles/constants
 const AlertCloseTransitionDuration = 400;
@@ -79,16 +79,14 @@ const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (<div className={getBemClass('Alert', [
+    return (React.createElement("div", Object.assign({ className: getBemClass('Alert', [
             !!alertTypes[type] && type,
             closable && 'closable',
-        ])} role="alert" hidden={!open || undefined} {...autoClosingProps}>
-      {childrenHTML ? (<div dangerouslySetInnerHTML={{ __html: childrenHTML }}/>) : (children)}{' '}
-      {showCloseButton && (<Button bem="Alert__close" {...(closeUrl != null ? { href: closeUrl } : { type: 'button' })} onClick={(e) => {
+        ]), role: "alert", hidden: !open || undefined }, autoClosingProps),
+        childrenHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
+        ' ',
+        showCloseButton && (React.createElement(Button, Object.assign({ bem: "Alert__close" }, (closeUrl != null ? { href: closeUrl } : { type: 'button' }), { onClick: (e) => {
                 closeAlert(e);
-            }} aria-label={closeLabelLong} title={closeLabelLong || closeLabel}>
-          {closeLabel}
-        </Button>)}
-    </div>);
+            }, "aria-label": closeLabelLong, title: closeLabelLong || closeLabel }), closeLabel))));
 };
 export default Alert;

package/esm/ArticleCards.d.ts

@@ -0,0 +1,6 @@
+import type { Resolve } from '@reykjavik/hanna-utils';
+import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList';
+export declare type ArticleCardProps = ImageCardProps;
+export declare type ArticleCardsProps = Resolve<Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>>;
+declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
+export default ArticleCards;

package/esm/ArticleCards.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CardList } from './_abstract/_CardList';
+const ArticleCards = (props) => (React.createElement(CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
+export default ArticleCards;

package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts

@@ -1,6 +1,6 @@
 import { HannaColorTheme } from '@reykjavik/hanna-css';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
-import { ImageProps } from '../_abstract/Image';
+import { ImageProps } from '../_abstract/_Image';
 import { ColorFamily } from '../constants';
 export declare type ArticleCarouselImageProps = ImageProps & {
     photo?: boolean;

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';
+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 (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 },
+            ' ',
+            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, "aria-label": title },
+            ' ',
+            moreLabel,
+            ' '))));
+};

package/esm/{ArticleCarousel.jsx → ArticleCarousel.js}

@@ -3,6 +3,6 @@ import AbstractCarousel from './_abstract/_AbstractCarousel';
 import { ArticleCarouselCard, } from './ArticleCarousel/_ArticleCarouselCard';
 const ArticleCarousel = (props) => {
     const { title, items, moreLabel, ssr, startSeen } = props;
-    return (<AbstractCarousel bem="ArticleCarousel" title={title} items={items} Component={ArticleCarouselCard} ComponentProps={{ moreLabel }} ssr={ssr} startSeen={startSeen}/>);
+    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

@@ -4,6 +4,7 @@ export declare type ArticleMetaItem = {
 };
 export declare type ArticleMetaProps = {
     items: Array<ArticleMetaItem>;
+    small?: boolean;
 };
 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';
+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.js

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

package/esm/{BasicTable.jsx → BasicTable.js}

@@ -10,21 +10,20 @@ const BasicTable = (props) => {
         : { tbody: props.tbody || [] };
     const modifier = props.modifier;
     const [ref] = useSeenEffect(startSeen);
-    return (<TableWrapper modifier={[
+    return (React.createElement(TableWrapper, { modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
             fullWidth && 'BasicTable--fullwidth',
             align === 'right' && !fullWidth && 'BasicTable--align--' + align,
-        ]} wrapperRef={ref}>
-      <Table className={getBemClass('BasicTable', [
-            props.compact && 'compact',
-            modifier && modifier,
-        ])} {...{
-        cols,
-        caption,
-        thead,
-        tfoot,
-    }} {...tbodyProps}/>
-    </TableWrapper>);
+        ], 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';
+export declare type BgBoxProps = {
+    className?: string;
+    children: ReactNode;
+} & SeenProp & EffectProp;
+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';
+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.jsx → Bling.js}

@@ -33,12 +33,12 @@ const Bling = (props) => {
     const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
     const imageUrl = type ? getBlingUrl(type) : blingUrl;
     const inlineSvg = useGetSVGtext(imageUrl);
-    return (<div className={getBemClass('Bling', [
+    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 }}/>);
+        ], className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } }));
 };
 export default Bling;

package/esm/BlockBreak.js

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

package/esm/BlockQuote.js

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

package/esm/BreadCrumbs.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from './_abstract/_Link';
+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));
+};
+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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 export declare type ButtonBackProps = ButtonProps;
 declare const ButtonBack: (props: ButtonBackProps & {
     children?: ReactNode;

package/esm/ButtonBack.js

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

package/esm/{ButtonBar.jsx → ButtonBar.js}

@@ -2,11 +2,9 @@ import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 export const ButtonBar = (props) => {
     const { align, children } = props;
-    return (<div className={getBemClass('ButtonBar', align === 'right' && 'align--right')}>
-      {children}
-    </div>);
+    return (React.createElement("div", { className: getBemClass('ButtonBar', align === 'right' && 'align--right') }, children));
 };
-ButtonBar.Split = () => <span className="ButtonBar__split"/>;
+ButtonBar.Split = () => React.createElement("span", { className: "ButtonBar__split" });
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *

package/esm/ButtonPrimary.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, ButtonVariantProps } from './_abstract/Button';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button';
 export declare type ButtonPrimaryProps = ButtonProps & ButtonVariantProps;
 declare const ButtonPrimary: (props: ButtonPrimaryProps & {
     children?: ReactNode;

package/esm/ButtonPrimary.js

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

package/esm/ButtonSecondary.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, ButtonVariantProps } from './_abstract/Button';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button';
 export declare type ButtonSecondaryProps = ButtonProps & ButtonVariantProps;
 declare const ButtonSecondary: (props: ButtonSecondaryProps & {
     children?: ReactNode;

package/esm/ButtonSecondary.js

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

package/esm/ButtonTertiary.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps, ButtonVariantProps } from './_abstract/Button';
+import { ButtonProps, ButtonVariantProps } from './_abstract/_Button';
 declare type TertiarySize = Extract<ButtonVariantProps['size'], 'normal' | 'small'>;
 declare type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'none' | 'go-back'>;
 export declare type ButtonTertiaryProps = ButtonProps & Omit<ButtonVariantProps, 'icon' | 'size'> & {

package/esm/{ButtonTertiary.jsx → ButtonTertiary.js}

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

package/esm/Carousel.js

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

package/esm/CarouselStepper.js

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

package/esm/CenterColumn.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import SeenEffect from './SeenEffect';
+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

@@ -1,4 +1,4 @@
-import { TogglerInputProps } from './_abstract/TogglerInput';
+import { TogglerInputProps } from './_abstract/_TogglerInput';
 export declare type CheckboxProps = TogglerInputProps;
 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';
+const Checkbox = (props) => (React.createElement(TogglerInput, Object.assign({ bem: "Checkbox" }, props, { type: "checkbox" })));
+export default Checkbox;

package/esm/CheckboxButtonsGroup.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type CheckboxButtonsGroupProps = TogglerGroupFieldProps & {
     value?: Array<string>;
     /** @deprecated (Will be removed in v0.9) */