@ilo-org/react 0.0.17 → 0.1.0

package/lib/cjs/components/Hero/Hero.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_Hero_HeroCard = require('./HeroCard.js');
+var components_Image_Image = require('../Image/Image.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Credit/Credit.js');
+
+const Hero = ({ className, image, heroCard, theme = "light", types, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--hero`;
+    const heroClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${theme}`]: theme,
+        [`${baseClass}--${types}`]: types,
+        [`${baseClass}--image`]: image,
+    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [image && jsxRuntime.jsx(components_Image_Image, Object.assign({}, image)), jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard))] })) }));
+};
+
+module.exports = Hero;

package/lib/cjs/components/Hero/HeroCard.js

@@ -0,0 +1,25 @@
+'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-97e4b433.js');
+
+const HeroCard = ({ className, alignment, datecopy, eyebrow, intro, socials, title, theme = "light", types = "article", }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--hero-card`;
+    const heroCardClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${alignment}`]: alignment,
+        [`${baseClass}--${theme}`]: theme,
+        [`${baseClass}--${types}`]: types,
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: heroCardClasses }, { children: [eyebrow && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsxRuntime.jsx("h2", Object.assign({ className: `${baseClass}--title` }, { children: title })), datecopy && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--datecopy` }, { children: datecopy })), intro && jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: socials &&
+                    socials.map((item, index) => {
+                        return (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list--item` }, { children: jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link icon icon--${item.icon}`, href: item.url, title: item.label }, { children: item.label })) }), index));
+                    }) }))] })));
+};
+
+module.exports = HeroCard;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var components_Hero_Hero = require('./Hero.js');
+var components_Hero_HeroCard = require('./HeroCard.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Image/Image.js');
+require('../Credit/Credit.js');
+
+
+
+exports.Hero = components_Hero_Hero;
+exports.HeroCard = components_Hero_HeroCard;

package/lib/cjs/components/Icon/Icon.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var icons = require('@ilo-org/icons-react');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var icons__namespace = /*#__PURE__*/_interopNamespaceDefault(icons);
+
+const Icon = ({ hidden, name, size }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--icon`;
+    const ariaHidden = hidden ? "hidden" : "";
+    const iconsize = size || 24;
+    const icon = name
+        ? require$$0.createElement(icons__namespace[`${name.charAt(0).toUpperCase() + name.slice(1)}${iconsize}`], {
+            "aria-hidden": ariaHidden,
+            className: baseClass,
+        })
+        : false;
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: icon });
+};
+
+module.exports = Icon;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_Icon_Icon = require('./Icon.js');
+require('react/jsx-runtime');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('@ilo-org/icons-react');
+
+
+
+exports.Icon = components_Icon_Icon;

