@shlinkio/shlink-frontend-kit 0.7.2 → 0.8.0

package/README.md

@@ -1,3 +1,15 @@
 # Shlink frontend kit
 
 React components and utilities for Shlink frontend projects
+
+## Tailwind alternatives
+
+This library provides some tailwindcss-based components. To use them make sure to import components from `@shlinkio/shlink-frontend-kit/tailwind` and you add the following instructions to your tailwind stylesheet:
+
+```css
+@import 'tailwindcss' prefix(tw);
+
+/* Add these two lines */
+@source '../node_modules/@shlinkio/shlink-frontend-kit';
+@import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
+```

package/dist/index.css

@@ -1 +1 @@
-@media (max-width: 991px){.responsive-table__header{display:none}}@media (max-width: 991px){.responsive-table.table>:not(:first-child){border:none}}@media (max-width: 991px){.responsive-table__row{display:block;border-bottom:1px solid var(--border-color);border-top:2px solid var(--border-color);position:relative}.responsive-table__row:not(:last-child){margin-bottom:10px}}.responsive-table__cell.responsive-table__cell{vertical-align:middle!important}@media (max-width: 991px){.responsive-table__cell.responsive-table__cell{display:block;width:100%;position:relative;padding:.5rem;font-size:.9rem}.responsive-table__cell.responsive-table__cell[data-th]:before{content:attr(data-th) ": ";font-weight:700}.responsive-table__cell.responsive-table__cell:last-child{position:absolute;top:3.5px;right:.5rem;width:auto;padding:0;border:none}}@media (max-width: 991px){.responsive-table__cell.responsive-table__cell .btn-sm{padding:.1rem .4rem;margin-top:.16rem}}html:not([data-theme=dark]){--color-scheme: initial;--primary-color: #ffffff;--primary-color-alfa: rgba(255, 255, 255, .5);--secondary-color: #f5f6fe;--text-color: #232323;--border-color: rgba(0, 0, 0, .125);--active-color: #eeeeee;--brand-color: #4696e5;--input-color: #ffffff;--input-disabled-color: #f5f6fe;--input-border-color: rgba(0, 0, 0, .19);--input-text-color: #495057;--table-border-color: #dee2e6;--table-highlight-color: rgba(0, 0, 0, .075);--btn-close-filter: initial}html[data-theme=dark]{--color-scheme: dark;--primary-color: #161b22;--primary-color-alfa: rgba(22, 27, 34, .8);--secondary-color: #0f131a;--text-color: rgb(201, 209, 217);--border-color: rgba(255, 255, 255, .15);--active-color: #0f131a;--brand-color: #0b2d4e;--input-color: rgb(17.9928571429, 22.0821428571, 27.8071428571);--input-disabled-color: rgb(26.0071428571, 31.9178571429, 40.1928571429);--input-border-color: rgba(255, 255, 255, .15);--input-text-color: rgb(201, 209, 217);--table-border-color: #393d43;--table-highlight-color: rgba(255, 255, 255, .15);--btn-close-filter: invert(1)}:root{scroll-behavior:auto;color-scheme:var(--color-scheme)}html,body,#root{height:100%;background:var(--secondary-color);color:var(--text-color)}a,.btn-link{text-decoration:none}a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,.btn-link:hover{text-decoration:underline}.bg-main{background-color:#4696e5!important}.bg-warning{color:#232323}.card-body,.card-header,.list-group-item{background-color:transparent}.card-footer{background-color:var(--primary-color-alfa)}.card.card{box-shadow:0 .125rem .25rem #00000013;background-color:var(--primary-color);border-color:var(--border-color)}.list-group,.modal-content,.page-link,.page-item.disabled .page-link,.dropdown-menu{background-color:var(--primary-color)}.modal-header.modal-header,.modal-footer.modal-footer,.card-header.card-header,.card-footer.card-footer,.table.table thead th,.table.table th,.table.table td,.page-link.page-link,.page-link.page-link:hover,.page-item.page-item.disabled .page-link.page-link,.dropdown-divider.dropdown-divider,.dropdown-menu.dropdown-menu,.list-group-item.list-group-item,.modal-content.modal-content,hr{border-color:var(--border-color)}.table-bordered,.table-bordered thead th,.table-bordered thead td{border-color:var(--table-border-color)}.page-link:hover,.page-link:focus{background-color:var(--secondary-color)}.page-item.active .page-link{background-color:var(--brand-color);border-color:var(--brand-color)}.pagination .page-link{cursor:pointer}@media (min-width: 1200px){.container-xl{max-width:1320px}}@media (max-width: 767px){.container-xl{padding-right:0;padding-left:0}}.btn-block{display:block;width:100%}.btn-primary,.btn-primary:hover,.btn-primary:disabled,.btn-primary:active,.btn-primary:focus-visible,.btn-primary.active,.btn-outline-primary:hover,.btn-outline-primary:active.btn-outline-primary:active,.btn-outline-primary:focus-visible.btn-outline-primary:focus-visible,.btn-outline-primary.active.btn-outline-primary.active{color:#fff}.dropdown-item,.dropdown-item-text{color:var(--text-color)}.dropdown-item:not(:disabled){cursor:pointer}.dropdown-item:focus:not(:disabled),.dropdown-item:hover:not(:disabled),.dropdown-item.active:not(:disabled),.dropdown-item:active:not(:disabled){background-color:var(--active-color)!important;color:var(--text-color)!important}.dropdown-item--danger.dropdown-item--danger{color:#dc3545}.dropdown-item--danger.dropdown-item--danger:hover,.dropdown-item--danger.dropdown-item--danger:active,.dropdown-item--danger.dropdown-item--danger.active{color:#dc3545!important}.badge-main{color:#fff;background-color:var(--brand-color)}.close,.close:hover,.table,.table-hover>tbody>tr:hover>*,.table-hover>tbody>tr>*{color:var(--text-color)}.btn-close{filter:var(--btn-close-filter)}.table-hover tbody tr:hover{background-color:var(--secondary-color)}.form-control.form-control,.form-control.form-control:focus,.form-select.form-select,.form-select.form-select:focus{background-color:var(--primary-color);border-color:var(--input-border-color);color:var(--input-text-color)}.form-control.disabled,.form-control:disabled,.form-select.disabled,.form-select:disabled{background-color:var(--input-disabled-color);cursor:not-allowed}.card .form-control:not(:disabled),.card .form-control:not(:disabled):hover,.card .form-select:not(:disabled),.card .form-select:not(:disabled):hover,.modal .form-control:not(:disabled),.modal .form-control:not(:disabled):hover,.modal .form-select:not(:disabled),.modal .form-select:not(:disabled):hover{background-color:var(--input-color)}.card input[type=text]:not(:disabled),.dropdown input[type=text]:not(:disabled){background-color:var(--input-color)!important}.card input[type=date]:not(:disabled),.dropdown input[type=date]:not(:disabled){background-color:var(--input-color)!important}.card input[type=datetime-local]:not(:disabled),.dropdown input[type=datetime-local]:not(:disabled){background-color:var(--input-color)!important}.card input[type=password]:not(:disabled),.dropdown input[type=password]:not(:disabled){background-color:var(--input-color)!important}.card input[type=number]:not(:disabled),.dropdown input[type=number]:not(:disabled){background-color:var(--input-color)!important}.card input[type=email]:not(:disabled),.dropdown input[type=email]:not(:disabled){background-color:var(--input-color)!important}.card input[type=search]:not(:disabled),.dropdown input[type=search]:not(:disabled){background-color:var(--input-color)!important}.card input[type=url]:not(:disabled),.dropdown input[type=url]:not(:disabled){background-color:var(--input-color)!important}.input-group-text.input-group-text{border-color:var(--input-border-color)}.dropdown label{color:var(--text-color)!important}.table-active,.table-active>th,.table-active>td{background-color:var(--table-highlight-color)!important}@media (max-width: 767px){.navbar-brand{margin:0 auto!important}}.indivisible{white-space:nowrap}.pointer{cursor:pointer}.progress-bar{background-color:#4696e5}@media (max-width: 575px){.btn-xs-block{width:100%;display:block}}@media (max-width: 991px){.btn-md-block{width:100%;display:block}}@media (max-width: 767px){.btn-sm-block{width:100%;display:block}}.search-field{position:relative}.search-field:focus-within{z-index:1}.search-field__input.search-field__input{padding-left:40px;padding-right:40px}.search-field__input--no-border.search-field__input--no-border{border:none;border-radius:0}.search-field__icon{position:absolute;top:50%;transform:translateY(-50%);left:15px;color:#6c757d}.search-field__close{position:absolute;top:50%;transform:translateY(-50%);right:10px;cursor:pointer}.dropdown-btn__toggle.dropdown-btn__toggle{text-align:left}.dropdown-btn__toggle.dropdown-btn__toggle--with-caret{padding-right:1.75rem}.dropdown-btn__toggle.dropdown-btn__toggle,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{color:var(--input-text-color);background-color:var(--primary-color);border-color:var(--input-border-color)}.card .dropdown-btn__toggle.dropdown-btn__toggle,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.card .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{background-color:var(--input-color)}.dropdown-btn__toggle.dropdown-btn__toggle.disabled,.dropdown-btn__toggle.dropdown-btn__toggle:disabled{background-color:var(--input-disabled-color)}.dropdown-btn__toggle.dropdown-btn__toggle:after{position:absolute;top:50%;transform:translateY(-50%);right:.75rem}.nav-pills__nav{position:sticky!important;top:55px;z-index:2}.nav-pills__nav-link.nav-pills__nav-link{border-radius:0!important;padding-bottom:calc(.5rem - 3px)!important;border-bottom:3px solid transparent!important;color:#5d6778;font-weight:700;cursor:pointer;text-decoration:none}@media (min-width: 576px) and (max-width: 991px){.nav-pills__nav-link.nav-pills__nav-link{font-size:89%}}.nav-pills__nav-link:hover{color:#4696e5!important}.nav-pills__nav-link.active{border-color:#4696e5!important;background-color:var(--primary-color)!important;color:#4696e5!important}.ordering-dropdown__menu--link.ordering-dropdown__menu--link{min-width:11rem}.ordering-dropdown__sort-icon{margin:3.5px 0 0;float:right}
+@media (max-width: 991px){.responsive-table__header{display:none}}@media (max-width: 991px){.responsive-table.table>:not(:first-child){border:none}}@media (max-width: 991px){.responsive-table__row{display:block;border-bottom:1px solid var(--border-color);border-top:2px solid var(--border-color);position:relative}.responsive-table__row:not(:last-child){margin-bottom:10px}}.responsive-table__cell.responsive-table__cell{vertical-align:middle!important}@media (max-width: 991px){.responsive-table__cell.responsive-table__cell{display:block;width:100%;position:relative;padding:.5rem;font-size:.9rem}.responsive-table__cell.responsive-table__cell[data-th]:before{content:attr(data-th) ": ";font-weight:700}.responsive-table__cell.responsive-table__cell:last-child{position:absolute;top:3.5px;right:.5rem;width:auto;padding:0;border:none}}@media (max-width: 991px){.responsive-table__cell.responsive-table__cell .btn-sm{padding:.1rem .4rem;margin-top:.16rem}}html:not([data-theme=dark]){--color-scheme: initial;--primary-color: #ffffff;--primary-color-alfa: rgba(255, 255, 255, .5);--secondary-color: #f5f6fe;--text-color: #232323;--border-color: rgba(0, 0, 0, .125);--active-color: #eeeeee;--brand-color: #4696e5;--input-color: #ffffff;--input-disabled-color: #f5f6fe;--input-border-color: rgba(0, 0, 0, .19);--input-text-color: #495057;--table-border-color: #dee2e6;--table-highlight-color: rgba(0, 0, 0, .075);--btn-close-filter: initial}html[data-theme=dark]{--color-scheme: dark;--primary-color: #161b22;--primary-color-alfa: rgba(22, 27, 34, .8);--secondary-color: #0f131a;--text-color: rgb(201, 209, 217);--border-color: rgba(255, 255, 255, .15);--active-color: #0f131a;--brand-color: #0b2d4e;--input-color: rgb(17.9928571429, 22.0821428571, 27.8071428571);--input-disabled-color: rgb(26.0071428571, 31.9178571429, 40.1928571429);--input-border-color: rgba(255, 255, 255, .15);--input-text-color: rgb(201, 209, 217);--table-border-color: #393d43;--table-highlight-color: rgba(255, 255, 255, .15);--btn-close-filter: invert(1)}:root{scroll-behavior:auto;color-scheme:var(--color-scheme)}html,body,#root{height:100%;background:var(--secondary-color);color:var(--text-color)}a,.btn-link{text-decoration:none}a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,.btn-link:hover{text-decoration:underline}.bg-main{background-color:#4696e5!important}.bg-warning{color:#232323}.card-body,.card-header,.list-group-item{background-color:transparent}.card-footer{background-color:var(--primary-color-alfa)}.card.card{box-shadow:0 .125rem .25rem #00000013;background-color:var(--primary-color);border-color:var(--border-color)}.list-group,.modal-content,.page-link,.page-item.disabled .page-link,.dropdown-menu{background-color:var(--primary-color)}.modal-header.modal-header,.modal-footer.modal-footer,.card-header.card-header,.card-footer.card-footer,.table.table thead th,.table.table th,.table.table td,.page-link.page-link,.page-link.page-link:hover,.page-item.page-item.disabled .page-link.page-link,.dropdown-divider.dropdown-divider,.dropdown-menu.dropdown-menu,.list-group-item.list-group-item,.modal-content.modal-content,hr{border-color:var(--border-color)}.table-bordered,.table-bordered thead th,.table-bordered thead td{border-color:var(--table-border-color)}.page-link:hover,.page-link:focus{background-color:var(--secondary-color)}.page-item.active .page-link{background-color:var(--brand-color);border-color:var(--brand-color)}.pagination .page-link{cursor:pointer}@media (min-width: 1200px){.container-xl{max-width:1320px}}@media (max-width: 767px){.container-xl{padding-right:0;padding-left:0}}.btn-block{display:block;width:100%}.btn-primary,.btn-primary:hover,.btn-primary:disabled,.btn-primary:active,.btn-primary:focus-visible,.btn-primary.active,.btn-outline-primary:hover,.btn-outline-primary:active.btn-outline-primary:active,.btn-outline-primary:focus-visible.btn-outline-primary:focus-visible,.btn-outline-primary.active.btn-outline-primary.active{color:#fff}.dropdown-item,.dropdown-item-text{color:var(--text-color)}.dropdown-item:not(:disabled){cursor:pointer}.dropdown-item:focus:not(:disabled),.dropdown-item:hover:not(:disabled),.dropdown-item.active:not(:disabled),.dropdown-item:active:not(:disabled){background-color:var(--active-color)!important;color:var(--text-color)!important}.dropdown-item--danger.dropdown-item--danger{color:#dc3545}.dropdown-item--danger.dropdown-item--danger:hover,.dropdown-item--danger.dropdown-item--danger:active,.dropdown-item--danger.dropdown-item--danger.active{color:#dc3545!important}.badge-main{color:#fff;background-color:var(--brand-color)}.close,.close:hover,.table,.table-hover>tbody>tr:hover>*,.table-hover>tbody>tr>*{color:var(--text-color)}.btn-close{filter:var(--btn-close-filter)}.table-hover tbody tr:hover{background-color:var(--secondary-color)}.form-control.form-control,.form-control.form-control:focus,.form-select.form-select,.form-select.form-select:focus{background-color:var(--primary-color);border-color:var(--input-border-color);color:var(--input-text-color)}.form-control.disabled,.form-control:disabled,.form-select.disabled,.form-select:disabled{background-color:var(--input-disabled-color);cursor:not-allowed}.card .form-control:not(:disabled),.card .form-control:not(:disabled):hover,.card .form-select:not(:disabled),.card .form-select:not(:disabled):hover,.modal .form-control:not(:disabled),.modal .form-control:not(:disabled):hover,.modal .form-select:not(:disabled),.modal .form-select:not(:disabled):hover{background-color:var(--input-color)}.card input[type=text]:not(:disabled),.dropdown input[type=text]:not(:disabled){background-color:var(--input-color)!important}.card input[type=date]:not(:disabled),.dropdown input[type=date]:not(:disabled){background-color:var(--input-color)!important}.card input[type=datetime-local]:not(:disabled),.dropdown input[type=datetime-local]:not(:disabled){background-color:var(--input-color)!important}.card input[type=password]:not(:disabled),.dropdown input[type=password]:not(:disabled){background-color:var(--input-color)!important}.card input[type=number]:not(:disabled),.dropdown input[type=number]:not(:disabled){background-color:var(--input-color)!important}.card input[type=email]:not(:disabled),.dropdown input[type=email]:not(:disabled){background-color:var(--input-color)!important}.card input[type=search]:not(:disabled),.dropdown input[type=search]:not(:disabled){background-color:var(--input-color)!important}.card input[type=url]:not(:disabled),.dropdown input[type=url]:not(:disabled){background-color:var(--input-color)!important}.input-group-text.input-group-text{border-color:var(--input-border-color)}.dropdown label{color:var(--text-color)!important}.table-active,.table-active>th,.table-active>td{background-color:var(--table-highlight-color)!important}@media (max-width: 767px){.navbar-brand{margin:0 auto!important}}.indivisible{white-space:nowrap}.pointer{cursor:pointer}.progress-bar{background-color:#4696e5}@media (max-width: 575px){.btn-xs-block{width:100%;display:block}}@media (max-width: 991px){.btn-md-block{width:100%;display:block}}@media (max-width: 767px){.btn-sm-block{width:100%;display:block}}.search-field{position:relative}.search-field:focus-within{z-index:1}.search-field__input.search-field__input{padding-left:40px;padding-right:40px}.search-field__input--no-border.search-field__input--no-border{border:none;border-radius:0}.search-field__icon{position:absolute;top:50%;transform:translateY(-50%);left:15px;color:#6c757d}.search-field__close{position:absolute;top:50%;transform:translateY(-50%);right:10px;cursor:pointer}.dropdown-btn__toggle.dropdown-btn__toggle{text-align:left}.dropdown-btn__toggle.dropdown-btn__toggle--with-caret{padding-right:1.75rem}.dropdown-btn__toggle.dropdown-btn__toggle,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{color:var(--input-text-color);background-color:var(--primary-color);border-color:var(--input-border-color)}.card .dropdown-btn__toggle.dropdown-btn__toggle,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.card .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{background-color:var(--input-color)}.dropdown-btn__toggle.dropdown-btn__toggle.disabled,.dropdown-btn__toggle.dropdown-btn__toggle:disabled{background-color:var(--input-disabled-color)}.dropdown-btn__toggle.dropdown-btn__toggle:after{position:absolute;top:50%;transform:translateY(-50%);right:.75rem}.nav-pills__nav{position:sticky!important;top:55px;z-index:2}.nav-pills__nav-link.nav-pills__nav-link{border-radius:0!important;padding-bottom:calc(.5rem - 3px)!important;border-bottom:3px solid transparent!important;color:#5d6778;font-weight:700;cursor:pointer;text-decoration:none}@media (min-width: 576px) and (max-width: 991px){.nav-pills__nav-link.nav-pills__nav-link{font-size:89%}}.nav-pills__nav-link:hover{color:#4696e5!important}.nav-pills__nav-link.active{border-color:#4696e5!important;background-color:var(--primary-color)!important;color:#4696e5!important}

package/dist/index.d.ts

@@ -18,7 +18,13 @@ export declare const changeThemeInMarkup: (theme: Theme) => void | undefined;
 
 export declare const Checkbox: FC<BooleanControlProps>;
 
-export declare const determineOrderDir: <T extends string = string>(currentField: T, newField?: T, currentOrderDir?: OrderDir) => OrderDir;
+export declare function determineOrder<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): Order<Fields>;
+
+export declare function determineOrder<Fields extends string = string>(currentField: Fields, newField?: Fields, currentOrderDir?: OrderDir): Order<Fields>;
+
+export declare function determineOrderDir<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): OrderDir;
+
+export declare function determineOrderDir<Fields extends string = string>(currentField: Fields, newField?: Fields, currentOrderDir?: OrderDir): OrderDir;
 
 export declare const DropdownBtn: FC<DropdownBtnProps>;
 
