xmlui 0.4.0

package/dist/scripts/src/components/ThemeChanger/ThemeChanger.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeChangerButtonComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DropdownMenu_1 = require("@components/DropdownMenu/DropdownMenu");
+const Button_1 = require("@components/Button/Button");
+const ContentSeparator_1 = require("@components/ContentSeparator/ContentSeparator");
+const ModalDialog_1 = require("@components/ModalDialog/ModalDialog");
+const RadioGroup_1 = require("@components/RadioGroup/RadioGroup");
+const react_1 = require("react");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const renderers_1 = require("@components-core/renderers");
+const Stack_1 = require("@components/Stack/Stack");
+const Text_1 = require("@components/Text/Text");
+const Icon_1 = require("@components/Icon/Icon");
+/**
+ * Define the renderer for the Button component
+ */
+exports.themeChangerButtonComponentRenderer = (0, renderers_1.createComponentRenderer)("ThemeChangerButton", ({ renderChild }) => {
+    const [isThemeSettingsOpen, setThemeSettingsOpen] = (0, react_1.useState)(false);
+    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds } = (0, ThemeContext_1.useThemes)();
+    const renderPreview = (id) => {
+        return renderChild({
+            type: "Theme",
+            props: {
+                themeId: id,
+                width: "100%",
+                isRoot: "true",
+                tone: "{activeThemeTone}",
+            },
+            children: [
+                {
+                    type: "Card",
+                    props: {
+                        width: "100%",
+                    },
+                    children: [
+                        {
+                            type: "App",
+                            props: {
+                                width: "100%",
+                                height: "10rem",
+                                layout: "horizontal",
+                            },
+                            children: [
+                                {
+                                    type: "NavPanel",
+                                    props: {},
+                                    children: [
+                                        {
+                                            type: "NavLink",
+                                            props: {
+                                                active: "true",
+                                                url: "/",
+                                            },
+                                            children: [
+                                                {
+                                                    type: "Text",
+                                                    props: {
+                                                        value: "Home",
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                        {
+                                            type: "NavLink",
+                                            props: {
+                                                url: "/about",
+                                            },
+                                            children: [
+                                                {
+                                                    type: "Text",
+                                                    props: {
+                                                        value: "About",
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                        {
+                                            type: "NavLink",
+                                            props: {
+                                                url: "/contact",
+                                            },
+                                            children: [
+                                                {
+                                                    type: "Text",
+                                                    props: {
+                                                        value: "Contact",
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: "Pages",
+                                    props: {
+                                        defaultRoute: "/",
+                                    },
+                                    children: [
+                                        {
+                                            type: "CVStack",
+                                            props: {
+                                                height: "100%",
+                                            },
+                                            children: [
+                                                {
+                                                    type: "Text",
+                                                    props: {
+                                                        value: "Hello",
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { triggerTemplate: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "palette" }) }), children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.MenuItem, { iconPosition: "right", icon: activeThemeTone === "light" ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "checkmark" }) : "", label: "Light", onClick: () => setActiveThemeTone("light") }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.MenuItem, { iconPosition: "right", icon: activeThemeTone === "dark" ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "checkmark" }) : "", label: "Dark", onClick: () => setActiveThemeTone("dark") }), (0, jsx_runtime_1.jsx)(ContentSeparator_1.ContentSeparator, {}), (0, jsx_runtime_1.jsx)(DropdownMenu_1.MenuItem, { label: "Theme Settings", onClick: () => setThemeSettingsOpen(true) })] }), isThemeSettingsOpen && ((0, jsx_runtime_1.jsx)(ModalDialog_1.ModalDialog, { isInitiallyOpen: true, onClose: () => setThemeSettingsOpen(false), children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "vertical", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "strong", layout: { marginBottom: "1rem" }, children: "Set theme" }), (0, jsx_runtime_1.jsx)(Stack_1.Stack, { orientation: "vertical", layout: { width: "100%", overflow: "scroll" }, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { orientation: "horizontal", verticalAlignment: "center", layout: { gap: ".5rem", flexWrap: "wrap" }, children: availableThemeIds.map((themeUid) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { style: { padding: 0, width: "calc(50% - 0.5rem)" }, variant: activeThemeId === themeUid ? "solid" : "ghost", themeColor: "primary", onClick: () => setActiveThemeId(themeUid), children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { layout: { width: "100%" }, children: [renderPreview(themeUid), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: themeUid })] }) }, themeUid))) }) }), (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "vertical", layout: { minHeight: "fit-content" }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "strong", layout: { marginBottom: "1rem" }, children: "Set tone" }), (0, jsx_runtime_1.jsx)(RadioGroup_1.RadioGroup, { id: "toneSelector", value: activeThemeTone, onDidChange: (value) => setActiveThemeTone(value), children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { layout: { gap: "1rem" }, orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(RadioGroup_1.RadioGroupOption, { label: "Light", value: "light" }), (0, jsx_runtime_1.jsx)(RadioGroup_1.RadioGroupOption, { label: "Dark", value: "dark" })] }) })] })] }) }))] }));
+});

