opus-toolkit-components 1.8.1 → 1.8.3

package/lib/components/Cookie/index.d.ts

@@ -1,11 +1,12 @@
-export interface CookieBannerProps {
-  logo?: string;
-  policyTxt?: string;
-  linkTxt?: string;
-  isVisible?: boolean;
-  onAccept?: () => void;
-  onLearnMore?: () => void;
-  intent?: string;
-}
-
-export const CookieBanner: React.ComponentType<CookieBannerProps>;
+export interface CookieBannerProps {
+  logo?: string;
+  policyTxt?: string;
+  linkTxt?: string;
+  isVisible?: boolean;
+  onAccept?: () => void;
+  onLearnMore?: () => void;
+  intent?: string;
+  children?: React.ReactNode;
+}
+
+export const CookieBanner: React.ComponentType<CookieBannerProps>;

package/lib/components/Forms/Datepickers/index.d.ts

@@ -1,23 +1,25 @@
-export interface DatePickerChangeEvent {
-  target: {
-    name: string;
-    value: string;
-  };
-}
-
-export interface DatePickerProps extends React.HTMLAttributes<HTMLDivElement> {
-  initialDate?: string;
-  label?: string;
-  isValid?: boolean;
-  errorMessage?: string;
-  name?: string;
-  onChange?: (event: DatePickerChangeEvent) => void;
-  value?: string;
-  className?: string;
-  title?: string;
-  required?: boolean;
-  dataCy?: string;
-  disabled?: boolean;
-}
-
-export const DatePicker: React.ComponentType<DatePickerProps>;
+export interface DatePickerChangeEvent {
+  target: {
+    name: string;
+    value: string;
+  };
+}
+
+export interface DatePickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  initialDate?: string;
+  label?: string;
+  isValid?: boolean;
+  errorMessage?: string;
+  name?: string;
+  onChange?: (event: DatePickerChangeEvent) => void;
+  value?: string;
+  className?: string;
+  title?: string;
+  required?: boolean;
+  dataCy?: string;
+  disabled?: boolean;
+  minDate?: string;
+  maxDate?: string;
+}
+
+export const DatePicker: React.ComponentType<DatePickerProps>;

package/lib/components/Sidebar/index.d.ts

@@ -1,48 +1,53 @@
-export interface SidebarMenuItem {
-  key: string | number;
-  name: string;
-  icon?: string;
-  href?: string;
-}
-
-export interface SidebarMenuGroup {
-  key: string | number;
-  name: string;
-  children: SidebarMenuItem[];
-}
-
-export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
-
-export interface SidebarUser {
-  id: string | number;
-  name: string;
-  role: string;
-  avatar?: string;
-}
-
-export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
-  menus: SidebarMenu[];
-  user: SidebarUser;
-
-  /** Currently selected (active) menu item */
-  activeItem?: string | number | null;
-  onItemClick?: (key: string | number) => void;
-
-  /** Optional logo override */
-  logo?: string;
-
-  /** Controlled search input state */
-  searchValue?: string;
-  onSearchChange?: (value: string) => void;
-
-  /** Controlled open/closed state for menu groups */
-  openGroupKey?: string | number | null;
-
-  /**
-   * Fired when the user clicks a group header.
-   * Use this to update `openGroupKey` in the parent.
-   */
-  onGroupToggle?: (key: string | number) => void;
-}
-
-export const Sidebar: React.FC<SidebarProps>;
+export interface SidebarMenuItem {
+  key: string | number;
+  name: string;
+  icon?: string;
+  href?: string;
+}
+
+export interface SidebarMenuGroup {
+  key: string | number;
+  name: string;
+  children: SidebarMenuItem[];
+}
+
+export type SidebarMenu = SidebarMenuItem | SidebarMenuGroup;
+
+export interface SidebarUser {
+  id: string | number;
+  name: string;
+  role: string;
+  avatar?: string;
+}
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  menus: SidebarMenu[];
+  user: SidebarUser;
+
+  /** Currently selected (active) menu item */
+  activeItem?: string | number | null;
+  onItemClick?: (key: string | number) => void;
+
+  /** Optional logo override */
+  logo?: string;
+
+  /** Controlled search input state */
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+
+  /**
+   * REQUIRED.
+   * Key of the currently expanded group.
+   * Set to `null` to collapse all groups.
+   */
+  openGroupKey: string | number | null;
+
+  /**
+   * REQUIRED.
+   * Fired when the open group changes.
+   * Receives the NEXT openGroupKey value.
+   */
+  onGroupToggle: (openGroupKey: string | number | null) => void;
+}
+
+export const Sidebar: React.FC<SidebarProps>;

