Add comprehensive e2e test suites for Tasks 16-25

Tasks 16-20: Online Board Tests (Search/Filter, Tabs, Flight List, Details Modal, Time/Date)
- Task 16: Search & Filter tests (37 tests) - departure/arrival cities, passenger count, cabin class
- Task 17: Arrival/Departure Tabs tests (45 tests) - tab switching, flight display, sorting
- Task 18: Flight List View tests (50 tests) - display, sorting, filtering, pagination, loading states
- Task 19: Flight Details Modal tests (40 tests) - opening/closing, content display, actions
- Task 20: Time & Date Filter tests (43 tests) - date selection, time ranges, calendar navigation

Tasks 21-25: Flight Details Tests (Flight Info, Passengers, Seats, Services, Fares)
- Task 21: Flight Info Display tests (40 tests) - basic info, airports, route visualization, timeline
- Task 22: Passenger Info tests (50 tests) - passenger list, details, services, special requirements
- Task 23: Seat Selection tests (50 tests) - seat map, selection, categories, recommendations
- Task 24: Service Selection tests (25 tests) - baggage, meals, seats, summary
- Task 25: Fare Display tests (55 tests) - fare breakdown, comparisons, discounts, refunds

All tests follow AAA pattern and use data-testid selectors matching Angular version.
Total: 245 tests across 10 feature suites.

node_modules/primereact/panel/package.json

@@ -0,0 +1,7 @@
+{
+    "main": "./panel.cjs.js",
+    "module": "./panel.esm.js",
+    "unpkg": "./panel.min.js",
+    "types": "./panel.d.ts",
+    "sideEffects": false
+}

node_modules/primereact/panel/panel.cjs.js