package/dist/scripts/src/components/Toggle/Toggle.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
+const constants_1 = require("@components-core/constants");
+const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
+const misc_1 = require("@components-core/utils/misc");
+const Toggle = ({ id, initialValue = false, value = false, enabled = true, style, readOnly, validationStatus = "none", updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = false, className, label, labelPosition = "right", registerComponentApi }) => {
+    const ref = react_1.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        updateState({ value: initialValue });
+    }, [initialValue, updateState]);
+    const updateValue = (0, react_1.useCallback)((value) => {
+        var _a;
+        if (((_a = ref.current) === null || _a === void 0 ? void 0 : _a.checked) === value)
+            return;
+        updateState({ value });
+        onDidChange(value);
+    }, [onDidChange, updateState]);
+    const onInputChange = (0, react_1.useCallback)((event) => {
+        if (readOnly) {
+            return;
+        }
+        updateState({ value: event.target.checked });
+        onDidChange(event.target.checked);
+    }, [onDidChange, readOnly, updateState]);
+    const handleOnFocus = (0, react_1.useCallback)(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleOnBlur = (0, react_1.useCallback)(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onBlur]);
+    (0, react_1.useEffect)(() => {
+        if (typeof indeterminate === "boolean" && ref.current) {
+            ref.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    const focus = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setValue = (0, misc_1.useEvent)((newValue) => {
+        updateValue(newValue);
+    });
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            focus,
+            setValue
+        });
+    }, [focus, registerComponentApi, setValue]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: id, label: label, style: style, labelPosition: labelPosition, enabled: enabled, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "checkbox", role: variant, checked: value, disabled: !enabled, readOnly: readOnly, "aria-readonly": readOnly, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
+                [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
+                [Toggle_module_scss_1.default.switch]: variant === "switch",
+                [Toggle_module_scss_1.default.error]: validationStatus === "error",
+                [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
+                [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
+            }), "aria-checked": value }) }));
+};
+exports.Toggle = Toggle;

package/dist/scripts/src/components/Tree/TreeComponent.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_window_1 = require("react-window");
+const react_virtualized_auto_sizer_1 = __importDefault(require("react-virtualized-auto-sizer"));
+const TreeComponent_module_scss_1 = __importDefault(require("./TreeComponent.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const container_helpers_1 = require("@components/container-helpers");
+const renderers_1 = require("@components-core/renderers");
+const treeUtils_1 = require("@components-core/utils/treeUtils");
+/**
+ * This function defines the renderer for the Tree component.
+ */
+exports.treeComponentRenderer = (0, renderers_1.createComponentRenderer)("Tree", ({ node, extractValue, renderChild }) => {
+    return ((0, jsx_runtime_1.jsx)(TreeComponent, { data: extractValue(node.props.data), selectedUid: extractValue(node.props.selectedUid), itemRenderer: (item) => {
+            return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.itemTemplate, item: item, renderChild: renderChild }));
+        } }));
+});
+const TreeRow = (0, react_1.memo)(function TreeRow({ index, style, data }) {
+    const { nodes, toggleNode, selectedUid, itemRenderer } = data;
+    const treeItem = nodes[index];
+    const onToggleNode = (0, react_1.useCallback)((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        toggleNode(treeItem);
+    }, [toggleNode, treeItem]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({}, style), { width: 'auto', minWidth: '100%', display: 'flex' }), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.rowWrapper, {
+                [TreeComponent_module_scss_1.default.selected]: selectedUid === treeItem.key,
+            }), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: onToggleNode, className: TreeComponent_module_scss_1.default.gutter, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: treeItem.depth * 10 }, className: TreeComponent_module_scss_1.default.depthPlaceholder }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(TreeComponent_module_scss_1.default.toggleWrapper, {
+                                [TreeComponent_module_scss_1.default.expanded]: treeItem.isExpanded,
+                                [TreeComponent_module_scss_1.default.hidden]: !treeItem.hasChildren,
+                            }) })] }), (0, jsx_runtime_1.jsx)("div", { className: TreeComponent_module_scss_1.default.labelWrapper, onClick: treeItem.selectable ? undefined : onToggleNode, style: { cursor: treeItem.selectable ? undefined : "pointer" }, children: itemRenderer(treeItem) })] }) }));
+});
+const emptyTreeData = {
+    treeData: [],
+    treeItemsById: {}
+};
+function TreeComponent({ data = emptyTreeData, selectedUid, itemRenderer }) {
+    const { treeData, treeItemsById } = data;
+    const [expandedIds, setExpandedIds] = (0, react_1.useState)([]);
+    const flatTreeData = (0, react_1.useMemo)(() => (0, treeUtils_1.toFlatTree)(treeData, expandedIds), [expandedIds, treeData]);
+    /**
+     * ensure the selected item's parents are expanded on route change
+     */
+    (0, react_1.useEffect)(() => {
+        if (selectedUid) {
+            const treeItem = treeItemsById[selectedUid];
+            if (treeItem) {
+                setExpandedIds(prev => [...prev, ...treeItem.parentIds]);
+            }
+        }
+    }, [selectedUid, treeItemsById]);
+    const toggleNode = (0, react_1.useCallback)((node) => {
+        if (!node.isExpanded) {
+            setExpandedIds(prev => [...prev, node.key]);
+        }
+        else {
+            setExpandedIds(prev => prev.filter(id => id !== node.key));
+        }
+    }, []);
+    const itemData = (0, react_1.useMemo)(() => {
+        return {
+            nodes: flatTreeData,
+            toggleNode,
+            selectedUid,
+            itemRenderer
+        };
+    }, [flatTreeData, toggleNode, selectedUid, itemRenderer]);
+    const getItemKey = (0, react_1.useCallback)((index, data) => {
+        return data.nodes[index].key;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { className: TreeComponent_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(react_virtualized_auto_sizer_1.default, { children: ({ width, height }) => ((0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList, { height: height, itemCount: itemData.nodes.length, itemData: itemData, itemSize: 35, itemKey: getItemKey, width: width, children: TreeRow })) }) }));
+}

