@vectara/vectara-ui 16.1.2 → 16.3.0

package/lib/components/complexConfigurationButton/ComplexConfigurationButton.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from "react";
+type Props = {
+    title: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    icon?: ReactElement;
+    onClick: () => void;
+    isDisabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+    "aria-label"?: string;
+};
+export declare const VuiComplexConfigurationButton: ({ title, description, footer, icon, onClick, isDisabled, className, "data-testid": dataTestId, "aria-label": ariaLabel }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/complexConfigurationButton/ComplexConfigurationButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BiPencil } from "react-icons/bi";
+import classNames from "classnames";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiIcon } from "../icon/Icon";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiText } from "../typography/Text";
+export const VuiComplexConfigurationButton = ({ title, description, footer, icon, onClick, isDisabled, className, "data-testid": dataTestId, "aria-label": ariaLabel }) => {
+    const classes = classNames("vuiComplexConfigurationButton", className);
+    return (_jsxs("button", Object.assign({ type: "button", className: classes, onClick: onClick, disabled: isDisabled, "data-testid": dataTestId, "aria-label": ariaLabel }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiText, Object.assign({ align: "left" }, { children: _jsx("p", { children: _jsx("strong", { children: title }) }) })), _jsx(VuiIcon, Object.assign({ size: "m", color: "primary" }, { children: icon !== null && icon !== void 0 ? icon : _jsx(BiPencil, {}) }))] })), description && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiText, Object.assign({ align: "left" }, { children: _jsx("p", { children: description }) }))] })), footer && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), footer] }))] })));
+};

package/lib/components/complexConfigurationButton/_index.scss

