opus-toolkit-components 1.6.1 → 1.6.2

package/lib/opus-components.main.js

@@ -108,26 +108,6 @@ module.exports = function (list, options) {
 
 /***/ }),
 
-/***/ 113:
-/***/ ((module) => {
-
-
-
-/* istanbul ignore next  */
-function styleTagTransform(css, styleElement) {
-  if (styleElement.styleSheet) {
-    styleElement.styleSheet.cssText = css;
-  } else {
-    while (styleElement.firstChild) {
-      styleElement.removeChild(styleElement.firstChild);
-    }
-    styleElement.appendChild(document.createTextNode(css));
-  }
-}
-module.exports = styleTagTransform;
-
-/***/ }),
-
 /***/ 126:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
@@ -397,24 +377,22 @@ if (true) {
 /***/ }),
 
 /***/ 494:
-/***/ ((module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
-// Imports
+/***/ ((module) => {
 
 
-var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{width:100%}.wrapper table{width:100%}.wrapper table thead th:first-of-type{border-top-left-radius:8px}.wrapper table thead th:last-of-type{border-top-right-radius:8px}.wrapper table tbody tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}.wrapper table tbody tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}@media(max-width: 640px){.wrapper td::before{content:attr(data-label);display:block;font-weight:600;text-transform:uppercase;margin-bottom:.25rem;color:var(--color-text-strong)}.wrapper tr{display:block}.wrapper td{display:block}.wrapper thead{display:none}.wrapper button{width:100%}}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAAA,SACE,UAAA,CAEA,eACE,UAAA,CAII,sCACE,0BAAA,CAGF,qCACE,2BAAA,CASE,sDACE,6BAAA,CAGF,qDACE,8BAAA,CAQZ,yBACE,oBACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,oBAAA,CACA,8BAAA,CAGF,YACE,aAAA,CAGF,YACE,aAAA,CAGF,eACE,YAAA,CAGF,gBACE,UAAA,CAAA","sourcesContent":[".wrapper {\r\n  width: 100%;\r\n\r\n  table {\r\n    width: 100%;\r\n\r\n    thead {\r\n      th {\r\n        &:first-of-type {\r\n          border-top-left-radius: 8px;\r\n        }\r\n\r\n        &:last-of-type {\r\n          border-top-right-radius: 8px;\r\n        }\r\n      }\r\n    }\r\n\r\n    tbody {\r\n      tr {\r\n        &:last-of-type {\r\n          td {\r\n            &:first-of-type {\r\n              border-bottom-left-radius: 8px;\r\n            }\r\n\r\n            &:last-of-type {\r\n              border-bottom-right-radius: 8px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    td::before {\r\n      content: attr(data-label);\r\n      display: block;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.25rem;\r\n      color: var(--color-text-strong);\r\n    }\r\n\r\n    tr {\r\n      display: block;\r\n    }\r\n\r\n    td {\r\n      display: block;\r\n    }\r\n\r\n    thead {\r\n      display: none;\r\n    }\r\n\r\n    button {\r\n      width: 100%;\r\n    }\r\n  }\r\n}"],"sourceRoot":""}]);
-// Exports
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
+/* istanbul ignore next  */
+function styleTagTransform(css, styleElement) {
+  if (styleElement.styleSheet) {
+    styleElement.styleSheet.cssText = css;
+  } else {
+    while (styleElement.firstChild) {
+      styleElement.removeChild(styleElement.firstChild);
+    }
+    styleElement.appendChild(document.createTextNode(css));
+  }
+}
+module.exports = styleTagTransform;
 
 /***/ }),
 
@@ -561,6 +539,28 @@ ___CSS_LOADER_EXPORT___.push([module.id, ``, "",{"version":3,"sources":[],"names
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 875:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, `.wrapper{width:100%}.wrapper table{width:100%}.wrapper table thead th:first-of-type{border-top-left-radius:8px}.wrapper table thead th:last-of-type{border-top-right-radius:8px}.wrapper table tbody tr:last-of-type td:first-of-type{border-bottom-left-radius:8px}.wrapper table tbody tr:last-of-type td:last-of-type{border-bottom-right-radius:8px}@media(max-width: 640px){.wrapper td::before{content:attr(data-label);display:block;font-weight:600;text-transform:uppercase;margin-bottom:.25rem;color:var(--color-text-strong)}.wrapper tr{display:block}.wrapper td{display:block}.wrapper thead{display:none}.wrapper button{width:100%}}`, "",{"version":3,"sources":["webpack://./src/components/Tables/table.scss"],"names":[],"mappings":"AAAA,SACE,UAAA,CAEA,eACE,UAAA,CAII,sCACE,0BAAA,CAGF,qCACE,2BAAA,CASE,sDACE,6BAAA,CAGF,qDACE,8BAAA,CAQZ,yBACE,oBACE,wBAAA,CACA,aAAA,CACA,eAAA,CACA,wBAAA,CACA,oBAAA,CACA,8BAAA,CAGF,YACE,aAAA,CAGF,YACE,aAAA,CAGF,eACE,YAAA,CAGF,gBACE,UAAA,CAAA","sourcesContent":[".wrapper {\r\n  width: 100%;\r\n\r\n  table {\r\n    width: 100%;\r\n\r\n    thead {\r\n      th {\r\n        &:first-of-type {\r\n          border-top-left-radius: 8px;\r\n        }\r\n\r\n        &:last-of-type {\r\n          border-top-right-radius: 8px;\r\n        }\r\n      }\r\n    }\r\n\r\n    tbody {\r\n      tr {\r\n        &:last-of-type {\r\n          td {\r\n            &:first-of-type {\r\n              border-bottom-left-radius: 8px;\r\n            }\r\n\r\n            &:last-of-type {\r\n              border-bottom-right-radius: 8px;\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    td::before {\r\n      content: attr(data-label);\r\n      display: block;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.25rem;\r\n      color: var(--color-text-strong);\r\n    }\r\n\r\n    tr {\r\n      display: block;\r\n    }\r\n\r\n    td {\r\n      display: block;\r\n    }\r\n\r\n    thead {\r\n      display: none;\r\n    }\r\n\r\n    button {\r\n      width: 100%;\r\n    }\r\n  }\r\n}"],"sourceRoot":""}]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 908:
@@ -695,17 +695,23 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   Accordion: () => (/* reexport */ Accordions_Accordion),
+  BarLayout: () => (/* reexport */ BarLayout_BarLayout),
   Button: () => (/* reexport */ Button),
   Card: () => (/* reexport */ Card),
   Checkbox: () => (/* reexport */ Checkbox),
   CookieBanner: () => (/* reexport */ Cookie),
   DatePicker: () => (/* reexport */ DatePicker),
   Dropdown: () => (/* reexport */ Dropdown),
+  Footer: () => (/* reexport */ Footer_Footer),
+  Header: () => (/* reexport */ Header_Header),
+  Icon: () => (/* reexport */ Icon_Icon),
   Input: () => (/* reexport */ Inputs_Input),
   Loader: () => (/* reexport */ Loader),
   Modal: () => (/* reexport */ Modals_Modal),
   Navbar: () => (/* reexport */ Navbar_Navbar),
+  PageTemplate: () => (/* reexport */ PageTemplate_PageTemplate),
   Pill: () => (/* reexport */ Pills_Pill),
+  ProfileCard: () => (/* reexport */ ProfileCard),
   RadioButton: () => (/* reexport */ Radios_RadioButton),
   Sidebar: () => (/* reexport */ Sidebar),
   Table: () => (/* reexport */ Table),
@@ -1130,35 +1136,35 @@ const statusClasses = {
   notice: "bg-[--color-util-yellow] text-[--color-black]"
 };
 
-/**
- * Allowed pill status values.
- * @typedef {'primary'|'danger'|'warning'|'success'|'info'|'notice'} PillStatus
+/**
+ * Allowed pill status values.
+ * @typedef {'primary'|'danger'|'warning'|'success'|'info'|'notice'} PillStatus
  */
 
-/**
- * Icon component type — any valid SVG React component.
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type — any valid SVG React component.
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * Props for the Pill component.
- *
- * @typedef {Object} PillProps
- * @property {string} [text='']
- *   Text displayed inside the pill.
- *
- * @property {PillStatus} [status='info']
- *   Determines visual colors of the pill.
- *
- * @property {string} [className]
- *   Additional class names.
- *
- * @property {IconComponent} [icon]
- *   Optional icon displayed before the text.
+/**
+ * Props for the Pill component.
+ *
+ * @typedef {Object} PillProps
+ * @property {string} [text='']
+ *   Text displayed inside the pill.
+ *
+ * @property {PillStatus} [status='info']
+ *   Determines visual colors of the pill.
+ *
+ * @property {string} [className]
+ *   Additional class names.
+ *
+ * @property {IconComponent} [icon]
+ *   Optional icon displayed before the text.
  */
 
-/**
- * @param {PillProps & React.HTMLAttributes<HTMLSpanElement>} props
+/**
+ * @param {PillProps & React.HTMLAttributes<HTMLSpanElement>} props
  */
 
 const Pill = _ref => {
@@ -1226,47 +1232,47 @@ const elementMap = {
   label: "label"
 };
 
-/**
- * Allowed typographical variants for the Text component.
- * @typedef {'h1'|'h2'|'h3'|'h4'|'h5'|'h6'|'body'|'small'|'caption'|'label'} TextVariant
+/**
+ * Allowed typographical variants for the Text component.
+ * @typedef {'h1'|'h2'|'h3'|'h4'|'h5'|'h6'|'body'|'small'|'caption'|'label'} TextVariant
  */
 
-/**
- * Polymorphic HTML element types supported in `as`.
- * @typedef {keyof JSX.IntrinsicElements | React.ComponentType<any>} TextAs
+/**
+ * Polymorphic HTML element types supported in `as`.
+ * @typedef {keyof JSX.IntrinsicElements | React.ComponentType<any>} TextAs
  */
 
-/**
- * Props for the Text component.
- *
- * @typedef {Object} TextProps
- *
- * @property {TextVariant} [variant='body']
- *   Controls the typography style.
- *
- * @property {TextAs} [as]
- *   Optional override for the underlying HTML element.
- *
- * @property {string} [className]
- *   Extra CSS classes.
- *
- * @property {string} [color='text-[--color-text-strong]']
- *   Tailwind/text color classes.
- *
- * @property {React.ReactNode} [children]
- *   Text content.
- *
- * @property {string} [name]
- *   Name used to generate `data-cy`.
- *
- * @property {string} [dataCy]
- *   Optional override for auto-generated data-cy attribute.
+/**
+ * Props for the Text component.
+ *
+ * @typedef {Object} TextProps
+ *
+ * @property {TextVariant} [variant='body']
+ *   Controls the typography style.
+ *
+ * @property {TextAs} [as]
+ *   Optional override for the underlying HTML element.
+ *
+ * @property {string} [className]
+ *   Extra CSS classes.
+ *
+ * @property {string} [color='text-[--color-text-strong]']
+ *   Tailwind/text color classes.
+ *
+ * @property {React.ReactNode} [children]
+ *   Text content.
+ *
+ * @property {string} [name]
+ *   Name used to generate `data-cy`.
+ *
+ * @property {string} [dataCy]
+ *   Optional override for auto-generated data-cy attribute.
  */
 
-/**
- * Text component with typography variants and polymorphic rendering.
- *
- * @param {TextProps & React.HTMLAttributes<HTMLElement>} props
+/**
+ * Text component with typography variants and polymorphic rendering.
+ *
+ * @param {TextProps & React.HTMLAttributes<HTMLElement>} props
  */
 
 function Text(_ref) {
@@ -1298,54 +1304,54 @@ function Text(_ref) {
 
 
 
-/**
- * @typedef {Object} AccordionProps
- *
- * @property {string | React.ReactNode} title
- *   Title rendered inside the header.
- *
- * @property {Function} [handleToggle]
- *   Optional external toggle handler called with (index).
- *
- * @property {number} [activeIndex]
- *   Controlled active index. If provided, the accordion becomes controlled.
- *
- * @property {number} index
- *   This accordion's position in a list.
- *
- * @property {boolean} [isPreview]
- *   If true, accordion goes into preview mode.
- *
- * @property {boolean} [isLocked]
- *   If true, accordion cannot toggle.
- *
- * @property {Function} [onExitPreview]
- *   Callback fired when exiting preview mode.
- *
- * @property {React.ReactNode} content
- *   Accordion expanded content.
- *
- * @property {React.ReactNode} [preview]
- *   Rendered when in preview mode and not active.
- *
- * @property {boolean} [isPill]
- *   Whether to show a status pill.
- *
- * @property {string} [pillText]
- *   Label inside the pill.
- *
- * @property {'success'|'warning'|'error'|'info'|string} [pillStatus]
- *   Visual status for the pill.
- *
- * @property {React.ReactNode} [pillIcon]
- *   Optional icon inside the pill.
- *
- * @property {boolean} [disabled]
- *   Disables interaction with the accordion.
+/**
+ * @typedef {Object} AccordionProps
+ *
+ * @property {string | React.ReactNode} title
+ *   Title rendered inside the header.
+ *
+ * @property {Function} [handleToggle]
+ *   Optional external toggle handler called with (index).
+ *
+ * @property {number} [activeIndex]
+ *   Controlled active index. If provided, the accordion becomes controlled.
+ *
+ * @property {number} index
+ *   This accordion's position in a list.
+ *
+ * @property {boolean} [isPreview]
+ *   If true, accordion goes into preview mode.
+ *
+ * @property {boolean} [isLocked]
+ *   If true, accordion cannot toggle.
+ *
+ * @property {Function} [onExitPreview]
+ *   Callback fired when exiting preview mode.
+ *
+ * @property {React.ReactNode} content
+ *   Accordion expanded content.
+ *
+ * @property {React.ReactNode} [preview]
+ *   Rendered when in preview mode and not active.
+ *
+ * @property {boolean} [isPill]
+ *   Whether to show a status pill.
+ *
+ * @property {string} [pillText]
+ *   Label inside the pill.
+ *
+ * @property {'success'|'warning'|'error'|'info'|string} [pillStatus]
+ *   Visual status for the pill.
+ *
+ * @property {React.ReactNode} [pillIcon]
+ *   Optional icon inside the pill.
+ *
+ * @property {boolean} [disabled]
+ *   Disables interaction with the accordion.
  */
 
-/**
- * @param {AccordionProps} props
+/**
+ * @param {AccordionProps} props
  */
 
 const Accordion = _ref => {
@@ -1449,7 +1455,7 @@ var setAttributesWithoutAttributes_default = /*#__PURE__*/__webpack_require__.n(
 var insertStyleElement = __webpack_require__(540);
 var insertStyleElement_default = /*#__PURE__*/__webpack_require__.n(insertStyleElement);
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js
-var styleTagTransform = __webpack_require__(113);
+var styleTagTransform = __webpack_require__(494);
 var styleTagTransform_default = /*#__PURE__*/__webpack_require__.n(styleTagTransform);
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/Buttons/button.scss
 var Buttons_button = __webpack_require__(833);
@@ -4267,80 +4273,80 @@ function AiTwotoneWarning (props) {
  // Import a spinner icon
 
 
-/**
- * @typedef {'primary'|'secondary'|'tertiary'|'outline'|'destructive'} ButtonRank
+/**
+ * @typedef {'primary'|'secondary'|'tertiary'|'outline'|'destructive'} ButtonRank
  */
 
-/**
- * @typedef {'default'|'disabled'} ButtonState
+/**
+ * @typedef {'default'|'disabled'} ButtonState
  */
 
-/**
- * @typedef {'sm'|'md'|'lg'|'xl'|string} ButtonSize
- *  (Supports custom tailwind text sizes too)
+/**
+ * @typedef {'sm'|'md'|'lg'|'xl'|string} ButtonSize
+ *  (Supports custom tailwind text sizes too)
  */
 
-/**
- * Icon component type from react-icons or your own components
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type from react-icons or your own components
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * @typedef {Object} ButtonProps
- *
- * @property {'button'|'submit'|'reset'} [type]
- *   Native button type.
- *
- * @property {ButtonRank} [rank]
- *   Visual rank: primary, secondary, etc.
- *
- * @property {ButtonState} [state]
- *   Current state (default, disabled).
- *
- * @property {string} [text]
- *   Text shown inside the button (ignored when isSaving is true).
- *
- * @property {ButtonSize} [size]
- *   Tailwind text size (sm, md, lg, xl).
- *
- * @property {string} [name]
- *   Standard HTML name attribute + for data-cy.
- *
- * @property {string} [dataCy]
- *   Override for auto-generated test selector.
- *
- * @property {number} [tabIndex]
- *
- * @property {boolean} [isFullWidth]
- *   Expand to full container width.
- *
- * @property {IconComponent} [icon]
- *   Optional icon component (left or right).
- *
- * @property {'left'|'right'} [iconPosition]
- *   Position of icon.
- *
- * @property {boolean} [isIconAnimated]
- *   Enables subtle translate animation on hover.
- *
- * @property {boolean} [isSaving]
- *   Shows a spinner and disables all interaction.
- *
- * @property {string} [savingText]
- *   Text shown when isSaving = true.
- *
- * @property {string} [className]
- *   Extra custom classes.
- *
- * @property {string} [title]
- *   Adds accessible label / tooltip.
- *
- * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick]
- *   Click handler. Not called during saving or disabled state.
+/**
+ * @typedef {Object} ButtonProps
+ *
+ * @property {'button'|'submit'|'reset'} [type]
+ *   Native button type.
+ *
+ * @property {ButtonRank} [rank]
+ *   Visual rank: primary, secondary, etc.
+ *
+ * @property {ButtonState} [state]
+ *   Current state (default, disabled).
+ *
+ * @property {string} [text]
+ *   Text shown inside the button (ignored when isSaving is true).
+ *
+ * @property {ButtonSize} [size]
+ *   Tailwind text size (sm, md, lg, xl).
+ *
+ * @property {string} [name]
+ *   Standard HTML name attribute + for data-cy.
+ *
+ * @property {string} [dataCy]
+ *   Override for auto-generated test selector.
+ *
+ * @property {number} [tabIndex]
+ *
+ * @property {boolean} [isFullWidth]
+ *   Expand to full container width.
+ *
+ * @property {IconComponent} [icon]
+ *   Optional icon component (left or right).
+ *
+ * @property {'left'|'right'} [iconPosition]
+ *   Position of icon.
+ *
+ * @property {boolean} [isIconAnimated]
+ *   Enables subtle translate animation on hover.
+ *
+ * @property {boolean} [isSaving]
+ *   Shows a spinner and disables all interaction.
+ *
+ * @property {string} [savingText]
+ *   Text shown when isSaving = true.
+ *
+ * @property {string} [className]
+ *   Extra custom classes.
+ *
+ * @property {string} [title]
+ *   Adds accessible label / tooltip.
+ *
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick]
+ *   Click handler. Not called during saving or disabled state.
  */
 
-/**
- * @param {ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>} props
+/**
+ * @param {ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>} props
  */
 
 function Button(_ref) {
@@ -4417,29 +4423,29 @@ function clsx_r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;e
 
 
 
-/**
- * The visual intent / theme of the Card.
- * @typedef {'default'|'info'|'warning'|'success'|'error'|'brand'|'brandSecondary'} CardIntent
+/**
+ * The visual intent / theme of the Card.
+ * @typedef {'default'|'info'|'warning'|'success'|'error'|'brand'|'brandSecondary'} CardIntent
  */
 
-/**
- * Props for the Card component.
- *
- * @typedef {Object} CardProps
- * @property {CardIntent} [intent]
- *   Controls the background + text color theme of the card.
- *
- * @property {string} [className]
- *   Additional custom class names.
- *
- * @property {React.ReactNode} [children]
- *   Card content.
+/**
+ * Props for the Card component.
+ *
+ * @typedef {Object} CardProps
+ * @property {CardIntent} [intent]
+ *   Controls the background + text color theme of the card.
+ *
+ * @property {string} [className]
+ *   Additional custom class names.
+ *
+ * @property {React.ReactNode} [children]
+ *   Card content.
  */
 
-/**
- * Card component with typed JSDoc for TS autocomplete.
- *
- * @param {CardProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Card component with typed JSDoc for TS autocomplete.
+ *
+ * @param {CardProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Card(_ref) {
@@ -4475,75 +4481,75 @@ function Input_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 
 
 
-/**
- * Icon component type — any React component that renders an SVG.
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type — any React component that renders an SVG.
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * Custom component type for supplementary UI below input.
- * Must be a React component.
- * @typedef {(props: any) => JSX.Element} CustomComponent
+/**
+ * Custom component type for supplementary UI below input.
+ * Must be a React component.
+ * @typedef {(props: any) => JSX.Element} CustomComponent
  */
 
-/**
- * Input component props.
- *
- * @typedef {Object} InputProps
- *
- * @property {string} label
- *   Label displayed above the input.
- *
- * @property {string} [placeholder]
- *
- * @property {'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'date'|'datetime-local'|'month'|'time'|'week'|string} [type]
- *   HTML input type.
- *
- * @property {string|number} [tabIndex]
- *
- * @property {string} [title]
- *
- * @property {string} [name]
- *
- * @property {boolean} [isValid]
- *   Whether the field is valid — shows error text if false.
- *
- * @property {string} [errorMessage]
- *
- * @property {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange]
- *   Change handler using your preferred full event signature.
- *
- * @property {string} [className]
- *
- * @property {string|number} [value]
- *
- * @property {IconComponent} [Icon]
- *
- * @property {'left'|'right'} [iconPosition]
- *   Icon placement inside the input.
- *
- * @property {boolean} [isAnimated]
- *   Enables focus animation on the icon.
- *
- * @property {boolean} [required]
- *
- * @property {boolean} [disabled]
- *
- * @property {boolean} [shouldRenderCustomComponent]
- *
- * @property {CustomComponent} [customComponent]
- *
- * @property {Object<string, any>} [customComponentProps]
- *
- * @property {string} [dataCy]
- *   Override for auto-generated test selector.
+/**
+ * Input component props.
+ *
+ * @typedef {Object} InputProps
+ *
+ * @property {string} label
+ *   Label displayed above the input.
+ *
+ * @property {string} [placeholder]
+ *
+ * @property {'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'date'|'datetime-local'|'month'|'time'|'week'|string} [type]
+ *   HTML input type.
+ *
+ * @property {string|number} [tabIndex]
+ *
+ * @property {string} [title]
+ *
+ * @property {string} [name]
+ *
+ * @property {boolean} [isValid]
+ *   Whether the field is valid — shows error text if false.
+ *
+ * @property {string} [errorMessage]
+ *
+ * @property {(event: React.ChangeEvent<HTMLInputElement>) => void} [onChange]
+ *   Change handler using your preferred full event signature.
+ *
+ * @property {string} [className]
+ *
+ * @property {string|number} [value]
+ *
+ * @property {IconComponent} [Icon]
+ *
+ * @property {'left'|'right'} [iconPosition]
+ *   Icon placement inside the input.
+ *
+ * @property {boolean} [isAnimated]
+ *   Enables focus animation on the icon.
+ *
+ * @property {boolean} [required]
+ *
+ * @property {boolean} [disabled]
+ *
+ * @property {boolean} [shouldRenderCustomComponent]
+ *
+ * @property {CustomComponent} [customComponent]
+ *
+ * @property {Object<string, any>} [customComponentProps]
+ *
+ * @property {string} [dataCy]
+ *   Override for auto-generated test selector.
  */
 
-/**
- * ForwardRef Input component with complete JSDoc typings.
- *
- * @param {InputProps & React.InputHTMLAttributes<HTMLInputElement>} props
- * @param {React.Ref<HTMLInputElement>} ref
+/**
+ * ForwardRef Input component with complete JSDoc typings.
+ *
+ * @param {InputProps & React.InputHTMLAttributes<HTMLInputElement>} props
+ * @param {React.Ref<HTMLInputElement>} ref
  */
 
 const Input = /*#__PURE__*/(0,external_commonjs_react_commonjs2_react_amd_react_root_React_.forwardRef)((_ref, ref) => {
@@ -4697,50 +4703,50 @@ var datepicker_update = injectStylesIntoStyleTag_default()(datepicker/* default
 
 
 
-/**
- * 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]
  */
 
-/**
- * @param {DatePickerProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * @param {DatePickerProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function DatePicker(_ref) {
@@ -4854,58 +4860,58 @@ function DatePicker(_ref) {
 
 
 
-/**
- * A single radio option.
- * @typedef {Object} RadioOption
- * @property {string|number} value
- * @property {string} label
+/**
+ * A single radio option.
+ * @typedef {Object} RadioOption
+ * @property {string|number} value
+ * @property {string} label
  */
 
-/**
- * Custom event format used by your form components.
- * @typedef {{ target: { name: string, value: string|number } }} RadioChangeEvent
+/**
+ * Custom event format used by your form components.
+ * @typedef {{ target: { name: string, value: string|number } }} RadioChangeEvent
  */
 
-/**
- * Props for the RadioButton component.
- *
- * @typedef {Object} RadioButtonProps
- *
- * @property {string} label
- *   Form label above the radio group.
- *
- * @property {RadioOption[]} [options]
- *   Array of selectable radio items.
- *
- * @property {string} name
- *   Name of the radio group (required for grouping).
- *
- * @property {string|number} [value]
- *   Currently selected value.
- *
- * @property {(event: RadioChangeEvent) => void} [onChange]
- *   Custom event handler following your design system.
- *
- * @property {string} [className]
- *
- * @property {string|number} [tabIndex]
- *
- * @property {string} [title]
- *
- * @property {boolean} [isValid]
- *   Controls error message + styles.
- *
- * @property {string} [errorMessage]
- *
- * @property {boolean} [required]
- *
- * @property {string} [dataCy]
- *
- * @property {boolean} [disabled]
+/**
+ * Props for the RadioButton component.
+ *
+ * @typedef {Object} RadioButtonProps
+ *
+ * @property {string} label
+ *   Form label above the radio group.
+ *
+ * @property {RadioOption[]} [options]
+ *   Array of selectable radio items.
+ *
+ * @property {string} name
+ *   Name of the radio group (required for grouping).
+ *
+ * @property {string|number} [value]
+ *   Currently selected value.
+ *
+ * @property {(event: RadioChangeEvent) => void} [onChange]
+ *   Custom event handler following your design system.
+ *
+ * @property {string} [className]
+ *
+ * @property {string|number} [tabIndex]
+ *
+ * @property {string} [title]
+ *
+ * @property {boolean} [isValid]
+ *   Controls error message + styles.
+ *
+ * @property {string} [errorMessage]
+ *
+ * @property {boolean} [required]
+ *
+ * @property {string} [dataCy]
+ *
+ * @property {boolean} [disabled]
  */
 
-/**
- * @param {RadioButtonProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * @param {RadioButtonProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 const RadioButton = _ref => {
@@ -5002,47 +5008,47 @@ RadioButton.displayName = "RadioButton";
 
 
 
-/**
- * Custom change event format used across your form components.
- * Matches your Input / Dropdown / DatePicker pattern.
- *
- * @typedef {{ target: { name: string, value: boolean } }} CheckboxChangeEvent
+/**
+ * Custom change event format used across your form components.
+ * Matches your Input / Dropdown / DatePicker pattern.
+ *
+ * @typedef {{ target: { name: string, value: boolean } }} CheckboxChangeEvent
  */
 
-/**
- * Props for Checkbox.
- *
- * @typedef {Object} CheckboxProps
- *
- * @property {string} label
- *   Label displayed next to the checkbox.
- *
- * @property {string} name
- *   Name used in the emitted onChange event.
- *
- * @property {(event: CheckboxChangeEvent) => void} [onChange]
- *   Receives `{ target: { name, value } }`.
- *
- * @property {boolean} [value]
- *   Whether the checkbox is checked.
- *
- * @property {boolean} [isValid]
- *   Controls error styling.
- *
- * @property {string} [errorMessage]
- *   Error text shown below the checkbox.
- *
- * @property {boolean} [disabled]
- *   Prevents user interaction.
- *
- * @property {string} [title]
- *
- * @property {string} [dataCy]
- *   Override test selector.
+/**
+ * Props for Checkbox.
+ *
+ * @typedef {Object} CheckboxProps
+ *
+ * @property {string} label
+ *   Label displayed next to the checkbox.
+ *
+ * @property {string} name
+ *   Name used in the emitted onChange event.
+ *
+ * @property {(event: CheckboxChangeEvent) => void} [onChange]
+ *   Receives `{ target: { name, value } }`.
+ *
+ * @property {boolean} [value]
+ *   Whether the checkbox is checked.
+ *
+ * @property {boolean} [isValid]
+ *   Controls error styling.
+ *
+ * @property {string} [errorMessage]
+ *   Error text shown below the checkbox.
+ *
+ * @property {boolean} [disabled]
+ *   Prevents user interaction.
+ *
+ * @property {string} [title]
+ *
+ * @property {string} [dataCy]
+ *   Override test selector.
  */
 
-/**
- * @param {CheckboxProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * @param {CheckboxProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Checkbox(_ref) {
@@ -5099,7 +5105,7 @@ function Checkbox(_ref) {
   });
 }
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/components/Tables/table.scss
-var table = __webpack_require__(494);
+var table = __webpack_require__(875);
 ;// ./src/components/Tables/table.scss
 
       
@@ -5131,54 +5137,54 @@ var table_update = injectStylesIntoStyleTag_default()(table/* default */.A, tabl
 
 
 
-/**
- * A column definition for the table.
- *
- * @typedef {Object} TableColumn
- * @property {string} key
- *   The key used to read the row value.
- *
- * @property {string} header
- *   The column header text.
- *
- * @property {(row: any) => React.ReactNode} [render]
- *   Optional custom renderer for this column.
+/**
+ * A column definition for the table.
+ *
+ * @typedef {Object} TableColumn
+ * @property {string} key
+ *   The key used to read the row value.
+ *
+ * @property {string} header
+ *   The column header text.
+ *
+ * @property {(row: any) => React.ReactNode} [render]
+ *   Optional custom renderer for this column.
  */
 
-/**
- * Props for the Table component.
- *
- * @typedef {Object} TableProps
- *
- * @property {TableColumn[]} [data=[]]
- *   Array of column definitions.
- *
- * @property {any[]} [rows=[]]
- *   Array of row objects. Row shape is flexible.
- *
- * @property {string} [className='']
- *   Extra classes for the outer wrapper.
- *
- * @property {string} [rowClassName='']
- *   Classes applied to each table row.
- *
- * @property {string} [cellClassName='']
- *   Classes applied to each table cell.
- *
- * @property {string} [headRowClassName='']
- *   Classes for the `<thead>` row.
- *
- * @property {string} [headCellClassName='']
- *   Classes for header `<th>` cells.
- *
- * @property {(row: any, index: number) => string|number} [rowKeyExtractor]
- *   Extractor for row key (defaults to index).
+/**
+ * Props for the Table component.
+ *
+ * @typedef {Object} TableProps
+ *
+ * @property {TableColumn[]} [data=[]]
+ *   Array of column definitions.
+ *
+ * @property {any[]} [rows=[]]
+ *   Array of row objects. Row shape is flexible.
+ *
+ * @property {string} [className='']
+ *   Extra classes for the outer wrapper.
+ *
+ * @property {string} [rowClassName='']
+ *   Classes applied to each table row.
+ *
+ * @property {string} [cellClassName='']
+ *   Classes applied to each table cell.
+ *
+ * @property {string} [headRowClassName='']
+ *   Classes for the `<thead>` row.
+ *
+ * @property {string} [headCellClassName='']
+ *   Classes for header `<th>` cells.
+ *
+ * @property {(row: any, index: number) => string|number} [rowKeyExtractor]
+ *   Extractor for row key (defaults to index).
  */
 
-/**
- * Responsive Table with JSDoc types.
- *
- * @param {TableProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Responsive Table with JSDoc types.
+ *
+ * @param {TableProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Table(_ref) {
@@ -13769,66 +13775,66 @@ const esm_ChevronDownIcon_ForwardRef = /*#__PURE__*/ external_commonjs_react_com
 
 
 
-/**
- * @typedef {Object} DropdownItem
- * @property {string} label
- * @property {string|number} value
+/**
+ * @typedef {Object} DropdownItem
+ * @property {string} label
+ * @property {string|number} value
  */
 
-/**
- * Icon component type — any React SVG component.
- * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
+/**
+ * Icon component type — any React SVG component.
+ * @typedef {(props: React.SVGProps<SVGSVGElement>) => JSX.Element} IconComponent
  */
 
-/**
- * Custom event type emitted by your onChange (matching your pattern).
- * @typedef {{ target: { name: string, value: string|number } }} DropdownChangeEvent
+/**
+ * Custom event type emitted by your onChange (matching your pattern).
+ * @typedef {{ target: { name: string, value: string|number } }} DropdownChangeEvent
  */
 
-/**
- * @typedef {Object} DropdownProps
- *
- * @property {DropdownItem[]} [items]
- *   Array of dropdown options.
- *
- * @property {string} [label]
- *   Label above the dropdown.
- *
- * @property {boolean} [isValid]
- *   Whether the field is valid.
- *
- * @property {boolean} [required]
- *   Whether a * is appended.
- *
- * @property {string} [placeholder]
- *
- * @property {string} [name]
- *
- * @property {string} [className]
- *
- * @property {string} [title]
- *
- * @property {string|number} [tabIndex]
- *
- * @property {(event: DropdownChangeEvent) => void} [onChange]
- *   Uses your preferred event signature: `event.target.name` / `event.target.value`.
- *
- * @property {string|number} [value]
- *   Selected item value.
- *
- * @property {IconComponent} [Icon]
- *   Optional decorative icon.
- *
- * @property {string} [errorMessage]
- *
- * @property {boolean} [disabled]
- *
- * @property {string} [dataCy]
- *   Override for auto-generated data-cy attribute.
+/**
+ * @typedef {Object} DropdownProps
+ *
+ * @property {DropdownItem[]} [items]
+ *   Array of dropdown options.
+ *
+ * @property {string} [label]
+ *   Label above the dropdown.
+ *
+ * @property {boolean} [isValid]
+ *   Whether the field is valid.
+ *
+ * @property {boolean} [required]
+ *   Whether a * is appended.
+ *
+ * @property {string} [placeholder]
+ *
+ * @property {string} [name]
+ *
+ * @property {string} [className]
+ *
+ * @property {string} [title]
+ *
+ * @property {string|number} [tabIndex]
+ *
+ * @property {(event: DropdownChangeEvent) => void} [onChange]
+ *   Uses your preferred event signature: `event.target.name` / `event.target.value`.
+ *
+ * @property {string|number} [value]
+ *   Selected item value.
+ *
+ * @property {IconComponent} [Icon]
+ *   Optional decorative icon.
+ *
+ * @property {string} [errorMessage]
+ *
+ * @property {boolean} [disabled]
+ *
+ * @property {string} [dataCy]
+ *   Override for auto-generated data-cy attribute.
  */
 
-/**
- * @param {DropdownProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * @param {DropdownProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Dropdown(_ref) {
@@ -13981,28 +13987,28 @@ var c247_icon_only_2x_png_default = /*#__PURE__*/__webpack_require__.n(c247_icon
 
 
 
-/**
- * Props for the Navbar component.
- *
- * @typedef {Object} NavbarProps
- *
- * @property {React.ReactNode} [children]
- *   Content displayed on the right side of the navbar.
- *
- * @property {string} [logo]
- *   Custom logo URL. Defaults to toolkit logos.
- *
- * @property {string} [className]
- *   Extra class names for the navbar wrapper.
- *
- * @property {string} [maxWidth="1200px"]
- *   Max width of the inner content container.
+/**
+ * Props for the Navbar component.
+ *
+ * @typedef {Object} NavbarProps
+ *
+ * @property {React.ReactNode} [children]
+ *   Content displayed on the right side of the navbar.
+ *
+ * @property {string} [logo]
+ *   Custom logo URL. Defaults to toolkit logos.
+ *
+ * @property {string} [className]
+ *   Extra class names for the navbar wrapper.
+ *
+ * @property {string} [maxWidth="1200px"]
+ *   Max width of the inner content container.
  */
 
-/**
- * Responsive Navbar with optional custom logo and region for child content.
- *
- * @param {NavbarProps & React.HTMLAttributes<HTMLElement>} props
+/**
+ * Responsive Navbar with optional custom logo and region for child content.
+ *
+ * @param {NavbarProps & React.HTMLAttributes<HTMLElement>} props
  */
 
 const Navbar = _ref => {
@@ -14044,28 +14050,28 @@ var c247_loader_gif_default = /*#__PURE__*/__webpack_require__.n(c247_loader_gif
 // In production, it's better to let the parent control rendering to keep Loader focused on UI.
 // This change would improve testability, flexibility, and follow React best practices.
 
-/**
- * Props for the Loader component.
- *
- * @typedef {Object} LoaderProps
- *
- * @property {boolean} isLoading
- *   Determines whether the loader is visible.
- *
- * @property {string} [loaderText='loading...']
- *   Optional text displayed beneath the spinner.
- *
- * @property {React.ReactNode} [customLoader]
- *   Custom loader element (replaces default GIF).
- *
- * @property {string} [className]
- *   Extra class names applied to the outer container.
+/**
+ * Props for the Loader component.
+ *
+ * @typedef {Object} LoaderProps
+ *
+ * @property {boolean} isLoading
+ *   Determines whether the loader is visible.
+ *
+ * @property {string} [loaderText='loading...']
+ *   Optional text displayed beneath the spinner.
+ *
+ * @property {React.ReactNode} [customLoader]
+ *   Custom loader element (replaces default GIF).
+ *
+ * @property {string} [className]
+ *   Extra class names applied to the outer container.
  */
 
-/**
- * Loader overlay that covers the entire screen.
- *
- * @param {LoaderProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Loader overlay that covers the entire screen.
+ *
+ * @param {LoaderProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Loader(_ref) {
@@ -14123,44 +14129,50 @@ const XMarkIcon_ForwardRef = /*#__PURE__*/ external_commonjs_react_commonjs2_rea
 
 
 
-/**
- * Props for the Modal component.
- *
- * @typedef {Object} ModalProps
- *
- * @property {boolean} isOpen
- *   Whether the modal is visible.
- *
- * @property {() => void} [onClose]
- *   Callback fired when the modal requests to close (Escape key or close button).
- *
- * @property {boolean} [isLoading]
- *   Shows a loader overlay inside the modal content.
- *
- * @property {string} [loaderText]
- *   Text passed to the loader when isLoading = true.
- *
- * @property {React.ReactNode} [header]
- *   Content rendered in the modal header.
- *
- * @property {React.ReactNode} [body]
- *   Content rendered in the modal body.
- *
- * @property {React.ReactNode} [footer]
- *   Content rendered in the modal footer.
- *
- * @property {string} [className]
- *   Additional classes for the modal container.
- *
- * @property {string} [footerClassName]
- *
- * @property {string} [headerClassName]
+/**
+ * Props for the Modal component.
+ *
+ * @typedef {Object} ModalProps
+ *
+ * @property {boolean} isOpen
+ *   Whether the modal is visible.
+ *
+ * @property {() => void} [onClose]
+ *   Callback fired when the modal requests to close (Escape key or close button).
+ *
+ * @property {boolean} [isLoading]
+ *   Shows a loader overlay inside the modal content.
+ *
+ * @property {string} [loaderText]
+ *   Text passed to the loader when isLoading = true.
+ *
+ * @property {React.ReactNode} [header]
+ *   Content rendered in the modal header.
+ *
+ * @property {boolean} [hideHeader]
+ *   If true, the header section is hidden.
+ *
+ * @property {React.ReactNode} [body]
+ *   Content rendered in the modal body.
+ *
+ * @property {React.ReactNode} [footer]
+ *   Content rendered in the modal footer.
+ *
+ * @property {boolean} [hideFooter]
+ *   If true, the footer section is hidden.
+ *
+ * @property {string} [className]
+ *   Additional classes for the modal container.
+ *
+ * @property {string} [footerClassName]
+ *
+ * @property {string} [headerClassName]
  */
 
-/**
- * Modal component written in JavaScript but fully typed using JSDoc.
- *
- * @param {ModalProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Modal component written in JavaScript but fully typed using JSDoc.
+ *
+ * @param {ModalProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 const Modal = _ref => {
@@ -14172,11 +14184,13 @@ const Modal = _ref => {
     header,
     body,
     footer,
+    hideHeader = false,
+    hideFooter = false,
     className = "",
     footerClassName = "",
     headerClassName = ""
   } = _ref;
-  // ✅ Hook must be called unconditionally
+  // Hook must be called unconditionally
   (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useEffect)(() => {
     const handleEscape = e => {
       if (e.key === "Escape" && isOpen) {
@@ -14187,7 +14201,7 @@ const Modal = _ref => {
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
 
-  // ✅ Conditional render *after* hooks
+  // Conditional render *after* hooks
   if (!isOpen) return null;
   return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
     className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50",
@@ -14204,7 +14218,7 @@ const Modal = _ref => {
           loaderText: loaderText,
           className: "relative z-20 h-[110px] w-[150px]"
         })
-      }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+      }), !hideHeader && /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
         className: "relative z-0 flex justify-end pb-3",
         children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("button", {
           onClick: onClose,
@@ -14225,7 +14239,7 @@ const Modal = _ref => {
         id: "modal-description",
         className: "relative z-0 my-4 text-[--color-text-weak]",
         children: body
-      }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+      }), !hideFooter && /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
         className: "relative z-0 text-[--color-text-weak] ".concat(footerClassName),
         children: footer
       })]
@@ -22930,62 +22944,62 @@ const C247Tasks = props => /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(task
 
 
 
-/**
- * All valid keys for heroicons.
- * @typedef {keyof typeof HeroIcons} HeroIconName
+/**
+ * All valid keys for heroicons.
+ * @typedef {keyof typeof HeroIcons} HeroIconName
  */
 
-/**
- * All valid keys for your custom C247 icons.
- * @typedef {keyof typeof C247Icons} C247IconName
+/**
+ * All valid keys for your custom C247 icons.
+ * @typedef {keyof typeof C247Icons} C247IconName
  */
 
-/**
- * Allowed icon name type (union of dynamic keys).
- * @typedef {HeroIconName | C247IconName} IconName
+/**
+ * Allowed icon name type (union of dynamic keys).
+ * @typedef {HeroIconName | C247IconName} IconName
  */
 
-/**
- * Which icon library to use.
- * @typedef {'hero'|'c247'} IconLibrary
+/**
+ * Which icon library to use.
+ * @typedef {'hero'|'c247'} IconLibrary
  */
 
-/**
- * Props for the generic Icon component.
- *
- * @typedef {Object} IconProps
- *
- * @property {IconName} name
- *   The dynamic icon name to render.
- *
- * @property {IconLibrary} [library='hero']
- *   Which icon set to render from.
- *
- * @property {number} [size=18]
- *   Icon size in pixels.
- *
- * @property {string} [className]
- *   Extra classes for styling.
- *
- * @property {string} [color]
- *   Optional CSS color override.
+/**
+ * Props for the generic Icon component.
+ *
+ * @typedef {Object} IconProps
+ *
+ * @property {IconName} name
+ *   The dynamic icon name to render.
+ *
+ * @property {IconLibrary} [library='hero']
+ *   Which icon set to render from.
+ *
+ * @property {number} [size=18]
+ *   Icon size in pixels.
+ *
+ * @property {string} [className]
+ *   Extra classes for styling.
+ *
+ * @property {string} [color]
+ *   Optional CSS color override.
  */
 
-/**
- * Generic Icon component supporting HeroIcons and C247 icons.
- *
- * @param {IconProps & React.SVGProps<SVGSVGElement>} props
+/**
+ * Generic Icon component supporting HeroIcons and C247 icons.
+ *
+ * @param {IconProps & React.SVGProps<SVGSVGElement>} props
  */
 
-/**
- * Generic Icon component supporting HeroIcons and C247 icons.
- *
- * Props:
- * - name: string - icon name
- * - library: 'hero' | 'c247' (default: 'hero')
- * - size: number (default: 24)
- * - className: string
- * - color: string
+/**
+ * Generic Icon component supporting HeroIcons and C247 icons.
+ *
+ * Props:
+ * - name: string - icon name
+ * - library: 'hero' | 'c247' (default: 'hero')
+ * - size: number (default: 24)
+ * - className: string
+ * - color: string
  */
 
 const Icon = _ref => {
@@ -23020,46 +23034,46 @@ function SidebarItem_objectWithoutPropertiesLoose(r, e) { if (null == r) return
 
 
 
-/**
- * Icon props (importing from your Icon component typedef).
- * @typedef {import('../Icon/Icon').IconProps} IconProps
+/**
+ * Icon props (importing from your Icon component typedef).
+ * @typedef {import('../Icon/Icon').IconProps} IconProps
  */
 
-/**
- * A sidebar leaf item (no children).
- * @typedef {Object} SidebarItemMenu
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {IconProps} [iconProps]
+/**
+ * A sidebar leaf item (no children).
+ * @typedef {Object} SidebarItemMenu
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Props for SidebarItem.
- *
- * @typedef {Object} SidebarItemProps
- *
- * @property {SidebarItemMenu} menu
- *   The menu item to render.
- *
- * @property {boolean} open
- *   Whether the sidebar is expanded.
- *
- * @property {boolean} [active=false]
- *   Whether this item is currently active.
- *
- * @property {keyof JSX.IntrinsicElements | React.ComponentType<any>} [as='div']
- *   Polymorphic wrapper: div, a, button, Link, etc.
- *
- * @property {() => void} [onClick]
- *   Fired when the item is clicked.
+/**
+ * Props for SidebarItem.
+ *
+ * @typedef {Object} SidebarItemProps
+ *
+ * @property {SidebarItemMenu} menu
+ *   The menu item to render.
+ *
+ * @property {boolean} open
+ *   Whether the sidebar is expanded.
+ *
+ * @property {boolean} [active=false]
+ *   Whether this item is currently active.
+ *
+ * @property {keyof JSX.IntrinsicElements | React.ComponentType<any>} [as='div']
+ *   Polymorphic wrapper: div, a, button, Link, etc.
+ *
+ * @property {() => void} [onClick]
+ *   Fired when the item is clicked.
  */
 
-/**
- * Fully typed SidebarItem component.
- *
- * @param {SidebarItemProps & React.HTMLAttributes<HTMLElement>} props
+/**
+ * Fully typed SidebarItem component.
+ *
+ * @param {SidebarItemProps & React.HTMLAttributes<HTMLElement>} props
  */
 
 function SidebarItem(_ref) {
@@ -23108,55 +23122,55 @@ function SidebarGroup_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 
 
 
-/**
- * Icon props used by your dynamic Icon component (optional).
- * @typedef {import('../Icon/Icon').IconProps} IconProps
+/**
+ * Icon props used by your dynamic Icon component (optional).
+ * @typedef {import('../Icon/Icon').IconProps} IconProps
  */
 
-/**
- * A single child menu item.
- * @typedef {Object} SidebarChild
- * @property {string|number} key
- * @property {string} name
- * @property {string} [path]
- * @property {string} [href]
- * @property {IconProps} [iconProps]
+/**
+ * A single child menu item.
+ * @typedef {Object} SidebarChild
+ * @property {string|number} key
+ * @property {string} name
+ * @property {string} [path]
+ * @property {string} [href]
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Sidebar group object containing children.
- * @typedef {Object} SidebarGroupMenu
- * @property {string|number} key
- * @property {string} name
- * @property {SidebarChild[]} children
- * @property {IconProps} [iconProps]
+/**
+ * Sidebar group object containing children.
+ * @typedef {Object} SidebarGroupMenu
+ * @property {string|number} key
+ * @property {string} name
+ * @property {SidebarChild[]} children
+ * @property {IconProps} [iconProps]
  */
 
-/**
- * Props for SidebarGroup component.
- *
- * @typedef {Object} SidebarGroupProps
- *
- * @property {SidebarGroupMenu} menu
- *   The group menu containing children.
- *
- * @property {boolean} open
- *   Whether the sidebar is currently expanded.
- *
- * @property {string|number|null} activeItem
- *   The currently selected menu item key.
- *
- * @property {(key: string|number) => void} onItemClick
- *   Handler fired when a child item is selected.
- *
- * @property {(open: boolean) => void} toggleSidebar
- *   Used to open the sidebar when clicking a group.
+/**
+ * Props for SidebarGroup component.
+ *
+ * @typedef {Object} SidebarGroupProps
+ *
+ * @property {SidebarGroupMenu} menu
+ *   The group menu containing children.
+ *
+ * @property {boolean} open
+ *   Whether the sidebar is currently expanded.
+ *
+ * @property {string|number|null} activeItem
+ *   The currently selected menu item key.
+ *
+ * @property {(key: string|number) => void} onItemClick
+ *   Handler fired when a child item is selected.
+ *
+ * @property {(open: boolean) => void} toggleSidebar
+ *   Used to open the sidebar when clicking a group.
  */
 
-/**
- * Fully typed SidebarGroup component.
- *
- * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed SidebarGroup component.
+ *
+ * @param {SidebarGroupProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function SidebarGroup(_ref) {
@@ -23239,29 +23253,29 @@ function Link(_ref) {
 
 
 
-/**
- * Shape of the user object
- * @typedef {Object} ProfileCardUser
- * @property {string} name
- * @property {string} role
+/**
+ * Shape of the user object
+ * @typedef {Object} ProfileCardUser
+ * @property {string} name
+ * @property {string} role
  */
 
-/**
- * Props for ProfileCard.
- *
- * @typedef {Object} ProfileCardProps
- *
- * @property {ProfileCardUser} user
- *   The user object containing name + role.
- *
- * @property {string} [href]
- *   If provided, the card becomes a link instead of a div.
+/**
+ * Props for ProfileCard.
+ *
+ * @typedef {Object} ProfileCardProps
+ *
+ * @property {ProfileCardUser} user
+ *   The user object containing name + role.
+ *
+ * @property {string} [href]
+ *   If provided, the card becomes a link instead of a div.
  */
 
-/**
- * ProfileCard with polymorphic wrapper (Link or div).
- *
- * @param {ProfileCardProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * ProfileCard with polymorphic wrapper (Link or div).
+ *
+ * @param {ProfileCardProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function ProfileCard(_ref) {
@@ -23351,66 +23365,66 @@ var sidebar_update = injectStylesIntoStyleTag_default()(sidebar/* default */.A,
 
 
 
-/**
- * A single menu item (no children).
- * @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
+/**
+ * A single menu item (no children).
+ * @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
  */
 
-/**
- * A grouped menu entry with children.
- * @typedef {Object} SidebarMenuGroup
- * @property {string|number} key
- * @property {string} name
- * @property {SidebarMenuItem[]} children
+/**
+ * A grouped menu entry with children.
+ * @typedef {Object} SidebarMenuGroup
+ * @property {string|number} key
+ * @property {string} name
+ * @property {SidebarMenuItem[]} children
  */
 
-/**
- * A full menu entry (either group or leaf item).
- * @typedef {SidebarMenuItem | SidebarMenuGroup} SidebarMenu
+/**
+ * A full menu entry (either group or leaf item).
+ * @typedef {SidebarMenuItem | SidebarMenuGroup} SidebarMenu
  */
 
-/**
- * Minimal shape expected for SidebarProfile.
- * @typedef {Object} SidebarUser
- * @property {string|number} id
- * @property {string} name
- * @property {string} role
- * @property {string} [avatar]   // optional depending on your design
+/**
+ * Minimal shape expected for SidebarProfile.
+ * @typedef {Object} SidebarUser
+ * @property {string|number} id
+ * @property {string} name
+ * @property {string} role
+ * @property {string} [avatar]   // optional depending on your design
  */
 
-/**
- * Props for Sidebar.
- *
- * @typedef {Object} SidebarProps
- *
- * @property {SidebarMenu[]} menus
- *   All sidebar menu items (groups + items).
- *
- * @property {SidebarUser} user
- *   The current logged-in user.
- *
- * @property {string|number|null} [activeItem]
- *   Key of the currently selected item.
- *
- * @property {(key: string|number) => void} [onItemClick]
- *   Fired when a menu item is clicked.
- *
- * @property {string} [logo]
- *   Optional logo override.
- *
- * @property {string} [searchValue='']
- *
- * @property {(value: string) => void} [onSearchChange]
+/**
+ * Props for Sidebar.
+ *
+ * @typedef {Object} SidebarProps
+ *
+ * @property {SidebarMenu[]} menus
+ *   All sidebar menu items (groups + items).
+ *
+ * @property {SidebarUser} user
+ *   The current logged-in user.
+ *
+ * @property {string|number|null} [activeItem]
+ *   Key of the currently selected item.
+ *
+ * @property {(key: string|number) => void} [onItemClick]
+ *   Fired when a menu item is clicked.
+ *
+ * @property {string} [logo]
+ *   Optional logo override.
+ *
+ * @property {string} [searchValue='']
+ *
+ * @property {(value: string) => void} [onSearchChange]
  */
 
-/**
- * Fully typed Sidebar component.
- *
- * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
+/**
+ * Fully typed Sidebar component.
+ *
+ * @param {SidebarProps & React.HTMLAttributes<HTMLDivElement>} props
  */
 
 function Sidebar(_ref) {
@@ -23495,6 +23509,160 @@ function Sidebar(_ref) {
     })
   });
 }
+;// ./src/components/BarLayout/BarLayout.jsx
+
+/**
+ * @typedef {Object} BarLayoutProps
+ * @property {React.ReactNode} [left]   Left content area
+ * @property {React.ReactNode} [center] Center content area
+ * @property {React.ReactNode} [right]  Right content area
+ * @property {string} [className]       Optional wrapper class
+ */
+
+/**
+ * @param {BarLayoutProps} props
+ */
+
+const BarLayout = _ref => {
+  let {
+    left,
+    center,
+    right,
+    className = ""
+  } = _ref;
+  return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsxs)("div", {
+    className: "flex w-full items-center justify-between ".concat(className),
+    children: [/*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+      className: "flex-1",
+      children: left
+    }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+      className: "flex-auto text-center",
+      children: center
+    }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+      className: "flex flex-1 justify-end",
+      children: right
+    })]
+  });
+};
+/* harmony default export */ const BarLayout_BarLayout = (BarLayout);
+;// ./src/components/Header/Header.jsx
+
+
+
+/**
+ * @typedef {Object} HeaderProps
+ * @property {string} title                   Header title text left slot
+ * @property {React.ReactNode} [center]       center content slot
+ * @property {React.ReactNode} [right]        Right content slot
+ * @property {string} [className]             Optional wrapper class
+ */
+
+/**
+ * @param {HeaderProps} props
+ */
+
+const Header = _ref => {
+  let {
+    title,
+    center,
+    right
+  } = _ref;
+  return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+    className: "w-full px-4 py-2",
+    children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(BarLayout_BarLayout, {
+      left: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(Text, {
+        variant: "h3",
+        children: title
+      }),
+      center: center,
+      right: right
+    })
+  });
+};
+/* harmony default export */ const Header_Header = (Header);
+;// ./src/components/Footer/Footer.jsx
+
+
+/**
+ * @typedef {Object} FooterProps
+ * @property {React.ReactNode} [left]    Left footer content
+ * @property {React.ReactNode} [center]  Center footer content
+ * @property {React.ReactNode} [right]   Right footer content
+ * @property {string} [className]        Optional wrapper class
+ */
+
+/**
+ * @param {FooterProps} props
+ */
+
+const Footer = _ref => {
+  let {
+    left,
+    center,
+    right
+  } = _ref;
+  return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("div", {
+    className: "w-full px-4 py-2",
+    children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(BarLayout_BarLayout, {
+      left: left,
+      center: center,
+      right: right
+    })
+  });
+};
+/* harmony default export */ const Footer_Footer = (Footer);
+;// ./src/components/PageTemplate/PageTemplate.jsx
+
+
+
+
+/**
+ * @typedef {Object} PageTemplateProps
+ *
+ * @property {string} [headerTitle]                  Title passed to left Header
+ * @property {React.ReactNode} [headerCenter]        Center slot of Header
+ * @property {React.ReactNode} [headerRight]         Right slot of Header
+ *
+ * @property {React.ReactNode} [footerLeft]          Left slot of Footer
+ * @property {React.ReactNode} [footerCenter]        Center slot of Footer
+ * @property {React.ReactNode} [footerRight]         Right slot of Footer
+ *
+ * @property {React.ReactNode} children              Main page content
+ * @property {string} [className]                    Optional wrapper class
+ */
+
+/**
+ * @param {PageTemplateProps} props
+ */
+
+const PageTemplate = _ref => {
+  let {
+    headerTitle,
+    headerCenter,
+    headerRight,
+    footerLeft,
+    footerCenter,
+    footerRight,
+    children,
+    className = ""
+  } = _ref;
+  return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsxs)("div", {
+    className: "flex min-h-screen w-full flex-col ".concat(className),
+    children: [/*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(Header_Header, {
+      title: headerTitle,
+      center: headerCenter,
+      right: headerRight
+    }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("main", {
+      className: "flex-1 p-6",
+      children: children
+    }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(Footer_Footer, {
+      left: footerLeft,
+      center: footerCenter,
+      right: footerRight
+    })]
+  });
+};
+/* harmony default export */ const PageTemplate_PageTemplate = (PageTemplate);
 ;// ./src/index.js
 
 
@@ -23510,6 +23678,12 @@ function Sidebar(_ref) {
 
 
 
+
+
+
+
+
+
 
 
 module.exports = __webpack_exports__;