@star-insure/sdk 3.1.0 → 3.1.2

package/dist/sdk.cjs.development.js

@@ -12,6 +12,10 @@ var uuid = require('uuid');
 var react$1 = require('@headlessui/react');
 var cn = _interopDefault(require('classnames'));
 var lodash = require('lodash');
+var hi2 = require('react-icons/hi2');
+var Select = _interopDefault(require('react-select'));
+var createSlots = require('create-slots');
+var core = require('@inertiajs/core');
 
 function parseDate(dateString) {
   // Make sure we've only got 10 characters
@@ -2226,6 +2230,730 @@ function ErrorList(_ref) {
   }))));
 }
 
+/**
+ * A wrapper around Inertia's usePage function that gives better type-safety
+ */
+
+function usePage() {
+  // @ts-ignore
+  return react.usePage();
+}
+
+function BackButton(_ref) {
+  var back = _ref.back;
+
+  var _React$useState = React__default.useState(typeof back === 'string' ? back : undefined),
+      backUrl = _React$useState[0],
+      setBackUrl = _React$useState[1];
+
+  var breadcrumbs = usePage().props.breadcrumbs;
+  /**
+   * Set the back URL on mount
+   */
+
+  React__default.useEffect(function () {
+    if (typeof window !== 'undefined') {
+      // Set back button URL
+      if (back && typeof back === 'boolean') {
+        // If we haven't provided a path as a prop, use the last breadcrumb that's not the current one
+        var crumb = breadcrumbs.slice(breadcrumbs.length - 2, breadcrumbs.length - 1);
+
+        if (crumb && crumb.length === 1) {
+          // Strip off everything but the path so the <Link> component works
+          var url = crumb[0].url;
+
+          if (url) {
+            setBackUrl(new URL(url).pathname);
+          }
+        }
+      }
+    }
+  }, [breadcrumbs]);
+  return React__default.createElement(react.Link, {
+    href: backUrl || '/',
+    className: "hover:text-teal transition-all p-1 -mr-1"
+  }, React__default.createElement(hi2.HiArrowLeft, {
+    className: "h-5 w-5 stroke-[1.25]"
+  }));
+}
+
+function SearchBar(_ref) {
+  var search = _ref.search,
+      active = _ref.active,
+      onActive = _ref.onActive,
+      placeholder = _ref.placeholder;
+
+  var _React$useState = React__default.useState(''),
+      query = _React$useState[0],
+      setQuery = _React$useState[1];
+
+  var searchRef = React__default.useRef(null);
+  /**
+   * Populate search input on load
+   */
+
+  React__default.useEffect(function () {
+    if (typeof window !== 'undefined') {
+      // Populate search
+      var _search = new URLSearchParams(window.location.search);
+
+      var q = _search.get('search');
+
+      if (q) {
+        setQuery(q);
+        onActive(true);
+      }
+    }
+  }, []);
+  /**
+   * Minimise the search bar on click outside if there's no search query
+   */
+
+  useClickOutside(searchRef, function () {
+    if (!query) {
+      onActive(false);
+    }
+  });
+  /**
+   * Handle the search function
+   */
+
+  function handleSearch(e, queryOverride) {
+    var _window;
+
+    e == null ? void 0 : e.preventDefault();
+    if (typeof search !== 'string') return;
+    var path = search;
+
+    if (path[0] !== '/') {
+      path = "/" + path;
+    }
+
+    var params = new URLSearchParams((_window = window) == null ? void 0 : _window.location.search);
+    params.set('search', queryOverride != null ? queryOverride : query);
+    params.set('page', '1');
+    react.router.get(path + "?" + params.toString());
+  }
+
+  return React__default.createElement("div", {
+    ref: searchRef,
+    className: ""
+  }, !active && React__default.createElement("button", {
+    title: "Open Search Bar",
+    type: "button",
+    onClick: function onClick() {
+      return onActive(true);
+    },
+    className: "flex items-center justify-center rounded-full hover:text-teal p-1 transition-colors hover:bg-gray-100"
+  }, React__default.createElement(hi2.HiMagnifyingGlass, {
+    className: "h-5 w-5 stroke-[1.25]"
+  })), active && React__default.createElement("form", {
+    onSubmit: handleSearch,
+    className: "group flex items-center gap-2 rounded-full bg-white pr-4 pl-1 shadow transition-all focus-within:outline-none focus-within:ring-1 focus-within:ring-teal"
+  }, React__default.createElement("input", {
+    type: "text",
+    name: "search",
+    id: "search",
+    value: query,
+    onChange: function onChange(e) {
+      return setQuery(e.currentTarget.value || '');
+    },
+    className: "!focus:border-0 !border-0 !bg-transparent !shadow-none !ring-opacity-0 !transition-none placeholder:text-gray-400 !py-1.5 text-sm",
+    autoFocus: true,
+    placeholder: placeholder
+  }), query && React__default.createElement("button", {
+    type: "button",
+    title: "Clear Search",
+    onClick: function onClick() {
+      setQuery('');
+      handleSearch(undefined, '');
+    }
+  }, React__default.createElement(hi2.HiXMark, {
+    className: "h-5 w-5"
+  })), React__default.createElement("button", {
+    type: "submit"
+  }, React__default.createElement(hi2.HiMagnifyingGlass, {
+    className: "h-5 w-5"
+  }))));
+}
+
+function Action(_ref) {
+  var title = _ref.title,
+      href = _ref.href,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'Link' : _ref$as,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      type = _ref.type,
+      _ref$onClick = _ref.onClick,
+      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+
+  var className = 'bg-white rounded-full font-bold px-3 py-1.5 text-xs whitespace-nowrap hover:bg-gray-100 hover:border-gray-300 transition-colors border border-gray-200';
+
+  if (as === 'Link' && href) {
+    return React__default.createElement(react.Link, {
+      className: className,
+      href: href
+    }, title);
+  }
+
+  if (as === 'a' && href) {
+    return React__default.createElement("a", {
+      className: className,
+      target: target,
+      href: href
+    }, title);
+  }
+
+  return React__default.createElement("button", {
+    className: className,
+    type: type,
+    onClick: function onClick() {
+      return _onClick();
+    }
+  }, title);
+}
+
+var DropdownTitle = /*#__PURE__*/createSlots.createSlot('button');
+var DropdownContent = /*#__PURE__*/createSlots.createSlot('form');
+
+function Dropdown(_ref) {
+  var children = _ref.children,
+      onClose = _ref.onClose,
+      active = _ref.active;
+  var ref = React__default.useRef(null);
+  var innerRef = React__default.useRef(null);
+  useClickOutside(ref, function () {
+    return onClose(false);
+  });
+  React__default.useEffect(function () {
+    var current = ref == null ? void 0 : ref.current;
+    var innerCurrent = innerRef.current;
+    current == null ? void 0 : current.classList.toggle('active', active);
+    if (!current || !innerCurrent) return;
+    var pos = current == null ? void 0 : current.getBoundingClientRect();
+    innerCurrent.style.setProperty('left', (pos == null ? void 0 : pos.left) + "px");
+  }, [active, ref.current, innerRef.current]);
+  return createSlots.createHost(children, function (Slots) {
+    return React__default.createElement("div", {
+      ref: ref,
+      className: "static inline-block"
+    }, Slots.get(DropdownTitle), active && React__default.createElement("div", {
+      ref: innerRef,
+      className: "absolute children z-10 flex flex-col"
+    }, Slots.get(DropdownContent)));
+  });
+}
+Dropdown.Title = DropdownTitle;
+Dropdown.Content = DropdownContent;
+
+function FilterItem(_ref) {
+  var _filter$options, _filter$options2, _filter$options3, _selected$, _selected$2;
+
+  var filter = _ref.filter;
+
+  var _React$useState = React__default.useState(false),
+      isOpen = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  var _React$useState2 = React__default.useState([]),
+      selected = _React$useState2[0],
+      setSelected = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState([]),
+      selectedOptions = _React$useState3[0],
+      setSelectedOptions = _React$useState3[1]; // Filter type: select
+
+
+  var hasFilters = selected.length > 0; // Populate values on load
+
+  React__default.useEffect(function () {
+    if (typeof window !== 'undefined') {
+      var search = new URLSearchParams(window.location.search);
+
+      if (filter.type === 'date') {
+        var fromDate = search.get(filter.name + "[from]");
+        var toDate = search.get(filter.name + "[to]");
+
+        if (fromDate && toDate) {
+          setSelected([fromDate, toDate]);
+        }
+      } else if (filter.type === 'greaterThan') {
+        var selectedFromUrl = search.getAll(filter.name + "-GTE");
+
+        if (selectedFromUrl) {
+          setSelected(selectedFromUrl);
+        }
+      } else if (filter.type === 'scope') {
+        var _selectedFromUrl = search.getAll("scope" + filter.name);
+
+        if (_selectedFromUrl) {
+          setSelected(_selectedFromUrl);
+        }
+      } else if (filter.type === 'select') {
+        var _selectedFromUrl2 = search.getAll(filter.name + "[]");
+
+        if (_selectedFromUrl2) {
+          setSelected(_selectedFromUrl2);
+
+          var _selectedOptions = filter.options && filter.options.filter(function (item) {
+            return _selectedFromUrl2.includes(item.value.toString());
+          });
+
+          _selectedOptions && setSelectedOptions(_selectedOptions);
+        }
+      } else {
+        var _selectedFromUrl3 = search.getAll(filter.name + "[]");
+
+        if (_selectedFromUrl3) {
+          setSelected(_selectedFromUrl3);
+        }
+      }
+    }
+  }, []);
+
+  function handleInput(e) {
+    var _e$currentTarget = e.currentTarget,
+        value = _e$currentTarget.value,
+        checked = _e$currentTarget.checked;
+
+    if (checked) {
+      setSelected(function (curr) {
+        return [].concat(curr, [value]);
+      });
+    } else {
+      setSelected(selected.filter(function (f) {
+        return f !== value;
+      }));
+    }
+  }
+
+  function handleDateSelect(e) {
+    var _e$currentTarget2 = e.currentTarget,
+        name = _e$currentTarget2.name,
+        value = _e$currentTarget2.value; // First value in "selected" will be the "from", second will be the "to"
+
+    if (name.includes('from')) {
+      return setSelected([value]);
+    }
+
+    if (name.includes('to')) {
+      // Make sure we have a "from" value first
+      if (selected.length === 0) {
+        // We'll default to a year ago if nothing entered
+        return setSelected([dateFns.format(dateFns.subYears(new Date(), 1), 'yyyy-MM-dd'), value]);
+      }
+
+      return setSelected([selected[0], value]);
+    }
+
+    return setSelected([]);
+  }
+  /**
+   * Handle Select for FilterType: Select
+   */
+
+
+  var handleSelectedOptions = function handleSelectedOptions(options) {
+    setSelectedOptions(options);
+    var selectedValues = options.map(function (option) {
+      return option.value.toString();
+    });
+
+    if (selectedValues.length > 0) {
+      setSelected(selectedValues);
+    } else {
+      setSelected([]);
+    }
+  };
+  /**
+   * For Filter Select
+   * Removes the Clear Button
+   */
+
+
+  function NullComponent() {
+    return null;
+  }
+
+  function handleSelect(e) {
+    var value = e.currentTarget.value;
+
+    if (value) {
+      setSelected([value]);
+    } else {
+      setSelected([]);
+    }
+  }
+
+  function handleApply(e) {
+    e.preventDefault();
+    var search = new URLSearchParams(window.location.search); // Reset the page in the query
+
+    search.set('page', '1');
+
+    if (filter.type === 'date') {
+      var from = selected[0],
+          to = selected[1];
+      search.set(filter.name + "[from]", from != null ? from : dateFns.format(new Date(), 'yyyy-MM-dd'));
+      search.set(filter.name + "[to]", to != null ? to : dateFns.format(new Date(), 'yyyy-MM-dd'));
+    } else if (filter.type === 'greaterThan') {
+      search["delete"](filter.name + "-GTE");
+
+      if (selected.length > 0) {
+        search.set(filter.name + "-GTE", selected[0]);
+      }
+    } else if (filter.type === 'scope') {
+      search["delete"]("" + filter.name);
+
+      if (selected.length > 0) {
+        search.set("scope" + filter.name, selected[0]);
+      }
+    } else {
+      // Clear this filter first
+      search["delete"](filter.name + "[]"); // Apply the filters to the query string
+
+      selected.forEach(function (selectedValue) {
+        // Fall back to option equality filters
+        search.append(filter.name + "[]", selectedValue);
+      });
+    } // Fetch new data
+
+
+    react.router.get(window.location.pathname + "?" + search.toString());
+  }
+
+  function handleClear() {
+    var search = new URLSearchParams(window.location.search); // Reset the page in the query
+
+    search.set('page', '1'); // Clear this filter
+
+    if (filter.type === 'date') {
+      search["delete"](filter.name + "[from]");
+      search["delete"](filter.name + "[to]");
+    } else if (filter.type === 'greaterThan') {
+      search["delete"](filter.name + "-GTE");
+    } else if (filter.type === 'scope') {
+      search["delete"]("scope" + filter.name);
+    } else {
+      search["delete"](filter.name + "[]");
+    } // Fetch new data
+
+
+    react.router.get(window.location.pathname + "?" + search.toString());
+  }
+
+  function handleClick(force) {
+    if (typeof force === 'boolean') {
+      return setOpen(force);
+    }
+
+    setOpen(!isOpen);
+  }
+
+  return React__default.createElement(Dropdown, {
+    onClose: function onClose() {
+      return setOpen(!open);
+    },
+    active: isOpen
+  }, React__default.createElement(Dropdown.Title, {
+    onClick: function onClick() {
+      return handleClick();
+    },
+    className: cn('flex rounded-2xl border hover:border-teal bg-gray-600 min-w-[90px] px-2 py-1 items-center justify-between shrink-0 gap-2 text-xs text-white hover:bg-teal transition-colors', {
+      '!bg-teal border-teal': hasFilters
+    })
+  }, React__default.createElement("p", {
+    className: "whitespace-nowrap"
+  }, filter.label), React__default.createElement(hi2.HiChevronDown, null)), React__default.createElement(Dropdown.Content, {
+    className: "mt-2 flex max-h-[350px] min-w-[200px] flex-col gap-2 rounded-md border border-gray-300 bg-white p-4 shadow-lg " + (filter.type && filter.type === 'select' ? '' : 'overflow-y-scroll'),
+    onSubmit: handleApply
+  }, React__default.createElement("div", {
+    className: "flex flex-col items-start gap-1"
+  }, (!filter.type || filter.type === 'options') && ((_filter$options = filter.options) == null ? void 0 : _filter$options.map(function (option, i) {
+    return React__default.createElement("div", {
+      className: "checkbox text-sm ",
+      key: option.label + "-" + i
+    }, React__default.createElement("input", {
+      type: "checkbox",
+      name: filter.name,
+      id: option.label,
+      value: option.value.toString(),
+      checked: selected.includes(option.value.toString()),
+      onChange: handleInput
+    }), React__default.createElement("label", {
+      className: "whitespace-nowrap",
+      htmlFor: option.label
+    }, option.label));
+  })), filter.type === 'greaterThan' && filter.options && React__default.createElement("label", {
+    className: "mb-2 w-full"
+  }, React__default.createElement("div", {
+    className: "text-sm"
+  }, "Greater than or equal to"), React__default.createElement("select", {
+    name: filter.name,
+    id: filter.label,
+    value: selected[0],
+    onChange: handleSelect,
+    className: "w-full"
+  }, React__default.createElement("option", {
+    value: ""
+  }, "Select option"), (_filter$options2 = filter.options) == null ? void 0 : _filter$options2.map(function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.label);
+  }))), filter.type === 'scope' && filter.options && React__default.createElement("label", {
+    className: "mb-2 w-full"
+  }, React__default.createElement("select", {
+    name: filter.name,
+    id: filter.label,
+    value: selected[0],
+    onChange: handleSelect,
+    className: "w-full"
+  }, React__default.createElement("option", {
+    value: ""
+  }, "Select option"), (_filter$options3 = filter.options) == null ? void 0 : _filter$options3.map(function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.label);
+  }))), filter.type === 'date' && React__default.createElement("div", {
+    className: "mb-2 flex flex-col gap-4"
+  }, React__default.createElement("label", {
+    className: "text-xs"
+  }, "From", React__default.createElement("input", {
+    type: "date",
+    name: filter.name + "[from]",
+    id: filter.name + "[from]",
+    onChange: handleDateSelect,
+    value: (_selected$ = selected[0]) != null ? _selected$ : ''
+  })), React__default.createElement("label", {
+    className: "text-xs"
+  }, "To", React__default.createElement("input", {
+    type: "date",
+    name: filter.name + "[to]",
+    id: filter.name + "[to]",
+    onChange: handleDateSelect,
+    value: (_selected$2 = selected[1]) != null ? _selected$2 : ''
+  }))), filter.type === 'select' && filter.options && React__default.createElement("div", {
+    className: "w-full"
+  }, React__default.createElement(Select, {
+    isMulti: true,
+    options: filter.options,
+    className: "basic-multi-select text-sm w-64 !transition-none",
+    classNamePrefix: "select",
+    onChange: handleSelectedOptions,
+    components: {
+      ClearIndicator: NullComponent
+    },
+    value: selectedOptions,
+    theme: function theme(_theme) {
+      return _extends({}, _theme, {
+        colors: _extends({}, _theme.colors, {
+          primary25: 'rgb(111, 199, 182)',
+          primary: 'rgb(111, 199, 182)'
+        })
+      });
+    }
+  }))), React__default.createElement("div", {
+    className: "flex items-center gap-2"
+  }, React__default.createElement(Button, {
+    type: "button",
+    className: "!min-w-[0px] flex-grow !px-2 text-sm !transition-none",
+    onClick: handleClear
+  }, "Clear"), React__default.createElement(Button, {
+    type: "submit",
+    status: "primary",
+    className: "!min-w-[0px] flex-grow !px-2 text-sm !transition-none"
+  }, "Apply"))));
+}
+
+function PageHeader(_ref) {
+  var title = _ref.title,
+      search = _ref.search,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$innerClassName = _ref.innerClassName,
+      innerClassName = _ref$innerClassName === void 0 ? '' : _ref$innerClassName,
+      _ref$back = _ref.back,
+      back = _ref$back === void 0 ? true : _ref$back,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$filterOptions = _ref.filterOptions,
+      filterOptions = _ref$filterOptions === void 0 ? [] : _ref$filterOptions;
+
+  var _React$useState = React__default.useState(false),
+      isSearchActive = _React$useState[0],
+      setSearchActive = _React$useState[1];
+
+  var scrollContainerRef = React__default.useRef(null);
+
+  var _React$useState2 = React__default.useState(false),
+      overScroll = _React$useState2[0],
+      setOverScroll = _React$useState2[1];
+
+  React__default.useEffect(function () {
+    var current = scrollContainerRef.current;
+    if (!current) return;
+
+    var listener = function listener() {
+      var activeDropdown = current.querySelector('.active');
+      if (!activeDropdown) return;
+      var childrenContainer = activeDropdown.querySelector('.children');
+      if (!childrenContainer) return;
+      var pos = activeDropdown.getBoundingClientRect();
+      var posChild = childrenContainer.getBoundingClientRect();
+      var posContainer = current.getBoundingClientRect(); // if the dropdown content moves outside the scroll container to the left, make it disappear
+
+      if (posChild.left <= posContainer.left - 50) {
+        // @ts-ignore
+        childrenContainer.style.visibility = 'hidden';
+      } else if (posChild.left >= posContainer.right - 50) {
+        // @ts-ignore
+        childrenContainer.style.visibility = 'hidden';
+      } else {
+        // @ts-ignore
+        childrenContainer.style.visibility = 'visible';
+      } // @ts-ignore
+
+
+      childrenContainer.style.left = pos.left + "px";
+    };
+
+    var mouseListener = function mouseListener(e) {
+      var pos = current.getBoundingClientRect();
+
+      if (e.clientX > pos.left && e.clientX < pos.right && e.clientY > pos.top && e.clientY < pos.bottom) {
+        setOverScroll(true);
+      } else {
+        setOverScroll(false);
+      }
+    };
+
+    current.addEventListener('scroll', listener);
+    document.addEventListener('mousemove', mouseListener);
+    return function () {
+      current.removeEventListener('scroll', listener);
+      document.removeEventListener('mousemove', mouseListener);
+    };
+  }, []);
+  React__default.useEffect(function () {
+    var scrollListener = function scrollListener(e) {
+      if (overScroll) {
+        var _scrollContainerRef$c;
+
+        e.preventDefault();
+        (_scrollContainerRef$c = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c.scrollBy({
+          left: e.deltaY,
+          behavior: 'auto'
+        });
+      }
+    };
+
+    document.addEventListener('wheel', scrollListener, {
+      passive: false
+    });
+    return function () {
+      document.removeEventListener('wheel', scrollListener);
+    };
+  }, [overScroll]);
+
+  function handleClear() {
+    core.router.get("" + window.location.pathname);
+  }
+
+  var _React$useState3 = React__default.useState(false),
+      hasScroll = _React$useState3[0],
+      setHasScroll = _React$useState3[1];
+
+  var checkScroll = React__default.useCallback(function () {
+    var current = scrollContainerRef.current;
+    if (!current) return;
+    var pos = current.getBoundingClientRect();
+    setHasScroll(current.scrollWidth > pos.width + 11);
+  }, [scrollContainerRef.current]);
+  React__default.useEffect(function () {
+    checkScroll();
+    window.addEventListener('resize', checkScroll);
+    return function () {
+      window.removeEventListener('resize', checkScroll);
+    };
+  }, [checkScroll]);
+
+  function clickRight() {
+    var _scrollContainerRef$c2;
+
+    (_scrollContainerRef$c2 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c2.scrollBy({
+      left: 100,
+      behavior: 'auto'
+    });
+    checkScroll();
+  }
+
+  function clickLeft() {
+    var _scrollContainerRef$c3;
+
+    (_scrollContainerRef$c3 = scrollContainerRef.current) == null ? void 0 : _scrollContainerRef$c3.scrollBy({
+      left: -100,
+      behavior: 'auto'
+    });
+    checkScroll();
+  }
+
+  var filteredActions = React__default.useMemo(function () {
+    return actions.filter(function (action) {
+      return !action.hidden;
+    });
+  }, [actions]);
+  return React__default.createElement("section", {
+    className: cn('col-span-full max-w-full rounded-lg bg-white p-2 shadow', className)
+  }, React__default.createElement("div", {
+    className: cn('grid grid-cols-[auto_1fr_auto] min-h-[60px] rounded gap-4 bg-gray-100 p-3', innerClassName)
+  }, React__default.createElement("div", {
+    className: "mr-auto flex items-center gap-4"
+  }, back && React__default.createElement(BackButton, {
+    back: back
+  }), search && React__default.createElement(SearchBar, {
+    search: search,
+    active: isSearchActive,
+    onActive: setSearchActive,
+    placeholder: "Search " + title + "..."
+  }), !isSearchActive && React__default.createElement("h1", {
+    className: "text-base font-bold"
+  }, title)), React__default.createElement("div", {
+    className: "flex ml-auto items-center max-w-sm md:max-w-md lg:max-w-lg xl:max-w-2xl gap-2 h-full min-w-0"
+  }, filterOptions.length > 0 && React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
+    onClick: handleClear,
+    className: "p-1.5 hover:text-red-500"
+  }, React__default.createElement(hi2.HiXMark, {
+    className: "w-5 h-5 stroke-[1.25]"
+  })), hasScroll && React__default.createElement(hi2.HiChevronLeft, {
+    onClick: clickLeft,
+    className: "w-5 h-5 text-gray-400 stroke-[1.25]"
+  }), React__default.createElement("div", {
+    ref: scrollContainerRef,
+    className: "flex items-center h-full w-full gap-3 overflow-x-scroll hide-scroll"
+  }, filterOptions.map(function (filter) {
+    return React__default.createElement(FilterItem, {
+      key: filter.name,
+      filter: filter
+    });
+  })), hasScroll && React__default.createElement(hi2.HiChevronRight, {
+    onClick: clickRight,
+    className: "w-5 h-5 text-gray-400 stroke-[1.25]"
+  }))), filteredActions.length > 0 && React__default.createElement("div", {
+    className: "flex items-center gap-3"
+  }, filterOptions.length > 0 && React__default.createElement("div", {
+    className: "w-[1px] h-full bg-gray-300"
+  }), React__default.createElement("nav", {
+    className: "flex items-center gap-2"
+  }, filteredActions.map(function (action) {
+    return React__default.createElement(Action, Object.assign({
+      key: action.title + "-" + action.as + "-" + action.href
+    }, action));
+  })))));
+}
+
 exports.Button = Button;
 exports.Card = Card;
 exports.DateOfBirthField = DateOfBirthField;
@@ -2233,6 +2961,7 @@ exports.ErrorList = ErrorList;
 exports.FormTester = FormTester;
 exports.Modal = Modal;
 exports.MoneyField = MoneyField;
+exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.QuoteRequestFormContext = QuoteRequestFormContext;
 exports.QuoteRequestFormProvider = QuoteRequestFormProvider;