package/lib/main.js

@@ -5563,8 +5563,8 @@ __webpack_require__.r(__webpack_exports__);
  * @typedef {Object} SidebarMenuItem
  * @property {string|number} key
  * @property {string} name
- * @property {string} [icon]        // optional icon name depending on your app
- * @property {string} [href]        // optional link target
+ * @property {string} [icon]
+ * @property {string} [href]
  */
 
 /**
@@ -5586,7 +5586,7 @@ __webpack_require__.r(__webpack_exports__);
  * @property {string|number} id
  * @property {string} name
  * @property {string} role
- * @property {string} [avatar]   // optional depending on your design
+ * @property {string} [avatar]
  */
 
 /**
@@ -5609,15 +5609,16 @@ __webpack_require__.r(__webpack_exports__);
  * @property {string} [logo]
  *   Optional logo override.
  *
- * @property {string} [searchValue='']
- /**
- * @property {string|number|null} [openGroupKey]
- *   Key of the currently expanded group (controlled).
- *
- * @property {(key: string|number) => void} [onGroupToggle]
- *   Fired when a group header is clicked.
+ * @property {string} [searchValue]
+ *   Controlled search input value.
  *
  * @property {(value: string) => void} [onSearchChange]
+ *
+ * @property {string|number|null} openGroupKey
+ *   REQUIRED. Key of the currently expanded group.
+ *
+ * @property {(openGroupKey: string|number|null) => void} onGroupToggle
+ *   REQUIRED. Receives the NEXT open group key.
  */
 
 /**
@@ -5639,10 +5640,14 @@ function Sidebar(_ref) {
     onGroupToggle
   } = _ref;
   const [open, setOpen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
+  const handleGroupToggle = key => {
+    const nextOpenGroupKey = openGroupKey === key ? null : key;
+    onGroupToggle(nextOpenGroupKey);
+  };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
     className: "flex",
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
-      className: " ".concat(open ? "w-[20rem]" : "w-[3rem]", " transition-width flex min-h-screen flex-col rounded bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out"),
+      className: "".concat(open ? "w-[20rem]" : "w-[3rem]", " transition-width flex min-h-screen flex-col rounded bg-[--color-primary-bg] text-[--color-text-strong] duration-300 ease-in-out"),
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
         className: "flex items-center justify-between p-3 pr-0",
         children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("img", {
@@ -5651,7 +5656,7 @@ function Sidebar(_ref) {
           alt: "C247 Logo",
           className: "sidebar-logo w-75 object-contain"
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("button", {
-          className: "duration-400 rounded-l-lg bg-[--color-primary-btn] p-2 transition-all ease-in-out hover:bg-[--color-primary-btn-hover] focus:outline-none ".concat(open ? "translate-x-0 opacity-100" : "translate-x-4 opacity-0", " "),
+          className: "duration-400 rounded-l-lg bg-[--color-primary-btn] p-2 transition-all ease-in-out hover:bg-[--color-primary-btn-hover] focus:outline-none ".concat(open ? "translate-x-0 opacity-100" : "translate-x-4 opacity-0"),
           onClick: () => setOpen(!open),
           children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ArrowLeftIcon, {
             className: "h-5 w-5 text-[--color-white]"
@@ -5659,7 +5664,7 @@ function Sidebar(_ref) {
         })]
       }), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("button", {
         className: "p-3 transition-all duration-700 ease-in-out focus:outline-none",
-        onClick: () => setOpen(!open),
+        onClick: () => setOpen(true),
         children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.Bars3Icon, {
           className: "h-6 w-6 text-[--color-text-strong] hover:text-[--color-primary-hover]"
         })
@@ -5688,20 +5693,18 @@ function Sidebar(_ref) {
         }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)("div", {
           className: "menu-item-container",
           children: menus.map(menu => menu.children ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarGroup__WEBPACK_IMPORTED_MODULE_3__["default"], {
-            // composite key
             menu: menu,
             open: open,
             activeItem: activeItem,
             onItemClick: onItemClick,
             toggleSidebar: setOpen,
             isOpen: openGroupKey === menu.key,
-            onToggle: () => onGroupToggle === null || onGroupToggle === void 0 ? void 0 : onGroupToggle(menu.key)
+            onToggle: () => handleGroupToggle(menu.key)
           }, "group-".concat(menu.key, "-").concat(menu.name)) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
-            // composite key
             menu: menu,
             open: open,
             active: activeItem === menu.key,
-            onClick: () => onItemClick(menu.key)
+            onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(menu.key)
           }, "item-".concat(menu.key, "-").concat(menu.name)))
         })]
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_SidebarProfile__WEBPACK_IMPORTED_MODULE_4__["default"], {
@@ -24574,7 +24577,8 @@ const CookieBanner = _ref => {
     isVisible = true,
     onAccept = () => {},
     onLearnMore = () => {},
-    intent = "brandSecondary"
+    intent = "brandSecondary",
+    children
   } = _ref;
   const [show, setShow] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const [render, setRender] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(isVisible);
@@ -24597,6 +24601,20 @@ const CookieBanner = _ref => {
     }
   }, [imageLoaded, render]);
   if (!render) return null;
+  const defaultActions = /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Buttons_Button__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      rank: "primary",
+      text: "Accept",
+      onClick: onAccept
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Buttons_Button__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      rank: "secondary",
+      text: linkTxt,
+      onClick: e => {
+        e.preventDefault();
+        onLearnMore();
+      }
+    })]
+  });
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_Cards_Card__WEBPACK_IMPORTED_MODULE_1__["default"], {
     intent: intent,
     className: "items-center justify-between space-x-4 p-4 transition-all duration-300 ease-in-out md:flex ".concat(show ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0", " "),
@@ -24615,20 +24633,9 @@ const CookieBanner = _ref => {
         className: "mr-4",
         children: policyTxt
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
       className: "flex items-center space-x-4",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Buttons_Button__WEBPACK_IMPORTED_MODULE_2__["default"], {
-        rank: "primary",
-        text: "Accept",
-        onClick: onAccept
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Buttons_Button__WEBPACK_IMPORTED_MODULE_2__["default"], {
-        rank: "secondary",
-        text: linkTxt,
-        onClick: e => {
-          e.preventDefault();
-          onLearnMore();
-        }
-      })]
+      children: children || defaultActions
     })]
   });
 };
@@ -46828,50 +46835,56 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * Custom change event type used by your date components.
- * @typedef {{ target: { name: string, value: string } }} DatePickerChangeEvent
+/**
+ * Custom change event type used by your date components.
+ * @typedef {{ target: { name: string, value: string } }} DatePickerChangeEvent
  */
 
