@ilo-org/react 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @ilo-org/react
 
+## 0.12.0
+
+### Minor Changes
+
+- 5bb16757b: Sync cards with twig
+
+### Patch Changes
+
+- Updated dependencies [94c28eae7]
+  - @ilo-org/styles@0.14.2
+
 ## 0.11.0
 
 ### Minor Changes

package/lib/cjs/components/Cards/Card.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var components_Cards_FeatureCard_index = require('./FeatureCard/index.js');
+var components_Cards_DataCard_index = require('./DataCard/index.js');
+var components_Cards_DetailCard_index = require('./DetailCard/index.js');
+var components_Cards_FactlistCard_index = require('./FactlistCard/index.js');
+var components_Cards_MultilinkCard_index = require('./MultilinkCard/index.js');
+var components_Cards_PromoCard_index = require('./PromoCard/index.js');
+var components_Cards_StatCard_index = require('./StatCard/index.js');
+var components_Cards_TextCard_index = require('./TextCard/index.js');
+require('classnames');
+require('tslib');
+require('react');
+require('../../GlobalCtx-10114bdd.js');
+require('../../hooks/useGlobalSettings.js');
+require('../LinkList/LinkList.js');
+require('../Link/Link.js');
+require('../List/List.js');
+require('../../ListCtx-14aa546f.js');
+require('../List/ListItem.js');
+require('../Profile/Profile.js');
+
+const Card = (props) => {
+    const componentMap = {
+        data: components_Cards_DataCard_index,
+        detail: components_Cards_DetailCard_index,
+        factlist: components_Cards_FactlistCard_index,
+        featurecard: components_Cards_FeatureCard_index,
+        multilink: components_Cards_MultilinkCard_index,
+        promo: components_Cards_PromoCard_index,
+        stat: components_Cards_StatCard_index,
+        text: components_Cards_TextCard_index,
+    };
+    const { type } = props;
+    const SelectedCardComponent = componentMap[type] || components_Cards_FeatureCard_index;
+    return jsxRuntime.jsx(SelectedCardComponent, Object.assign({}, props));
+};
+
+module.exports = Card;

package/lib/cjs/components/Cards/CardGroup.js

@@ -0,0 +1,33 @@
+'use strict';
+
+require('./FeatureCard/index.js');
+require('./DataCard/index.js');
+require('./DetailCard/index.js');
+require('./FactlistCard/index.js');
+require('./MultilinkCard/index.js');
+require('./PromoCard/index.js');
+require('./StatCard/index.js');
+require('./TextCard/index.js');
+var components_Cards_Card = require('./Card.js');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../ListCtx-14aa546f.js');
+require('../LinkList/LinkList.js');
+require('../../GlobalCtx-10114bdd.js');
+require('../Link/Link.js');
+require('../List/List.js');
+require('../List/ListItem.js');
+require('../Profile/Profile.js');
+
+const CardGroup = ({ cards, cardcount, cta }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--cardgroup`;
+    const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
+                    cards.map((card) => (jsxRuntime.jsx(components_Cards_Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, type: card.type, size: card.size }))) })), cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
+};
+
+module.exports = CardGroup;

package/lib/cjs/components/Cards/DataCard/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Link_Link = require('../../Link/Link.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__type__data__columns__${columns}`]: columns,
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: eyebrow }) }) }))), dataset &&
+                            dataset.content &&
+                            dataset.content.items &&
+                            dataset.content.items.map((item) => (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                    dataset.files.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
+                                        dataset.cta.items.map((item) => (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                    dataset.links.items.map((item) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Link_Link, Object.assign({ url: item.url }, { children: item.label })), jsxRuntime.jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] })) })));
+};
+
+module.exports = DataCard;

package/lib/cjs/components/Cards/DetailCard/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
+};
+
+module.exports = DetailCard;

package/lib/cjs/components/Cards/FactlistCard/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_List_List = require('../../List/List.js');
+var components_List_ListItem = require('../../List/ListItem.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+require('../../../ListCtx-14aa546f.js');
+
+const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsxRuntime.jsx(components_List_List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsxRuntime.jsx(components_List_ListItem, Object.assign({ id: `list${index}` }, { children: jsxRuntime.jsx("p", { children: item }) })))) })))] })) })) })));
+};
+
+module.exports = FactlistCard;

