@ilo-org/react 0.10.6 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @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
+
+- d44ee1021: Normalized video implementation for react
+- 8491bba96: Create tabs component in react
+
+### Patch Changes
+
+- Updated dependencies [d44ee1021]
+- Updated dependencies [be59e9c1f]
+  - @ilo-org/styles@0.14.1
+  - @ilo-org/themes@0.7.2
+
 ## 0.10.6
 
 ### Patch Changes

package/lib/cjs/AccordionCtx-be704051.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+const AccordionContext = React.createContext({});
+const AccordionItemContext = React.createContext({});
+
+exports.AccordionContext = AccordionContext;
+exports.AccordionItemContext = AccordionItemContext;

package/lib/cjs/{GlobalCtx-97e4b433.js → GlobalCtx-10114bdd.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var require$$0 = require('react');
+var React = require('react');
 
-const GlobalProviderContext = require$$0.createContext({
+const GlobalProviderContext = React.createContext({
     prefix: "ilo",
 });
 

package/lib/cjs/ListCtx-14aa546f.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var React = require('react');
+
+const ListContext = React.createContext({});
+const ListItemContext = React.createContext({});
+
+exports.ListContext = ListContext;
+exports.ListItemContext = ListItemContext;

package/lib/cjs/TagCtx-690a1d54.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var React = require('react');
+
+const TagSetContext = React.createContext({});
+
+exports.TagSetContext = TagSetContext;

package/lib/cjs/components/Accordion/Accordion.js

@@ -3,22 +3,22 @@
 var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@ilo-org/utils');
 var classNames = require('classnames');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var utils_checkArrayDuplicates = require('../../utils/checkArrayDuplicates.js');
-var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
+var AccordionCtx = require('../../AccordionCtx-be704051.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const Accordion = ({ children, allowMultipleExpanded = false, onButtonClick, defaultAccordionsExpanded = [], className, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--accordion`;
-    const [activeItems, setActiveItems] = require$$0.useState([]);
+    const [activeItems, setActiveItems] = React.useState([]);
     const accordionClasses = classNames(className, {
         [baseClass]: true,
     });
     const defaultAccordionsExpandedString = JSON.stringify(defaultAccordionsExpanded);
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         const expandedOnLoad = allowMultipleExpanded
             ? defaultAccordionsExpanded
             : defaultAccordionsExpanded.length > 0
@@ -28,7 +28,7 @@ const Accordion = ({ children, allowMultipleExpanded = false, onButtonClick, def
     }, [defaultAccordionsExpandedString, allowMultipleExpanded]); //eslint-disable-line react-hooks/exhaustive-deps
     if (children) {
         const ids = [];
-        require$$0.Children.forEach(children, (child) => {
+        React.Children.forEach(children, (child) => {
             ids.push(child.props.id);
         });
         if (utils_checkArrayDuplicates.checkArrayDuplicates(ids)) {

package/lib/cjs/components/Accordion/AccordionButton.js

@@ -3,17 +3,17 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
-require('../../GlobalCtx-97e4b433.js');
+var AccordionCtx = require('../../AccordionCtx-be704051.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const AccordionButton = (_a) => {
     var { children, className } = _a, rest = tslib.__rest(_a, ["children", "className"]);
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--accordion--button`;
-    const { activeItems, setActiveItems, getUpdatedItems, allowMultipleExpanded, onButtonClick, } = require$$0.useContext(AccordionCtx.AccordionContext);
-    const { id } = require$$0.useContext(AccordionCtx.AccordionItemContext);
+    const { activeItems, setActiveItems, getUpdatedItems, allowMultipleExpanded, onButtonClick, } = React.useContext(AccordionCtx.AccordionContext);
+    const { id } = React.useContext(AccordionCtx.AccordionItemContext);
     const open = activeItems.indexOf(id) > -1;
     const accordionButtonClasses = classNames(className, {
         [baseClass]: true,

package/lib/cjs/components/Accordion/AccordionItem.js

@@ -4,9 +4,9 @@ var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
+var AccordionCtx = require('../../AccordionCtx-be704051.js');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const AccordionItem = (_a) => {
     var { children, id, className } = _a, rest = tslib.__rest(_a, ["children", "id", "className"]);

package/lib/cjs/components/Accordion/AccordionPanel.js

@@ -3,16 +3,16 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var AccordionCtx = require('../../AccordionCtx-fe08ff45.js');
-require('../../GlobalCtx-97e4b433.js');
+var AccordionCtx = require('../../AccordionCtx-be704051.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const AccordionPanel = (_a) => {
     var { children, className, scroll } = _a, rest = tslib.__rest(_a, ["children", "className", "scroll"]);
-    const { activeItems } = require$$0.useContext(AccordionCtx.AccordionContext);
-    const { id } = require$$0.useContext(AccordionCtx.AccordionItemContext);
-    const [panelHeight, setPanelHeight] = require$$0.useState(0);
+    const { activeItems } = React.useContext(AccordionCtx.AccordionContext);
+    const { id } = React.useContext(AccordionCtx.AccordionItemContext);
+    const [panelHeight, setPanelHeight] = React.useState(0);
     const open = activeItems.indexOf(id) > -1;
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--accordion--panel`;
@@ -20,8 +20,8 @@ const AccordionPanel = (_a) => {
         [`${baseClass}__scroll`]: scroll,
         [`${baseClass}--open`]: open,
     });
-    const ref = require$$0.useRef();
-    require$$0.useLayoutEffect(() => {
+    const ref = React.useRef();
+    React.useLayoutEffect(() => {
         ref.current && setPanelHeight(ref.current.scrollHeight);
     });
     return (jsxRuntime.jsx("div", Object.assign({ className: accordionaPanelClasses, id: `panel-${id}`, "aria-labelledby": `button-${id}`, role: "region", ref: ref, style: { ["--height"]: `${panelHeight}px` } }, rest, { children: jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--accordion--innerpanel` }, { children: children })) })));

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

@@ -9,8 +9,8 @@ require('react/jsx-runtime');
 require('classnames');
 require('react');
 require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-97e4b433.js');
-require('../../AccordionCtx-fe08ff45.js');
+require('../../GlobalCtx-10114bdd.js');
+require('../../AccordionCtx-be704051.js');
 require('@ilo-org/utils');
 require('../../utils/checkArrayDuplicates.js');
 

package/lib/cjs/components/Breadcrumb/Breadcrumb.js

@@ -1,21 +1,21 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var classNames = require('classnames');
 var components_ContextMenu_ContextMenu = require('../ContextMenu/ContextMenu.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 
 const Breadcrumb = ({ home, links }) => {
     const { prefix } = hooks_useGlobalSettings();
-    const [showContextMenu, enableContextMenu] = require$$0.useState(false);
-    const [toggleMenuOpen, setContextMenuToggleOpen] = require$$0.useState(false);
+    const [showContextMenu, enableContextMenu] = React.useState(false);
+    const [toggleMenuOpen, setContextMenuToggleOpen] = React.useState(false);
     const handleScreenResize = () => {
         enableContextMenu(window.innerWidth <= 1024); // turn on context menu when screen is resized to a smaller size
     };
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         window.addEventListener("resize", handleScreenResize);
         handleScreenResize();
         return () => {

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

@@ -5,7 +5,7 @@ require('react/jsx-runtime');
 require('react');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('classnames');
 require('../ContextMenu/ContextMenu.js');
 

package/lib/cjs/components/Button/Button.js

@@ -7,7 +7,7 @@ var components_Link_Link = require('../Link/Link.js');
 var components_Icon_Icon = require('../Icon/Icon.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('@ilo-org/icons-react');
 
 const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, name, }) => {

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

@@ -6,7 +6,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');

package/lib/cjs/components/Callout/Callout.js

@@ -2,11 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
-var require$$0 = require('react');
+var React = require('react');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Button_Button = require('../Button/Button.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');
 require('@ilo-org/icons-react');
@@ -14,9 +14,9 @@ require('@ilo-org/icons-react');
 const Callout = ({ className, copy, cta, isCollapsible, isOpen = true, toggleOpenLabel = "Less", toggleClosedLabel = "More", headline, type, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--callout`;
-    const [toggleOpen, setToggleOpen] = require$$0.useState(isOpen);
+    const [toggleOpen, setToggleOpen] = React.useState(isOpen);
     let toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
-    require$$0.useEffect(() => {
+    React.useEffect(() => {
         setToggleOpen(isOpen);
         toggleLabel = toggleOpen ? toggleOpenLabel : toggleClosedLabel;
     }, [isOpen]);

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

@@ -6,7 +6,7 @@ require('classnames');
 require('react');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('../../GlobalCtx-97e4b433.js');
+require('../../GlobalCtx-10114bdd.js');
 require('../Button/Button.js');
 require('../Link/Link.js');
 require('../Icon/Icon.js');

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;