@@ -104,6 +110,12 @@ export declare type Order<Fields> = {
 
 export declare type OrderDir = 'ASC' | 'DESC' | undefined;
 
+export declare type OrderDirChange<Fields extends string = string> = {
+    currentField: Fields;
+    newField?: Fields;
+    currentOrderDir?: OrderDir;
+};
+
 export declare function OrderingDropdown<T extends string = string>({ items, order, onChange, isButton, right, prefixed }: OrderingDropdownProps<T>): JSX.Element;
 
 export declare type OrderingDropdownProps<T extends string = string> = {
@@ -115,6 +127,10 @@ export declare type OrderingDropdownProps<T extends string = string> = {
     prefixed?: boolean;
 };
 
+/**
+ * Convert provided order object to string, with the pattern `${order.field}-${order.di}`.
+ * @return - A `string` if the `dir` prop is set, `undefined` otherwise.
+ */
 export declare const orderToString: <T>(order: Order<T>) => string | undefined;
 
 /**
@@ -177,7 +193,7 @@ declare type ToggleResult = [boolean, () => void, () => void, () => void];
 
 export declare const ToggleSwitch: FC<BooleanControlProps>;
 
-export declare const useElementRef: <T>() => RefObject<T | null>;
+export declare const useElementRef: <T extends HTMLElement>() => RefObject<T | null>;
 
 export declare const useOrder: <T>(initialOrder: Order<T>) => [Order<T>, (orderField?: T, orderDir?: OrderDir) => void];
 

package/dist/index.js

@@ -1,97 +1,97 @@
-import { jsx as s, jsxs as d, Fragment as N } from "react/jsx-runtime";
-import { faCircleNotch as I, faSearch as y, faEllipsisV as D, faSortAmountUp as E, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
-import { clsx as h } from "clsx";
-import { Card as C, CardHeader as F, CardBody as H, Dropdown as M, DropdownToggle as v, DropdownMenu as O, NavItem as $, NavLink as G, Nav as U, UncontrolledDropdown as j, DropdownItem as w } from "reactstrap";
-import { useId as S, useState as b, useCallback as f, useRef as _, useMemo as q, Children as Q, isValidElement as V } from "react";
-import { useLocation as Y, NavLink as z } from "react-router";
-const ie = ({ className: r, children: e, loading: t = !1, type: n = "default", fullWidth: o = !1 }) => /* @__PURE__ */ s(
-  C,
+import { jsx as o, jsxs as d, Fragment as N } from "react/jsx-runtime";
+import { faCircleNotch as I, faSearch as A, faEllipsisV as E, faSortAmountUp as F, faSortAmountDown as P } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
+import { clsx as u } from "clsx";
+import { Card as _, CardHeader as H, CardBody as M, Dropdown as $, DropdownToggle as k, DropdownMenu as S, NavItem as j, NavLink as G, Nav as U, UncontrolledDropdown as q, DropdownItem as g } from "reactstrap";
+import { useId as T, useState as w, useRef as C, useCallback as f, useMemo as Q, Children as V, isValidElement as Y } from "react";
+import { useLocation as W, NavLink as z } from "react-router";
+const de = ({ className: e, children: r, loading: t = !1, type: n = "default", fullWidth: c = !1 }) => /* @__PURE__ */ o(
+  _,
   {
     body: !0,
-    className: h(r, {
-      "w-100": o,
-      "w-75 mx-auto": !o,
+    className: u(e, {
+      "w-100": c,
+      "w-75 mx-auto": !c,
       "border-danger": n === "error"
     }),
     children: /* @__PURE__ */ d(
       "h3",
       {
-        className: h("text-center mb-0", {
+        className: u("text-center mb-0", {
           "text-muted": n === "default",
           "text-danger": n === "error"
         }),
         children: [
-          t && /* @__PURE__ */ s(g, { icon: I, spin: !0 }),
-          t && /* @__PURE__ */ s("span", { className: "ms-2", children: e ?? "Loading..." }),
-          !t && e
+          t && /* @__PURE__ */ o(b, { icon: I, spin: !0 }),
+          t && /* @__PURE__ */ o("span", { className: "ms-2", children: r ?? "Loading..." }),
+          !t && r
         ]
       }
     )
   }
-), J = ({ title: r, children: e, bodyClassName: t, ...n }) => /* @__PURE__ */ d(C, { ...n, children: [
-  r && /* @__PURE__ */ s(F, { role: "heading", "aria-level": 4, children: r }),
-  /* @__PURE__ */ s(H, { className: t, children: e })
-] }), de = ({ children: r, type: e, className: t, small: n = !1 }) => /* @__PURE__ */ s(
+), J = ({ title: e, children: r, bodyClassName: t, ...n }) => /* @__PURE__ */ d(_, { ...n, children: [
+  e && /* @__PURE__ */ o(H, { role: "heading", "aria-level": 4, children: e }),
+  /* @__PURE__ */ o(M, { className: t, children: r })
+] }), me = ({ children: e, type: r, className: t, small: n = !1 }) => /* @__PURE__ */ o(
   J,
   {
     role: "document",
-    className: h("text-center", {
+    className: u("text-center", {
       "w-75 mx-auto": !n,
       "w-100": n,
-      "bg-main": e === "success",
-      "bg-danger": e === "error",
-      "bg-warning": e === "warning",
-      "text-white": e !== "warning"
+      "bg-main": r === "success",
+      "bg-danger": r === "error",
+      "bg-warning": r === "warning",
+      "text-white": r !== "warning"
     }, t),
-    bodyClassName: h({ "p-2": n }),
-    children: r
+    bodyClassName: u({ "p-2": n }),
+    children: e
   }
-), A = ({ checked: r = !1, onChange: e, className: t, children: n, type: o, inline: c = !1 }) => {
-  const l = S(), a = (u) => e == null ? void 0 : e(u.target.checked, u), i = {
-    "form-switch": o === "switch",
-    "form-checkbox": o === "checkbox"
-  }, m = c ? { display: "inline-block" } : {};
-  return /* @__PURE__ */ d("span", { className: h("form-check", i, t), style: m, children: [
-    /* @__PURE__ */ s("input", { type: "checkbox", className: "form-check-input", id: l, checked: r, onChange: a }),
-    /* @__PURE__ */ s("label", { className: "form-check-label", htmlFor: l, children: n })
+), x = ({ checked: e = !1, onChange: r, className: t, children: n, type: c, inline: s = !1 }) => {
+  const l = T(), a = (h) => r == null ? void 0 : r(h.target.checked, h), i = {
+    "form-switch": c === "switch",
+    "form-checkbox": c === "checkbox"
+  }, m = s ? { display: "inline-block" } : {};
+  return /* @__PURE__ */ d("span", { className: u("form-check", i, t), style: m, children: [
+    /* @__PURE__ */ o("input", { type: "checkbox", className: "form-check-input", id: l, checked: e, onChange: a }),
+    /* @__PURE__ */ o("label", { className: "form-check-label", htmlFor: l, children: n })
   ] });
-}, me = (r) => /* @__PURE__ */ s(A, { type: "checkbox", ...r }), he = (r) => /* @__PURE__ */ s(A, { type: "switch", ...r }), W = ({ children: r, label: e, className: t = "", labelClassName: n = "", noMargin: o = !1, id: c }) => /* @__PURE__ */ d("div", { className: `${t} ${o ? "" : "mb-3"}`, children: [
-  /* @__PURE__ */ s("label", { className: `form-label ${n}`, htmlFor: c, children: e }),
-  r
-] }), ue = ({ children: r, value: e, onChange: t, type: n, required: o, placeholder: c, className: l, labelClassName: a }) => {
-  const i = S();
-  return /* @__PURE__ */ s(W, { label: /* @__PURE__ */ d(N, { children: [
-    r,
+}, ue = (e) => /* @__PURE__ */ o(x, { type: "checkbox", ...e }), he = (e) => /* @__PURE__ */ o(x, { type: "switch", ...e }), X = ({ children: e, label: r, className: t = "", labelClassName: n = "", noMargin: c = !1, id: s }) => /* @__PURE__ */ d("div", { className: `${t} ${c ? "" : "mb-3"}`, children: [
+  /* @__PURE__ */ o("label", { className: `form-label ${n}`, htmlFor: s, children: r }),
+  e
+] }), fe = ({ children: e, value: r, onChange: t, type: n, required: c, placeholder: s, className: l, labelClassName: a }) => {
+  const i = T();
+  return /* @__PURE__ */ o(X, { label: /* @__PURE__ */ d(N, { children: [
+    e,
     ":"
-  ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ s(
+  ] }), className: l, labelClassName: a, id: i, children: /* @__PURE__ */ o(
     "input",
     {
       id: i,
       className: "form-control",
       type: n ?? "text",
-      value: e,
-      required: o ?? !0,
-      placeholder: c,
+      value: r,
+      required: c ?? !0,
+      placeholder: s,
       onChange: (m) => t(m.target.value)
     }
   ) });
-}, X = 500;
+}, Z = 500;
 let p;
-const k = () => {
+const v = () => {
   p !== null && clearTimeout(p), p = null;
-}, fe = ({ onChange: r, className: e, large: t = !0, noBorder: n = !1, initialValue: o = "", setTimeout_: c = setTimeout }) => {
-  const [l, a] = b(o), i = (m, u = X) => {
-    a(m), k(), p = c(() => {
-      r(m), k();
-    }, u);
+}, pe = ({ onChange: e, className: r, large: t = !0, noBorder: n = !1, initialValue: c = "", setTimeout_: s = setTimeout }) => {
+  const [l, a] = w(c), i = (m, h = Z) => {
+    a(m), v(), p = s(() => {
+      e(m), v();
+    }, h);
   };
-  return /* @__PURE__ */ d("div", { className: h("search-field", e), children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ d("div", { className: u("search-field", r), children: [
+    /* @__PURE__ */ o(
       "input",
       {
         type: "text",
-        className: h("form-control search-field__input", {
+        className: u("form-control search-field__input", {
           "form-control-lg": t,
           "search-field__input--no-border": n
         }),
@@ -100,8 +100,8 @@ const k = () => {
         onChange: (m) => i(m.target.value)
       }
     ),
-    /* @__PURE__ */ s(g, { icon: y, className: "search-field__icon" }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ o(b, { icon: A, className: "search-field__icon" }),
+    /* @__PURE__ */ o(
       "button",
       {
         "aria-label": "Clear search",
@@ -113,170 +113,177 @@ const k = () => {
       }
     )
   ] });
-}, Z = (r) => {
-  const e = new URLSearchParams(r), t = {};
-  return e.forEach((n, o) => {
-    if (o.endsWith("[]")) {
-      const c = o.slice(0, -2);
-      t[c] ?? (t[c] = []), t[c].push(n);
+}, B = (e) => {
+  const r = new URLSearchParams(e), t = {};
+  return r.forEach((n, c) => {
+    if (c.endsWith("[]")) {
+      const s = c.slice(0, -2);
+      t[s] ?? (t[s] = []), t[s].push(n);
     } else
-      t[o] = n;
+      t[c] = n;
   }), t;
-}, pe = (r) => {
-  const e = new URLSearchParams();
-  for (const [t, n] of Object.entries(r))
-    n !== void 0 && (Array.isArray(n) ? n.forEach((o) => e.append(`${t}[]`, `${o}`)) : e.append(t, `${n}`));
-  return e.toString();
-}, B = (r = !1) => {
-  const [e, t] = b(r), n = f(() => t((l) => !l), []), o = f(() => t(!0), []), c = f(() => t(!1), []);
-  return [e, n, o, c];
-}, ge = (r = !1, e = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
-  const [o, c] = b(r), l = _(r), a = _(void 0), i = f(() => {
-    c(!l.current), a.current && n(a.current), a.current = t(() => c(l.current), e);
-  }, [n, e, t]);
-  return [o, i];
-}, be = () => _(null), we = () => {
-  const { search: r } = Y();
-  return q(() => Z(r), [r]);
-}, K = ({
-  text: r,
-  disabled: e = !1,
+}, be = (e) => {
+  const r = new URLSearchParams();
+  for (const [t, n] of Object.entries(e))
+    n !== void 0 && (Array.isArray(n) ? n.forEach((c) => r.append(`${t}[]`, `${c}`)) : r.append(t, `${n}`));
+  return r.toString();
+}, K = (e = !1) => {
+  const [r, t] = w(e), n = f(() => t((l) => !l), []), c = f(() => t(!0), []), s = f(() => t(!1), []);
+  return [r, n, c, s];
+}, we = (e = !1, r = 2e3, t = window.setTimeout, n = window.clearTimeout) => {
+  const [c, s] = w(e), l = C(e), a = C(void 0), i = f(() => {
+    s(!l.current), a.current && n(a.current), a.current = t(() => s(l.current), r);
+  }, [n, r, t]);
+  return [c, i];
+}, ge = () => C(null), Ne = () => {
+  const { search: e } = W();
+  return Q(() => B(e), [e]);
+}, ee = ({
+  text: e,
+  disabled: r = !1,
   className: t,
   children: n,
-  dropdownClassName: o,
-  noCaret: c,
+  dropdownClassName: c,
+  noCaret: s,
   end: l = !1,
   minWidth: a,
   inline: i,
   size: m,
-  ...u
+  ...h
 }) => {
-  const [T, L] = B(), x = h("dropdown-btn__toggle", t, {
+  const [y, L] = K(), D = u("dropdown-btn__toggle", t, {
     "btn-block": !i,
-    "dropdown-btn__toggle--with-caret": !c
+    "dropdown-btn__toggle--with-caret": !s
   }), R = { minWidth: a && `${a}px` };
-  return /* @__PURE__ */ d(M, { isOpen: T, toggle: L, disabled: e, className: o, children: [
-    /* @__PURE__ */ s(v, { size: m, caret: !c, className: x, color: "primary", ...u, children: r }),
-    /* @__PURE__ */ s(O, { className: "w-100", end: l, style: R, children: n })
+  return /* @__PURE__ */ d($, { isOpen: y, toggle: L, disabled: r, className: c, children: [
+    /* @__PURE__ */ o(k, { size: m, caret: !s, className: D, color: "primary", ...h, children: e }),
+    /* @__PURE__ */ o(S, { className: "w-100", end: l, style: R, children: n })
   ] });
-}, Ne = ({ children: r, minWidth: e, label: t = "Options" }) => /* @__PURE__ */ s(
-  K,
+}, Ce = ({ children: e, minWidth: r, label: t = "Options" }) => /* @__PURE__ */ o(
+  ee,
   {
-    text: /* @__PURE__ */ s(g, { className: "px-1", icon: D }),
+    text: /* @__PURE__ */ o(b, { className: "px-1", icon: E }),
     "aria-label": t,
     size: "sm",
-    minWidth: e,
+    minWidth: r,
     end: !0,
     noCaret: !0,
     inline: !0,
-    children: r
+    children: e
   }
-), ee = ({ children: r, ...e }) => /* @__PURE__ */ s($, { children: /* @__PURE__ */ s(G, { className: "nav-pills__nav-link", tag: z, ...e, children: r }) }), _e = ({ children: r, fill: e = !1, className: t = "" }) => /* @__PURE__ */ s(C, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ s(U, { pills: !0, fill: e, children: Q.map(r, (n) => {
-  if (!V(n) || n.type !== ee)
+), re = ({ children: e, ...r }) => /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(G, { className: "nav-pills__nav-link", tag: z, ...r, children: e }) }), _e = ({ children: e, fill: r = !1, className: t = "" }) => /* @__PURE__ */ o(_, { className: `nav-pills__nav p-0 overflow-hidden ${t}`, body: !0, children: /* @__PURE__ */ o(U, { pills: !0, fill: r, children: V.map(e, (n) => {
+  if (!Y(n) || n.type !== re)
     throw new Error("Only NavPillItem children are allowed inside NavPills.");
   return n;
-}) }) }), re = (r, e, t) => r !== e ? "ASC" : t ? {
-  ASC: "DESC",
-  DESC: void 0
-}[t] : "ASC", Ce = (r, { field: e, dir: t }) => !e || !t ? r : r.sort((n, o) => {
-  const c = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
-  return n[e] > o[e] ? c : l;
-}), ke = (r) => r.dir ? `${r.field}-${r.dir}` : void 0, ve = (r) => {
-  const [e, t] = r.split("-");
-  return { field: e, dir: t };
-}, Oe = (r) => {
-  const [e, t] = b(r), n = f((o, c) => t({ field: o, dir: c }), []);
-  return [e, n];
+}) }) });
+function O(e, r, t) {
+  return typeof e == "object" ? O(e.currentField, e.newField, e.currentOrderDir) : e !== r ? "ASC" : t ? {
+    ASC: "DESC",
+    DESC: void 0
+  }[t] : "ASC";
+}
+function te(e, r, t) {
+  return typeof e == "object" ? te(e.currentField, e.newField, e.currentOrderDir) : {
+    field: r,
+    dir: O(e, r, t)
+  };
+}
+const Oe = (e, { field: r, dir: t }) => !r || !t ? e : e.sort((n, c) => {
+  const s = t === "ASC" ? 1 : -1, l = t === "ASC" ? -1 : 1;
+  return n[r] > c[r] ? s : l;
+}), ve = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, ke = (e) => {
+  const [r, t] = e.split("-");
+  return { field: r, dir: t };
+}, Se = (e) => {
+  const [r, t] = w(e), n = f((c, s) => t({ field: c, dir: s }), []);
+  return [r, n];
 };
-function Se({ items: r, order: e, onChange: t, isButton: n = !0, right: o = !1, prefixed: c = !0 }) {
+function Te({ items: e, order: r, onChange: t, isButton: n = !0, right: c = !1, prefixed: s = !0 }) {
   const l = (a) => () => {
-    const i = re(a, e.field, e.dir);
+    const i = O(a, r.field, r.dir);
     t(i ? a : void 0, i);
   };
-  return /* @__PURE__ */ d(j, { children: [
+  return /* @__PURE__ */ d(q, { children: [
     /* @__PURE__ */ d(
-      v,
+      k,
       {
         caret: !0,
         color: n ? "primary" : "link",
-        className: h({
+        className: u({
           "dropdown-btn__toggle btn-block pe-4 overflow-hidden": n,
           "btn-sm p-0": !n
         }),
         children: [
-          !n && /* @__PURE__ */ s(N, { children: "Order by" }),
-          n && !e.field && /* @__PURE__ */ s("i", { children: "Order by..." }),
-          n && e.field && /* @__PURE__ */ d(N, { children: [
-            c && "Order by: ",
-            r[e.field],
+          !n && /* @__PURE__ */ o(N, { children: "Order by" }),
+          n && !r.field && /* @__PURE__ */ o("i", { children: "Order by..." }),
+          n && r.field && /* @__PURE__ */ d(N, { children: [
+            s && "Order by: ",
+            e[r.field],
             " - ",
-            /* @__PURE__ */ s("small", { children: e.dir ?? "DESC" })
+            /* @__PURE__ */ o("small", { children: r.dir ?? "DESC" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ d(
-      O,
-      {
-        end: o,
-        className: h("w-100", { "ordering-dropdown__menu--link": !n }),
-        children: [
-          Object.entries(r).map(([a, i]) => /* @__PURE__ */ d(w, { active: e.field === a, onClick: l(a), children: [
+    /* @__PURE__ */ d(S, { end: c, className: "w-100", style: n ? void 0 : { minWidth: "11rem" }, children: [
+      Object.entries(e).map(([a, i]) => /* @__PURE__ */ d(
+        g,
+        {
+          active: r.field === a,
+          onClick: l(a),
+          className: "d-flex justify-content-between align-items-center",
+          children: [
             i,
-            e.field === a && /* @__PURE__ */ s(
-              g,
-              {
-                icon: e.dir === "ASC" ? E : P,
-                className: "ordering-dropdown__sort-icon"
-              }
-            )
-          ] }, a)),
-          /* @__PURE__ */ s(w, { divider: !0 }),
-          /* @__PURE__ */ s(w, { disabled: !e.field, onClick: () => t(), children: /* @__PURE__ */ s("i", { children: "Clear selection" }) })
-        ]
-      }
-    )
+            r.field === a && /* @__PURE__ */ o(b, { icon: r.dir === "ASC" ? F : P })
+          ]
+        },
+        a
+      )),
+      /* @__PURE__ */ o(g, { divider: !0 }),
+      /* @__PURE__ */ o(g, { disabled: !r.field, onClick: () => t(), children: /* @__PURE__ */ o("i", { children: "Clear selection" }) })
+    ] })
   ] });
 }
-const Ae = "#4696e5", Te = "rgba(70, 150, 229, 0.4)", Le = "#f77f28", xe = "rgba(247, 127, 40, 0.4)", Re = "white", Ie = "#161b22", ye = (r) => {
-  var e;
-  return (e = document.querySelector("html")) == null ? void 0 : e.setAttribute("data-theme", r);
-}, De = () => {
+const xe = "#4696e5", ye = "rgba(70, 150, 229, 0.4)", Le = "#f77f28", De = "rgba(247, 127, 40, 0.4)", Re = "white", Ie = "#161b22", Ae = (e) => {
   var r;
-  return ((r = document.querySelector("html")) == null ? void 0 : r.getAttribute("data-theme")) === "dark";
-}, Ee = (r = window.matchMedia.bind(window)) => r("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  return (r = document.querySelector("html")) == null ? void 0 : r.setAttribute("data-theme", e);
+}, Ee = () => {
+  var e;
+  return ((e = document.querySelector("html")) == null ? void 0 : e.getAttribute("data-theme")) === "dark";
+}, Fe = (e = window.matchMedia.bind(window)) => e("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 export {
-  me as Checkbox,
-  K as DropdownBtn,
+  ue as Checkbox,
+  ee as DropdownBtn,
   Le as HIGHLIGHTED_COLOR,
-  xe as HIGHLIGHTED_COLOR_ALPHA,
-  ue as InputFormGroup,
-  W as LabeledFormGroup,
-  Ae as MAIN_COLOR,
-  Te as MAIN_COLOR_ALPHA,
-  ie as Message,
-  ee as NavPillItem,
+  De as HIGHLIGHTED_COLOR_ALPHA,
+  fe as InputFormGroup,
+  X as LabeledFormGroup,
+  xe as MAIN_COLOR,
+  ye as MAIN_COLOR_ALPHA,
+  de as Message,
+  re as NavPillItem,
   _e as NavPills,
-  Se as OrderingDropdown,
+  Te as OrderingDropdown,
   Ie as PRIMARY_DARK_COLOR,
   Re as PRIMARY_LIGHT_COLOR,
-  de as Result,
-  Ne as RowDropdownBtn,
-  fe as SearchField,
+  me as Result,
+  Ce as RowDropdownBtn,
+  pe as SearchField,
   J as SimpleCard,
   he as ToggleSwitch,
-  ye as changeThemeInMarkup,
-  re as determineOrderDir,
-  Ee as getSystemPreferredTheme,
-  De as isDarkThemeEnabled,
-  ke as orderToString,
-  Z as parseQueryString,
-  Ce as sortList,
-  ve as stringToOrder,
-  pe as stringifyQueryParams,
-  be as useElementRef,
-  Oe as useOrder,
-  we as useParsedQuery,
-  ge as useTimeoutToggle,
-  B as useToggle
+  Ae as changeThemeInMarkup,
+  te as determineOrder,
+  O as determineOrderDir,
+  Fe as getSystemPreferredTheme,
+  Ee as isDarkThemeEnabled,
+  ve as orderToString,
+  B as parseQueryString,
+  Oe as sortList,
+  ke as stringToOrder,
+  be as stringifyQueryParams,
+  ge as useElementRef,
+  Se as useOrder,
+  Ne as useParsedQuery,
+  we as useTimeoutToggle,
+  K as useToggle
 };