web: use absolute imports with path rewrite instead of relative imports (#3149)

web/src/elements/Divider.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-divider")

web/src/elements/EmptyState.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

web/src/elements/Label.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFLabel from "@patternfly/patternfly/components/Label/label.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 

web/src/elements/LoadingOverlay.ts

@@ -1,10 +1,10 @@
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { PFSize } from "./Spinner";
-
 @customElement("ak-loading-overlay")
 export class LoadingOverlay extends LitElement {
     @property({ type: Boolean })

web/src/elements/Markdown.ts

@@ -2,7 +2,7 @@ import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 

web/src/elements/PageHeader.ts

@@ -1,26 +1,26 @@
-import { t } from "@lingui/macro";
-
-import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import AKGlobal from "../authentik.css";
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import PFBase from "@patternfly/patternfly/patternfly-base.css";
-
-import { EventsApi } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG, tenant } from "../api/Config";
-import { currentInterface } from "../api/Sentry";
-import { me } from "../api/Users";
+import { DEFAULT_CONFIG, tenant } from "@goauthentik/web/api/Config";
+import { currentInterface } from "@goauthentik/web/api/Sentry";
+import { me } from "@goauthentik/web/api/Users";
 import {
     EVENT_API_DRAWER_TOGGLE,
     EVENT_NOTIFICATION_DRAWER_TOGGLE,
     EVENT_SIDEBAR_TOGGLE,
     EVENT_WS_MESSAGE,
     TITLE_DEFAULT,
-} from "../constants";
+} from "@goauthentik/web/constants";
+
+import { t } from "@lingui/macro";
+
+import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import AKGlobal from "@goauthentik/web/authentik.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { EventsApi } from "@goauthentik/api";
 
 @customElement("ak-page-header")
 export class PageHeader extends LitElement {

web/src/elements/SearchSelect.ts

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFSelect from "@patternfly/patternfly/components/Select/select.css";

web/src/elements/Tabs.ts

@@ -1,14 +1,15 @@
+import { CURRENT_CLASS, EVENT_REFRESH, ROUTE_SEPARATOR } from "@goauthentik/web/constants";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFTabs from "@patternfly/patternfly/components/Tabs/tabs.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
 
-import { CURRENT_CLASS, EVENT_REFRESH, ROUTE_SEPARATOR } from "../constants";
 import { getURLParams, updateURLParams } from "./router/RouteMatch";
 
 @customElement("ak-tabs")

web/src/elements/Tooltip.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFTooltip from "@patternfly/patternfly/components/Tooltip/tooltip.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 

web/src/elements/TreeView.ts

@@ -1,13 +1,14 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-import AKGlobal from "../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFTreeView from "@patternfly/patternfly/components/TreeView/tree-view.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { EVENT_REFRESH } from "../constants";
 import { setURLParams } from "./router/RouteMatch";
 
 export interface TreeViewItem {

web/src/elements/buttons/ActionButton.ts

@@ -1,7 +1,8 @@
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+
 import { customElement, property } from "lit/decorators.js";
 
-import { MessageLevel } from "../messages/Message";
-import { showMessage } from "../messages/MessageContainer";
 import { SpinnerButton } from "./SpinnerButton";
 
 @customElement("ak-action-button")

web/src/elements/buttons/Dropdown.ts

@@ -1,8 +1,8 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+
 import { LitElement, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import { EVENT_REFRESH } from "../../constants";
-
 @customElement("ak-dropdown")
 export class DropdownButton extends LitElement {
     menu: HTMLElement | null;

web/src/elements/buttons/ModalButton.ts

@@ -1,7 +1,9 @@
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -14,8 +16,6 @@ import PFTitle from "@patternfly/patternfly/components/Title/title.css";
 import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { PFSize } from "../Spinner";
-
 export const MODAL_BUTTON_STYLES = css`
     :host {
         text-align: left;

web/src/elements/buttons/SpinnerButton.ts

@@ -1,14 +1,14 @@
+import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "@goauthentik/web/constants";
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { ERROR_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
-import { PFSize } from "../Spinner";
-
 @customElement("ak-spinner-button")
 export class SpinnerButton extends LitElement {
     @property({ type: Boolean })

web/src/elements/buttons/TokenCopyButton.ts

@@ -1,13 +1,14 @@
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { ERROR_CLASS, SECONDARY_CLASS, SUCCESS_CLASS } from "@goauthentik/web/constants";
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { CoreApi, ResponseError } from "@goauthentik/api";
 
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { ERROR_CLASS, SECONDARY_CLASS, SUCCESS_CLASS } from "../../constants";
-import { PFSize } from "../Spinner";
-import { MessageLevel } from "../messages/Message";
-import { showMessage } from "../messages/MessageContainer";
 import { ActionButton } from "./ActionButton";
 
 @customElement("ak-token-copy-button")

web/src/elements/cards/AggregateCard.ts

@@ -2,7 +2,7 @@ import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

web/src/elements/cards/AggregatePromiseCard.ts

@@ -1,9 +1,10 @@
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+import "@goauthentik/web/elements/Spinner";
+
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import "../Spinner";
-import { PFSize } from "../Spinner";
 import { AggregateCard } from "./AggregateCard";
 
 @customElement("ak-aggregate-card-promise")

web/src/elements/charts/AdminLoginsChart.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
 import { ChartData } from "chart.js";
 
 import { t } from "@lingui/macro";
@@ -6,7 +7,6 @@ import { customElement } from "lit/decorators.js";
 
 import { AdminApi, LoginMetrics } from "@goauthentik/api";
 
-import { DEFAULT_CONFIG } from "../../api/Config";
 import { AKChart } from "./Chart";
 
 @customElement("ak-charts-admin-login")

web/src/elements/charts/AdminModelPerDay.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
 import { ChartData, Tick } from "chart.js";
 
 import { t } from "@lingui/macro";
@@ -6,7 +7,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { Coordinate, EventActions, EventsApi } from "@goauthentik/api";
 
-import { DEFAULT_CONFIG } from "../../api/Config";
 import { AKChart } from "./Chart";
 
 @customElement("ak-charts-admin-model-per-day")

web/src/elements/charts/ApplicationAuthorizeChart.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
 import { ChartData } from "chart.js";
 
 import { t } from "@lingui/macro";
@@ -6,7 +7,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { Coordinate, CoreApi } from "@goauthentik/api";
 
-import { DEFAULT_CONFIG } from "../../api/Config";
 import { AKChart } from "./Chart";
 
 @customElement("ak-charts-application-authorize")

web/src/elements/charts/Chart.ts

@@ -1,3 +1,8 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import {
+    FONT_COLOUR_DARK_MODE,
+    FONT_COLOUR_LIGHT_MODE,
+} from "@goauthentik/web/pages/flows/FlowDiagram";
 import { Chart, ChartConfiguration, ChartData, ChartOptions, Plugin, Tick } from "chart.js";
 import { Legend, Tooltip } from "chart.js";
 import { BarController, DoughnutController, LineController } from "chart.js";
@@ -10,9 +15,6 @@ import { t } from "@lingui/macro";
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { EVENT_REFRESH } from "../../constants";
-import { FONT_COLOUR_DARK_MODE, FONT_COLOUR_LIGHT_MODE } from "../../pages/flows/FlowDiagram";
-
 Chart.register(Legend, Tooltip);
 Chart.register(LineController, BarController, DoughnutController);
 Chart.register(ArcElement, BarElement);

web/src/elements/charts/UserChart.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
 import { ChartData } from "chart.js";
 
 import { t } from "@lingui/macro";
@@ -6,7 +7,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { CoreApi, UserMetrics } from "@goauthentik/api";
 
-import { DEFAULT_CONFIG } from "../../api/Config";
 import { AKChart } from "./Chart";
 
 @customElement("ak-charts-user")

web/src/elements/chips/Chip.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

web/src/elements/chips/ChipGroup.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
 import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";

web/src/elements/events/ObjectChangelog.ts

@@ -1,3 +1,14 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { EventWithContext } from "@goauthentik/web/api/Events";
+import { uiConfig } from "@goauthentik/web/common/config";
+import "@goauthentik/web/elements/Tabs";
+import "@goauthentik/web/elements/buttons/Dropdown";
+import "@goauthentik/web/elements/buttons/ModalButton";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+import "@goauthentik/web/pages/events/EventInfo";
+
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
@@ -5,17 +16,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { Event, EventsApi } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { EventWithContext } from "../../api/Events";
-import { uiConfig } from "../../common/config";
-import "../../pages/events/EventInfo";
-import "../Tabs";
-import "../buttons/Dropdown";
-import "../buttons/ModalButton";
-import "../buttons/SpinnerButton";
-import { Table, TableColumn } from "../table/Table";
-
 @customElement("ak-object-changelog")
 export class ObjectChangelog extends Table<Event> {
     expandable = true;

web/src/elements/events/UserEvents.ts

@@ -1,3 +1,14 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { EventWithContext } from "@goauthentik/web/api/Events";
+import { uiConfig } from "@goauthentik/web/common/config";
+import "@goauthentik/web/elements/../pages/events/EventInfo";
+import "@goauthentik/web/elements/Tabs";
+import "@goauthentik/web/elements/buttons/Dropdown";
+import "@goauthentik/web/elements/buttons/ModalButton";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
@@ -5,17 +16,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { Event, EventsApi } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { EventWithContext } from "../../api/Events";
-import { uiConfig } from "../../common/config";
-import "../../pages/events/EventInfo";
-import "../Tabs";
-import "../buttons/Dropdown";
-import "../buttons/ModalButton";
-import "../buttons/SpinnerButton";
-import { Table, TableColumn } from "../table/Table";
-
 @customElement("ak-events-user")
 export class ObjectChangelog extends Table<Event> {
     expandable = true;

web/src/elements/forms/ConfirmationForm.ts

@@ -1,14 +1,14 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import { EVENT_REFRESH } from "../../constants";
-import { ModalButton } from "../buttons/ModalButton";
-import "../buttons/SpinnerButton";
-import { MessageLevel } from "../messages/Message";
-import { showMessage } from "../messages/MessageContainer";
-
 @customElement("ak-forms-confirm")
 export class ConfirmationForm extends ModalButton {
     @property()

web/src/elements/forms/DeleteBulkForm.ts

@@ -1,3 +1,12 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, TemplateResult, html } from "lit";
@@ -8,15 +17,6 @@ import PFList from "@patternfly/patternfly/components/List/list.css";
 
 import { UsedBy, UsedByActionEnum } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { EVENT_REFRESH } from "../../constants";
-import { PFSize } from "../Spinner";
-import { ModalButton } from "../buttons/ModalButton";
-import "../buttons/SpinnerButton";
-import { MessageLevel } from "../messages/Message";
-import { showMessage } from "../messages/MessageContainer";
-import { Table, TableColumn } from "../table/Table";
-
 type BulkDeleteMetadata = { key: string; value: string }[];
 
 @customElement("ak-delete-objects-table")

web/src/elements/forms/DeleteForm.ts

@@ -1,3 +1,9 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, TemplateResult, html } from "lit";
@@ -8,12 +14,6 @@ import PFList from "@patternfly/patternfly/components/List/list.css";
 
 import { UsedBy, UsedByActionEnum } from "@goauthentik/api";
 
-import { EVENT_REFRESH } from "../../constants";
-import { ModalButton } from "../buttons/ModalButton";
-import "../buttons/SpinnerButton";
-import { MessageLevel } from "../messages/Message";
-import { showMessage } from "../messages/MessageContainer";
-
 @customElement("ak-forms-delete")
 export class DeleteForm extends ModalButton {
     static get styles(): CSSResult[] {

web/src/elements/forms/Form.ts

@@ -1,3 +1,8 @@
+import { SearchSelect } from "@goauthentik/web/SearchSelect";
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { camelToSnake, convertToSlug } from "@goauthentik/web/utils";
 import "@polymer/iron-form/iron-form";
 import { IronFormElement } from "@polymer/iron-form/iron-form";
 import "@polymer/paper-input/paper-input";
@@ -5,7 +10,7 @@ import "@polymer/paper-input/paper-input";
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
@@ -16,11 +21,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { ResponseError, ValidationError } from "@goauthentik/api";
 
-import { EVENT_REFRESH } from "../../constants";
-import { showMessage } from "../../elements/messages/MessageContainer";
-import { camelToSnake, convertToSlug } from "../../utils";
-import { SearchSelect } from "../SearchSelect";
-import { MessageLevel } from "../messages/Message";
 import { HorizontalFormElement } from "./HorizontalFormElement";
 
 export class APIError extends Error {

web/src/elements/forms/FormGroup.ts

@@ -1,7 +1,7 @@
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";

web/src/elements/forms/HorizontalFormElement.ts

@@ -1,15 +1,16 @@
+import { convertToSlug } from "@goauthentik/web/utils";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, css } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { convertToSlug } from "../../utils";
 import { FormGroup } from "./FormGroup";
 
 @customElement("ak-form-element-horizontal")

web/src/elements/forms/ModalForm.ts

@@ -1,12 +1,13 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import "@goauthentik/web/elements/LoadingOverlay";
+import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import { EVENT_REFRESH } from "../../constants";
-import "../LoadingOverlay";
-import { ModalButton } from "../buttons/ModalButton";
-import "../buttons/SpinnerButton";
 import { Form } from "./Form";
 
 @customElement("ak-forms-modal")

web/src/elements/forms/ModelForm.ts

@@ -1,7 +1,8 @@
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+
 import { TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
-import { EVENT_REFRESH } from "../../constants";
 import { Form } from "./Form";
 
 export abstract class ModelForm<T, PKT extends string | number> extends Form<T> {

web/src/elements/messages/MessageContainer.ts

@@ -1,15 +1,15 @@
+import { SentryIgnoredError } from "@goauthentik/web/common/errors";
+import { WSMessage } from "@goauthentik/web/common/ws";
+import { EVENT_WS_MESSAGE, WS_MSG_TYPE_MESSAGE } from "@goauthentik/web/constants";
+import "@goauthentik/web/elements/messages/Message";
+import { APIMessage } from "@goauthentik/web/elements/messages/Message";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFAlertGroup from "@patternfly/patternfly/components/AlertGroup/alert-group.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { SentryIgnoredError } from "../../common/errors";
-import { WSMessage } from "../../common/ws";
-import { EVENT_WS_MESSAGE, WS_MSG_TYPE_MESSAGE } from "../../constants";
-import "./Message";
-import { APIMessage } from "./Message";
-
 export function showMessage(message: APIMessage, unique = false): void {
     const container = document.querySelector<MessageContainer>("ak-message-container");
     if (!container) {

web/src/elements/messages/Middleware.ts

@@ -1,10 +1,10 @@
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+
 import { t } from "@lingui/macro";
 
 import { Middleware, ResponseContext } from "@goauthentik/api";
 
-import { MessageLevel } from "./Message";
-import { showMessage } from "./MessageContainer";
-
 export class MessageMiddleware implements Middleware {
     post(context: ResponseContext): Promise<Response | void> {
         if (context.response.status >= 500) {

web/src/elements/notifications/APIDrawer.ts

@@ -1,9 +1,11 @@
+import { EVENT_API_DRAWER_REFRESH, EVENT_API_DRAWER_TOGGLE } from "@goauthentik/web/constants";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@@ -12,8 +14,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { Middleware, ResponseContext } from "@goauthentik/api";
 
-import { EVENT_API_DRAWER_REFRESH, EVENT_API_DRAWER_TOGGLE } from "../../constants";
-
 export interface RequestInfo {
     method: string;
     path: string;

web/src/elements/notifications/NotificationDrawer.ts

@@ -1,9 +1,17 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { me } from "@goauthentik/web/api/Users";
+import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "@goauthentik/web/constants";
+import { MessageLevel } from "@goauthentik/web/elements/messages/Message";
+import { showMessage } from "@goauthentik/web/elements/messages/MessageContainer";
+import { ActionToLabel } from "@goauthentik/web/pages/events/utils";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
@@ -12,14 +20,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { EventsApi, Notification } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { me } from "../../api/Users";
-import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "../../constants";
-import { ActionToLabel } from "../../pages/events/utils";
-import { MessageLevel } from "../messages/Message";
-import { showMessage } from "../messages/MessageContainer";
-
 @customElement("ak-notification-drawer")
 export class NotificationDrawer extends LitElement {
     @property({ attribute: false })

web/src/elements/oauth/UserRefreshList.ts

@@ -1,3 +1,10 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { uiConfig } from "@goauthentik/web/common/config";
+import { PFColor } from "@goauthentik/web/elements/Label";
+import "@goauthentik/web/elements/forms/DeleteBulkForm";
+import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, TemplateResult, html } from "lit";
@@ -7,13 +14,6 @@ import PFFlex from "@patternfly/patternfly/layouts/Flex/flex.css";
 
 import { ExpiringBaseGrantModel, Oauth2Api, RefreshTokenModel } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { uiConfig } from "../../common/config";
-import { PFColor } from "../Label";
-import "../forms/DeleteBulkForm";
-import { Table, TableColumn } from "../table/Table";
-
 @customElement("ak-user-oauth-refresh-list")
 export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
     expandable = true;

web/src/elements/router/Route.ts

@@ -1,8 +1,8 @@
+import "@goauthentik/web/elements/EmptyState";
+
 import { TemplateResult, html } from "lit";
 import { until } from "lit/directives/until.js";
 
-import "../EmptyState";
-
 export const SLUG_REGEX = "[-a-zA-Z0-9_]+";
 export const ID_REGEX = "\\d+";
 export const UUID_REGEX = "[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}";

web/src/elements/router/RouteMatch.ts

@@ -1,7 +1,7 @@
-import { TemplateResult } from "lit";
+import { ROUTE_SEPARATOR } from "@goauthentik/web/constants";
+import { Route } from "@goauthentik/web/elements/router/Route";
 
-import { ROUTE_SEPARATOR } from "../../constants";
-import { Route } from "./Route";
+import { TemplateResult } from "lit";
 
 export class RouteMatch {
     route: Route;

web/src/elements/router/RouterOutlet.ts

@@ -1,12 +1,13 @@
+import { ROUTE_SEPARATOR } from "@goauthentik/web/constants";
+import "@goauthentik/web/elements/router/Router404";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 
-import { ROUTE_SEPARATOR } from "../../constants";
 import { Route } from "./Route";
 import { RouteMatch } from "./RouteMatch";
-import "./Router404";
 
 // Poliyfill for hashchange.newURL,
 // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

web/src/elements/sidebar/Sidebar.ts

@@ -1,14 +1,14 @@
+import "@goauthentik/web/elements/sidebar/SidebarBrand";
+import "@goauthentik/web/elements/sidebar/SidebarUser";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import "./SidebarBrand";
-import "./SidebarUser";
-
 @customElement("ak-sidebar")
 export class Sidebar extends LitElement {
     static get styles(): CSSResult[] {

web/src/elements/sidebar/SidebarBrand.ts

@@ -1,7 +1,12 @@
+import { tenant } from "@goauthentik/web/api/Config";
+import { configureSentry } from "@goauthentik/web/api/Sentry";
+import { EVENT_SIDEBAR_TOGGLE } from "@goauthentik/web/constants";
+import { first } from "@goauthentik/web/utils";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGlobal from "@patternfly/patternfly/patternfly-base.css";
@@ -9,11 +14,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { CurrentTenant } from "@goauthentik/api";
 
-import { tenant } from "../../api/Config";
-import { configureSentry } from "../../api/Sentry";
-import { EVENT_SIDEBAR_TOGGLE } from "../../constants";
-import { first } from "../../utils";
-
 // If the viewport is wider than MIN_WIDTH, the sidebar
 // is shown besides the content, and not overlaid.
 export const MIN_WIDTH = 1200;

web/src/elements/sidebar/SidebarItem.ts

@@ -1,15 +1,15 @@
+import { ROUTE_SEPARATOR } from "@goauthentik/web/constants";
+
 import { CSSResult, LitElement, css } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { ROUTE_SEPARATOR } from "../../constants";
-
 @customElement("ak-sidebar-item")
 export class SidebarItem extends LitElement {
     static get styles(): CSSResult[] {

web/src/elements/sidebar/SidebarUser.ts

@@ -1,3 +1,5 @@
+import { me } from "@goauthentik/web/api/Users";
+
 import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -7,8 +9,6 @@ import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { me } from "../../api/Users";
-
 @customElement("ak-sidebar-user")
 export class SidebarUser extends LitElement {
     static get styles(): CSSResult[] {

web/src/elements/table/Table.ts

@@ -1,10 +1,21 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { EVENT_REFRESH } from "@goauthentik/web/constants";
+import "@goauthentik/web/elements/EmptyState";
+import "@goauthentik/web/elements/buttons/SpinnerButton";
+import "@goauthentik/web/elements/chips/Chip";
+import "@goauthentik/web/elements/chips/ChipGroup";
+import { getURLParam, updateURLParams } from "@goauthentik/web/elements/router/RouteMatch";
+import "@goauthentik/web/elements/table/TablePagination";
+import "@goauthentik/web/elements/table/TableSearch";
+import { groupBy } from "@goauthentik/web/utils";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
@@ -13,17 +24,6 @@ import PFToolbar from "@patternfly/patternfly/components/Toolbar/toolbar.css";
 import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { AKResponse } from "../../api/Client";
-import { EVENT_REFRESH } from "../../constants";
-import { groupBy } from "../../utils";
-import "../EmptyState";
-import "../buttons/SpinnerButton";
-import "../chips/Chip";
-import "../chips/ChipGroup";
-import { getURLParam, updateURLParams } from "../router/RouteMatch";
-import "./TablePagination";
-import "./TableSearch";
-
 export class TableColumn {
     title: string;
     orderBy?: string;

web/src/elements/table/TableModal.ts

@@ -1,8 +1,11 @@
+import { PFSize } from "@goauthentik/web/elements/Spinner";
+import { MODAL_BUTTON_STYLES } from "@goauthentik/web/elements/buttons/ModalButton";
+
 import { CSSResult, LitElement } from "lit";
 import { TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
@@ -10,8 +13,6 @@ import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
 import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
 
-import { PFSize } from "../Spinner";
-import { MODAL_BUTTON_STYLES } from "../buttons/ModalButton";
 import { Table } from "./Table";
 
 export abstract class TableModal<T> extends Table<T> {

web/src/elements/table/TablePage.ts

@@ -1,3 +1,6 @@
+import "@goauthentik/web/elements/../elements/PageHeader";
+import { updateURLParams } from "@goauthentik/web/elements/router/RouteMatch";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult } from "lit";
@@ -8,8 +11,6 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
 
-import "../../elements/PageHeader";
-import { updateURLParams } from "../router/RouteMatch";
 import { Table } from "./Table";
 
 export abstract class TablePage<T> extends Table<T> {

web/src/elements/table/TablePagination.ts

@@ -1,15 +1,15 @@
+import { AKPagination } from "@goauthentik/web/api/Client";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFPagination from "@patternfly/patternfly/components/Pagination/pagination.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import { AKPagination } from "../../api/Client";
-
 @customElement("ak-table-pagination")
 export class TablePagination extends LitElement {
     @property({ attribute: false })

web/src/elements/table/TableSearch.ts

@@ -4,7 +4,7 @@ import { CSSResult, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";

web/src/elements/user/SessionList.ts

@@ -1,3 +1,9 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { uiConfig } from "@goauthentik/web/common/config";
+import "@goauthentik/web/elements/forms/DeleteBulkForm";
+import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
@@ -5,12 +11,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { AuthenticatedSession, CoreApi } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { uiConfig } from "../../common/config";
-import "../forms/DeleteBulkForm";
-import { Table, TableColumn } from "../table/Table";
-
 @customElement("ak-user-session-list")
 export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
     @property()

web/src/elements/user/UserConsentList.ts

@@ -1,3 +1,9 @@
+import { AKResponse } from "@goauthentik/web/api/Client";
+import { DEFAULT_CONFIG } from "@goauthentik/web/api/Config";
+import { uiConfig } from "@goauthentik/web/common/config";
+import "@goauthentik/web/elements/forms/DeleteBulkForm";
+import { Table, TableColumn } from "@goauthentik/web/elements/table/Table";
+
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
@@ -5,12 +11,6 @@ import { customElement, property } from "lit/decorators.js";
 
 import { CoreApi, UserConsent } from "@goauthentik/api";
 
-import { AKResponse } from "../../api/Client";
-import { DEFAULT_CONFIG } from "../../api/Config";
-import { uiConfig } from "../../common/config";
-import "../forms/DeleteBulkForm";
-import { Table, TableColumn } from "../table/Table";
-
 @customElement("ak-user-consent-list")
 export class UserConsentList extends Table<UserConsent> {
     @property({ type: Number })

web/src/elements/utils/TimeDeltaHelp.ts

@@ -1,15 +1,15 @@
+import "@goauthentik/web/elements/Tooltip";
+
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import AKGlobal from "../../authentik.css";
+import AKGlobal from "@goauthentik/web/authentik.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import "../Tooltip";
-
 @customElement("ak-utils-time-delta-help")
 export class TimeDeltaHelp extends LitElement {
     @property({ type: Boolean })

web/src/elements/wizard/FormWizardPage.ts

@@ -1,8 +1,9 @@
+import { Form } from "@goauthentik/web/elements/forms/Form";
+
 import { t } from "@lingui/macro";
 
 import { customElement } from "lit/decorators.js";
 
-import { Form } from "../forms/Form";
 import { WizardPage } from "./WizardPage";
 
 @customElement("ak-wizard-page-form")

web/src/elements/wizard/Wizard.ts

@@ -1,3 +1,5 @@
+import { ModalButton } from "@goauthentik/web/elements/buttons/ModalButton";
+
 import { t } from "@lingui/macro";
 
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
@@ -7,7 +9,6 @@ import { state } from "lit/decorators.js";
 
 import PFWizard from "@patternfly/patternfly/components/Wizard/wizard.css";
 
-import { ModalButton } from "../buttons/ModalButton";
 import { WizardPage } from "./WizardPage";
 
 @customElement("ak-wizard")