@ilo-org/react 0.17.8 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.17.8",
+  "version": "0.18.0",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -12,6 +12,7 @@
   "files": [
     "lib/**/*"
   ],
+  "type": "module",
   "contributors": [
     {
       "name": "Justin Smith",
@@ -41,44 +42,15 @@
   },
   "exports": {
     ".": {
-      "types": "./lib/types/react/src/index.d.ts",
+      "types": "./lib/types/index.d.ts",
       "import": "./lib/esm/index.js",
       "default": "./lib/cjs/index.js"
     },
-    "./components/*": {
-      "import": "./lib/esm/components/*/index.js",
-      "require": "./lib/cjs/components/*/index.js",
-      "types": "./lib/types/react/src/components/*/index.d.ts"
-    },
-    "./hooks/*": {
-      "import": "./lib/esm/hooks/*.js",
-      "require": "./lib/cjs/hooks/*.js",
-      "types": "./lib/types/react/src/hooks/index.d.ts"
-    },
     "./styles/": "./lib/styles/"
   },
-  "typesVersions": {
-    "*": {
-      "components": [
-        "./lib/types/react/src/components/index.d.ts"
-      ],
-      "hooks": [
-        "./lib/types/react/src/hooks/index.d.ts"
-      ],
-      "*": [
-        "./lib/types/react/src/index.d.ts"
-      ]
-    }
-  },
+  "sideEffects": false,
   "license": "Apache-2.0",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/react/src/index.d.ts",
-  "jest": {
-    "moduleNameMapper": {
-      ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$": "identity-obj-proxy"
-    }
-  },
+  "types": "./lib/types/index.d.ts",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -99,86 +71,70 @@
     "react-transition-group": "^4.4.1",
     "video.js": "^7.21.2",
     "videojs-youtube": "^3.0.1",
-    "@ilo-org/brand-assets": "1.0.0",
     "@ilo-org/fonts": "1.0.0",
+    "@ilo-org/brand-assets": "1.0.0",
     "@ilo-org/icons-react": "1.0.1",
     "@ilo-org/styles": "1.2.2",
     "@ilo-org/themes": "0.9.1",
     "@ilo-org/utils": "0.1.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-json": "^5.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
     "@storybook/addon-actions": "^8.1.9",
     "@storybook/addon-docs": "^8.1.9",
     "@storybook/addon-essentials": "^8.1.9",
     "@storybook/addon-interactions": "^8.1.9",
     "@storybook/addon-links": "^8.1.9",
-    "@storybook/builder-vite": "^8.1.9",
-    "@storybook/node-logger": "^8.1.9",
     "@storybook/blocks": "^8.1.9",
+    "@storybook/builder-vite": "^8.1.9",
     "@storybook/manager-api": "^8.1.9",
+    "@storybook/node-logger": "^8.1.9",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^8.1.9",
     "@storybook/react-vite": "^8.1.9",
     "@storybook/theming": "^8.1.9",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/mdx": "^2.0.3",
-    "@types/node": "^17.0.45",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.20",
+    "@types/node": "^20.16.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/video.js": "7.3.57",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/ui": "^2.0.5",
     "glob": "^10.3.10",
     "http-server": "^14.1.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest-environment-jsdom": "27.5.1",
-    "nodemon": "^2.0.20",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-element-to-jsx-string": "^15.0.0",
-    "react-scripts": "^5.0.1",
-    "remark-gfm": "^3.0.1",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-multi-input": "^1.3.1",
-    "rollup-plugin-mv": "^0.0.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "screenfull": "^5.2.0",
+    "jsdom": "^25.0.0",
     "storybook": "^8.1.9",
     "storybook-addon-rtl": "^1.0.0",
-    "ts-dedent": "^2.2.0",
-    "ts-jest": "^29.1.1",
-    "tslib": "^2.3.1",
     "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-static-copy": "^1.0.6",
+    "vitest": "^2.0.5",
     "@ilo-org/eslint-config": "1.0.0",
-    "@ilo-org/prettier-config": "1.0.0",
-    "@ilo-org/typescript-config": "1.0.0"
+    "@ilo-org/typescript-config": "1.0.0",
+    "@ilo-org/prettier-config": "1.0.0"
   },
   "peerDependencies": {
-    "react": ">16",
-    "react-dom": ">16"
+    "react": "18",
+    "react-dom": "18"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "pnpm build:lib",
-    "build:lib": "rollup -c && npm run copy:styles",
+    "build:lib": "tsc --noEmit --project tsconfig.build.json && vite build",
     "build:docs": "storybook build",
     "check": "tsc --noEmit --p tsconfig.build.json",
-    "dev:lib": "rollup --config --configDevelop -w",
+    "dev:lib": "vite build --watch",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "storybook": "storybook dev -p 6006",
     "storybook:static": "http-server ./storybook-static",
-    "copy:styles": "node copystyles.js"
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   }
 }