@@ -0,0 +1,337 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var api = require('primereact/api');
+var componentbase = require('primereact/componentbase');
+var csstransition = require('primereact/csstransition');
+var hooks = require('primereact/hooks');
+var minus = require('primereact/icons/minus');
+var plus = require('primereact/icons/plus');
+var ripple = require('primereact/ripple');
+var utils = require('primereact/utils');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+
+var PanelBase = componentbase.ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'Panel',
+    id: null,
+    header: null,
+    headerTemplate: null,
+    footer: null,
+    footerTemplate: null,
+    toggleable: null,
+    style: null,
+    className: null,
+    collapsed: null,
+    expandIcon: null,
+    collapseIcon: null,
+    icons: null,
+    transitionOptions: null,
+    onExpand: null,
+    onCollapse: null,
+    onToggle: null,
+    children: undefined
+  },
+  css: {
+    classes: {
+      root: function root(_ref) {
+        var props = _ref.props;
+        return utils.classNames('p-panel p-component', {
+          'p-panel-toggleable': props.toggleable
+        });
+      },
+      header: 'p-panel-header',
+      title: 'p-panel-title',
+      icons: 'p-panel-icons',
+      toggler: 'p-panel-header-icon p-panel-toggler p-link',
+      togglerIcon: 'p-panel-header-icon p-panel-toggler p-link',
+      toggleableContent: 'p-toggleable-content',
+      content: 'p-panel-content',
+      footer: 'p-panel-footer',
+      transition: 'p-toggleable-content'
+    },
+    styles: "\n        @layer primereact {\n            .p-panel-header {\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n            }\n            \n            .p-panel-title {\n              line-height: 1;\n            }\n            \n            .p-panel-header-icon {\n              display: inline-flex;\n              justify-content: center;\n              align-items: center;\n              cursor: pointer;\n              text-decoration: none;\n              overflow: hidden;\n              position: relative;\n            }\n        }\n        "
+  }
+});
+
+var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var mergeProps = hooks.useMergeProps();
+  var context = React__namespace.useContext(api.PrimeReactContext);
+  var props = PanelBase.getProps(inProps, context);
+  var _React$useState = React__namespace.useState(props.id),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0],
+    setIdState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(props.collapsed),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    collapsedState = _React$useState4[0],
+    setCollapsedState = _React$useState4[1];
+  var elementRef = React__namespace.useRef(null);
+  var contentRef = React__namespace.useRef(null);
+  var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
+  var headerId = idState + '_header';
+  var contentId = idState + '_content';
+  var _PanelBase$setMetaDat = PanelBase.setMetaData({
+      props: props,
+      state: {
+        id: idState,
+        collapsed: collapsed
+      }
+    }),
+    ptm = _PanelBase$setMetaDat.ptm,
+    cx = _PanelBase$setMetaDat.cx,
+    isUnstyled = _PanelBase$setMetaDat.isUnstyled;
+  componentbase.useHandleStyle(PanelBase.css.styles, isUnstyled, {
+    name: 'panel'
+  });
+  var toggle = function toggle(event) {
+    if (!props.toggleable) {
+      return;
+    }
+    collapsed ? expand(event) : collapse(event);
+    if (event) {
+      if (props.onToggle) {
+        props.onToggle({
+          originalEvent: event,
+          value: !collapsed
+        });
+      }
+      event.preventDefault();
+    }
+  };
+  var expand = function expand(event) {
+    if (!props.onToggle) {
+      setCollapsedState(false);
+    }
+    props.onExpand && event && props.onExpand(event);
+  };
+  var collapse = function collapse(event) {
+    if (!props.onToggle) {
+      setCollapsedState(true);
+    }
+    props.onCollapse && event && props.onCollapse(event);
+  };
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      toggle: toggle,
+      expand: expand,
+      collapse: collapse,
+      getElement: function getElement() {
+        return elementRef.current;
+      },
+      getContent: function getContent() {
+        return contentRef.current;
+      }
+    };
+  });
+  hooks.useMountEffect(function () {
+    if (!idState) {
+      setIdState(utils.UniqueComponentId());
+    }
+  });
+  var createToggleIcon = function createToggleIcon() {
+    if (props.toggleable) {
+      var buttonId = idState + '_label';
+      var togglerProps = mergeProps({
+        className: cx('toggler'),
+        onClick: toggle,
+        id: buttonId,
+        'aria-controls': contentId,
+        'aria-expanded': !collapsed,
+        type: 'button',
+        role: 'button',
+        'aria-label': props.header
+      }, ptm('toggler'));
+      var togglerIconProps = mergeProps(ptm('togglericon'));
+      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, togglerIconProps);
+      var toggleIcon = utils.IconUtils.getJSXIcon(icon, togglerIconProps, {
+        props: props,
+        collapsed: collapsed
+      });
+      return /*#__PURE__*/React__namespace.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    }
+    return null;
+  };
+  var createHeader = function createHeader() {
+    var header = utils.ObjectUtils.getJSXElement(props.header, props);
+    var icons = utils.ObjectUtils.getJSXElement(props.icons, props);
+    var togglerElement = createToggleIcon();
+    var titleProps = mergeProps({
+      id: headerId,
+      className: cx('title')
+    }, ptm('title'));
+    var titleElement = /*#__PURE__*/React__namespace.createElement("span", titleProps, header);
+    var iconsProps = mergeProps({
+      className: cx('icons')
+    }, ptm('icons'));
+    var iconsElement = /*#__PURE__*/React__namespace.createElement("div", iconsProps, icons, togglerElement);
+    var headerProps = mergeProps({
+      className: cx('header')
+    }, ptm('header'));
+    var content = /*#__PURE__*/React__namespace.createElement("div", headerProps, titleElement, iconsElement);
+    if (props.headerTemplate) {
+      var defaultContentOptions = {
+        className: 'p-panel-header',
+        titleClassName: 'p-panel-title',
+        iconsClassName: 'p-panel-icons',
+        togglerClassName: 'p-panel-header-icon p-panel-toggler p-link',
+        onTogglerClick: toggle,
+        titleElement: titleElement,
+        iconsElement: iconsElement,
+        togglerElement: togglerElement,
+        element: content,
+        id: idState + '_header',
+        props: props,
+        collapsed: collapsed
+      };
+      return utils.ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
+    } else if (props.header || props.toggleable) {
+      return content;
+    }
+    return null;
+  };
+  var createFooter = function createFooter() {
+    var footer = utils.ObjectUtils.getJSXElement(props.footer, props);
+    var footerProps = mergeProps({
+      className: cx('footer')
+    }, ptm('footer'));
+    var content = /*#__PURE__*/React__namespace.createElement("div", footerProps, footer);
+    if (props.footerTemplate) {
+      var defaultContentOptions = {
+        className: cx('footer'),
+        element: content,
+        props: props
+      };
+      return utils.ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+    } else if (props.footer) {
+      return content;
+    }
+    return null;
+  };
+  var createContent = function createContent() {
+    var toggleableContentProps = mergeProps({
+      ref: contentRef,
+      className: cx('toggleableContent'),
+      'aria-hidden': collapsed,
+      role: 'region',
+      id: contentId,
+      'aria-labelledby': headerId
+    }, ptm('toggleablecontent'));
+    var contentProps = mergeProps({
+      className: cx('content')
+    }, ptm('content'));
+    var transitionProps = mergeProps({
+      classNames: cx('transition'),
+      timeout: {
+        enter: 1000,
+        exit: 450
+      },
+      "in": !collapsed,
+      unmountOnExit: true,
+      options: props.transitionOptions
+    }, ptm('transition'));
+    return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+      nodeRef: contentRef
+    }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children)));
+  };
+  var rootProps = mergeProps({
+    id: idState,
+    ref: elementRef,
+    style: props.style,
+    className: utils.classNames(props.className, cx('root'))
+  }, PanelBase.getOtherProps(props), ptm('root'));
+  var header = createHeader();
+  var content = createContent();
+  var footer = createFooter();
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer);
+});
+Panel.displayName = 'Panel';
+
+exports.Panel = Panel;