-/**
- * Props for DatePicker.
- *
- * @typedef {Object} DatePickerProps
- *
- * @property {string} [initialDate]
- *   Initial date value (ISO or human-readable). Converted internally.
- *
- * @property {string} [label]
- *   Label above the input.
- *
- * @property {boolean} [isValid]
- *   Controls validation styles + error message display.
- *
- * @property {string} [errorMessage]
- *   Message shown when isValid = false.
- *
- * @property {string} [name]
- *   Input field name and event target name.
- *
- * @property {(event: DatePickerChangeEvent) => void} [onChange]
- *   Custom event format with `event.target.name` & `event.target.value` in ISO.
- *
- * @property {string} [value]
- *   External controlled value (ISO or slash-format). Normalized automatically.
- *
- * @property {string} [className]
- *
- * @property {string} [title]
- *
- * @property {boolean} [required]
- *
- * @property {string} [dataCy]
- *
- * @property {boolean} [disabled]
+/**
+ * Props for DatePicker.
+ *
+ * @typedef {Object} DatePickerProps
+ *
+ * @property {string} [initialDate]
+ *   Initial date value (ISO or human-readable). Converted internally.
+ *
+ * @property {string} [label]
+ *   Label above the input.
+ *
+ * @property {boolean} [isValid]
+ *   Controls validation styles + error message display.
+ *
+ * @property {string} [errorMessage]
+ *   Message shown when isValid = false.
+ *
+ * @property {string} [name]
+ *   Input field name and event target name.
+ *
+ * @property {(event: DatePickerChangeEvent) => void} [onChange]
+ *   Custom event format with `event.target.name` & `event.target.value` in ISO.
+ *
+ * @property {string} [value]
+ *   External controlled value (ISO or slash-format). Normalized automatically.
+ *
+ * @property {string} [className]
+ *
+ * @property {string} [title]
+ *
+ * @property {boolean} [required]
+ *
+ * @property {string} [dataCy]
+ *
+ * @property {boolean} [disabled]
+ *
+ * @property {string} [minDate]
+ *   Minimum selectable date (ISO or slash-format). Normalized automatically.
+ *
+ * @property {string} [maxDate]
+ *   Maximum selectable date (ISO or slash-format). Normalized automatically.
  */
 