package/lib/cjs/AccordionCtx-be704051.js

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

package/lib/cjs/GlobalCtx-10114bdd.js

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

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

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

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

@@ -1,47 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var utils = require('@ilo-org/utils');
-var classNames = require('classnames');
-var React = require('react');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var utils_checkArrayDuplicates = require('../../utils/checkArrayDuplicates.js');
-var AccordionCtx = require('../../AccordionCtx-be704051.js');
-require('tslib');
-require('../../GlobalCtx-10114bdd.js');
-
-const Accordion = ({ children, allowMultipleExpanded = false, onButtonClick, defaultAccordionsExpanded = [], className, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--accordion`;
-    const [activeItems, setActiveItems] = React.useState([]);
-    const accordionClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    const defaultAccordionsExpandedString = JSON.stringify(defaultAccordionsExpanded);
-    React.useEffect(() => {
-        const expandedOnLoad = allowMultipleExpanded
-            ? defaultAccordionsExpanded
-            : defaultAccordionsExpanded.length > 0
-                ? [defaultAccordionsExpanded[0]]
-                : defaultAccordionsExpanded;
-        setActiveItems(expandedOnLoad);
-    }, [defaultAccordionsExpandedString, allowMultipleExpanded]); //eslint-disable-line react-hooks/exhaustive-deps
-    if (children) {
-        const ids = [];
-        React.Children.forEach(children, (child) => {
-            ids.push(child.props.id);
-        });
-        if (utils_checkArrayDuplicates.checkArrayDuplicates(ids)) {
-            console.warn("Warning: Accordion items must have unique ids.");
-        }
-    }
-    return (jsxRuntime.jsx(AccordionCtx.AccordionContext.Provider, Object.assign({ value: {
-            activeItems,
-            setActiveItems,
-            getUpdatedItems: utils.getUpdatedItems,
-            allowMultipleExpanded,
-            onButtonClick,
-        } }, { children: jsxRuntime.jsx("ul", Object.assign({ className: accordionClasses }, { children: children })) })));
-};
-
-module.exports = Accordion;

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

@@ -1,34 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var React = require('react');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.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, } = React.useContext(AccordionCtx.AccordionContext);
-    const { id } = React.useContext(AccordionCtx.AccordionItemContext);
-    const open = activeItems.indexOf(id) > -1;
-    const accordionButtonClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    /**
-     * On click, get id of clicked item, and set that item in state to 'open', all others to 'closed'
-     */
-    const handleClick = (e, id) => {
-        setActiveItems(getUpdatedItems({ id, itemStatuses: activeItems, allowMultipleExpanded }));
-        if (onButtonClick) {
-            onButtonClick(e, id);
-        }
-        e.currentTarget.blur();
-    };
-    return (jsxRuntime.jsx("div", Object.assign({ className: `${prefix}--h3` }, { children: jsxRuntime.jsx("button", Object.assign({ className: accordionButtonClasses, "aria-expanded": open, onClick: (e) => handleClick(e, id), "aria-controls": `panel-${id}`, id: `button-${id}` }, rest, { children: children })) })));
-};
-
-module.exports = AccordionButton;

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

@@ -1,21 +0,0 @@
-'use strict';
-
-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-be704051.js');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-
-const AccordionItem = (_a) => {
-    var { children, id, className } = _a, rest = tslib.__rest(_a, ["children", "id", "className"]);
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--accordion--item`;
-    const accordionItemClasses = classNames(className, {
-        [baseClass]: true,
-    });
-    return (jsxRuntime.jsx(AccordionCtx.AccordionItemContext.Provider, Object.assign({ value: { id } }, { children: jsxRuntime.jsx("li", Object.assign({ className: accordionItemClasses }, rest, { children: children })) })));
-};
-
-module.exports = AccordionItem;

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

@@ -1,30 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var classNames = require('classnames');
-var React = require('react');
-var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.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 } = 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`;
-    const accordionaPanelClasses = classNames(className, baseClass, {
-        [`${baseClass}__scroll`]: scroll,
-        [`${baseClass}--open`]: open,
-    });
-    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 })) })));
-};
-
-module.exports = AccordionPanel;

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

@@ -1,22 +0,0 @@
-'use strict';
-
-var components_Accordion_AccordionButton = require('./AccordionButton.js');
-var components_Accordion_AccordionPanel = require('./AccordionPanel.js');
-var components_Accordion_AccordionItem = require('./AccordionItem.js');
-var components_Accordion_Accordion = require('./Accordion.js');
-require('tslib');
-require('react/jsx-runtime');
-require('classnames');
-require('react');
-require('../../hooks/useGlobalSettings.js');
-require('../../GlobalCtx-10114bdd.js');
-require('../../AccordionCtx-be704051.js');
-require('@ilo-org/utils');
-require('../../utils/checkArrayDuplicates.js');
-
-
-
-exports.AccordionButton = components_Accordion_AccordionButton;
-exports.AccordionPanel = components_Accordion_AccordionPanel;
-exports.AccordionItem = components_Accordion_AccordionItem;
-exports.Accordion = components_Accordion_Accordion;

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

@@ -1,189 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-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-10114bdd.js');
-
-const BreadcrumbItem = ({ url, label, className, labelShown = true, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--breadcrumb--item`;
-    const linkClass = `${prefix}--breadcrumb--link`;
-    const labelClass = `${linkClass}--label`;
-    const breadcrumbLinkClass = classNames(baseClass, className);
-    return (jsxRuntime.jsx("li", Object.assign({ className: breadcrumbLinkClass }, { children: labelShown ? (jsxRuntime.jsx("a", Object.assign({ className: linkClass, href: url }, { children: jsxRuntime.jsx("span", Object.assign({ className: labelClass }, { children: label })) }))) : (jsxRuntime.jsx("a", { "aria-label": label, className: linkClass, href: url })) })));
-};
-const Breadcrumb = ({ className, links, buttonLabel }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    // State
-    const [isCtxMenuOpen, setIsCtxMenuOpen] = React.useState(false);
-    const [ctxMenuPosition, setCtxMenuPosition] = React.useState({
-        start: 0,
-        top: 0,
-    });
-    const [isMenuCollapsed, setIsMenuCollapsed] = React.useState(false);
-    // Refs
-    const breadcrumbsRef = React.useRef(null);
-    const breadcrumbsWidth = React.useRef(0);
-    const buttonRef = React.useRef(null);
-    const ctxMenuRef = React.useRef(null);
-    // Shortcuts to classnames
-    const baseClass = `${prefix}--breadcrumb`;
-    const innerClass = `${baseClass}--inner`;
-    const itemsClass = `${baseClass}--items`;
-    const itemClass = `${baseClass}--item`;
-    const itemFirstClass = `${itemClass}__first`;
-    const contextClass = `${baseClass}--context`;
-    const contextCollapsedClass = `${contextClass}__collapse`;
-    const contextId = `${baseClass}--menu`;
-    const buttonClass = `${contextClass}--button`;
-    // Dynamic classnames
-    const breadcrumbClass = classNames(baseClass, className);
-    const contextItemsClass = classNames(contextClass, {
-        [contextCollapsedClass]: isMenuCollapsed,
-    });
-    const contextMenuClass = classNames(`${contextClass}--menu`, {
-        [`${contextClass}--menu__visible`]: isCtxMenuOpen,
-    });
-    // Handlers
-    function handleButtonClick() {
-        setIsCtxMenuOpen(!isCtxMenuOpen);
-    }
-    const collapseMenu = React.useCallback((collapse) => {
-        if (collapse && !isMenuCollapsed) {
-            setIsMenuCollapsed(true);
-        }
-        if (!collapse && isMenuCollapsed) {
-            setIsMenuCollapsed(false);
-        }
-    }, [isMenuCollapsed]);
-    // Get the width of the breadcrumbs and store it in a ref
-    React.useLayoutEffect(() => {
-        const breadcrumbs = breadcrumbsRef === null || breadcrumbsRef === void 0 ? void 0 : breadcrumbsRef.current;
-        if (!breadcrumbs || !window || !document) {
-            return;
-        }
-        breadcrumbsWidth.current = breadcrumbs.offsetWidth;
-    }, []);
-    // Collapse or uncollapse the Context Menu depending on body width
-    React.useLayoutEffect(() => {
-        const breadcrumbs = breadcrumbsRef === null || breadcrumbsRef === void 0 ? void 0 : breadcrumbsRef.current;
-        if (!breadcrumbs || !window || !document) {
-            return;
-        }
-        const observer = new ResizeObserver((entries) => {
-            const bodyWidth = entries[0].contentRect.width;
-            if (breadcrumbsWidth.current >= bodyWidth / 1.5) {
-                collapseMenu(true);
-            }
-            else {
-                collapseMenu(false);
-            }
-        });
-        observer.observe(document.body);
-        return () => {
-            observer.disconnect();
-        };
-    }, [collapseMenu]);
-    // Position the Context Menu right below the button
-    React.useLayoutEffect(() => {
-        if (!buttonRef.current || !ctxMenuRef.current) {
-            return;
-        }
-        if (isMenuCollapsed && isCtxMenuOpen) {
-            const buttonRect = buttonRef.current.getBoundingClientRect();
-            const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-            const contextMenuWidth = ctxMenuRef.current.offsetWidth;
-            const navStart = buttonCenterX - contextMenuWidth / 2;
-            const navTop = buttonRect.bottom + 16;
-            setCtxMenuPosition({ start: navStart, top: navTop });
-        }
-    }, [isMenuCollapsed, isCtxMenuOpen]);
-    // If the ContextMenu is open, close it if the user clicks outside of it
-    React.useEffect(() => {
-        function handleClickOutside(event) {
-            if (isCtxMenuOpen &&
-                ctxMenuRef.current &&
-                !ctxMenuRef.current.contains(event.target) &&
-                buttonRef.current &&
-                !buttonRef.current.contains(event.target)) {
-                setIsCtxMenuOpen(false);
-            }
-        }
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isMenuCollapsed, isCtxMenuOpen]);
-    // Close the context menu if the breadcrumbs should un-collapse
-    React.useEffect(() => {
-        if (isCtxMenuOpen && !isMenuCollapsed) {
-            setIsCtxMenuOpen(false);
-        }
-    }, [isMenuCollapsed, isCtxMenuOpen]);
-    // handle tab navigation when the context menu is open
-    React.useEffect(() => {
-        if (!buttonRef.current || !ctxMenuRef.current) {
-            return;
-        }
-        function handleKeyDown(event) {
-            var _a, _b, _c, _d;
-            if (!isCtxMenuOpen || !isMenuCollapsed) {
-                return;
-            }
-            if (event.key === "Tab") {
-                const links = (_a = ctxMenuRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("a");
-                const lastBreadCrumb = (_c = (_b = breadcrumbsRef.current) === null || _b === void 0 ? void 0 : _b.lastElementChild) === null || _c === void 0 ? void 0 : _c.querySelector("a");
-                if (!links || !lastBreadCrumb) {
-                    return;
-                }
-                const firstLink = links[0];
-                const lastLink = links[links.length - 1];
-                // If the user is tabbing...
-                if (!event.shiftKey) {
-                    // If the context button is focused then the next focusable item
-                    // should be the first item in the context menu
-                    if (document.activeElement === buttonRef.current) {
-                        event.preventDefault();
-                        firstLink.focus();
-                        return;
-                    }
-                    // If the last context item is focused then the focus should go to
-                    // the last breadcrumb item
-                    if (document.activeElement === lastLink) {
-                        event.preventDefault();
-                        lastBreadCrumb.focus();
-                    }
-                }
-                // If the user is shift-tabbing...
-                if (event.shiftKey) {
-                    // If the first item is focused then the focus should go back to the context button
-                    if (event.shiftKey && document.activeElement === firstLink) {
-                        event.preventDefault();
-                        (_d = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _d === void 0 ? void 0 : _d.focus();
-                    }
-                    // If the focus is on the last breadcrumb item then the focus should go
-                    // to the last item in the context menu
-                    if (event.shiftKey && document.activeElement === lastBreadCrumb) {
-                        event.preventDefault();
-                        lastLink.focus();
-                    }
-                }
-            }
-        }
-        document.addEventListener("keydown", handleKeyDown);
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    });
-    // Separate out the links into first, context and last
-    const firstLink = links[0];
-    const contextLinks = links.slice(1, links.length - 1);
-    const lastLink = links[links.length - 1];
-    return (jsxRuntime.jsxs("nav", Object.assign({ className: breadcrumbClass }, { children: [jsxRuntime.jsx("div", Object.assign({ className: innerClass }, { children: jsxRuntime.jsxs("ol", Object.assign({ className: itemsClass, ref: breadcrumbsRef }, { children: [jsxRuntime.jsx(BreadcrumbItem, { url: firstLink.url, label: firstLink.label, labelShown: false, className: itemFirstClass }), contextLinks && contextLinks.length > 0 ? (jsxRuntime.jsxs("li", Object.assign({ className: contextItemsClass }, { children: [jsxRuntime.jsx("ol", Object.assign({ className: itemsClass }, { children: contextLinks.map((contextLink, i) => (jsxRuntime.jsx(BreadcrumbItem, { url: contextLink.url, label: contextLink.label }, i))) })), jsxRuntime.jsx("button", { "aria-label": buttonLabel, "aria-expanded": isCtxMenuOpen, "aria-controls": contextId, className: buttonClass, onClick: handleButtonClick, ref: buttonRef })] }))) : null, lastLink && (jsxRuntime.jsx(BreadcrumbItem, { url: lastLink.url, label: lastLink.label }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: contextMenuClass, id: contextId, hidden: !isCtxMenuOpen, style: { left: ctxMenuPosition.start, top: ctxMenuPosition.top } }, { children: jsxRuntime.jsx(components_ContextMenu_ContextMenu, { links: contextLinks, ref: ctxMenuRef }) }))] })));
-};
-
-module.exports = Breadcrumb;

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

@@ -1,14 +0,0 @@
-'use strict';
-
-var components_Breadcrumb_Breadcrumb = require('./Breadcrumb.js');
-require('react/jsx-runtime');
-require('react');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('../../GlobalCtx-10114bdd.js');
-require('classnames');
-require('../ContextMenu/ContextMenu.js');
-
-
-
-exports.Breadcrumb = components_Breadcrumb_Breadcrumb;

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

@@ -1,36 +0,0 @@
-'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');
-var components_Icon_Icon = require('../Icon/Icon.js');
-require('tslib');
-require('react');
-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, }) => {
-    const { prefix } = hooks_useGlobalSettings();
-    const baseClass = `${prefix}--button`;
-    const hasURL = !!url;
-    const icoPos = iconPosition || "left";
-    const ButtonClasses = classNames(className, {
-        [baseClass]: true,
-        [`${baseClass}__${size}`]: size,
-        [`${baseClass}__${type}`]: type,
-        [`${baseClass}--icon ${baseClass}--icon--position__${icoPos}`]: icon && !icononly,
-        [`${baseClass}--icon ${baseClass}--icon--only`]: icon && icononly,
-    });
-    /**
-     * On click, if there is a callback, call it
-     */
-    const handleClick = (e) => {
-        if (callback) {
-            callback(e);
-        }
-    };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasURL ? (jsxRuntime.jsx(components_Link_Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true }) }))) : (jsxRuntime.jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style, name: name }, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true })] }))) }));
-};
-
-module.exports = Button;

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