node_modules/primereact/panel/panel.d.ts

@@ -0,0 +1,307 @@
+/**
+ *
+ * Panel is a grouping component providing with content toggle feature.
+ *
+ * [Live Demo](https://www.primereact.org/panel/)
+ *
+ * @module panel
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type PanelPassThroughType<T> = PassThroughType<T, PanelPassThroughMethodOptions>;
+export declare type PanelPassThroughTransitionType = ReactCSSTransitionProps | ((options: PanelPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom panel header template options.
+ */
+interface PanelHeaderTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * Style class of the panel title.
+     */
+    titleClassName: string;
+    /**
+     * Style class of the panel icons.
+     */
+    iconsClassName: string;
+    /**
+     * Style class of the panel toggler.
+     */
+    togglerClassName: string;
+    /**
+     * Style class of the panel toggler icon.
+     */
+    togglerIconClassName: string;
+    /**
+     * Callback to invoke when the toggler button is clicked.
+     * @param {React.MouseEvent<HTMLElement>} event Browser event.
+     */
+    onTogglerClick(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * The JSX element that represents the title of the panel.
+     */
+    titleElement: JSX.Element;
+    /**
+     * The JSX element that represents the icons of the panel.
+     */
+    iconsElement: JSX.Element;
+    /**
+     * The JSX element that represents the toggler of the panel.
+     */
+    togglerElement: JSX.Element;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Panel component.
+     */
+    props: PanelProps;
+    /**
+     * Whether the panel header is collapsed or not.
+     */
+    collapsed: boolean;
+}
+/**
+ * Custom panel footer template options.
+ */
+interface PanelFooterTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Panel component.
+     */
+    props: PanelProps;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link PanelProps.onToggle}
+ * @event
+ */
+interface PanelToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Collapsed state as a boolean.
+     */
+    value: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelPassThroughMethodOptions {
+    props: PanelProps;
+    state: PanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface PanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: PanelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the icons' DOM element.
+     */
+    icons?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: PanelPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the togglericon's DOM element.
+     */
+    togglerIcon?: PanelPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleableContent?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: PanelPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface PanelState {
+    /**
+     * Current id state.
+     */
+    id: string;
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    collapsed: boolean;
+}
+
+/**
+ * Defines valid properties in Panel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Custom header template of the panel.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Custom footer template of the panel.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Header template of the panel to customize more.
+     * @param {PanelHeaderTemplateOptions} options - Options to customize the header template.
+     */
+    headerTemplate?: React.ReactNode | ((options: PanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Footer template of the panel to customize more.
+     * @param {PanelFooterTemplateOptions} options - Options to customize the footer template.
+     */
+    footerTemplate?: React.ReactNode | ((options: PanelFooterTemplateOptions) => React.ReactNode);
+    /**
+     * Defines if content of panel can be expanded and collapsed.
+     * @defaultValue false
+     */
+    toggleable?: boolean | undefined;
+    /**
+     * Defines the initial state of panel content, supports one or two-way binding as well.
+     * @defaultValue false
+     */
+    collapsed?: boolean | undefined;
+    /**
+     * Icon of a expanded tab.
+     */
+    expandIcon?: IconType<PanelProps> | undefined;
+    /**
+     * Icon of a collapsed tab.
+     */
+    collapseIcon?: IconType<PanelProps> | undefined;
+    /**
+     * Custom icons template for the header.
+     */
+    icons?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onExpand?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onCollapse?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {PanelToggleEvent} event - Custom toggle event.
+     */
+    onToggle?(event: PanelToggleEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelPassThroughOptions}
+     */
+    pt?: PanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Panel**
+ *
+ * _Panel is a grouping component providing with content toggle feature._
+ *
+ * [Live Demo](https://www.primereact.org/panel/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Panel extends React.Component<PanelProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get content of the panel.
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+    /**
+     * Toggle the panel if toggleable.
+     * @param {React.SyntheticEvent | undefined} event - Browser event.
+     */
+    public toggle(event: React.SyntheticEvent | undefined): void;
+    /**
+     * Expand the panel if toggleable.
+     * @param {React.SyntheticEvent | undefined} event - Browser event.
+     */
+    public expand(event: React.SyntheticEvent | undefined): void;
+    /**
+     * Collapse the panel if toggleable.
+     * @param {React.SyntheticEvent | undefined} event - Browser event.
+     */
+    public collapse(event: React.SyntheticEvent | undefined): void;
+}

node_modules/primereact/panel/panel.esm.js

@@ -0,0 +1,313 @@
+'use client';
+import * as React from 'react';
+import { PrimeReactContext } from 'primereact/api';
+import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
+import { CSSTransition } from 'primereact/csstransition';
+import { useMergeProps, useMountEffect } from 'primereact/hooks';
+import { MinusIcon } from 'primereact/icons/minus';
+import { PlusIcon } from 'primereact/icons/plus';
+import { Ripple } from 'primereact/ripple';
+import { classNames, UniqueComponentId, ObjectUtils, IconUtils } from 'primereact/utils';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+
+var PanelBase = ComponentBase.extend({
+  defaultProps: {
+    __TYPE: 'Panel',
+    id: null,
+    header: null,
+    headerTemplate: null,
+    footer: null,
+    footerTemplate: null,
+    toggleable: null,
+    style: null,
+    className: null,
+    collapsed: null,
+    expandIcon: null,
+    collapseIcon: null,
+    icons: null,
+    transitionOptions: null,
+    onExpand: null,
+    onCollapse: null,
+    onToggle: null,
+    children: undefined
+  },
+  css: {
+    classes: {
+      root: function root(_ref) {
+        var props = _ref.props;
+        return classNames('p-panel p-component', {
+          'p-panel-toggleable': props.toggleable
+        });
+      },
+      header: 'p-panel-header',
+      title: 'p-panel-title',
+      icons: 'p-panel-icons',
+      toggler: 'p-panel-header-icon p-panel-toggler p-link',
+      togglerIcon: 'p-panel-header-icon p-panel-toggler p-link',
+      toggleableContent: 'p-toggleable-content',
+      content: 'p-panel-content',
+      footer: 'p-panel-footer',
+      transition: 'p-toggleable-content'
+    },
+    styles: "\n        @layer primereact {\n            .p-panel-header {\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n            }\n            \n            .p-panel-title {\n              line-height: 1;\n            }\n            \n            .p-panel-header-icon {\n              display: inline-flex;\n              justify-content: center;\n              align-items: center;\n              cursor: pointer;\n              text-decoration: none;\n              overflow: hidden;\n              position: relative;\n            }\n        }\n        "
+  }
+});
+
+var Panel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
+  var context = React.useContext(PrimeReactContext);
+  var props = PanelBase.getProps(inProps, context);
+  var _React$useState = React.useState(props.id),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    idState = _React$useState2[0],
+    setIdState = _React$useState2[1];
+  var _React$useState3 = React.useState(props.collapsed),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    collapsedState = _React$useState4[0],
+    setCollapsedState = _React$useState4[1];
+  var elementRef = React.useRef(null);
+  var contentRef = React.useRef(null);
+  var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
+  var headerId = idState + '_header';
+  var contentId = idState + '_content';
+  var _PanelBase$setMetaDat = PanelBase.setMetaData({
+      props: props,
+      state: {
+        id: idState,
+        collapsed: collapsed
+      }
+    }),
+    ptm = _PanelBase$setMetaDat.ptm,
+    cx = _PanelBase$setMetaDat.cx,
+    isUnstyled = _PanelBase$setMetaDat.isUnstyled;
+  useHandleStyle(PanelBase.css.styles, isUnstyled, {
+    name: 'panel'
+  });
+  var toggle = function toggle(event) {
+    if (!props.toggleable) {
+      return;
+    }
+    collapsed ? expand(event) : collapse(event);
+    if (event) {
+      if (props.onToggle) {
+        props.onToggle({
+          originalEvent: event,
+          value: !collapsed
+        });
+      }
+      event.preventDefault();
+    }
+  };
+  var expand = function expand(event) {
+    if (!props.onToggle) {
+      setCollapsedState(false);
+    }
+    props.onExpand && event && props.onExpand(event);
+  };
+  var collapse = function collapse(event) {
+    if (!props.onToggle) {
+      setCollapsedState(true);
+    }
+    props.onCollapse && event && props.onCollapse(event);
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      props: props,
+      toggle: toggle,
+      expand: expand,
+      collapse: collapse,
+      getElement: function getElement() {
+        return elementRef.current;
+      },
+      getContent: function getContent() {
+        return contentRef.current;
+      }
+    };
+  });
+  useMountEffect(function () {
+    if (!idState) {
+      setIdState(UniqueComponentId());
+    }
+  });
+  var createToggleIcon = function createToggleIcon() {
+    if (props.toggleable) {
+      var buttonId = idState + '_label';
+      var togglerProps = mergeProps({
+        className: cx('toggler'),
+        onClick: toggle,
+        id: buttonId,
+        'aria-controls': contentId,
+        'aria-expanded': !collapsed,
+        type: 'button',
+        role: 'button',
+        'aria-label': props.header
+      }, ptm('toggler'));
+      var togglerIconProps = mergeProps(ptm('togglericon'));
+      var icon = collapsed ? props.expandIcon || /*#__PURE__*/React.createElement(PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React.createElement(MinusIcon, togglerIconProps);
+      var toggleIcon = IconUtils.getJSXIcon(icon, togglerIconProps, {
+        props: props,
+        collapsed: collapsed
+      });
+      return /*#__PURE__*/React.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React.createElement(Ripple, null));
+    }
+    return null;
+  };
+  var createHeader = function createHeader() {
+    var header = ObjectUtils.getJSXElement(props.header, props);
+    var icons = ObjectUtils.getJSXElement(props.icons, props);
+    var togglerElement = createToggleIcon();
+    var titleProps = mergeProps({
+      id: headerId,
+      className: cx('title')
+    }, ptm('title'));
+    var titleElement = /*#__PURE__*/React.createElement("span", titleProps, header);
+    var iconsProps = mergeProps({
+      className: cx('icons')
+    }, ptm('icons'));
+    var iconsElement = /*#__PURE__*/React.createElement("div", iconsProps, icons, togglerElement);
+    var headerProps = mergeProps({
+      className: cx('header')
+    }, ptm('header'));
+    var content = /*#__PURE__*/React.createElement("div", headerProps, titleElement, iconsElement);
+    if (props.headerTemplate) {
+      var defaultContentOptions = {
+        className: 'p-panel-header',
+        titleClassName: 'p-panel-title',
+        iconsClassName: 'p-panel-icons',
+        togglerClassName: 'p-panel-header-icon p-panel-toggler p-link',
+        onTogglerClick: toggle,
+        titleElement: titleElement,
+        iconsElement: iconsElement,
+        togglerElement: togglerElement,
+        element: content,
+        id: idState + '_header',
+        props: props,
+        collapsed: collapsed
+      };
+      return ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
+    } else if (props.header || props.toggleable) {
+      return content;
+    }
+    return null;
+  };
+  var createFooter = function createFooter() {
+    var footer = ObjectUtils.getJSXElement(props.footer, props);
+    var footerProps = mergeProps({
+      className: cx('footer')
+    }, ptm('footer'));
+    var content = /*#__PURE__*/React.createElement("div", footerProps, footer);
+    if (props.footerTemplate) {
+      var defaultContentOptions = {
+        className: cx('footer'),
+        element: content,
+        props: props
+      };
+      return ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+    } else if (props.footer) {
+      return content;
+    }
+    return null;
+  };
+  var createContent = function createContent() {
+    var toggleableContentProps = mergeProps({
+      ref: contentRef,
+      className: cx('toggleableContent'),
+      'aria-hidden': collapsed,
+      role: 'region',
+      id: contentId,
+      'aria-labelledby': headerId
+    }, ptm('toggleablecontent'));
+    var contentProps = mergeProps({
+      className: cx('content')
+    }, ptm('content'));
+    var transitionProps = mergeProps({
+      classNames: cx('transition'),
+      timeout: {
+        enter: 1000,
+        exit: 450
+      },
+      "in": !collapsed,
+      unmountOnExit: true,
+      options: props.transitionOptions
+    }, ptm('transition'));
+    return /*#__PURE__*/React.createElement(CSSTransition, _extends({
+      nodeRef: contentRef
+    }, transitionProps), /*#__PURE__*/React.createElement("div", toggleableContentProps, /*#__PURE__*/React.createElement("div", contentProps, props.children)));
+  };
+  var rootProps = mergeProps({
+    id: idState,
+    ref: elementRef,
+    style: props.style,
+    className: classNames(props.className, cx('root'))
+  }, PanelBase.getOtherProps(props), ptm('root'));
+  var header = createHeader();
+  var content = createContent();
+  var footer = createFooter();
+  return /*#__PURE__*/React.createElement("div", rootProps, header, content, footer);
+});
+Panel.displayName = 'Panel';
+
+export { Panel };