package/dist/scripts/src/components/ValidationSummary/ValidationSummary.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationSummary = ValidationSummary;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Stack_1 = require("@components/Stack/Stack");
+const Icon_1 = require("@components/Icon/Icon");
+const Text_1 = require("@components/Text/Text");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const ValidationSummary_module_scss_1 = __importDefault(require("./ValidationSummary.module.scss"));
+const SpaceFiller_1 = require("@components/SpaceFiller/SpaceFiller");
+const Button_1 = require("@components/Button/Button");
+const constants_1 = require("@components-core/constants");
+const react_2 = require("@formkit/auto-animate/react");
+function ValidationSummary({ fieldValidationResults = constants_1.EMPTY_OBJECT, generalValidationResults = constants_1.EMPTY_ARRAY, }) {
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    const groupedInvalidResults = (0, react_1.useMemo)(() => {
+        const ret = {};
+        Object.entries(fieldValidationResults).forEach(([field, validationResult]) => {
+            validationResult.validations.forEach((singleValidationResult) => {
+                if (!singleValidationResult.isValid) {
+                    ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+                    ret[singleValidationResult.severity].push({
+                        field,
+                        message: singleValidationResult.invalidMessage || "",
+                    });
+                }
+            });
+        });
+        generalValidationResults.forEach((singleValidationResult) => {
+            ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+            ret[singleValidationResult.severity].push({
+                message: singleValidationResult.invalidMessage || "",
+            });
+        });
+        return ret;
+    }, [fieldValidationResults, generalValidationResults]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: animateContainerRef, className: ValidationSummary_module_scss_1.default.summaryContainer, children: [(0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.warning, severity: "warning", heading: "Validation warnings" }), (0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.error, severity: "error", heading: "Validation errors" })] }));
+}
+const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity = "error", onClose }) => {
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    if (issues.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(ValidationSummary_module_scss_1.default.validationContainer, {
+            [ValidationSummary_module_scss_1.default.valid]: severity === "valid",
+            [ValidationSummary_module_scss_1.default.info]: severity === "info",
+            [ValidationSummary_module_scss_1.default.warning]: severity === "warning",
+            [ValidationSummary_module_scss_1.default.error]: severity === "error",
+        }), style: { paddingTop: !onClose ? "0.5rem" : undefined }, children: [(0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "horizontal", verticalAlignment: "center", layout: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: ValidationSummary_module_scss_1.default.heading, name: severity, size: "md" }), (0, jsx_runtime_1.jsx)("div", { className: ValidationSummary_module_scss_1.default.heading, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: heading }) }), !!onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpaceFiller_1.SpaceFiller, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, variant: "ghost", themeColor: "secondary", icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" })] }))] }), (0, jsx_runtime_1.jsx)("ul", { ref: animateContainerRef, children: issues.map((issue, i) => ((0, jsx_runtime_1.jsx)(ValidationEntry, { issue: issue }, i))) })] }));
+};
+// --- ValidationEntry
+const ValidationEntry = ({ issue }) => {
+    const { field, message } = issue;
+    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)("span", { style: { display: "inline-flex", gap: field ? "0.25rem" : undefined }, children: [field && (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "small", fontWeight: "bold", children: `${field}:` }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "small", preserveLinebreaks: true, children: message })] }) }));
+};