package/lib/cjs/components/Cards/FeatureCard/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_LinkList_LinkList = require('../../LinkList/LinkList.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+module.exports = FeatureCard;

package/lib/cjs/components/Cards/MultilinkCard/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_LinkList_LinkList = require('../../LinkList/LinkList.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const MultilinkCard = ({ isvideo, eyebrow, title, size = "narrow", alignment, intro, link, linklist, image, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__multilink`, {
+        [`${baseClass}__align__${alignment}`]: alignment,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), image && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsxRuntime.jsx("picture", { children: jsxRuntime.jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), linklist && (jsxRuntime.jsx(components_LinkList_LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+module.exports = MultilinkCard;

package/lib/cjs/components/Cards/PromoCard/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const PromoCard = ({ eyebrow, title, theme, size = "narrow", cornercut, intro, link, cta, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`, `${baseClass}--wrapper__type__promo ${baseClass}--wrapper__type__promo__size__${size}`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__promo`, {
+        [`${baseClass}__cornercut`]: cornercut,
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), cta && cta.label && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--primary`, href: cta.url }, { children: jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: cta.label })) })))] })) }))] })) })));
+};
+
+module.exports = PromoCard;

package/lib/cjs/components/Cards/StatCard/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Link_Link = require('../../Link/Link.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const StatCard = ({ title, color, size = "standard", intro, source, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__stat`, {
+        [`${baseClass}__color__${color}`]: color,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: cardClasses }, { children: jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), source && jsxRuntime.jsx(components_Link_Link, Object.assign({ url: source.url }, { children: source.label }))] })) })) })));
+};
+
+module.exports = StatCard;

package/lib/cjs/components/Cards/TextCard/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../../hooks/useGlobalSettings.js');
+var components_Profile_Profile = require('../../Profile/Profile.js');
+require('tslib');
+require('react');
+require('../../../GlobalCtx-10114bdd.js');
+
+const TextCard = ({ eyebrow, title, theme, size, date, profile, link, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const wrapperClass = classNames(`${baseClass}--wrapper`);
+    const cardClasses = classNames(baseClass, `${baseClass}__type__text`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    console.log("heloo");
+    console.log(profile);
+    return (jsxRuntime.jsx("div", Object.assign({ className: wrapperClass }, { children: jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), profile && profile.avatar && (jsxRuntime.jsx(components_Profile_Profile, { avatar: profile.avatar, description: profile.description, link: profile.link, name: profile.name, role: profile.role, className: `${prefix}--profile--contents--${theme}` }))] })) }))] })) })));
+};
+
+module.exports = TextCard;

package/lib/cjs/components/Cards/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var components_Cards_FeatureCard_index = require('./FeatureCard/index.js');
+var components_Cards_DataCard_index = require('./DataCard/index.js');
+var components_Cards_DetailCard_index = require('./DetailCard/index.js');
+var components_Cards_FactlistCard_index = require('./FactlistCard/index.js');
+var components_Cards_MultilinkCard_index = require('./MultilinkCard/index.js');
+var components_Cards_PromoCard_index = require('./PromoCard/index.js');
+var components_Cards_StatCard_index = require('./StatCard/index.js');
+var components_Cards_TextCard_index = require('./TextCard/index.js');
+var components_Cards_Card = require('./Card.js');
+var components_Cards_CardGroup = require('./CardGroup.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-10114bdd.js');
+require('../LinkList/LinkList.js');
+require('../Link/Link.js');
+require('../List/List.js');
+require('../../ListCtx-14aa546f.js');
+require('../List/ListItem.js');
+require('../Profile/Profile.js');
+
+
+
+exports.FeatureCard = components_Cards_FeatureCard_index;
+exports.DataCard = components_Cards_DataCard_index;
+exports.DetailCard = components_Cards_DetailCard_index;
+exports.FactlistCard = components_Cards_FactlistCard_index;
+exports.MultilinkCard = components_Cards_MultilinkCard_index;
+exports.PromoCard = components_Cards_PromoCard_index;
+exports.StatCard = components_Cards_StatCard_index;
+exports.TextCard = components_Cards_TextCard_index;
+exports.Card = components_Cards_Card;
+exports.CardGroup = components_Cards_CardGroup;