-/**
- * @param {DatePickerProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * @param {DatePickerProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function DatePicker(_ref) {
@@ -46887,7 +46900,9 @@ function DatePicker(_ref) {
     title = "",
     required = false,
     dataCy,
-    disabled = false
+    disabled = false,
+    minDate,
+    maxDate
   } = _ref;
   const [selectedDate, setSelectedDate] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("");
   const inputRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
@@ -46917,6 +46932,8 @@ function DatePicker(_ref) {
       setSelectedDate(newDate);
     }
   }, [value, initialDate]);
+  const normalizedMinDate = normalizeToInputFormat(minDate);
+  const normalizedMaxDate = normalizeToInputFormat(maxDate);
   const handleDateChange = e => {
     const rawValue = e.target.value; // yyyy-MM-dd
     setSelectedDate(rawValue);
@@ -46951,6 +46968,8 @@ function DatePicker(_ref) {
       name: name,
       ref: inputRef,
       value: selectedDate,
+      min: normalizedMinDate,
+      max: normalizedMaxDate,
       title: title,
       onChange: handleDateChange,
       required: required,
@@ -50782,14 +50801,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* binding */ SidebarGroup)
 /* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9206);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(58964);
-/* harmony import */ var _SidebarItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(69374);
-/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21111);
-/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(57739);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(94178);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(58964);
+/* harmony import */ var _SidebarItem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(69374);
+/* harmony import */ var _Text_Text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(21111);
+/* harmony import */ var _Icon_Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(57739);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(94178);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -50800,7 +50817,6 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 
 
 
-
 /**
  * Icon props used by your dynamic Icon component (optional).
  * @typedef {import('../Icon/Icon').IconProps} IconProps
@@ -50845,14 +50861,11 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @property {(open: boolean) => void} toggleSidebar
  *   Opens the sidebar when a user clicks a collapsed group.
  *
- *
- * // NEW CONTROLLED STATE PROPS:
- *
  * @property {boolean} isOpen
- *   Whether THIS group’s children are currently expanded.
+ *   REQUIRED. Whether this group’s children are expanded.
  *
- * @property {(key: string|number) => void} onToggle
- *   Fired when the group header is clicked. Parent controls open/close.
+ * @property {() => void} onToggle
+ *   REQUIRED. Called when the group header is clicked.
  */
 
 /**
@@ -50871,34 +50884,34 @@ function SidebarGroup(_ref) {
     isOpen,
     onToggle
   } = _ref;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
       className: "group relative flex cursor-pointer items-center justify-between p-4 transition-all duration-500 ease-in-out",
       onClick: () => {
         if (!open) toggleSidebar(true);
-        onToggle(menu.key); // let parent handle open/close
+        onToggle(); // Sidebar computes next openGroupKey
       },
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
         className: "absolute left-0 top-0 h-full w-[5px] rounded-r transition-all duration-300 ease-in-out ".concat(isOpen || activeItem === menu.key ? "bg-[--color-brand-primary]" : "bg-[--color-stroke] group-hover:bg-[--color-brand-primary]")
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
         className: "flex items-center gap-3",
-        children: [menu.iconProps && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Icon_Icon__WEBPACK_IMPORTED_MODULE_4__["default"], _objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+        children: [menu.iconProps && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Icon_Icon__WEBPACK_IMPORTED_MODULE_3__["default"], _objectSpread({}, menu.iconProps)), !open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
           className: "absolute left-full top-1/2 ml-2 -translate-y-1/2 whitespace-nowrap rounded bg-[--color-primary-bg] px-2 py-1 text-xs text-[--color-text-strong] opacity-0 transition-opacity duration-300 group-hover:opacity-100",
           children: menu.name
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
           className: "overflow-hidden whitespace-nowrap transition-all duration-500 ease-in-out ".concat(open ? "ml-2 w-auto translate-y-0 opacity-100" : "ml-0 w-0 translate-y-2 opacity-0"),
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_3__["default"], {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_Text_Text__WEBPACK_IMPORTED_MODULE_2__["default"], {
             as: "span",
             variant: "label",
             children: menu.name
           })
         })]
-      }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_1__.ChevronDownIcon, {
+      }), open && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_heroicons_react_24_outline__WEBPACK_IMPORTED_MODULE_0__.ChevronDownIcon, {
         className: "h-4 w-4 transition-transform duration-300 ".concat(isOpen ? "rotate-180" : "")
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
       className: "ml-10 mt-1 overflow-hidden transition-all duration-300 ease-in-out ".concat(isOpen && open ? "max-h-96 opacity-100" : "max-h-0 opacity-0"),
-      children: menu.children.map(child => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
+      children: menu.children.map(child => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_SidebarItem__WEBPACK_IMPORTED_MODULE_1__["default"], {
         menu: child,
         open: open,
         active: activeItem === child.key,