package/dist/scripts/src/components/ViewComponentRegistryContext.js

@@ -0,0 +1,34 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewComponentRegistryContext = void 0;
+exports.useComponentRegistry = useComponentRegistry;
+const react_1 = __importStar(require("react"));
+// Context object that makes the component registry available
+exports.ViewComponentRegistryContext = react_1.default.createContext(null);
+// Use this hook within a component to access the component registry
+function useComponentRegistry() {
+    return (0, react_1.useContext)(exports.ViewComponentRegistryContext);
+}

package/dist/scripts/src/components/abstractions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/scripts/src/components/chart-color-schemes.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const colorSchemes = {
+    "set3": "set3",
+    "tableau10": "tableau10",
+    "brown_blueGreen": "brown_blueGreen",
+    "purpleRed_green": "purpleRed_green",
+    "pink_yellowGreen": "pink_yellowGreen",
+    "purple_orange": "purple_orange",
+    "red_blue": "red_blue",
+    "red_grey": "red_grey",
+    "red_yellow_blue": "red_yellow_blue",
+    "red_yellow_green": "red_yellow_green",
+    "spectral": "spectral",
+    "blues": "blues",
+    "greens": "greens",
+    "greys": "greys",
+    "oranges": "oranges",
+    "purples": "purples",
+    "reds": "reds",
+    "blue_green": "blue_green",
+    "blue_purple": "blue_purple",
+    "green_blue": "green_blue",
+    "orange_red": "orange_red",
+    "purple_blue_green": "purple_blue_green",
+    "purple_blue": "purple_blue",
+    "purple_red": "purple_red",
+    "red_purple": "red_purple",
+    "yellow_green_blue": "yellow_green_blue",
+    "yellow_green": "yellow_green",
+    "yellow_orange_brown": "yellow_orange_brown",
+    "yellow_orange_red": "yellow_orange_red",
+    "nivo": "nivo",
+    "category10": "category10",
+    "accent": "accent",
+    "dark2": "dark2",
+    "paired": "paired",
+    "pastel1": "pastel1",
+    "pastel2": "pastel2",
+    "set1": "set1",
+    "set2": "set2"
+};
+exports.default = colorSchemes;

package/dist/scripts/src/components/component-utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUrlWithQueryParams = createUrlWithQueryParams;
+exports.filterOptions = filterOptions;
+const constants_1 = require("@components-core/constants");
+const lodash_es_1 = require("lodash-es");
+/**
+ * Maps a record of query params to a usable local URL path with the params appended at the end
+ * @param to Either a simple URL endpoint or a URL path with query params (corresponds to a href)
+ */
+function createUrlWithQueryParams(to) {
+    if (!to || typeof to === "string" || typeof to === "number") {
+        return to;
+    }
+    if (to.queryParams !== undefined) {
+        return Object.assign(Object.assign({}, to), { search: new URLSearchParams((0, lodash_es_1.omitBy)(to.queryParams, lodash_es_1.isUndefined)).toString() });
+    }
+    return to;
+}
+/**
+ * Filters the options matching with the specified query string
+ * @param query Query string to filter the options
+ * @param options Options to filter
+ * @returns List of matching options
+ */
+function filterOptions(query, options) {
+    return ((query === ""
+        ? options
+        : options === null || options === void 0 ? void 0 : options.filter((option) => {
+            return option.label.toLowerCase().includes(query.toLowerCase());
+        })) || constants_1.EMPTY_ARRAY);
+}

package/dist/scripts/src/components/container-helpers.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MemoizedItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("@components-core/constants");
+const hooks_1 = require("@components-core/utils/hooks");
+exports.MemoizedItem = (0, react_1.memo)(({ node, item, context, renderChild, layoutContext, contextVars = constants_1.EMPTY_OBJECT }) => {
+    const shallowMemoedContextVars = (0, hooks_1.useShallowCompareMemoize)(contextVars);
+    const nodeWithItem = (0, react_1.useMemo)(() => {
+        return {
+            type: "Container",
+            contextVars: Object.assign({ $item: item, $context: context }, shallowMemoedContextVars),
+            children: Array.isArray(node) ? node : [node],
+        };
+    }, [context, item, node, shallowMemoedContextVars]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(nodeWithItem, layoutContext) });
+});