@@ -1,48 +0,0 @@
-'use strict';
-
-var components_Button_Button = require('./Button.js');
-require('react/jsx-runtime');
-require('classnames');
-require('../../hooks/useGlobalSettings.js');
-require('tslib');
-require('react');
-require('../../GlobalCtx-10114bdd.js');
-require('../Link/Link.js');
-require('../Icon/Icon.js');
-require('@ilo-org/icons-react');
-
-const primary = {
-    type: "primary",
-    label: "Primary",
-    size: "medium",
-    name: "primary",
-};
-const secondary = {
-    type: "secondary",
-    label: "Secondary",
-    name: "secondary",
-};
-const tertiary = {
-    type: "tertiary",
-    label: "Tertiary",
-    name: "tertiary",
-};
-const alert = { type: "alert", label: "Alert", name: "alert" };
-const icon = { type: "primary", label: "Icon", icon: "close" };
-const disabled = {
-    type: "primary",
-    label: "Disabled",
-    disabled: true,
-};
-const link = {
-    type: "primary",
-    icon: "arrowright",
-    iconPosition: "right",
-    label: "Visit ilo.org",
-    url: "https://www.ilo.org",
-    target: "__blank",
-};
-var Button_args = { primary, secondary, tertiary, alert, icon, disabled, link };
-
-exports.Button = components_Button_Button;
-exports.buttonArgs = Button_args;