package/lib/cjs/components/LinkList/LinkList.js

@@ -14,7 +14,7 @@ const LinkList = ({ className, headline, linkgroup, theme, }) => {
         [baseClass]: true,
         [`${baseClass + "--" + (theme && theme === "dark" ? theme : "light")}`]: true,
     });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: linkListClasses }, { children: [jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
+    return (jsxRuntime.jsxs("div", Object.assign({ className: linkListClasses }, { children: [headline && jsxRuntime.jsx("h3", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--linkgroups` }, { children: linkgroup &&
                     linkgroup.map((linkset, i) => (jsxRuntime.jsxs("li", Object.assign({ className: `${baseClass}--linkgroups-item` }, { children: [linkset.headline && (jsxRuntime.jsx("h4", Object.assign({ className: `${baseClass}--links--headline` }, { children: linkset.headline }))), jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--links` }, { children: linkset.links &&
                                     linkset.links.map((link, i) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--links--item${link.indented ? " indented" : ""}` }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, className: `${baseClass}--link` }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--label` }, { children: link.label })) })) }), `${baseClass}--links--item-${i}`))) }))] }), `${baseClass}--linkgroups-item-${i}`))) }))] })));
 };

package/lib/cjs/components/index.js

@@ -52,8 +52,8 @@ var components_TableOfContents_TableOfContents = require('./TableOfContents/Tabl
 var components_Footer_Footer = require('./Footer/Footer.js');
 var components_LocalNav_LocalNav = require('./LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./Navigation/Navigation.js');
-var components_Card_Card = require('./Card/Card.js');
-var components_Card_CardGroup = require('./Card/CardGroup.js');
+var components_Cards_Card = require('./Cards/Card.js');
+var components_Cards_CardGroup = require('./Cards/CardGroup.js');
 var components_Breadcrumb_Breadcrumb = require('./Breadcrumb/Breadcrumb.js');
 var components_Tabs_Tabs = require('./Tabs/Tabs.js');
 require('../hooks/useGlobalSettings.js');
@@ -79,7 +79,15 @@ require('videojs-youtube');
 require('video.js');
 require('@ilo-org/icons-react');
 require('./Logo/Logo.js');
+require('./Cards/FeatureCard/index.js');
+require('./Cards/DataCard/index.js');
+require('./Cards/DetailCard/index.js');
+require('./Cards/FactlistCard/index.js');
 require('./List/ListItem.js');
+require('./Cards/MultilinkCard/index.js');
+require('./Cards/PromoCard/index.js');
+require('./Cards/StatCard/index.js');
+require('./Cards/TextCard/index.js');
 
 
 
@@ -124,7 +132,7 @@ exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
-exports.Card = components_Card_Card;
-exports.CardGroup = components_Card_CardGroup;
+exports.Card = components_Cards_Card;
+exports.CardGroup = components_Cards_CardGroup;
 exports.Breadcrumb = components_Breadcrumb_Breadcrumb;
 exports.Tabs = components_Tabs_Tabs;

package/lib/cjs/index.js

@@ -52,8 +52,8 @@ var components_TableOfContents_TableOfContents = require('./components/TableOfCo
 var components_Footer_Footer = require('./components/Footer/Footer.js');
 var components_LocalNav_LocalNav = require('./components/LocalNav/LocalNav.js');
 var components_Navigation_Navigation = require('./components/Navigation/Navigation.js');
-var components_Card_Card = require('./components/Card/Card.js');
-var components_Card_CardGroup = require('./components/Card/CardGroup.js');
+var components_Cards_Card = require('./components/Cards/Card.js');
+var components_Cards_CardGroup = require('./components/Cards/CardGroup.js');
 var components_Breadcrumb_Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var components_Tabs_Tabs = require('./components/Tabs/Tabs.js');
 require('./hooks/useGlobalSettings.js');
@@ -79,7 +79,15 @@ require('./components/Video/VideoPlayer.js');
 require('videojs-youtube');
 require('video.js');
 require('./components/Logo/Logo.js');
+require('./components/Cards/FeatureCard/index.js');
+require('./components/Cards/DataCard/index.js');
+require('./components/Cards/DetailCard/index.js');
+require('./components/Cards/FactlistCard/index.js');
 require('./components/List/ListItem.js');
+require('./components/Cards/MultilinkCard/index.js');
+require('./components/Cards/PromoCard/index.js');
+require('./components/Cards/StatCard/index.js');
+require('./components/Cards/TextCard/index.js');
 
 
 
@@ -124,7 +132,7 @@ exports.TableOfContents = components_TableOfContents_TableOfContents;
 exports.Footer = components_Footer_Footer;
 exports.LocalNav = components_LocalNav_LocalNav;
 exports.Navigation = components_Navigation_Navigation;
-exports.Card = components_Card_Card;
-exports.CardGroup = components_Card_CardGroup;
+exports.Card = components_Cards_Card;
+exports.CardGroup = components_Cards_CardGroup;
 exports.Breadcrumb = components_Breadcrumb_Breadcrumb;
 exports.Tabs = components_Tabs_Tabs;

package/lib/esm/components/Cards/Card.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import FeatureCard from './FeatureCard/index.js';
+import DataCard from './DataCard/index.js';
+import DetailCard from './DetailCard/index.js';
+import FactlistCard from './FactlistCard/index.js';
+import MultilinkCard from './MultilinkCard/index.js';
+import PromoCard from './PromoCard/index.js';
+import StatCard from './StatCard/index.js';
+import TextCard from './TextCard/index.js';
+import 'classnames';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../../hooks/useGlobalSettings.js';
+import '../LinkList/LinkList.js';
+import '../Link/Link.js';
+import '../List/List.js';
+import '../../ListCtx-da435fdf.js';
+import '../List/ListItem.js';
+import '../Profile/Profile.js';
+
+const Card = (props) => {
+    const componentMap = {
+        data: DataCard,
+        detail: DetailCard,
+        factlist: FactlistCard,
+        featurecard: FeatureCard,
+        multilink: MultilinkCard,
+        promo: PromoCard,
+        stat: StatCard,
+        text: TextCard,
+    };
+    const { type } = props;
+    const SelectedCardComponent = componentMap[type] || FeatureCard;
+    return jsx(SelectedCardComponent, Object.assign({}, props));
+};
+
+export { Card as default };

package/lib/esm/components/{Card → Cards}/CardGroup.js

@@ -1,23 +1,31 @@
+import './FeatureCard/index.js';
+import './DataCard/index.js';
+import './DetailCard/index.js';
+import './FactlistCard/index.js';
+import './MultilinkCard/index.js';
+import './PromoCard/index.js';
+import './StatCard/index.js';
+import './TextCard/index.js';
 import Card from './Card.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import '../Link/Link.js';
 import 'tslib';
-import '../List/List.js';
 import 'react';
 import '../../ListCtx-da435fdf.js';
+import '../LinkList/LinkList.js';
 import '../../GlobalCtx-7fb23cfa.js';
+import '../Link/Link.js';
+import '../List/List.js';
 import '../List/ListItem.js';
-import '../LinkList/LinkList.js';
 import '../Profile/Profile.js';
 
 const CardGroup = ({ cards, cardcount, cta }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--cardgroup`;
     const cardGroupClasses = classNames(baseClass, `${baseClass}--${cardcount}`);
-    return (jsx("div", Object.assign({ className: cardGroupClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--inner` }, { children: [cards &&
-                    cards.map((card) => (jsx(Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, variant: card.variant, size: card.size }))), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })) })));
+    return (jsxs("div", Object.assign({ className: cardGroupClasses }, { children: [jsx("div", Object.assign({ className: `${baseClass}--inner` }, { children: cards &&
+                    cards.map((card) => (jsx(Card, { title: card.title, image: card.image, intro: card.intro, eyebrow: card.eyebrow, date: card.date, dataset: card.dataset, link: card.link, profile: card.profile, cta: card.cta, source: card.source, listitems: card.listitems, linklist: card.linklist, color: card.color, theme: card.theme, cornercut: card.cornercut, alignment: card.alignment, type: card.type, size: card.size }))) })), cta && (jsx("div", Object.assign({ className: `${baseClass}--button-wrap` }, { children: jsx("a", Object.assign({ className: `${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: cta.url }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: cta.label })) })) })))] })));
 };
 
 export { CardGroup as default };

package/lib/esm/components/Cards/DataCard/index.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import Link from '../../Link/Link.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const DataCard = ({ eyebrow, size = "narrow", image, dataset, columns = "one", }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__data`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__type__data__columns__${columns}`]: columns,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: eyebrow }) }) }))), dataset &&
+                            dataset.content &&
+                            dataset.content.items &&
+                            dataset.content.items.map((item) => (jsxs("div", Object.assign({ className: `${baseClass}--area--content` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: item.label })), jsx("p", Object.assign({ className: `${baseClass}__type__data--content-copy` }, { children: item.copy }))] })))), dataset && dataset.files && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-files` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.files.headline })), dataset.files.items &&
+                                    dataset.files.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--data--file ${prefix}--button ${prefix}--button--primary ${prefix}--button--small`, href: item.url, download: true }, { children: jsx("span", Object.assign({ className: "button__label" }, { children: item.label })) }))))] }))), dataset && dataset.cta && (jsx("div", Object.assign({ className: `${baseClass}--area--cta` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--data--content-cta` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.cta.headline })), dataset.cta.items &&
+                                        dataset.cta.items.map((item) => (jsx("a", Object.assign({ className: `${baseClass}--cta ${prefix}--button ${prefix}--button--medium ${prefix}--button--secondary`, href: item.url }, { children: jsx("span", Object.assign({ className: "link__label" }, { children: item.label })) }))))] })) }))), dataset && dataset.links && (jsxs("div", Object.assign({ className: `${baseClass}--data--content-links` }, { children: [jsx("p", Object.assign({ className: `${baseClass}__type__data--content-label` }, { children: dataset.links.headline })), dataset.links.items &&
+                                    dataset.links.items.map((item) => (jsxs(Fragment, { children: [jsx(Link, Object.assign({ url: item.url }, { children: item.label })), jsx("span", { children: "\u00A0\u00A0" })] })))] })))] }))] })) })));
+};
+
+export { DataCard as default };