@@ -0,0 +1,17 @@
+.vuiComplexConfigurationButton {
+  width: 100%;
+  border: 1px solid var(--vui-color-primary-highlight-shade);
+  padding: $sizeS $sizeM;
+  border-radius: $sizeXs;
+  transition: box-shadow $transitionSpeed, border-color $transitionSpeed;
+
+  &:hover:not(:disabled) {
+    border-color: var(--vui-color-primary-shade);
+    box-shadow: $shadowLargeEnd;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/lib/components/index.d.ts

@@ -21,6 +21,7 @@ import { ChatTurn, ChatStyle, ChatLanguage } from "./chat/types";
 import { VuiChat } from "./chat/Chat";
 import { VuiCode } from "./code/Code";
 import { CodeLanguage } from "./code/types";
+import { VuiComplexConfigurationButton } from "./complexConfigurationButton/ComplexConfigurationButton";
 import { VuiContextProvider } from "./context/Context";
 import { VuiCopyButton } from "./copyButton/CopyButton";
 import { VuiDatePicker } from "./datePicker/DatePicker";
@@ -81,7 +82,7 @@ import { VuiTable } from "./table/Table";
 import { VuiTab } from "./tabs/Tab";
 import { VuiTabbedRoutes } from "./tabs/TabbedRoutes";
 import { VuiTabs } from "./tabs/Tabs";
-import { VuiTabsNavigator } from "./tabs/TabNavigator";
+import { VuiTabsNavigator } from "./tabs/TabsNavigator";
 import { TAB_SIZE, TabSize } from "./tabs/types";
 import { VuiText } from "./typography/Text";
 import { VuiTextColor } from "./typography/TextColor";
@@ -95,4 +96,4 @@ import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
 export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -17,6 +17,7 @@ import { VuiCard, VuiSimpleCard } from "./card";
 import { CALLOUT_COLOR, CALLOUT_SIZE } from "./callout/types";
 import { VuiChat } from "./chat/Chat";
 import { VuiCode } from "./code/Code";
+import { VuiComplexConfigurationButton } from "./complexConfigurationButton/ComplexConfigurationButton";
 import { VuiContextProvider } from "./context/Context";
 import { VuiCopyButton } from "./copyButton/CopyButton";
 import { VuiDatePicker } from "./datePicker/DatePicker";
@@ -74,7 +75,7 @@ import { VuiTable } from "./table/Table";
 import { VuiTab } from "./tabs/Tab";
 import { VuiTabbedRoutes } from "./tabs/TabbedRoutes";
 import { VuiTabs } from "./tabs/Tabs";
-import { VuiTabsNavigator } from "./tabs/TabNavigator";
+import { VuiTabsNavigator } from "./tabs/TabsNavigator";
 import { TAB_SIZE } from "./tabs/types";
 import { VuiText } from "./typography/Text";
 import { VuiTextColor } from "./typography/TextColor";
@@ -87,4 +88,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/tabs/{TabNavigator.d.ts → TabsNavigator.d.ts}

@@ -3,6 +3,7 @@ import { TabRoute } from "./types";
 type Props = {
     routes: TabRoute[];
     popover?: Omit<PopoverProps, "header" | "isOpen" | "setIsOpen" | "button" | "children" | "padding">;
+    "data-testid"?: string;
 };
-export declare const VuiTabsNavigator: ({ routes, popover }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTabsNavigator: ({ routes, popover, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/tabs/{TabNavigator.js → TabsNavigator.js}

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { VuiPopover } from "../popover/Popover";
@@ -6,8 +17,9 @@ import { VuiTabs } from "./Tabs";
 import { useVuiContext } from "../context/Context";
 import { VuiIcon } from "../icon/Icon";
 import { BiDotsVertical } from "react-icons/bi";
-export const VuiTabsNavigator = ({ routes, popover }) => {
-    var _a;
+export const VuiTabsNavigator = (_a) => {
+    var _b;
+    var { routes, popover } = _a, rest = __rest(_a, ["routes", "popover"]);
     const { getPath } = useVuiContext();
     const [isOpen, setIsOpen] = useState(false);
     const isRouteActive = (route) => {
@@ -15,7 +27,7 @@ export const VuiTabsNavigator = ({ routes, popover }) => {
         return (_a = route.isActive) !== null && _a !== void 0 ? _a : (route.href ? getPath().includes(route.href) : false);
     };
     const activeRoute = routes.find((route) => isRouteActive(route));
-    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("button", Object.assign({ className: "vuiTabsNavigatorButton" }, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { children: (_a = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _a !== void 0 ? _a : "No selection" })] })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed", vertical: true }, { children: routes.map((route, index) => {
+    return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("button", Object.assign({ className: "vuiTabsNavigatorButton" }, rest, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { children: (_b = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _b !== void 0 ? _b : "No selection" })] })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed", vertical: true }, { children: routes.map((route, index) => {
                 const { href, onClick, title, render, testId } = route;
                 const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isRouteActive(route), "data-testid": testId, onClick: () => {
                         onClick === null || onClick === void 0 ? void 0 : onClick();

package/lib/styles/index.css

@@ -1571,6 +1571,22 @@ fieldset {
   padding: 8px 4px 0 24px;
 }
 
+.vuiComplexConfigurationButton {
+  width: 100%;
+  border: 1px solid var(--vui-color-primary-highlight-shade);
+  padding: 12px 16px;
+  border-radius: 8px;
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+.vuiComplexConfigurationButton:hover:not(:disabled) {
+  border-color: var(--vui-color-primary-shade);
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+.vuiComplexConfigurationButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.1.2",
+  "version": "16.3.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/complexConfigurationButton/ComplexConfigurationButton.tsx

@@ -0,0 +1,53 @@
+import { BiCog } from "react-icons/bi";
+import { VuiComplexConfigurationButton, VuiSpacer, VuiStatList } from "../../../lib";
+
+export const ComplexConfigurationButton = () => {
+  return (
+    <>
+      <VuiComplexConfigurationButton title="Title only" onClick={() => console.log("clicked")} />
+
+      <VuiSpacer size="m" />
+
+      <VuiComplexConfigurationButton
+        title="Title with description"
+        description="A secondary line of text describing the current selection."
+        onClick={() => console.log("clicked")}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiComplexConfigurationButton
+        title="With a footer"
+        description="Pass any node into the footer slot."
+        footer={
+          <VuiStatList
+            size="xs"
+            stats={[
+              { name: "Tokens", value: "4096" },
+              { name: "Temperature", value: "0.7" }
+            ]}
+          />
+        }
+        onClick={() => console.log("clicked")}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiComplexConfigurationButton
+        title="Custom icon"
+        description="Override the default pencil with any icon."
+        icon={<BiCog />}
+        onClick={() => console.log("clicked")}
+      />
+
+      <VuiSpacer size="m" />
+
+      <VuiComplexConfigurationButton
+        title="Disabled"
+        description="Click is suppressed and hover styling is disabled."
+        isDisabled
+        onClick={() => console.log("clicked")}
+      />
+    </>
+  );
+};

package/src/docs/pages/complexConfigurationButton/index.tsx

@@ -0,0 +1,11 @@
+import { ComplexConfigurationButton } from "./ComplexConfigurationButton";
+const ComplexConfigurationButtonSource = require("!!raw-loader!./ComplexConfigurationButton");
+
+export const complexConfigurationButton = {
+  name: "Complex Configuration Button",
+  path: "/complexConfigurationButton",
+  example: {
+    component: <ComplexConfigurationButton />,
+    source: ComplexConfigurationButtonSource.default.toString()
+  }
+};

package/src/docs/pages.tsx

@@ -10,6 +10,7 @@ import { chat } from "./pages/chat";
 import { checkbox } from "./pages/checkbox";
 import { code } from "./pages/code";
 import { codeEditor } from "./pages/codeEditor";
+import { complexConfigurationButton } from "./pages/complexConfigurationButton";
 import { copyButton } from "./pages/copyButton";
 import { datePicker } from "./pages/datePicker";
 import { drawer } from "./pages/drawer";
@@ -132,7 +133,17 @@ export const categories: Category[] = [
   },
   {
     name: "Controls",
-    pages: [button, copyButton, link, topicButton, menu, optionsButton, optionsList, searchSelect]
+    pages: [
+      button,
+      complexConfigurationButton,
+      copyButton,
+      link,
+      topicButton,
+      menu,
+      optionsButton,
+      optionsList,
+      searchSelect
+    ]
   },
   {
     name: "Utils",