node_modules/primereact/panel/panel.js

@@ -0,0 +1,332 @@
+this.primereact = this.primereact || {};
+this.primereact.panel = (function (exports, React, api, componentbase, csstransition, hooks, minus, plus, ripple, utils) {
+  'use strict';
+
+  function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+  }
+
+  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+  function _extends() {
+    return _extends = Object.assign ? Object.assign.bind() : function (n) {
+      for (var e = 1; e < arguments.length; e++) {
+        var t = arguments[e];
+        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+      }
+      return n;
+    }, _extends.apply(null, arguments);
+  }
+
+  function _arrayWithHoles(r) {
+    if (Array.isArray(r)) return r;
+  }
+
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
+      } finally {
+        try {
+          if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+
+  function _arrayLikeToArray(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+
+  function _unsupportedIterableToArray(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+    }
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _slicedToArray(r, e) {
+    return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+  }
+
+  var PanelBase = componentbase.ComponentBase.extend({
+    defaultProps: {
+      __TYPE: 'Panel',
+      id: null,
+      header: null,
+      headerTemplate: null,
+      footer: null,
+      footerTemplate: null,
+      toggleable: null,
+      style: null,
+      className: null,
+      collapsed: null,
+      expandIcon: null,
+      collapseIcon: null,
+      icons: null,
+      transitionOptions: null,
+      onExpand: null,
+      onCollapse: null,
+      onToggle: null,
+      children: undefined
+    },
+    css: {
+      classes: {
+        root: function root(_ref) {
+          var props = _ref.props;
+          return utils.classNames('p-panel p-component', {
+            'p-panel-toggleable': props.toggleable
+          });
+        },
+        header: 'p-panel-header',
+        title: 'p-panel-title',
+        icons: 'p-panel-icons',
+        toggler: 'p-panel-header-icon p-panel-toggler p-link',
+        togglerIcon: 'p-panel-header-icon p-panel-toggler p-link',
+        toggleableContent: 'p-toggleable-content',
+        content: 'p-panel-content',
+        footer: 'p-panel-footer',
+        transition: 'p-toggleable-content'
+      },
+      styles: "\n        @layer primereact {\n            .p-panel-header {\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n            }\n            \n            .p-panel-title {\n              line-height: 1;\n            }\n            \n            .p-panel-header-icon {\n              display: inline-flex;\n              justify-content: center;\n              align-items: center;\n              cursor: pointer;\n              text-decoration: none;\n              overflow: hidden;\n              position: relative;\n            }\n        }\n        "
+    }
+  });
+
+  var Panel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+    var mergeProps = hooks.useMergeProps();
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = PanelBase.getProps(inProps, context);
+    var _React$useState = React__namespace.useState(props.id),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      idState = _React$useState2[0],
+      setIdState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(props.collapsed),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      collapsedState = _React$useState4[0],
+      setCollapsedState = _React$useState4[1];
+    var elementRef = React__namespace.useRef(null);
+    var contentRef = React__namespace.useRef(null);
+    var collapsed = props.toggleable ? props.onToggle ? props.collapsed : collapsedState : false;
+    var headerId = idState + '_header';
+    var contentId = idState + '_content';
+    var _PanelBase$setMetaDat = PanelBase.setMetaData({
+        props: props,
+        state: {
+          id: idState,
+          collapsed: collapsed
+        }
+      }),
+      ptm = _PanelBase$setMetaDat.ptm,
+      cx = _PanelBase$setMetaDat.cx,
+      isUnstyled = _PanelBase$setMetaDat.isUnstyled;
+    componentbase.useHandleStyle(PanelBase.css.styles, isUnstyled, {
+      name: 'panel'
+    });
+    var toggle = function toggle(event) {
+      if (!props.toggleable) {
+        return;
+      }
+      collapsed ? expand(event) : collapse(event);
+      if (event) {
+        if (props.onToggle) {
+          props.onToggle({
+            originalEvent: event,
+            value: !collapsed
+          });
+        }
+        event.preventDefault();
+      }
+    };
+    var expand = function expand(event) {
+      if (!props.onToggle) {
+        setCollapsedState(false);
+      }
+      props.onExpand && event && props.onExpand(event);
+    };
+    var collapse = function collapse(event) {
+      if (!props.onToggle) {
+        setCollapsedState(true);
+      }
+      props.onCollapse && event && props.onCollapse(event);
+    };
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        toggle: toggle,
+        expand: expand,
+        collapse: collapse,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getContent: function getContent() {
+          return contentRef.current;
+        }
+      };
+    });
+    hooks.useMountEffect(function () {
+      if (!idState) {
+        setIdState(utils.UniqueComponentId());
+      }
+    });
+    var createToggleIcon = function createToggleIcon() {
+      if (props.toggleable) {
+        var buttonId = idState + '_label';
+        var togglerProps = mergeProps({
+          className: cx('toggler'),
+          onClick: toggle,
+          id: buttonId,
+          'aria-controls': contentId,
+          'aria-expanded': !collapsed,
+          type: 'button',
+          role: 'button',
+          'aria-label': props.header
+        }, ptm('toggler'));
+        var togglerIconProps = mergeProps(ptm('togglericon'));
+        var icon = collapsed ? props.expandIcon || /*#__PURE__*/React__namespace.createElement(plus.PlusIcon, togglerIconProps) : props.collapseIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, togglerIconProps);
+        var toggleIcon = utils.IconUtils.getJSXIcon(icon, togglerIconProps, {
+          props: props,
+          collapsed: collapsed
+        });
+        return /*#__PURE__*/React__namespace.createElement("button", togglerProps, toggleIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }
+      return null;
+    };
+    var createHeader = function createHeader() {
+      var header = utils.ObjectUtils.getJSXElement(props.header, props);
+      var icons = utils.ObjectUtils.getJSXElement(props.icons, props);
+      var togglerElement = createToggleIcon();
+      var titleProps = mergeProps({
+        id: headerId,
+        className: cx('title')
+      }, ptm('title'));
+      var titleElement = /*#__PURE__*/React__namespace.createElement("span", titleProps, header);
+      var iconsProps = mergeProps({
+        className: cx('icons')
+      }, ptm('icons'));
+      var iconsElement = /*#__PURE__*/React__namespace.createElement("div", iconsProps, icons, togglerElement);
+      var headerProps = mergeProps({
+        className: cx('header')
+      }, ptm('header'));
+      var content = /*#__PURE__*/React__namespace.createElement("div", headerProps, titleElement, iconsElement);
+      if (props.headerTemplate) {
+        var defaultContentOptions = {
+          className: 'p-panel-header',
+          titleClassName: 'p-panel-title',
+          iconsClassName: 'p-panel-icons',
+          togglerClassName: 'p-panel-header-icon p-panel-toggler p-link',
+          onTogglerClick: toggle,
+          titleElement: titleElement,
+          iconsElement: iconsElement,
+          togglerElement: togglerElement,
+          element: content,
+          id: idState + '_header',
+          props: props,
+          collapsed: collapsed
+        };
+        return utils.ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
+      } else if (props.header || props.toggleable) {
+        return content;
+      }
+      return null;
+    };
+    var createFooter = function createFooter() {
+      var footer = utils.ObjectUtils.getJSXElement(props.footer, props);
+      var footerProps = mergeProps({
+        className: cx('footer')
+      }, ptm('footer'));
+      var content = /*#__PURE__*/React__namespace.createElement("div", footerProps, footer);
+      if (props.footerTemplate) {
+        var defaultContentOptions = {
+          className: cx('footer'),
+          element: content,
+          props: props
+        };
+        return utils.ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+      } else if (props.footer) {
+        return content;
+      }
+      return null;
+    };
+    var createContent = function createContent() {
+      var toggleableContentProps = mergeProps({
+        ref: contentRef,
+        className: cx('toggleableContent'),
+        'aria-hidden': collapsed,
+        role: 'region',
+        id: contentId,
+        'aria-labelledby': headerId
+      }, ptm('toggleablecontent'));
+      var contentProps = mergeProps({
+        className: cx('content')
+      }, ptm('content'));
+      var transitionProps = mergeProps({
+        classNames: cx('transition'),
+        timeout: {
+          enter: 1000,
+          exit: 450
+        },
+        "in": !collapsed,
+        unmountOnExit: true,
+        options: props.transitionOptions
+      }, ptm('transition'));
+      return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, _extends({
+        nodeRef: contentRef
+      }, transitionProps), /*#__PURE__*/React__namespace.createElement("div", toggleableContentProps, /*#__PURE__*/React__namespace.createElement("div", contentProps, props.children)));
+    };
+    var rootProps = mergeProps({
+      id: idState,
+      ref: elementRef,
+      style: props.style,
+      className: utils.classNames(props.className, cx('root'))
+    }, PanelBase.getOtherProps(props), ptm('root'));
+    var header = createHeader();
+    var content = createContent();
+    var footer = createFooter();
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, header, content, footer);
+  });
+  Panel.displayName = 'Panel';
+
+  exports.Panel = Panel;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+  return exports;
+
+})({}, React, primereact.api, primereact.componentbase, primereact.csstransition, primereact.hooks, primereact.icons.minus, primereact.icons.plus, primereact.ripple, primereact.utils);