package/lib/esm/components/Cards/DetailCard/index.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const DetailCard = ({ eyebrow, title, size = "narrow", intro, date, eventdetails, link, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__detail`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+    });
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), eventdetails && (jsx("p", Object.assign({ className: `${baseClass}--date-extra` }, { children: eventdetails })))] }))] }))] })));
+};
+
+export { DetailCard as default };

package/lib/esm/components/Cards/FactlistCard/index.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import List from '../../List/List.js';
+import ListItem from '../../List/ListItem.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+import '../../../ListCtx-da435fdf.js';
+
+const FactlistCard = ({ title, theme = "narrow", size, list, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__factlist`, {
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsx("div", Object.assign({ className: cardClasses }, { children: jsx("div", Object.assign({ className: `${baseClass}--wrap` }, { children: jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), list && (jsx(List, Object.assign({ alignment: "default", ordered: "unordered" }, { children: list.map((item, index) => (jsx(ListItem, Object.assign({ id: `list${index}` }, { children: jsx("p", { children: item }) })))) })))] })) })) })));
+};
+
+export { FactlistCard as default };

package/lib/esm/components/Cards/FeatureCard/index.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../../hooks/useGlobalSettings.js';
+import LinkList from '../../LinkList/LinkList.js';
+import 'tslib';
+import 'react';
+import '../../../GlobalCtx-7fb23cfa.js';
+
+const FeatureCard = ({ isvideo, eyebrow, title, theme, size = "narrow", date, link, linklist, image, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--card`;
+    const cardClasses = classNames(baseClass, `${baseClass}__type__feature`, {
+        [`${baseClass}__action`]: link,
+        [`${baseClass}__size__${size}`]: size,
+        [`${baseClass}__isvideo`]: isvideo,
+        [`${baseClass}__linklist`]: linklist,
+        [`${baseClass}__theme__${theme}`]: theme,
+    });
+    return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--picture`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), date && (jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: date.unix }, { children: date.human }))), linklist && (jsx(LinkList, { headline: linklist.headline, linkgroup: linklist.linkgroup }))] }))] }))] })));
+};
+
+export { FeatureCard as default };