package/lib/cjs/components/Image/Image.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Credit_Credit = require('../Credit/Credit.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const Image = ({ alt, caption, className, credit, url }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--image`;
+    const imageClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    const imgClasses = classNames("", {
+        [`${baseClass}--img`]: true,
+    });
+    const captionClasses = classNames("", {
+        [`${baseClass}--caption`]: true,
+    });
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: imageClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${imageClasses}--wrapper` }, { children: [jsxRuntime.jsxs("picture", Object.assign({ className: imgClasses }, { children: [url &&
+                                url
+                                    .sort((a, b) => parseFloat(a.breakpoint) - parseFloat(b.breakpoint))
+                                    .slice(1)
+                                    .reverse()
+                                    .map((item, index) => (jsxRuntime.jsx("source", { srcSet: item.src, media: `(min-width: ${item.breakpoint}px)` }, index))), url && jsxRuntime.jsx("img", { src: url[0].src, alt: alt })] })), credit && jsxRuntime.jsx(components_Credit_Credit, { credit: credit })] })), caption && jsxRuntime.jsx("figcaption", Object.assign({ className: captionClasses }, { children: caption }))] })));
+};
+
+module.exports = Image;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var components_Image_Image = require('./Image.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Credit/Credit.js');
+
+
+
+exports.Image = components_Image_Image;

package/lib/cjs/components/Input/Input.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
+var components_FormElement_FormElement = require('../FormElement/FormElement.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--input`;
+    const InputClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, className: InputClasses }) })) }));
+};
+
+module.exports = Input;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var components_Input_Input = require('./Input.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+
+
+exports.Input = components_Input_Input;

package/lib/cjs/components/Link/Link.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const Link = (_a) => {
+    var { children, className, label, target, theme = "light", url, style } = _a, rest = tslib.__rest(_a, ["children", "className", "label", "target", "theme", "url", "style"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = typeof className !== "undefined" && className.includes("button")
+        ? ""
+        : `${prefix}--link`;
+    const linkClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${theme}`]: theme,
+    });
+    return (jsxRuntime.jsxs("a", Object.assign({ className: linkClasses, href: url, target: target, rel: target ? "noopener noreferrer" : "", style: style }, rest, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "link__label" }, { children: label })), children] })));
+};
+
+module.exports = Link;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_Link_Link = require('./Link.js');
+require('tslib');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.Link = components_Link_Link;

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

@@ -0,0 +1,22 @@
+'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-97e4b433.js');
+
+const LinkList = ({ className, headline, linkgroup, theme, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--link-list`;
+    const linkListClasses = classNames(className, {
+        [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 &&
+                    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}`))) }))] })));
+};
+
+module.exports = LinkList;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_LinkList_LinkList = require('./LinkList.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.LinkList = components_LinkList_LinkList;

package/lib/cjs/components/List/List.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var require$$0 = require('react');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var ListCtx = require('../../ListCtx-7db7fe04.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+
+const List = ({ children, className, alignment, ordered, title, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--list`;
+    const [activeItems] = require$$0.useState([]);
+    const listClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${alignment}`]: alignment,
+        [`${baseClass}--${ordered}`]: true,
+    });
+    return (jsxRuntime.jsxs(ListCtx.ListContext.Provider, Object.assign({ value: {
+            activeItems,
+        } }, { children: [ordered && ordered === "ordered" && (jsxRuntime.jsxs("ol", Object.assign({ className: listClasses }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), children] }))), ordered && ordered !== "ordered" && (jsxRuntime.jsxs("ul", Object.assign({ className: listClasses }, { children: [title && jsxRuntime.jsx("h5", Object.assign({ className: `${baseClass}__title` }, { children: title })), children] })))] })));
+};
+
+module.exports = List;

package/lib/cjs/components/List/ListItem.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var ListCtx = require('../../ListCtx-7db7fe04.js');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+const ListItem = (_a) => {
+    var { children, id, className } = _a, rest = tslib.__rest(_a, ["children", "id", "className"]);
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--list__item`;
+    const listItemClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxRuntime.jsx(ListCtx.ListItemContext.Provider, Object.assign({ value: { id } }, { children: jsxRuntime.jsx("li", Object.assign({ className: listItemClasses }, rest, { children: children })) })));
+};
+
+module.exports = ListItem;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var components_List_List = require('./List.js');
+var components_List_ListItem = require('./ListItem.js');
+require('react/jsx-runtime');
+require('classnames');
+require('react');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../../ListCtx-7db7fe04.js');
+
+
+
+exports.List = components_List_List;
+exports.ListItem = components_List_ListItem;

package/lib/cjs/components/Loading/Loading.js

@@ -0,0 +1,21 @@
+'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-97e4b433.js');
+
+const Loading = ({ className, message, size, status }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--loading`;
+    const loadingClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${size}`]: size,
+        [`${baseClass}--${status}`]: status,
+    });
+    return (jsxRuntime.jsx("div", Object.assign({ className: loadingClasses, role: "alert", "aria-live": "assertive" }, { children: status && message && status !== "idle" && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: message }))) })));
+};
+
+module.exports = Loading;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_Loading_Loading = require('./Loading.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.Loading = components_Loading_Loading;

package/lib/cjs/components/Notification/Notification.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Button_Button = require('../Button/Button.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Link/Link.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+const Notification = ({ className, closelabel, copy, cta, headline, placement, timestamp, type, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const [display, setDisplay] = require$$0.useState(true);
+    const baseClass = `${prefix}--notification`;
+    const notificationClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${placement}`]: placement,
+        [`icon icon--${type}`]: type,
+    });
+    const ctaprops = {
+        callback: () => { },
+        className: `${baseClass}--cta`,
+        children: false,
+        label: cta === null || cta === void 0 ? void 0 : cta.label,
+        size: "small",
+        type: "secondary",
+        url: cta === null || cta === void 0 ? void 0 : cta.url,
+    };
+    /**
+     * On click, close
+     */
+    const handleClick = () => {
+        setDisplay(false);
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: display && (jsxRuntime.jsxs("div", Object.assign({ className: notificationClasses, role: "status", "aria-live": "polite", "aria-relevant": "additions" }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [jsxRuntime.jsx("h2", Object.assign({ className: `${baseClass}--headline` }, { children: headline })), jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--copy` }, { children: copy })), timestamp && (jsxRuntime.jsx("time", Object.assign({ className: `${baseClass}--date`, dateTime: timestamp.unix }, { children: timestamp.human }))), cta && jsxRuntime.jsx(components_Button_Button, Object.assign({}, ctaprops))] })), jsxRuntime.jsx("button", Object.assign({ className: `${baseClass}--close`, type: "button", onClick: () => handleClick() }, { children: jsxRuntime.jsx("span", { children: closelabel }) }))] }))) }));
+};
+
+module.exports = Notification;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var components_Notification_Notification = require('./Notification.js');
+require('react/jsx-runtime');
+require('react');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('../../GlobalCtx-97e4b433.js');
+require('../Button/Button.js');
+require('../Link/Link.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
+
+
+
+exports.Notification = components_Notification_Notification;

package/lib/cjs/components/NumberPicker/NumberPicker.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('classnames');
+var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
+var components_Fieldset_Fieldset = require('../Fieldset/Fieldset.js');
+var components_FormElement_FormElement = require('../FormElement/FormElement.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+
+const NumberPicker = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--numberpicker`;
+    const NumberPickerClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip, type: "text" }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: "text", className: `${NumberPickerClasses} ${prefix}--input`, pattern: "[0-9]*", inputMode: "numeric" }) })) }));
+};
+
+module.exports = NumberPicker;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var components_NumberPicker_NumberPicker = require('./NumberPicker.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+require('../Fieldset/Fieldset.js');
+require('../Tooltip/Tooltip.js');
+require('react-dom');
+require('../FormElement/FormElement.js');
+
+
+
+exports.NumberPicker = components_NumberPicker_NumberPicker;

package/lib/cjs/components/Pagination/Pagination.js

@@ -0,0 +1,49 @@
+'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-97e4b433.js');
+
+const Pagination = ({ className, callback, currentPage, firstPageUrl, firstPageTitle = "First page", lastPageUrl, lastPageTitle = "Last page", nextPageUrl, nextPageTitle = "Next page", pageCountPreposition = "of", prevPageUrl, prevPageTitle = "Previous page", totalPages, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--pagination`;
+    const paginationClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    const isFirst = currentPage === 0;
+    const isLast = currentPage + 1 === totalPages;
+    const firstClasses = classNames(className, {
+        [`${baseClass}--first-page`]: true,
+        [`${baseClass}--link`]: true,
+        [`${baseClass}--disable`]: isFirst,
+    });
+    const prevClasses = classNames(className, {
+        [`${baseClass}--prev-page`]: true,
+        [`${baseClass}--link`]: true,
+        [`${baseClass}--disable`]: isFirst,
+    });
+    const nextClasses = classNames(className, {
+        [`${baseClass}--next-page`]: true,
+        [`${baseClass}--link`]: true,
+        [`${baseClass}--disable`]: isLast,
+    });
+    const lastClasses = classNames(className, {
+        [`${baseClass}--last-page`]: true,
+        [`${baseClass}--link`]: true,
+        [`${baseClass}--disable`]: isLast,
+    });
+    /**
+     * On click, if there is a callback, call it
+     */
+    const handleClick = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: paginationClasses }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--previous-set` }, { children: [jsxRuntime.jsx("a", Object.assign({ className: firstClasses, onClick: (e) => handleClick(e), href: firstPageUrl, title: firstPageTitle }, { children: firstPageTitle })), jsxRuntime.jsx("a", Object.assign({ className: prevClasses, onClick: (e) => handleClick(e), href: prevPageUrl, title: prevPageTitle }, { children: prevPageTitle }))] })), jsxRuntime.jsxs("p", Object.assign({ className: `${baseClass}--page` }, { children: [jsxRuntime.jsx("span", { children: currentPage + 1 }), " ", pageCountPreposition, " ", jsxRuntime.jsx("span", { children: totalPages })] })), jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--next-set` }, { children: [jsxRuntime.jsx("a", Object.assign({ className: nextClasses, onClick: (e) => handleClick(e), href: nextPageUrl, title: nextPageTitle }, { children: nextPageTitle })), jsxRuntime.jsx("a", Object.assign({ className: lastClasses, onClick: (e) => handleClick(e), href: lastPageUrl, title: lastPageTitle }, { children: lastPageTitle }))] }))] })));
+};
+
+module.exports = Pagination;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_Pagination_Pagination = require('./Pagination.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.Pagination = components_Pagination_Pagination;

package/lib/cjs/components/Profile/Profile.js

@@ -0,0 +1,19 @@
+'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-97e4b433.js');
+
+const Profile = ({ avatar, className, description, link, name, role, }) => {
+    const { prefix } = hooks_useGlobalSettings();
+    const baseClass = `${prefix}--profile`;
+    const profileClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: profileClasses }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--avatar`, src: avatar, alt: `Avatar for ${name}` }), jsxRuntime.jsxs("figcaption", Object.assign({ className: `${baseClass}--contents` }, { children: [jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--name id` }, { children: name })), role && jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--role id` }, { children: role })), description && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--description info` }, { children: description }))), link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link info`, href: link.url }, { children: jsxRuntime.jsx("span", { children: link.label }) })))] }))] })));
+};
+
+module.exports = Profile;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var components_Profile_Profile = require('./Profile.js');
+require('react/jsx-runtime');
+require('classnames');
+require('../../hooks/useGlobalSettings.js');
+require('tslib');
+require('react');
+require('../../GlobalCtx-97e4b433.js');
+
+
+
+exports.Profile = components_Profile_Profile;