Merge branch 'main' into tanstack-query

# Conflicts:
#	frontend/package-lock.json
#	frontend/package.json

frontend/Dockerfile

@@ -1,3 +1,19 @@
+#Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+#Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+#This program is free software: you can redistribute it and/or modify
+#it under the terms of the GNU Affero General Public License as published by
+#the Free Software Foundation, either version 3 of the License, or
+#(at your option) any later version.
+
+#This program is distributed in the hope that it will be useful,
+#but WITHOUT ANY WARRANTY; without even the implied warranty of
+#MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#GNU Affero General Public License for more details.
+
+#You should have received a copy of the GNU Affero General Public License
+#along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
 # build stage
 FROM node:lts-alpine AS build
 

frontend/LICENSE

@@ -0,0 +1,619 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS

frontend/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
     <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
+    <link rel="mask-icon" href="/htwk-mask.svg" color="#00494c" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link
       id="theme-link"
       rel="stylesheet"

frontend/nginx.conf

@@ -1,3 +1,19 @@
+#Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+#Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+#This program is free software: you can redistribute it and/or modify
+#it under the terms of the GNU Affero General Public License as published by
+#the Free Software Foundation, either version 3 of the License, or
+#(at your option) any later version.
+
+#This program is distributed in the hope that it will be useful,
+#but WITHOUT ANY WARRANTY; without even the implied warranty of
+#MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#GNU Affero General Public License for more details.
+
+#You should have received a copy of the GNU Affero General Public License
+#along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
 worker_processes  4;
 
 error_log  /opt/bitnami/nginx/logs/error.log;

frontend/package.json

@@ -13,36 +13,36 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.10",
-    "@fullcalendar/daygrid": "^6.1.10",
-    "@fullcalendar/interaction": "^6.1.10",
-    "@fullcalendar/timegrid": "^6.1.10",
-    "@fullcalendar/vue3": "^6.1.10",
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/interaction": "^6.1.11",
+    "@fullcalendar/timegrid": "^6.1.11",
+    "@fullcalendar/vue3": "^6.1.11",
     "@tanstack/vue-query": "^5.28.9",
     "@tanstack/vue-query-devtools": "^5.28.10",
-    "@vueuse/core": "^10.7.1",
+    "@vueuse/core": "^10.9.0",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "^3.46.0",
+    "primevue": "^3.50.0",
     "source-sans": "^3.46.0",
     "vue": "^3.4.11",
-    "vue-i18n": "^9.9.0",
-    "vue-router": "^4.2.5"
+    "vue-i18n": "^9.10.2",
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@types/node": "^20.12.2",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.20.0",
+    "eslint-plugin-vue": "^9.24.0",
     "prettier": "3.2.1",
-    "sass": "^1.69.7",
+    "sass": "^1.72.0",
     "sass-loader": "^13.3.3",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7",
+    "vitest": "^1.4.0",
     "vue-tsc": "^1.8.27"
   }
 }

frontend/public/htwk-mask.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     fill="#000000"
+     fill-opacity="1"
+     fill-rule="evenodd"
+     d="M 11.2578 1.16601 L 7.77734 2.55471 L 12.5195 14.4453 L 16 13.0566 Z M 3.45703 1.56445 L 5.78393e-06 2.94337 L 4.74219 14.834 L 8.20117 13.4551 Z" />
+</svg>

frontend/public/htwk-source.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with PhotoLine 24.00 (www.pl32.de) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="627" height="537" viewBox="0 0 627 537" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="matrix(1 0 0 1 0 -71)">
+    <rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#ffed00" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+    <rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#ffed00" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+  </g>
+</svg>

frontend/public/htwk.svg

@@ -1,9 +1,24 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with PhotoLine 24.00 (www.pl32.de) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="627" height="537" viewBox="0 0 627 537" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g transform="matrix(1 0 0 1 0 -71)">
-    <rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
-    <rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
-  </g>
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     fill="#ffed00"
+     id="tapes"
+     d="M 11.2578 1.16601 L 7.77734 2.55471 L 12.5195 14.4453 L 16 13.0566 Z M 3.45703 1.56445 L 5.78393e-06 2.94337 L 4.74219 14.834 L 8.20117 13.4551 Z" />
+  <style>
+    #tapes {
+      fill: #00964e;
+    }
+    @media (prefers-color-scheme: dark) {
+      #tapes {
+        fill: #ffed00;
+      }
+    }
+  </style>
 </svg>
+

frontend/public/primevue-sass-theme/README.md

@@ -0,0 +1,11 @@
+# PrimeVue Theming with SASS
+
+Run from htwkalender/frontend directory:
+
+```bash
+npx sass public/primevue-sass-theme/themes/lara/lara-dark/yellow/theme.scss public/themes/lara-dark-blue/theme.css
+```
+
+```bash
+npx sass public/primevue-sass-theme/themes/lara/lara-light/blue/theme.scss public/themes/lara-light-blue/theme.css
+```

frontend/public/primevue-sass-theme/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "primevue-sass-theme",
+  "version": "3.50.0",
+  "description": "PrimeVue Sass Theme",
+  "homepage": "https://primevue.org/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primefaces/primevue-sass-theme.git"
+  },
+  "keywords": [
+    "primevue",
+    "vue",
+    "vue.js",
+    "vue2",
+    "vue3",
+    "ui library",
+    "component library",
+    "material",
+    "bootstrap",
+    "fluent",
+    "tailwind",
+    "unstyled",
+    "passthrough"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/primefaces/primevue-sass-theme/issues"
+  }
+}

frontend/public/primevue-sass-theme/theme-base/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+                }
+                @else {
+                    --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+                }
+            }
+            
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/_common.scss

@@ -0,0 +1,198 @@
+// core
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
+
+.p-hidden-space {
+    visibility: hidden;
+}
+
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
+
+.p-disabled, .p-disabled * {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+}
+
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-unselectable-text {
+    user-select: none;
+}
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal;
+}
+
+.p-link {
+	text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-link:disabled {
+	cursor: default;
+}
+
+/* Non vue overlay animations */
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
+
+/* Vue based overlay animations */
+.p-connected-overlay-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-connected-overlay-leave-to {
+    opacity: 0;
+}
+
+.p-connected-overlay-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-leave-active {
+    transition: opacity .1s linear;
+}
+
+/* Toggleable Content */
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    max-height: 0;
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    max-height: 1000px;
+}
+
+.p-toggleable-content-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
+
+// theme
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+    
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/_components.scss

@@ -0,0 +1,112 @@
+@import "_mixins";
+@import "_colors";
+
+@import "./components/input/_editor";
+
+@layer primevue {
+    @import "_common";
+
+    //Input
+    @import "./components/input/_autocomplete";
+    @import "./components/input/_calendar";
+    @import "./components/input/_cascadeselect";
+    @import "./components/input/_checkbox";
+    @import "./components/input/_chips";
+    @import "./components/input/_colorpicker";
+    @import "./components/input/_dropdown";
+    @import "./components/input/_floatlabel";
+    @import "./components/input/_iconfield";
+    @import "./components/input/_inputotp";
+    @import "./components/input/_inputgroup";
+    @import "./components/input/_inputicon";
+    @import "./components/input/_inputnumber";
+    @import "./components/input/_inputswitch";
+    @import "./components/input/_inputtext";
+    @import "./components/input/_knob";
+    @import "./components/input/_listbox";
+    @import "./components/input/_multiselect";
+    @import "./components/input/_password";
+    @import "./components/input/_radiobutton";
+    @import "./components/input/_rating";
+    @import "./components/input/_selectbutton";
+    @import "./components/input/_slider";
+    @import "./components/input/_textarea";
+    @import "./components/input/_treeselect";
+    @import "./components/input/_togglebutton";
+
+    //Button
+    @import "./components/button/_button";
+    @import "./components/button/_speeddial";
+    @import "./components/button/_splitbutton";
+
+    //Data
+    @import "./components/data/_carousel";
+    @import "./components/data/_datatable";
+    @import "./components/data/_dataview";
+    @import "./components/data/_filter";
+    @import "./components/data/_orderlist";
+    @import "./components/data/_organizationchart";
+    @import "./components/data/_paginator";
+    @import "./components/data/_picklist";
+    @import "./components/data/_timeline";
+    @import "./components/data/_tree";
+    @import "./components/data/_treetable";
+
+    //Panel
+    @import "./components/panel/_accordion";
+    @import "./components/panel/_card";
+    @import "./components/panel/_fieldset";
+    @import "./components/panel/_divider";
+    @import "./components/panel/_panel";
+    @import "./components/panel/_scrollpanel";
+    @import "./components/panel/_splitter";
+    @import "./components/panel/_stepper";
+    @import "./components/panel/_tabview";
+    @import "./components/panel/_toolbar";
+
+    //Overlay
+    @import "./components/overlay/_confirmpopup";
+    @import "./components/overlay/_dialog";
+    @import "./components/overlay/_overlaypanel";
+    @import "./components/overlay/_sidebar";
+    @import "./components/overlay/_tooltip";
+
+    //File
+    @import "./components/file/_fileupload";
+
+    //Menu
+    @import "./components/menu/_breadcrumb";
+    @import "./components/menu/_contextmenu";
+    @import "./components/menu/_dock";
+    @import "./components/menu/_megamenu";
+    @import "./components/menu/_menu";
+    @import "./components/menu/_menubar";
+    @import "./components/menu/_panelmenu";
+    @import "./components/menu/_steps";
+    @import "./components/menu/_tabmenu";
+    @import "./components/menu/_tieredmenu";
+
+    //Messages
+    @import "./components/messages/_inlinemessage";
+    @import "./components/messages/_message";
+    @import "components/messages/toast";
+
+    //MultiMedia
+    @import "./components/multimedia/_galleria";
+    @import "./components/multimedia/_image";
+
+    //Misc
+    @import "./components/misc/_avatar";
+    @import "./components/misc/_badge";
+    @import "./components/misc/_blockui";
+    @import "./components/misc/_chip";
+    @import "./components/misc/_inplace";
+    @import "./components/misc/_metergroup";
+    @import "./components/misc/_progressbar";
+    @import "./components/misc/_progressspinner";
+    @import "./components/misc/_ripple";
+    @import "./components/misc/_scrolltop";
+    @import "./components/misc/_skeleton";
+    @import "./components/misc/_tag";
+    @import "./components/misc/_terminal";
+}

frontend/public/primevue-sass-theme/theme-base/_mixins.scss

@@ -0,0 +1,278 @@
+@mixin icon-override($icon) {
+	&:before {
+		content: $icon;
+	}
+}
+
+@mixin focused() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+	outline: $focusOutline;
+    outline-offset: -1 * $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+	outline: $focusOutline;
+    outline-offset: $inputFocusOutlineOffset;
+    box-shadow: $focusShadow;
+	border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+	border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem {
+    margin: $inputListItemMargin;
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+    
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+        
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+            
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+    
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+                
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemTextHoverColor;
+                    }
+                }
+
+                &:hover {
+                    color: $menuitemTextHoverColor;
+                    background: $menuitemHoverBg;
+        
+                    .p-menuitem-link {
+                        .p-menuitem-text {
+                            color: $menuitemTextHoverColor;
+                        }
+        
+                        .p-menuitem-icon, .p-submenu-icon {
+                            color: $menuitemIconHoverColor;
+                        }
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+    
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+    
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin horizontal-rootmenuitem {
+    > .p-menuitem-content {
+        color: $horizontalMenuRootMenuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+        .p-menuitem-link {
+            padding: $horizontalMenuRootMenuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $horizontalMenuRootMenuitemTextColor;
+            }
+        
+            .p-menuitem-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+            
+            .p-submenu-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        > .p-menuitem-content {
+            &:hover {
+                color: $horizontalMenuRootMenuitemTextHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+    
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextHoverColor;
+                    }
+    
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin placeholder {
+	::-webkit-input-placeholder {
+		@content
+	}
+	:-moz-placeholder {
+		@content
+	}
+	::-moz-placeholder {
+		@content
+	}
+	:-ms-input-placeholder {
+		@content
+	}
+}
+
+@mixin scaledPadding($val, $scale) {
+    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+    font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+    .p-submenu-list {
+        .p-menuitem {
+            .p-menuitem-content {
+                .p-menuitem-link {
+                    padding-left: $val * ($index + 1);
+                }
+    
+            }
+            @if $index < $length {
+                @include nested-submenu-indents($val, $index + 2, $length);
+            }
+        }
+    }
+}
+
+@mixin action-icon($enabled: true) {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+    outline-color: transparent;
+
+    @if $enabled {
+        &:enabled:hover {
+            @include action-icon-hover();
+        }
+    } @else {
+        &:hover {
+            @include action-icon-hover();
+        }
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+@mixin action-icon-hover() {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+}
+
+@mixin button-states {
+    // <button> and <a> tags support :enabled selector.
+
+    &:enabled,
+    &:not(button):not(a):not(.p-disabled) {
+        @content;
+    }
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}

frontend/public/primevue-sass-theme/theme-base/components/button/_button.scss

@@ -0,0 +1,695 @@
+// core
+.p-button {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-button-label {
+    flex: 1 1 auto;
+}
+
+.p-button-icon-right {
+    order: 1;
+}
+
+.p-button:disabled {
+    cursor: default;
+}
+
+.p-button-icon-only {
+    justify-content: center;
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto;
+}
+
+.p-button-vertical {
+    flex-direction: column;
+}
+
+.p-button-icon-bottom {
+    order: 2;
+}
+
+.p-button-group .p-button {
+    margin: 0;
+}
+
+.p-button-group .p-button:not(:last-child), .p-button-group .p-button:not(:last-child):hover {
+    border-right: 0 none;
+}
+
+.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+}
+
+.p-button-group .p-button:first-of-type:not(:only-of-type) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-button-group .p-button:last-of-type:not(:only-of-type) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-button-group .p-button:focus {
+    position: relative;
+    z-index: 1;
+}
+
+// theme
+.p-button {
+    color: $buttonTextColor;
+    background: $buttonBg;
+    border: $buttonBorder;
+    padding: $buttonPadding;
+    font-size: $fontSize;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(:disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(:disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $buttonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+            border-color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $buttonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+
+    .p-button-label {
+        transition-duration: $transitionDuration;
+    }
+
+    .p-button-icon-left {
+         margin-right: $inlineSpacing;
+    }
+
+    .p-button-icon-right {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-button-icon-bottom {
+        margin-top: $inlineSpacing;
+    }
+
+    .p-button-icon-top {
+       margin-bottom: $inlineSpacing;
+    }
+
+    .p-badge {
+        margin-left: $inlineSpacing;
+        min-width: $fontSize;
+        height: $fontSize;
+        line-height: $fontSize;
+        color: $buttonBg;
+        background-color: $buttonTextColor;
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+    }
+
+    &.p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+        padding: $buttonIconOnlyPadding;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            margin: 0;
+        }
+
+        &.p-button-rounded {
+            border-radius: 50%;
+            height: $buttonIconOnlyWidth;
+        }
+    }
+
+    &.p-button-sm {
+        @include scaledFontSize($fontSize, $scaleSM);
+        @include scaledPadding($buttonPadding, $scaleSM);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleSM);
+        }
+    }
+
+    &.p-button-lg {
+        @include scaledFontSize($fontSize, $scaleLG);
+        @include scaledPadding($buttonPadding, $scaleLG);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleLG);
+        }
+    }
+
+    &.p-button-loading-label-only {
+        .p-button-label {
+            margin-left: $inlineSpacing;
+        }
+
+        .p-button-loading-icon {
+            margin-right: 0;
+        }
+    }
+}
+
+.p-fluid {
+    .p-button {
+        width: 100%;
+    }
+    
+    .p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+    }
+
+    .p-button-group {
+        display: flex;
+        
+        .p-button {
+            flex: 1;
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+    color: $secondaryButtonTextColor;
+    background: $secondaryButtonBg;
+    border: $secondaryButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $secondaryButtonHoverBg;
+        color: $secondaryButtonTextHoverColor;
+        border-color: $secondaryButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $secondaryButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $secondaryButtonActiveBg;
+        color: $secondaryButtonTextActiveColor;
+        border-color: $secondaryButtonActiveBorderColor;
+    }
+    
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+    color: $infoButtonTextColor;
+    background: $infoButtonBg;
+    border: $infoButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $infoButtonHoverBg;
+        color: $infoButtonTextHoverColor;
+        border-color: $infoButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $infoButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $infoButtonActiveBg;
+        color: $infoButtonTextActiveColor;
+        border-color: $infoButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+    color: $successButtonTextColor;
+    background: $successButtonBg;
+    border: $successButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $successButtonHoverBg;
+        color: $successButtonTextHoverColor;
+        border-color: $successButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $successButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $successButtonActiveBg;
+        color: $successButtonTextActiveColor;
+        border-color: $successButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $successButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $successButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+    color: $warningButtonTextColor;
+    background: $warningButtonBg;
+    border: $warningButtonBorder;
+    
+    &:not(:disabled):hover {
+        background: $warningButtonHoverBg;
+        color: $warningButtonTextHoverColor;
+        border-color: $warningButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $warningButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $warningButtonActiveBg;
+        color: $warningButtonTextActiveColor;
+        border-color: $warningButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+    color: $helpButtonTextColor;
+    background: $helpButtonBg;
+    border: $helpButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $helpButtonHoverBg;
+        color: $helpButtonTextHoverColor;
+        border-color: $helpButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $helpButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $helpButtonActiveBg;
+        color: $helpButtonTextActiveColor;
+        border-color: $helpButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+    color: $dangerButtonTextColor;
+    background: $dangerButtonBg;
+    border: $dangerButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $dangerButtonHoverBg;
+        color: $dangerButtonTextHoverColor;
+        border-color: $dangerButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $dangerButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $dangerButtonActiveBg;
+        color: $dangerButtonTextActiveColor;
+        border-color: $dangerButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+    }
+}
+
+@if variable-exists(contrastButtonTextColor) {
+    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+        color: $contrastButtonTextColor;
+        background: $contrastButtonBg;
+        border: $contrastButtonBorder;
+    
+        &:not(:disabled):hover {
+            background: $contrastButtonHoverBg;
+            color: $contrastButtonTextHoverColor;
+            border-color: $contrastButtonHoverBorderColor;
+        }
+    
+        &:not(:disabled):focus {
+            box-shadow: $contrastButtonFocusShadow;
+        }
+    
+        &:not(:disabled):active {
+            background: $contrastButtonActiveBg;
+            color: $contrastButtonTextActiveColor;
+            border-color: $contrastButtonActiveBorderColor;
+        }
+    
+        &.p-button-outlined {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border: $outlinedButtonBorder;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    
+        &.p-button-text {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border-color: transparent;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-link {
+    color: $linkButtonColor;
+    background: transparent;
+    border: transparent;
+
+    &:not(:disabled):hover {
+        background:  transparent;
+        color: $linkButtonHoverColor;
+        border-color:  transparent;
+
+        .p-button-label {
+            text-decoration: $linkButtonTextHoverDecoration;
+        }
+    }
+
+    &:not(:disabled):focus {
+        background: transparent;
+        box-shadow: $linkButtonFocusShadow;
+        border-color:  transparent;
+    }
+
+    &:not(:disabled):active {
+        background:  transparent;
+        color: $linkButtonColor;
+        border-color:  transparent;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/button/_speeddial.scss

@@ -0,0 +1,178 @@
+@use 'sass:math';
+
+// core
+.p-speeddial {
+    position: absolute;
+    display: flex;
+}
+
+.p-speeddial-button {
+    z-index: 1;
+}
+
+.p-speeddial-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: top 0s linear 0.2s;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.p-speeddial-item {
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+    will-change: transform;
+}
+
+.p-speeddial-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-speeddial-circle .p-speeddial-item,
+.p-speeddial-semi-circle .p-speeddial-item,
+.p-speeddial-quarter-circle .p-speeddial-item {
+    position: absolute;
+}
+
+.p-speeddial-rotate {
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    will-change: transform;
+}
+
+.p-speeddial-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-speeddial-mask-visible {
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-speeddial-opened .p-speeddial-list {
+    pointer-events: auto;
+}
+
+.p-speeddial-opened .p-speeddial-item {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.p-speeddial-opened .p-speeddial-rotate {
+    transform: rotate(45deg);
+}
+
+// theme
+.p-speeddial-button {
+    &.p-button.p-button-icon-only {
+        width: $speedDialButtonWidth;
+        height: $speedDialButtonHeight;
+
+        .p-button-icon {
+            font-size: $speedDialButtonIconFontSize;
+        }
+
+        .p-icon {
+            width: $speedDialButtonIconFontSize;
+            height: $speedDialButtonIconFontSize;
+        }
+    }
+}
+
+.p-speeddial-list {
+    outline: 0 none;
+}
+
+.p-speeddial-item {
+    &.p-focus > .p-speeddial-action {
+        @include focused();
+    }
+}
+
+.p-speeddial-action {
+    width: $speedDialActionWidth;
+    height: $speedDialActionHeight;
+    background: $speedDialActionBg;
+    color: $speedDialActionTextColor;
+    outline-color: transparent;
+    transition: $actionIconTransition;
+
+    &:hover {
+        background: $speedDialActionHoverBg;
+        color: $speedDialActionTextHoverColor;
+    }
+}
+
+.p-speeddial-direction-up {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2) 0;
+
+        &:first-child {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-down {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2) 0;
+
+        &:first-child {
+            margin-top: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-left {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-right: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-right {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-left: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-circle,
+.p-speeddial-semi-circle,
+.p-speeddial-quarter-circle {
+    .p-speeddial-item {
+        margin: 0;
+
+        &:first-child,
+        &:last-child {
+            margin: 0;
+        }
+    }
+}
+
+.p-speeddial-mask {
+    background-color: $maskBg;
+    border-radius: $borderRadius;
+}

frontend/public/primevue-sass-theme/theme-base/components/button/_splitbutton.scss

@@ -0,0 +1,50 @@
+// core
+.p-splitbutton {
+    display: inline-flex;
+    position: relative;
+}
+
+.p-splitbutton .p-splitbutton-defaultbutton,
+.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
+    flex: 1 1 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0 none;
+}
+
+.p-splitbutton-menubutton,
+.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-splitbutton .p-menu {
+    min-width: 100%;
+}
+
+.p-fluid .p-splitbutton {
+    display: flex;
+}
+
+// theme
+.p-splitbutton {
+    border-radius: $borderRadius;
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+
+        > .p-button {
+            border-radius: $roundedButtonBorderRadius;
+        }
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_carousel.scss

@@ -0,0 +1,109 @@
+// core
+.p-carousel {
+    display: flex;
+    flex-direction: column;
+}
+
+.p-carousel-content {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.p-carousel-prev,
+.p-carousel-next {
+    align-self: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-carousel-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.p-carousel-items-content {
+    overflow: hidden;
+    width: 100%;
+}
+
+.p-carousel-items-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.p-carousel-indicators {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.p-carousel-indicator > button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Vertical */
+.p-carousel-vertical .p-carousel-container {
+    flex-direction: column;
+}
+
+.p-carousel-vertical .p-carousel-items-container {
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Keyboard Support */
+.p-items-hidden .p-carousel-item {
+    visibility: hidden;
+}
+
+.p-items-hidden .p-carousel-item.p-carousel-item-active {
+    visibility: visible;
+}
+
+// theme
+.p-carousel {
+    .p-carousel-content {
+        .p-carousel-prev,
+        .p-carousel-next {
+            @include action-icon();
+            margin: $inlineSpacing;
+        }
+    }
+
+    .p-carousel-indicators {
+        padding: $carouselIndicatorsPadding;
+
+        .p-carousel-indicator {
+            margin-right: $inlineSpacing;
+            margin-bottom: $inlineSpacing;
+           
+            button {
+                background-color: $carouselIndicatorBg;
+                width: $carouselIndicatorWidth;
+                height: $carouselIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $carouselIndicatorBorderRadius;
+
+                &:hover {
+                    background: $carouselIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_datatable.scss

@@ -0,0 +1,584 @@
+// core
+.p-datatable {
+    position: relative;
+}
+
+.p-datatable-table {
+    border-spacing: 0px;
+    width: 100%;
+}
+
+.p-datatable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-datatable .p-sortable-column .p-column-title,
+.p-datatable .p-sortable-column .p-sortable-column-icon,
+.p-datatable .p-sortable-column .p-sortable-column-badge {
+    vertical-align: middle;
+}
+
+.p-datatable .p-sortable-column .p-sortable-column-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-datatable-hoverable-rows .p-selectable-row {
+    cursor: pointer;
+}
+
+/* Scrollable */
+.p-datatable-scrollable > .p-datatable-wrapper {
+    position: relative;
+}
+
+.p-datatable-scrollable-table > .p-datatable-thead {
+    top: 0;
+    z-index: 1;
+}
+
+.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+    position: sticky;
+    z-index: 1;
+}
+
+.p-datatable-scrollable-table > .p-datatable-tfoot {
+    bottom: 0;
+    z-index: 1;
+}
+
+.p-datatable-scrollable .p-frozen-column {
+    position: sticky;
+    background: inherit;
+}
+
+.p-datatable-scrollable th.p-frozen-column {
+    z-index: 1;
+}
+
+.p-datatable-flex-scrollable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.p-datatable-flex-scrollable > .p-datatable-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+
+.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
+    position: sticky;
+    z-index: 1;
+}
+
+/* Resizable */
+.p-datatable-resizable-table > .p-datatable-thead > tr > th,
+.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
+    background-clip: padding-box;
+    position: relative;
+}
+
+.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
+    display: none;
+}
+
+.p-datatable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+}
+
+.p-datatable .p-column-header-content {
+    display: flex;
+    align-items: center;
+}
+
+.p-datatable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+}
+
+.p-datatable .p-row-editor-init,
+.p-datatable .p-row-editor-save,
+.p-datatable .p-row-editor-cancel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Expand */
+.p-datatable .p-row-toggler {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Reorder */
+.p-datatable-reorder-indicator-up,
+.p-datatable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+}
+
+.p-reorderable-column,
+.p-datatable-reorderablerow-handle {
+    cursor: move;
+}
+
+/* Loader */
+.p-datatable .p-datatable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+/* Filter */
+.p-column-filter-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.p-column-filter-menu {
+    display: inline-flex;
+    margin-left: auto;
+}
+
+.p-column-filter-row .p-column-filter-element {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-column-filter-menu-button,
+.p-column-filter-clear-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-column-filter-row-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-column-filter-row-item {
+    cursor: pointer;
+}
+
+.p-column-filter-add-button,
+.p-column-filter-remove-button {
+    justify-content: center;
+}
+
+.p-column-filter-add-button .p-button-label,
+.p-column-filter-remove-button .p-button-label {
+    flex-grow: 0;
+}
+
+.p-column-filter-buttonbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
+    width: auto;
+}
+
+/* Responsive */
+.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+    display: none;
+}
+
+/* VirtualScroller */
+.p-datatable-virtualscroller-spacer {
+    display: flex;
+}
+
+.p-datatable .p-virtualscroller .p-virtualscroller-loading {
+    transform: none !important;
+    min-height: 0;
+    position: sticky;
+    top: 0;
+    left: 0;
+}
+
+// theme
+.p-datatable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-datatable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-datatable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-datatable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-datatable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+
+            &:hover {
+                background: $tableHeaderCellHighlightHoverBg;
+                color: $tableHeaderCellHighlightTextColor;
+    
+                .p-sortable-column-icon {
+                    color: $tableHeaderCellHighlightTextColor;
+                }
+            }
+        }
+
+        &:focus-visible {
+            box-shadow: $inputListItemFocusShadow;
+            outline: 0 none;
+        }
+    }
+
+    .p-datatable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-row-toggler,
+                .p-row-editor-init,
+                .p-row-editor-save,
+                .p-row-editor-cancel {
+                    @include action-icon();
+                }
+
+                .p-row-editor-save {
+                    margin-right: $inlineSpacing;
+                }
+
+                > .p-column-title {
+                    font-weight: $tableHeaderCellFontWeight;
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &.p-highlight-contextmenu {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $highlightBg;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $highlightBg;
+            }
+        }
+    }
+
+    &.p-datatable-hoverable-rows {
+        .p-datatable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
+        > .p-datatable-thead,
+        > .p-datatable-tfoot {
+            background-color: $tableHeaderCellBg;
+        }
+    }
+
+    .p-datatable-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width:  $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    &.p-datatable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-datatable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-paginator-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-paginator-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-datatable-thead {
+            > tr {
+                > th {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px 0 0 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 0 1px;
+                    }
+                }
+
+                &:last-child {
+                    > td {
+                        border-width: 1px 0 1px 1px;
+
+                        &:last-child {
+                            border-width: 1px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-thead + .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
+            > tr {
+                &:last-child {
+                    > td {
+                        border-width: 0 0 0 1px;
+
+                        &:last-child {
+                            border-width: 0 1px 0 1px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-striped {
+        .p-datatable-tbody {
+            > tr.p-row-odd {
+                background: $tableBodyRowEvenBg;
+    
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+    
+                    .p-row-toggler {
+                        color: $highlightTextColor;
+    
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-sm {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleSM);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-datatable-lg {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_dataview.scss

@@ -0,0 +1,38 @@
+.p-dataview {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-dataview-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-dataview-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    .p-dataview-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_filter.scss

@@ -0,0 +1,148 @@
+.p-column-filter-row {
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        margin-left: $inlineSpacing;
+    }
+}
+
+.p-column-filter-menu-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+    outline-color: transparent;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &.p-column-filter-menu-button-open,
+    &.p-column-filter-menu-button-open:hover {
+        background: $actionIconHoverBg;
+        color: $actionIconHoverColor;
+    }
+
+    &.p-column-filter-menu-button-active,
+    &.p-column-filter-menu-button-active:hover {
+        background: $highlightBg;
+        color: $highlightTextColor;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+
+}
+
+.p-column-filter-clear-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+    outline-color: transparent;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-column-filter-overlay {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+    min-width: $menuWidth;
+
+    .p-column-filter-row-items {
+        padding: $inputListPadding;
+
+        .p-column-filter-row-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus-visible {
+                @include focused-listitem();
+            }
+        }
+
+        .p-column-filter-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+}
+
+.p-column-filter-overlay-menu {
+    .p-column-filter-operator {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-column-filter-constraint {
+        padding: $panelContentPadding;
+        border-bottom: $divider;
+
+        .p-column-filter-matchmode-dropdown {
+            margin-bottom: $inlineSpacing;
+        }
+
+        .p-column-filter-remove-button {
+            margin-top: $inlineSpacing;
+        }
+
+        &:last-child {
+            border-bottom: 0 none;
+        }
+    }
+
+    .p-column-filter-add-rule {
+        padding: $panelFooterPadding;
+    }
+
+    .p-column-filter-buttonbar {
+        padding: $panelContentPadding;
+    } 
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_orderlist.scss

@@ -0,0 +1,130 @@
+// core
+.p-orderlist {
+    display: flex;
+}
+
+.p-orderlist-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.p-orderlist-list-container {
+    flex: 1 1 auto;
+}
+
+.p-orderlist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+}
+
+.p-orderlist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-orderlist.p-state-disabled .p-orderlist-item,
+.p-orderlist.p-state-disabled .p-button {
+    cursor: default;
+}
+
+.p-orderlist.p-state-disabled .p-orderlist-list {
+    overflow: hidden;
+}
+
+// theme
+.p-orderlist {
+    .p-orderlist-controls {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-orderlist-list-container {
+        background: $panelContentBg;
+        border: $panelContentBorder;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &.p-focus {
+            @include focused-input();
+        }
+    }
+
+    .p-orderlist-header {
+        color: $panelHeaderTextColor;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+    }
+
+    .p-orderlist-list {
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        outline: 0 none;
+        
+        &:not(:first-child) {
+            border-top: $panelContentBorder;
+        }
+
+        .p-orderlist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: transform $transitionDuration, $listItemTransition;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            &.p-focus {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+        }
+    }
+
+    &.p-orderlist-striped {
+        .p-orderlist-list {
+            .p-orderlist-item:nth-child(even) {
+                background: $panelContentEvenRowBg;
+
+                &:hover {
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_organizationchart.scss

@@ -0,0 +1,106 @@
+// core
+.p-organizationchart-table {
+    border-spacing: 0;
+    border-collapse: separate;
+    margin: 0 auto;
+}
+
+.p-organizationchart-table > tbody > tr > td {
+    text-align: center;
+    vertical-align: top;
+    padding: 0 0.75rem;
+}
+
+.p-organizationchart-node-content {
+    display: inline-block;
+    position: relative;
+}
+
+.p-organizationchart-node-content .p-node-toggler {
+    position: absolute;
+    bottom: -0.75rem;
+    margin-left: -0.75rem;
+    z-index: 2;
+    left: 50%;
+    user-select: none;
+    cursor: pointer;
+    width: 1.5rem;
+    height: 1.5rem;
+    text-decoration: none;
+}
+
+.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
+    position: relative;
+    top: 0.25rem;
+}
+
+.p-organizationchart-line-down {
+    margin: 0 auto;
+    height: 20px;
+    width: 1px;
+}
+
+.p-organizationchart-line-right {
+    border-radius: 0px;
+}
+
+.p-organizationchart-line-left {
+    border-radius: 0;
+}
+
+.p-organizationchart-selectable-node {
+    cursor: pointer;
+}
+
+// theme
+.p-organizationchart {
+    .p-organizationchart-node-content {
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+        }
+
+        &.p-highlight {
+            background: $highlightBg;
+            color: $highlightTextColor;
+
+            .p-node-toggler {
+                i {
+                    color: darken($highlightBg, 25%);
+                }
+            }
+        }
+    }
+
+    .p-organizationchart-line-down {
+        background: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-left {
+        border-right: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-top {
+        border-top: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-node-content {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $panelContentPadding;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        background: inherit;
+        color: inherit;
+        border-radius: 50%;
+        outline-color: transparent;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_paginator.scss

@@ -0,0 +1,134 @@
+// core
+.p-paginator-default {
+    display: flex;
+}
+
+.p-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.p-paginator-left-content {
+    margin-right: auto;
+}
+
+.p-paginator-right-content {
+    margin-left: auto;
+}
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev,
+.p-paginator-current {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-paginator-element:focus {
+    z-index: 1;
+    position: relative;
+}
+
+// theme
+.p-paginator {
+    background: $paginatorBg;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $paginatorElementBorderRadius;
+        border-bottom-left-radius: $paginatorElementBorderRadius;
+    }
+    
+    .p-paginator-last {
+        border-top-right-radius: $paginatorElementBorderRadius;
+        border-bottom-right-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-page-input {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+
+        .p-inputtext {
+            max-width: $paginatorElementWidth;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: $highlightBg;
+                border-color: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_picklist.scss

@@ -0,0 +1,126 @@
+// core
+.p-picklist {
+    display: flex;
+}
+
+.p-picklist-buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.p-picklist-list-wrapper {
+    flex: 1 1 50%;
+}
+
+.p-picklist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+}
+
+.p-picklist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
+.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
+    transition: none;
+}
+
+// theme
+.p-picklist {
+    .p-picklist-buttons {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-picklist-list-wrapper {
+        background: $panelContentBg;
+        border: $panelContentBorder;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &.p-focus {
+            @include focused-input();
+        }
+    }
+
+    .p-picklist-header {
+        color: $panelHeaderTextColor;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+    }
+
+    .p-picklist-list {
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        outline: 0 none;
+
+        &:not(:first-child) {
+            border-top: $panelContentBorder;
+        }
+
+        .p-picklist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: transform $transitionDuration, $listItemTransition;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            &.p-focus {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+        }
+    }
+
+    &.p-picklist-striped {
+        .p-picklist-list {
+            .p-picklist-item:nth-child(even) {
+                background: $panelContentEvenRowBg;
+
+                &:hover {
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_timeline.scss

@@ -0,0 +1,151 @@
+// core
+.p-timeline {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+}
+
+.p-timeline-left .p-timeline-event-opposite {
+    text-align: right;
+}
+
+.p-timeline-left .p-timeline-event-content {
+    text-align: left;
+}
+
+.p-timeline-right .p-timeline-event {
+    flex-direction: row-reverse;
+}
+
+.p-timeline-right .p-timeline-event-opposite {
+    text-align: left;
+}
+
+.p-timeline-right .p-timeline-event-content {
+    text-align: right;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    flex-direction: row-reverse;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+    text-align: right;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+    text-align: left;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+    text-align: left;
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+    text-align: right;
+}
+
+.p-timeline-event {
+    display: flex;
+    position: relative;
+    min-height: 70px;
+}
+
+.p-timeline-event:last-child {
+    min-height: 0;
+}
+
+.p-timeline-event-opposite {
+    flex: 1;
+    padding: 0 1rem;
+}
+
+.p-timeline-event-content {
+    flex: 1;
+    padding: 0 1rem;
+}
+
+.p-timeline-event-separator {
+    flex: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.p-timeline-event-marker {
+    display: flex;
+    align-self: baseline;
+}
+
+.p-timeline-event-connector {
+    flex-grow: 1;
+}
+
+.p-timeline-horizontal {
+    flex-direction: row;
+}
+
+.p-timeline-horizontal .p-timeline-event {
+    flex-direction: column;
+    flex: 1;
+}
+
+.p-timeline-horizontal .p-timeline-event:last-child {
+    flex: 0;
+}
+
+.p-timeline-horizontal .p-timeline-event-separator {
+    flex-direction: row;
+}
+
+.p-timeline-horizontal .p-timeline-event-connector {
+    width: 100%;
+}
+
+.p-timeline-bottom .p-timeline-event {
+    flex-direction: column-reverse;
+}
+
+.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    flex-direction: column-reverse;
+}
+
+// theme
+.p-timeline {
+    .p-timeline-event-marker {
+        border: $timelineEventMarkerBorder; 
+        border-radius: $timelineEventMarkerBorderRadius;
+        width: $timelineEventMarkerWidth;
+        height: $timelineEventMarkerHeight;
+        background-color: $timelineEventMarkerBackground;
+    }
+
+    .p-timeline-event-connector {
+        background-color: $timelineEventColor;
+    }
+
+    &.p-timeline-vertical {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineVerticalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            width: $timelineEventConnectorSize;
+        }
+    }
+
+    &.p-timeline-horizontal {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineHorizontalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            height: $timelineEventConnectorSize;
+        }
+    }
+}
+
+
+

frontend/public/primevue-sass-theme/theme-base/components/data/_tree.scss

@@ -0,0 +1,174 @@
+// core
+.p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+}
+
+.p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-tree-wrapper {
+    overflow: auto;
+}
+
+.p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+}
+
+.p-treenode-content {
+    display: flex;
+    align-items: center;
+}
+
+.p-tree-filter {
+    width: 100%;
+}
+
+.p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+}
+
+.p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tree-flex-scrollable {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    flex-direction: column;
+}
+
+.p-tree-flex-scrollable .p-tree-wrapper {
+    flex: 1;
+}
+
+// theme
+.p-tree {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $panelContentPadding;
+    border-radius: $borderRadius;
+
+    .p-tree-container {
+        .p-treenode {
+            padding: $treeNodePadding;
+            outline: 0 none;
+
+            &:focus > .p-treenode-content {
+                @include focused-listitem();
+            }
+
+            .p-treenode-content {
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+                padding: $treeNodeContentPadding;
+
+                .p-tree-toggler {
+                    margin-right: $inlineSpacing;
+                    @include action-icon();
+                }
+
+                .p-treenode-icon {
+                    margin-right: $inlineSpacing;
+                    color: $treeNodeIconColor;
+                }
+
+                .p-checkbox {
+                    margin-right: $inlineSpacing;
+
+                    &.p-indeterminate {
+                        .p-checkbox-icon {
+                            color: $textColor;
+                        }
+                    }
+                }
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+
+                    .p-tree-toggler,
+                    .p-treenode-icon {
+                        color: $highlightTextColor;
+
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-tree-filter-container {
+        margin-bottom: $inlineSpacing;
+
+        .p-tree-filter {
+            width: 100%;
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-tree-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-treenode-children {
+        padding: $treeNodeChildrenPadding;
+    }
+
+    .p-tree-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width:  $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/data/_treetable.scss

@@ -0,0 +1,422 @@
+// core
+.p-treetable {
+    position: relative;
+}
+
+.p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treetable-responsive-scroll > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
+.p-treetable-auto-layout > .p-treetable-wrapper > table {
+    table-layout: auto;
+}
+
+.p-treetable-hoverable-rows .p-treetable-tbody > tr {
+    cursor: pointer;
+}
+
+.p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+}
+
+.p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+}
+
+/* Resizable */
+.p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-resizable .p-treetable-thead > tr > th,
+.p-treetable-resizable .p-treetable-tfoot > tr > td,
+.p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+}
+
+.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
+    background-clip: padding-box;
+    position: relative;
+}
+
+.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+}
+
+.p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+}
+
+.p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+}
+
+.p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+/* Scrollable */
+.p-treetable-scrollable .p-treetable-wrapper {
+    position: relative;
+    overflow: auto;
+}
+
+.p-treetable-scrollable .p-treetable-table {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead,
+.p-treetable-scrollable .p-treetable-tbody,
+.p-treetable-scrollable .p-treetable-tfoot {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr,
+.p-treetable-scrollable .p-treetable-tbody > tr,
+.p-treetable-scrollable .p-treetable-tfoot > tr {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr > th,
+.p-treetable-scrollable .p-treetable-tbody > tr > td,
+.p-treetable-scrollable .p-treetable-tfoot > tr > td {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+}
+
+.p-treetable-scrollable .p-treetable-thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-treetable-tfoot {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-frozen-column {
+    position: sticky;
+    background: inherit;
+}
+
+.p-treetable-scrollable th.p-frozen-column {
+    z-index: 1;
+}
+
+.p-treetable-scrollable-both .p-treetable-thead > tr > th,
+.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
+    flex: 0 0 auto;
+}
+
+.p-treetable-flex-scrollable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.p-treetable-flex-scrollable .p-treetable-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+
+// theme
+.p-treetable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-treetable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-treetable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-treetable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-treetable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        outline-color: $focusOutlineColor;
+
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-treetable-toggler {
+                    @include action-icon();
+                    margin-right: $inlineSpacing;
+                    
+                    & + .p-checkbox {
+                        margin-right: $inlineSpacing;
+                        
+                        &.p-indeterminate {
+                            .p-checkbox-icon {
+                                color: $textColor;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+
+                .p-treetable-toggler {
+                    color: $highlightTextColor;
+
+                    &:hover {
+                        color: $highlightTextColor;
+                    }
+                    
+                }
+            }
+        }
+    }
+
+    &.p-treetable-hoverable-rows {
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+
+            .p-treetable-toggler {
+                color: $tableBodyRowTextHoverColor;
+            }
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-treetable-scrollable-header,
+    .p-treetable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    .p-treetable-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width:  $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    &.p-treetable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-treetable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-treetable-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-thead {
+            > tr {
+                > th {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+    }
+
+    &.p-treetable-sm {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $scaleSM);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-treetable-lg {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/file/_fileupload.scss

@@ -0,0 +1,128 @@
+// core
+.p-fileupload-content {
+    position: relative;
+}
+
+.p-fileupload-content .p-progressbar {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.p-button.p-fileupload-choose {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-fileupload-buttonbar {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.p-fileupload > input[type='file'],
+.p-fileupload-basic input[type='file'] {
+    display: none;
+}
+
+.p-fluid .p-fileupload .p-button {
+    width: auto;
+}
+
+.p-fileupload-file {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.p-fileupload-file-thumbnail {
+    flex-shrink: 0;
+}
+
+.p-fileupload-file-actions {
+    margin-left: auto;
+}
+
+// theme
+.p-fileupload {
+    .p-fileupload-buttonbar {
+        background: $panelHeaderBg;
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+        gap: $inlineSpacing;
+
+        .p-button {
+            &.p-fileupload-choose.p-focus {
+                @include focused();
+            }
+        }
+    }
+
+    .p-fileupload-content {
+        background: $panelContentBg;
+        padding: $fileUploadContentPadding;
+        border: $panelContentBorder;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.p-fileupload-highlight {
+            border: $fileUploadContentHoverBorder;
+            background-color: $highlightBg;
+        }
+    }
+
+    .p-fileupload-file {
+        padding: $fileUploadFilePadding;
+        border: $fileUploadFileBorder;
+        border-radius: $borderRadius;
+        gap: $inlineSpacing;
+        margin-bottom: $inlineSpacing;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .p-fileupload-file-name {
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-fileupload-file-size {
+        margin-right: $inlineSpacing;
+    }
+
+    .p-progressbar {
+        height: $fileUploadProgressBarHeight;
+    }
+
+    .p-fileupload-row {
+        >div {
+            padding: $tableBodyCellPadding;
+        }
+    }
+
+    &.p-fileupload-advanced {
+        .p-message {
+            margin-top: 0;
+        }
+    }
+}
+
+.p-fileupload-choose {
+    &:not(.p-disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(.p-disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_autocomplete.scss

@@ -0,0 +1,216 @@
+@use "sass:math";
+
+// core
+.p-autocomplete {
+    display: inline-flex;
+}
+
+.p-autocomplete-loader {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-autocomplete-dd .p-autocomplete-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-autocomplete-dd .p-autocomplete-input,
+.p-autocomplete-dd .p-autocomplete-multiple-container {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-autocomplete-dd .p-autocomplete-dropdown {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0px;
+}
+
+.p-autocomplete .p-autocomplete-panel {
+    min-width: 100%;
+}
+
+.p-autocomplete-panel {
+    position: absolute;
+    overflow: auto;
+    top: 0;
+    left: 0;
+}
+
+.p-autocomplete-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-autocomplete-item {
+    cursor: pointer;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-autocomplete-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-autocomplete-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-autocomplete-token-icon {
+    cursor: pointer;
+}
+
+.p-autocomplete-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+}
+
+.p-autocomplete-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+}
+
+.p-fluid .p-autocomplete {
+    display: flex;
+}
+
+.p-fluid .p-autocomplete-dd .p-autocomplete-input {
+    width: 1%;
+}
+
+// theme
+.p-autocomplete {
+    .p-autocomplete-loader {
+        right: nth($inputPadding, 2);
+    }
+
+    &.p-autocomplete-dd {
+        .p-autocomplete-loader {
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-autocomplete-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-autocomplete-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
+        outline-color: transparent;
+
+        .p-autocomplete-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+
+        .p-autocomplete-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-autocomplete-token-icon {
+                margin-left: $inlineSpacing;
+            }
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-autocomplete-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-autocomplete-items {
+        padding: $inputListPadding;
+
+        .p-autocomplete-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+
+        .p-autocomplete-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_calendar.scss

@@ -0,0 +1,408 @@
+// core
+.p-calendar {
+    display: inline-flex;
+    max-width: 100%;
+}
+
+.p-calendar .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-calendar-w-btn .p-inputtext {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-calendar-w-btn .p-datepicker-trigger {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-calendar .p-datepicker-trigger-icon {
+    cursor: pointer;
+}
+
+/* Fluid */
+.p-fluid .p-calendar {
+    display: flex;
+}
+
+.p-fluid .p-calendar .p-inputtext {
+    width: 1%;
+}
+
+/* Datepicker */
+.p-calendar .p-datepicker {
+    min-width: 100%;
+}
+
+.p-datepicker {
+    width: auto;
+}
+
+.p-datepicker-inline {
+    display: inline-block;
+    overflow-x: auto;
+}
+
+/* Header */
+.p-datepicker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.p-datepicker-header .p-datepicker-title {
+    margin: 0 auto;
+}
+
+.p-datepicker-prev,
+.p-datepicker-next {
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Multiple Month DatePicker */
+.p-datepicker-multiple-month .p-datepicker-group-container {
+    display: flex;
+}
+
+.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+    flex: 1 1 auto;
+}
+
+/* DatePicker Table */
+.p-datepicker table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.p-datepicker td > span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Month Picker */
+.p-monthpicker-month {
+    width: 33.3%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Year Picker */
+.p-yearpicker-year {
+    width: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+/*  Button Bar */
+.p-datepicker-buttonbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* Time Picker */
+.p-timepicker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-timepicker button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-timepicker > div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+/* Touch UI */
+.p-datepicker-touch-ui,
+.p-calendar .p-datepicker-touch-ui {
+    min-width: 80vw;
+}
+
+// theme
+.p-calendar {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+
+    &:not(.p-calendar-disabled).p-focus > .p-inputtext {
+        @include focused-input();
+    }
+}
+
+.p-datepicker {
+    padding: $calendarPadding;
+    background: $calendarInlineBg;
+    color: $calendarTextColor;
+    border: $calendarBorder;
+    border-radius: $borderRadius;
+
+    &:not(.p-datepicker-inline) {
+        background: $calendarBg;
+        border: $calendarOverlayBorder;
+        box-shadow: $inputOverlayShadow;
+
+        .p-datepicker-header {
+            background: $calendarHeaderBg;
+        }
+    }
+
+    .p-datepicker-header {
+        padding: $calendarHeaderPadding;
+        color: $calendarHeaderTextColor;
+        background: $calendarInlineHeaderBg;
+        font-weight: $calendarHeaderFontWeight;
+        margin: $inputListHeaderMargin;
+        border-bottom: $calendarHeaderBorder;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            @include action-icon();
+        }
+
+        .p-datepicker-title {
+            line-height: $actionIconHeight;
+
+            .p-datepicker-year,
+            .p-datepicker-month {
+                color: $calendarHeaderTextColor;
+                transition: $actionIconTransition;
+                font-weight: $calendarHeaderFontWeight;
+                padding: $calendarHeaderCellPadding;
+
+                &:enabled:hover {
+                    color: $calendarMonthYearHeaderHoverTextColor;
+                }
+            }
+
+            .p-datepicker-month {
+                margin-right: $inlineSpacing;
+            }
+        }
+    }
+
+    table {
+        font-size: $fontSize;
+        margin: $calendarTableMargin;
+
+        th {
+            padding: $calendarHeaderCellPadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+            }
+        }
+
+        td {
+            padding: $calendarCellDatePadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+                border-radius: $calendarCellDateBorderRadius;
+                transition: $listItemTransition;
+                border: $calendarCellDateBorder;
+                outline-color: transparent;
+
+                &.p-highlight {
+                    color: $highlightTextColor;
+                    background: $highlightBg;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+
+            &.p-datepicker-today {
+                > span {
+                    background: $calendarCellDateTodayBg;
+                    color: $calendarCellDateTodayTextColor;
+                    border-color: $calendarCellDateTodayBorderColor;
+
+                    &.p-highlight {
+                        color: $highlightTextColor;
+                        background: $highlightBg;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        padding: $calendarButtonBarPadding;
+        border-top: $divider;
+
+        .p-button {
+            width: auto;
+        }
+    }
+
+    .p-timepicker {
+        border-top: $divider;
+        padding: $calendarTimePickerPadding;
+
+        button {
+            @include action-icon();
+
+            &:last-child {
+                margin-top: 0.2em;
+            }
+        }
+
+        span {
+            font-size: $calendarTimePickerTimeFontSize;
+        }
+
+        > div {
+            padding: $calendarTimePickerElementPadding;
+        }
+    }
+
+    &.p-datepicker-timeonly {
+        .p-timepicker {
+            border-top: 0 none;
+        }
+    }
+
+    .p-monthpicker {
+        margin: $calendarTableMargin;
+
+        .p-monthpicker-month {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    .p-yearpicker {
+        margin: $calendarTableMargin;
+
+        .p-yearpicker-year {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    &.p-datepicker-multiple-month {
+        .p-datepicker-group {
+            border-left: $divider;
+            padding-right: $calendarPadding;
+            padding-left: $calendarPadding;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &:first-child {
+                padding-left: 0;
+                border-left: 0 none;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+    }
+
+    &.p-datepicker-mobile {
+        table {
+            th,
+            td {
+                padding: $calendarCellDatePaddingSM;
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        table {
+            td {
+                span:not(.p-highlight):not(.p-disabled) {
+                    outline-color: transparent;
+
+                    &:hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-monthpicker {
+            .p-monthpicker-month {
+                &:not(.p-disabled) {
+                    outline-color: transparent;
+
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-yearpicker {
+            .p-yearpicker-year {
+                &:not(.p-disabled) {
+                    outline-color: transparent;
+
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_cascadeselect.scss

@@ -0,0 +1,199 @@
+// core
+.p-cascadeselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-cascadeselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-cascadeselect-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.p-cascadeselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-cascadeselect .p-cascadeselect-panel {
+    min-width: 100%;
+}
+
+.p-cascadeselect-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+}
+
+.p-cascadeselect-item-content {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-cascadeselect-group-icon {
+    margin-left: auto;
+}
+
+.p-cascadeselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    min-width: 100%;
+}
+
+.p-fluid .p-cascadeselect {
+    display: flex;
+}
+
+.p-fluid .p-cascadeselect .p-cascadeselect-label {
+    width: 1%;
+}
+
+.p-cascadeselect-sublist {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+    display: none;
+}
+
+.p-cascadeselect-item-active {
+    overflow: visible;
+}
+
+.p-cascadeselect-item-active > .p-cascadeselect-sublist {
+    display: block;
+    left: 100%;
+    top: 0;
+}
+
+.p-cascadeselect-enter-from,
+.p-cascadeselect-leave-active {
+    opacity: 0;
+}
+
+.p-cascadeselect-enter-active {
+    transition: opacity 150ms;
+}
+
+// theme
+.p-cascadeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    .p-cascadeselect-label {
+        background: transparent;
+        border: 0 none;
+        padding: $inputPadding;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-cascadeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-cascadeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-cascadeselect-items {
+        padding: $inputListPadding;
+
+        .p-cascadeselect-item {
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
+            }
+
+            .p-cascadeselect-group-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_checkbox.scss

@@ -0,0 +1,158 @@
+// core
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// theme
+.p-checkbox {
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+
+    .p-checkbox-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: $checkboxBorder;
+        border-radius: $borderRadius;
+    }
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+
+            &.p-icon {
+                width: $checkboxIconFontSize;
+                height: $checkboxIconFontSize;
+            }
+        }
+    }
+
+    &.p-highlight {
+        .p-checkbox-box {
+            border-color: $checkboxActiveBorderColor;
+            background: $checkboxActiveBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-checkbox-input:hover) {
+            .p-checkbox-box {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-highlight {
+                .p-checkbox-box {
+                    border-color: $checkboxActiveHoverBorderColor;
+                    background: $checkboxActiveHoverBg;
+                    color: $checkboxIconActiveHoverColor;
+                }
+            }
+        }
+
+        &:has(.p-checkbox-input:focus-visible) {
+            .p-checkbox-box {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-checkbox-box {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+    .p-highlight {
+        .p-checkbox {
+            .p-checkbox-box {
+                border-color: $checkboxIconActiveColor;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_chips.scss

@@ -0,0 +1,102 @@
+@use "sass:math";
+
+// core
+.p-chips {
+    display: inline-flex;
+}
+
+.p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+}
+
+.p-chips-token-icon {
+    cursor: pointer;
+}
+
+.p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+}
+
+.p-fluid .p-chips {
+    display: flex;
+}
+
+// theme
+.p-chips {
+    &:not(.p-disabled):hover {
+        .p-chips-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-chips-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-chips-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        outline-color: transparent;
+
+        .p-chips-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+
+            .p-chips-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+
+        .p-chips-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_colorpicker.scss

@@ -0,0 +1,28 @@
+// core
+.p-colorpicker-panel .p-colorpicker-color {
+    background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
+}
+
+.p-colorpicker-panel .p-colorpicker-hue {
+    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
+}
+
+// theme
+.p-colorpicker-preview  {
+    width: $colorPickerPreviewWidth;
+    height: $colorPickerPreviewHeight;
+}
+
+.p-colorpicker-panel {
+    background: $colorPickerBg;
+    border: $colorPickerBorder;
+
+    .p-colorpicker-color-handle,
+    .p-colorpicker-hue-handle {
+        border-color: $colorPickerHandleColor;
+    }
+}
+
+.p-colorpicker-overlay-panel {
+    box-shadow: $inputOverlayShadow;
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_dropdown.scss

@@ -0,0 +1,252 @@
+// core
+.p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+}
+
+.p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+}
+
+input.p-dropdown-label {
+    cursor: default;
+}
+
+.p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+}
+
+.p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.p-dropdown-items-wrapper {
+    overflow: auto;
+}
+
+.p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.p-dropdown-item-group {
+    cursor: auto;
+}
+
+.p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-dropdown-filter {
+    width: 100%;
+}
+
+.p-dropdown-filter-container {
+    position: relative;
+}
+
+.p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-fluid .p-dropdown {
+    display: flex;
+}
+
+.p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+}
+
+// theme
+.p-dropdown {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+
+            .p-inputtext {
+                background-color: transparent;
+            }
+        }
+    }
+
+    &.p-dropdown-clearable {
+        .p-dropdown-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    .p-dropdown-label {
+        background: transparent;
+        border: 0 none;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:focus,
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-dropdown-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dropdown-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-dropdown-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-dropdown-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dropdown-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
+        }
+
+        .p-dropdown-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-dropdown-items {
+        padding: $inputListPadding;
+
+        .p-dropdown-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-dropdown-check-icon {
+                position: relative;
+                margin-left: -1 * $inlineSpacing;
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-dropdown-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-dropdown-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_editor.scss

@@ -0,0 +1,122 @@
+.p-editor-container {
+    .p-editor-toolbar {
+        background: $editorToolbarBg;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorToolbarBorder;
+
+            .ql-stroke {
+                stroke: $editorToolbarIconColor;
+            }
+    
+            .ql-fill {
+                fill: $editorToolbarIconColor;
+            }
+    
+            .ql-picker {
+                .ql-picker-label {
+                    border: 0 none;
+                    color: $editorToolbarIconColor;
+
+                    &:hover {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+                }
+
+                &.ql-expanded {
+                    .ql-picker-label {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+
+                    .ql-picker-options {
+                        background: $inputOverlayBg;
+                        border:$inputOverlayBorder;
+                        box-shadow:$inputOverlayShadow;
+                        border-radius: $borderRadius;
+                        padding: $inputListPadding;
+
+                        .ql-picker-item {
+                            color: $inputListItemTextColor;
+                            
+                            &:hover {
+                                color: $inputListItemTextHoverColor;
+                                background: $inputListItemHoverBg;
+                            }
+                        }
+                    }
+
+                    &:not(.ql-icon-picker) {
+                        .ql-picker-item {
+                            padding: $inputListItemPadding;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .p-editor-content {
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorContentBorder;
+        }
+
+        .ql-editor {
+            background: $inputBg;
+            color: $inputTextColor;
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .ql-snow.ql-toolbar button:hover,
+    .ql-snow.ql-toolbar button:focus {
+        color: $editorToolbarIconHoverColor;
+
+        .ql-stroke {
+            stroke: $editorToolbarIconHoverColor;
+        }
+
+        .ql-fill {
+            fill: $editorToolbarIconHoverColor;
+        }
+    }
+
+    .ql-snow.ql-toolbar button.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+        color: $editorIconActiveColor;
+
+        .ql-stroke {
+            stroke: $editorIconActiveColor;
+        }
+
+        .ql-fill {
+            fill: $editorIconActiveColor;
+        }
+
+        .ql-picker-label {
+            color: $editorIconActiveColor;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_floatlabel.scss

@@ -0,0 +1,46 @@
+// core
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label:has(textarea) label {
+    top: 1rem;
+}
+
+.p-float-label:has(input:focus) label,
+.p-float-label:has(input.p-filled) label,
+.p-float-label:has(input:-webkit-autofill) label,
+.p-float-label:has(textarea:focus) label,
+.p-float-label:has(textarea.p-filled) label,
+.p-float-label:has(.p-inputwrapper-focus) label,
+.p-float-label:has(.p-inputwrapper-filled) label {
+    top: -.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_iconfield.scss

@@ -0,0 +1,10 @@
+// core
+.p-icon-field {
+    position: relative;
+}
+
+.p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_inputgroup.scss

@@ -0,0 +1,102 @@
+// core
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+// theme
+.p-inputgroup-addon {
+    background: $inputGroupBg;
+    color: $inputGroupTextColor;
+    border-top: $inputBorder;
+    border-left: $inputBorder;
+    border-bottom: $inputBorder;
+    padding: $inputPadding;
+    min-width: $inputGroupAddOnMinWidth;
+
+    &:last-child {
+        border-right: $inputBorder;
+    }
+}
+
+.p-inputgroup {
+    > .p-component,
+    > .p-inputwrapper > .p-inputtext,
+    > .p-float-label > .p-component {
+        border-radius: 0;
+        margin: 0;
+
+        + .p-inputgroup-addon {
+            border-left: 0 none;
+        }
+
+        &:focus {
+            z-index: 1;
+
+            ~ label {
+                z-index: 1;
+            }
+        }
+    }
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child,
+.p-inputgroup > .p-inputwrapper:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child,
+.p-inputgroup > .p-inputwrapper:last-child, 
+.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-fluid {
+    .p-inputgroup {
+        .p-button {
+            width: auto;
+
+            &.p-button-icon-only {
+                width: $buttonIconOnlyWidth;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_inputicon.scss

@@ -0,0 +1,15 @@
+// core
+.p-fluid .p-icon-field-left,
+.p-fluid .p-icon-field-right {
+    width: 100%;
+}
+
+.p-icon-field-left > .p-input-icon:first-of-type {
+    left: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-icon-field-right > .p-input-icon:last-of-type  {
+    right: nth($inputPadding, 2);
+    color: $inputIconColor;
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_inputnumber.scss

@@ -0,0 +1,120 @@
+// core
+.p-inputnumber {
+    display: inline-flex;
+}
+
+.p-inputnumber-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+}
+
+.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
+.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
+    display: none;
+}
+
+.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding: 0;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    padding: 0;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
+    flex: 1 1 auto;
+}
+
+.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
+    order: 3;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-input {
+    order: 2;
+    border-radius: 0;
+}
+
+.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
+    order: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-inputnumber-buttons-vertical {
+    flex-direction: column;
+}
+
+.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
+    order: 1;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    width: 100%;
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-input {
+    order: 2;
+    border-radius: 0;
+    text-align: center;
+}
+
+.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
+    order: 3;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    width: 100%;
+}
+
+.p-inputnumber-input {
+    flex: 1 1 auto;
+}
+
+.p-fluid .p-inputnumber {
+    width: 100%;
+}
+
+.p-fluid .p-inputnumber .p-inputnumber-input {
+    width: 1%;
+}
+
+.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
+    width: 100%;
+}
+
+// theme
+.p-inputnumber {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled > .p-inputnumber-input {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_inputotp.scss

@@ -0,0 +1,10 @@
+.p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: $inlineSpacing;
+}
+
+.p-inputotp-input {
+    text-align: center;
+    width: 2 * nth($inputPadding, 2) + 1rem;
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_inputswitch.scss

@@ -0,0 +1,99 @@
+@use 'sass:math';
+
+// core
+.p-inputswitch {
+    display: inline-block;
+}
+
+.p-inputswitch-input {
+    cursor: pointer;
+}
+
+.p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+}
+
+.p-inputswitch-slider:before {
+    position: absolute;
+    content: '';
+    top: 50%;
+}
+
+// theme
+.p-inputswitch {
+    width: $inputSwitchWidth;
+    height: $inputSwitchHeight;
+
+    .p-inputswitch-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border-radius: $inputSwitchBorderRadius;
+    }
+
+    .p-inputswitch-slider {
+        background: $inputSwitchSliderOffBg;
+        transition: $formElementTransition;
+        border-radius: $inputSwitchBorderRadius;
+        outline-color: transparent;
+
+        &:before {
+            background: $inputSwitchHandleOffBg;
+            width: $inputSwitchHandleWidth;
+            height: $inputSwitchHandleHeight;
+            left: $inputSwitchSliderPadding;
+            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+            border-radius: $inputSwitchHandleBorderRadius;
+            transition-duration: $transitionDuration;
+        }
+    }
+
+    &.p-highlight {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOnBg;
+
+            &:before {
+                background: $inputSwitchHandleOnBg;
+                transform: translateX($inputSwitchHandleWidth);
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-inputswitch-input:hover) {
+            .p-inputswitch-slider {
+                background: $inputSwitchSliderOffHoverBg;
+            }
+
+            &.p-highlight {
+                .p-inputswitch-slider {
+                    background: $inputSwitchSliderOnHoverBg;
+                }
+            }
+        }
+
+        &:has(.p-inputswitch-input:focus-visible) {
+            .p-inputswitch-slider {
+                @include focused();
+            }
+        }
+    }
+
+    &.p-invalid > .p-inputswitch-slider {
+        @include invalid-input();
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_inputtext.scss

@@ -0,0 +1,107 @@
+// core
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+// theme
+.p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $inputTextFontSize;
+    color: $inputTextColor;
+    background: $inputBg;
+    padding: $inputPadding;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    appearance: none;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        @include focused-input();
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    &.p-inputtext-sm {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+
+    &.p-inputtext-lg {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
+
+.p-float-label > label {
+    left: nth($inputPadding, 2);
+    color: $inputPlaceholderTextColor;
+    transition-duration: $transitionDuration;
+}
+
+.p-float-label > .p-invalid + label {
+    color: $inputErrorBorderColor;
+}
+
+.p-icon-field-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-right > .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+@include placeholder {
+    color: $inputPlaceholderTextColor;
+}
+
+.p-input-filled {
+    .p-inputtext {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-inputtext-sm {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+}
+
+.p-inputtext-lg {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_knob.scss

@@ -0,0 +1,20 @@
+// core
+.p-knob-range {
+    fill: none;
+    transition: stroke 0.1s ease-in;
+}
+.p-knob-value {
+    animation-name: dash-frame;
+    animation-fill-mode: forwards;
+    fill: none;
+}
+.p-knob-text {
+    font-size: 1.3rem;
+    text-align: center;
+}
+
+@keyframes dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_listbox.scss

@@ -0,0 +1,139 @@
+// core
+.p-listbox-list-wrapper {
+    overflow: auto;
+}
+
+.p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-listbox-item-group {
+    cursor: auto;
+}
+
+.p-listbox-filter-container {
+    position: relative;
+}
+
+.p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-listbox-filter {
+    width: 100%;
+}
+
+// theme
+.p-listbox {
+    background: $inputListBg;
+    color: $inputListTextColor;
+    border: $inputListBorder;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+    outline-color: transparent;
+
+    .p-listbox-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputListHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-listbox-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-listbox-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-listbox-list {
+        padding: $inputListPadding;
+        outline: 0 none;
+
+        .p-listbox-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+
+        .p-listbox-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-listbox-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        .p-listbox-item {
+            &.p-highlight {
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+
+                    &.p-focus {
+                        color: $inputListItemTextHoverColor;
+                        background: $inputListItemHoverBg;
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-focus {
+        @include focused-input();
+    }
+
+    &.p-invalid {
+        @include invalid-input();
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_multiselect.scss

@@ -0,0 +1,278 @@
+@use "sass:math";
+
+// core
+.p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-multiselect-token-icon {
+    cursor: pointer;
+}
+
+.p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+}
+
+.p-multiselect-items-wrapper {
+    overflow: auto;
+}
+
+.p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-multiselect-item-group {
+    cursor: auto;
+}
+
+.p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+}
+
+.p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+}
+
+.p-fluid .p-multiselect {
+    display: flex;
+}
+
+// theme
+.p-multiselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    .p-multiselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-multiselect-chip {
+        .p-multiselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-multiselect-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    .p-multiselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-multiselect {
+        &.p-multiselect-chip {
+            .p-multiselect-label {
+                padding: math.div(nth($inputPadding, 1), 2)
+                    nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-multiselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-multiselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-multiselect-filter-container {
+            .p-inputtext {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+
+            .p-multiselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+        }
+
+        .p-checkbox {
+            margin-right: $inlineSpacing;
+        }
+
+        .p-multiselect-close {
+            margin-left: $inlineSpacing;
+            @include action-icon();
+        }
+    }
+
+    .p-multiselect-items {
+        padding: $inputListPadding;
+
+        .p-multiselect-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-multiselect-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-multiselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+

frontend/public/primevue-sass-theme/theme-base/components/input/_password.scss

@@ -0,0 +1,62 @@
+// core
+.p-password {
+    display: inline-flex;
+}
+
+.p-password .p-password-panel {
+    min-width: 100%;
+}
+
+.p-password-meter {
+    height: 10px;
+}
+
+.p-password-strength {
+    height: 100%;
+    width: 0;
+    transition: width 1s ease-in-out;
+}
+
+.p-fluid .p-password {
+    display: flex;
+}
+
+.p-password-input::-ms-reveal,
+.p-password-input::-ms-clear {
+    display: none;
+}
+
+// theme
+.p-password {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-password-panel {
+    padding: $panelContentPadding;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $inputOverlayShadow;
+    border-radius: $borderRadius;
+
+    .p-password-meter {
+        margin-bottom: $inlineSpacing;
+        background: $passwordMeterBg;
+
+        .p-password-strength {
+            &.weak {
+                background: $passwordWeakBg;
+            }
+
+            &.medium {
+                background: $passwordMediumBg;
+            }
+
+            &.strong {
+                background: $passwordStrongBg;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_radiobutton.scss

@@ -0,0 +1,170 @@
+// core
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton-input {
+    cursor: pointer;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+
+// theme
+.p-radiobutton {
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+
+    .p-radiobutton-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: $radiobuttonBorder;
+        border-radius: 50%;
+    }
+
+    .p-radiobutton-box {
+        border: $radiobuttonBorder;
+        background: $inputBg;
+        width: $radiobuttonWidth;
+        height: $radiobuttonHeight;
+        color: $textColor;
+        border-radius: 50%;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-radiobutton-icon {
+            width: $radiobuttonIconSize;
+            height: $radiobuttonIconSize;
+            transition-duration: $transitionDuration;
+            background-color: $radiobuttonIconActiveColor;
+        }
+    }
+
+    &.p-highlight {
+        .p-radiobutton-box {
+            border-color: $radiobuttonActiveBorderColor;
+            background: $radiobuttonActiveBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-radiobutton-input:hover) {
+            .p-radiobutton-box {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-highlight {
+                .p-radiobutton-box {
+                    border-color: $radiobuttonActiveHoverBorderColor;
+                    background: $radiobuttonActiveHoverBg;
+
+                    .p-radiobutton-icon {
+                        background-color: $radiobuttonIconActiveHoverColor;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-radiobutton-input:focus-visible) {
+            .p-radiobutton-box {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-radiobutton-box {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-radiobutton-box {
+                background: $radiobuttonActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-radiobutton-input:hover) {
+                .p-radiobutton-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-radiobutton-box {
+                        background: $radiobuttonActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-radiobutton-box {
+                background: $radiobuttonActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-radiobutton-input:hover) {
+                .p-radiobutton-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-radiobutton-box {
+                        background: $radiobuttonActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+    .p-highlight {
+        .p-radiobutton {
+            .p-radiobutton-box {
+                border-color: $radiobuttonIconActiveColor;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_rating.scss

@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+// core
+.p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.p-rating.p-readonly .p-rating-item {
+    cursor: default;
+}
+
+// theme
+.p-rating {
+    gap: $inlineSpacing;
+
+    .p-rating-item {
+        outline-color: transparent;
+        border-radius: 50%;
+        
+        .p-rating-icon {
+            color: $ratingStarIconOffColor;
+            transition: $formElementTransition;   
+            font-size: $ratingIconFontSize;
+
+            &.p-icon {
+                width: $ratingIconFontSize;
+                height: $ratingIconFontSize;
+            }
+    
+            &.p-rating-cancel {
+                color: $ratingCancelIconColor;
+            }
+        }
+
+        &.p-focus {
+            @include focused();
+        }
+
+        &.p-rating-item-active {
+            .p-rating-icon {
+                color: $ratingStarIconOnColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                .p-rating-icon {
+                    color: $ratingStarIconHoverColor;
+
+                    &.p-rating-cancel {
+                        color: $ratingCancelIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+    .p-highlight {
+        .p-rating {
+            .p-rating-item {
+                &.p-rating-item-active {
+                    .p-rating-icon {
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_selectbutton.scss

@@ -0,0 +1,50 @@
+.p-selectbutton {
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+
+            &:hover {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+                color: $toggleButtonTextActiveHoverColor;
+
+                .p-button-icon-left,
+                .p-button-icon-right {
+                    color: $toggleButtonIconActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_slider.scss

@@ -0,0 +1,91 @@
+@use 'sass:math';
+
+// core
+.p-slider {
+    position: relative;
+}
+
+.p-slider .p-slider-handle {
+    cursor: grab;
+    touch-action: none;
+    display: block;
+}
+
+.p-slider-range {
+    display: block;
+}
+
+.p-slider-horizontal .p-slider-range {
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+
+.p-slider-horizontal .p-slider-handle {
+    top: 50%;
+}
+
+.p-slider-vertical {
+    height: 100px;
+}
+
+.p-slider-vertical .p-slider-handle {
+    left: 50%;
+}
+
+.p-slider-vertical .p-slider-range {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+// theme
+.p-slider {
+    background: $sliderBg;
+    border: $sliderBorder;
+    border-radius: $borderRadius;
+
+    &.p-slider-horizontal {
+        height: $sliderHorizontalHeight;
+
+        .p-slider-handle {
+            margin-top: math.div(-1 * $sliderHandleHeight, 2);
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+        }
+    }
+
+    &.p-slider-vertical {
+        width: $sliderVerticalWidth;
+
+        .p-slider-handle {
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+            margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
+        }
+    }
+
+    .p-slider-handle {
+        height: $sliderHandleHeight;
+        width: $sliderHandleWidth;
+        background: $sliderHandleBg;
+        border: $sliderHandleBorder;
+        border-radius: $sliderHandleBorderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+
+    .p-slider-range {
+        background: $sliderRangeBg;
+        border-radius: $borderRadius;
+    }
+
+    &:not(.p-disabled) {
+        .p-slider-handle:hover {
+            background: $sliderHandleHoverBg;
+            border-color: $sliderHandleHoverBorderColor;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_textarea.scss

@@ -0,0 +1,9 @@
+// core
+.p-inputtextarea-resizable {
+    overflow: hidden;
+    resize: none;
+}
+
+.p-fluid .p-inputtextarea {
+    width: 100%;
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_togglebutton.scss

@@ -0,0 +1,100 @@
+// core
+.p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-togglebutton-input {
+    cursor: pointer;
+}
+
+.p-togglebutton .p-button {
+    flex: 1 1 auto;
+}
+
+// theme
+.p-togglebutton {
+    .p-togglebutton-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: $toggleButtonBorder;
+        border-radius: $borderRadius;
+    }
+
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+    }
+
+    &.p-highlight {
+        .p-button {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-togglebutton-input:hover) {
+            &:not(.p-highlight) {
+                .p-button {
+                    background: $toggleButtonHoverBg;
+                    border-color: $toggleButtonHoverBorderColor;
+                    color: $toggleButtonTextHoverColor;
+
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconHoverColor;
+                    }
+                }
+            }
+
+            &.p-highlight {
+                .p-button {
+                    background: $toggleButtonActiveHoverBg;
+                    border-color: $toggleButtonActiveHoverBorderColor;
+                    color: $toggleButtonTextActiveHoverColor;
+
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconActiveHoverColor;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-togglebutton-input:focus-visible) {
+            .p-button {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_treeselect.scss

@@ -0,0 +1,158 @@
+@use "sass:math";
+
+// core
+.p-treeselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treeselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-treeselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.p-treeselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.p-treeselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-treeselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-treeselect .p-treeselect-panel {
+    min-width: 100%;
+}
+
+.p-treeselect-items-wrapper {
+    overflow: auto;
+}
+
+.p-fluid .p-treeselect {
+    display: flex;
+}
+
+// theme
+.p-treeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    .p-treeselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-treeselect-chip {
+        .p-treeselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+        }
+    }
+
+    .p-treeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-treeselect {
+        &.p-treeselect-chip {
+            .p-treeselect-label {
+                padding: math.div(nth($inputPadding, 1), 2)
+                    nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-treeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-treeselect-items-wrapper {
+        .p-tree {
+            border: 0 none;
+        }
+
+        .p-treeselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-treeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/input/_tristatecheckbox.scss

@@ -0,0 +1,46 @@
+// core
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// theme
+.p-tristatecheckbox {
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_breadcrumb.scss

@@ -0,0 +1,77 @@
+// core
+.p-breadcrumb {
+    overflow-x: auto;
+}
+
+.p-breadcrumb .p-breadcrumb-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.p-breadcrumb .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-breadcrumb .p-menuitem-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.p-breadcrumb .p-menuitem-separator {
+    display: flex;
+    align-items: center;
+}
+
+.p-breadcrumb::-webkit-scrollbar {
+    display: none;
+}
+
+// theme
+.p-breadcrumb {
+    background: $breadcrumbBg;
+    border: $breadcrumbBorder;
+    border-radius: $borderRadius;
+    padding: $breadcrumbPadding;
+
+    .p-breadcrumb-list {
+        li {
+            .p-menuitem-link {
+                transition: $listItemTransition;
+                border-radius: $borderRadius;
+                outline-color: transparent;
+
+                &:focus-visible {
+                    @include focused();
+                }
+
+                .p-menuitem-text {
+                    color: $breadcrumbItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbItemIconColor;
+                }
+            }
+
+            &.p-menuitem-separator {
+                margin: 0 $inlineSpacing 0 $inlineSpacing;
+                color: $breadcrumbSeparatorColor;
+            }
+
+            &:last-child {
+                .p-menuitem-text {
+                    color: $breadcrumbLastItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbLastItemIconColor;
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_contextmenu.scss

@@ -0,0 +1,83 @@
+// core
+.p-contextmenu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-contextmenu .p-submenu-list {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+}
+
+.p-contextmenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-contextmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-contextmenu .p-menuitem {
+    position: relative;
+}
+
+.p-contextmenu .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+}
+
+.p-contextmenu-enter-from,
+.p-contextmenu-leave-active {
+    opacity: 0;
+}
+
+.p-contextmenu-enter-active {
+    transition: opacity 250ms;
+}
+
+// theme
+.p-contextmenu {
+    padding: $verticalMenuPadding;
+    background: $overlayMenuBg;
+    color: $menuTextColor;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+    border-radius: $borderRadius;
+    min-width: $menuWidth;
+
+    .p-contextmenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_dock.scss

@@ -0,0 +1,201 @@
+// core
+.p-dock {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+}
+
+.p-dock-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-dock-item {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+}
+
+.p-dock-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    cursor: default;
+}
+
+.p-dock-item-second-prev,
+.p-dock-item-second-next {
+    transform: scale(1.2);
+}
+
+.p-dock-item-prev,
+.p-dock-item-next {
+    transform: scale(1.4);
+}
+
+.p-dock-item-current {
+    transform: scale(1.6);
+    z-index: 1;
+}
+
+/* Position */
+/* top */
+.p-dock-top {
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.p-dock-top .p-dock-item {
+    transform-origin: center top;
+}
+
+/* bottom */
+.p-dock-bottom {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.p-dock-bottom .p-dock-item {
+    transform-origin: center bottom;
+}
+
+/* right */
+.p-dock-right {
+    right: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-right .p-dock-item {
+    transform-origin: center right;
+}
+
+.p-dock-right .p-dock-list {
+    flex-direction: column;
+}
+
+/* left */
+.p-dock-left {
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-left .p-dock-item {
+    transform-origin: center left;
+}
+
+.p-dock-left .p-dock-list {
+    flex-direction: column;
+}
+
+// theme
+.p-dock {
+    .p-dock-list-container {
+        background: $dockBg;
+        border: $dockBorder;
+        padding: $dockPadding;
+        border-radius: $dockBorderRadius;
+
+        .p-dock-list {
+            outline: 0 none;
+        }
+    }
+    
+    .p-dock-item {
+        padding: $dockItemPadding;
+        border-radius: $dockItemBorderRadius;
+
+        &.p-focus {
+            @include focused-listitem();
+        }
+    }
+
+    .p-dock-link {
+        width: $dockActionWidth;
+        height: $dockActionHeight;
+    }
+    
+    &.p-dock-top,
+    &.p-dock-bottom {
+        .p-dock-item-second-prev,
+        .p-dock-item-second-next {
+            margin: 0 $dockSecondItemsMargin;
+        }
+
+        .p-dock-item-prev,
+        .p-dock-item-next {
+            margin: 0 $dockFirstItemsMargin;
+        }
+
+        .p-dock-item-current {
+            margin: 0 $dockCurrentItemMargin;
+        }
+    }
+
+    &.p-dock-left,
+    &.p-dock-right {
+        .p-dock-item-second-prev,
+        .p-dock-item-second-next {
+            margin: $dockSecondItemsMargin 0;
+        }
+        
+        .p-dock-item-prev,
+        .p-dock-item-next {
+            margin: $dockFirstItemsMargin 0;
+        }
+
+        .p-dock-item-current {
+            margin: $dockCurrentItemMargin 0;
+        }
+    }
+
+    &.p-dock-mobile {
+        &.p-dock-top,
+        &.p-dock-bottom {
+            .p-dock-list-container {
+                overflow-x: auto;
+                width: 100%;
+
+                .p-dock-list {
+                    margin: 0 auto;
+                }
+            }
+        }
+
+        &.p-dock-left,
+        &.p-dock-right {
+            .p-dock-list-container {
+                overflow-y: auto;
+                height: 100%;
+
+                .p-dock-list {
+                    margin: auto 0;
+                }
+            }
+        }
+
+        .p-dock-list {
+            .p-dock-item {
+                transform: none;
+                margin: 0;
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_megamenu.scss

@@ -0,0 +1,301 @@
+// core
+.p-megamenu {
+    display: flex;
+    position: relative;
+}
+
+.p-megamenu-root-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-megamenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-megamenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-megamenu-panel {
+    display: none;
+    width: auto;
+    z-index: 1;
+    left: 0;
+    min-width: 100%;
+}
+
+.p-megamenu-panel:not(.p-megamenu-mobile) {
+    position: absolute;
+}
+
+.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+    display: block;
+}
+
+.p-megamenu-submenu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-megamenu-button {
+    display: none;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+/* Horizontal */
+.p-megamenu-horizontal {
+    align-items: center;
+}
+
+.p-megamenu-horizontal .p-megamenu-root-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-megamenu-horizontal .p-megamenu-end {
+    margin-left: auto;
+    align-self: center;
+}
+
+/* Vertical */
+.p-megamenu-vertical {
+    flex-direction: column;
+}
+
+.p-megamenu-vertical:not(.p-megamenu-mobile) {
+    display: inline-flex;
+}
+
+.p-megamenu-vertical .p-megamenu-root-list {
+    flex-direction: column;
+}
+
+.p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+    left: 100%;
+    top: 0;
+}
+
+.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+}
+
+.p-megamenu-grid {
+    display: flex;
+}
+
+.p-megamenu-col-2,
+.p-megamenu-col-3,
+.p-megamenu-col-4,
+.p-megamenu-col-6,
+.p-megamenu-col-12 {
+    flex: 0 0 auto;
+    padding: 0.5rem;
+}
+
+.p-megamenu-col-2 {
+    width: 16.6667%;
+}
+
+.p-megamenu-col-3 {
+    width: 25%;
+}
+
+.p-megamenu-col-4 {
+    width: 33.3333%;
+}
+
+.p-megamenu-col-6 {
+    width: 50%;
+}
+
+.p-megamenu-col-12 {
+    width: 100%;
+}
+
+.p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    display: flex;
+}
+
+.p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    position: absolute;
+    display: none;
+    width: 100%;
+}
+
+.p-megamenu.p-megamenu-mobile .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+}
+
+.p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+}
+
+.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    display: flex;
+    flex-direction: column;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+}
+
+.p-megamenu.p-megamenu-mobile .p-megamenu-grid {
+    flex-wrap: wrap;
+    overflow: auto;
+    max-height: 90%;
+}
+
+// theme
+.p-megamenu {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-megamenu-root-list {  
+        outline: 0 none;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-megamenu-panel {
+        background: $overlayMenuBg;
+        color: $menuTextColor;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $borderRadius; 
+        border-top-left-radius: $borderRadius; 
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        min-width: $menuWidth;
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+
+    &.p-megamenu-vertical {
+        min-width: $menuWidth;
+        padding: $verticalMenuPadding;
+    }
+
+    &.p-megamenu-horizontal {
+        .p-megamenu-root-list {  
+            > .p-menuitem {
+                @include horizontal-rootmenuitem();
+            }
+        }
+    }
+
+    &.p-megamenu-mobile {
+        &.p-megamenu-vertical {
+            width: 100%;
+            padding: $horizontalMenuPadding;
+        }
+
+        .p-megamenu-button {
+            width: $actionIconWidth;
+            height: $actionIconHeight;
+            color: $horizontalMenuRootMenuitemIconColor;
+            border-radius: $actionIconBorderRadius;
+            transition: $actionIconTransition;
+            outline-color: transparent;
+        
+            &:hover {
+                color: $horizontalMenuRootMenuitemIconHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+            }
+        
+            &:focus {
+                @include focused();
+            }
+        }
+
+        .p-megamenu-root-list {
+            padding: $verticalMenuPadding;
+            background: $overlayMenuBg;
+            border: $overlayMenuBorder;
+            box-shadow: $overlayMenuShadow;
+    
+            .p-menuitem-separator {
+                border-top: $divider;
+                margin: $menuSeparatorMargin;
+            }
+    
+            .p-submenu-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+
+            .p-menuitem {
+                .p-menuitem-content {
+                    .p-menuitem-link {
+                        .p-submenu-icon {
+                            margin-left: auto;
+                            transition: transform $transitionDuration;
+                        }
+                    }
+                }
+
+
+                &.p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-180deg);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .p-submenu-list {
+                .p-submenu-icon {
+                    transition: transform $transitionDuration;
+                    transform: rotate(90deg);
+                }
+
+                .p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-90deg);
+                            }
+                        }
+                    }
+                }
+            }
+    
+            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 2);
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_menu.scss

@@ -0,0 +1,54 @@
+// core
+.p-menu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-menu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-menu .p-menuitem-text {
+    line-height: 1;
+}
+
+// theme
+.p-menu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    min-width: $menuWidth;
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    &.p-menu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $submenuHeaderBorderRadius; 
+        border-top-left-radius: $submenuHeaderBorderRadius; 
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_menubar.scss

@@ -0,0 +1,222 @@
+// core
+.p-menubar {
+    display: flex;
+    align-items: center;
+}
+
+.p-menubar ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-menubar .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-menubar .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-menubar .p-menuitem {
+    position: relative;
+}
+
+.p-menubar-root-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-menubar-root-list > li ul {
+    display: none;
+    z-index: 1;
+}
+
+.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
+    display: block;
+}
+
+.p-menubar .p-submenu-list {
+    display: none;
+    position: absolute;
+    z-index: 1;
+}
+
+.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
+    display: block;
+    left: 100%;
+    top: 0;
+}
+
+.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+}
+
+.p-menubar .p-menubar-end {
+    margin-left: auto;
+    align-self: center;
+}
+
+.p-menubar-button {
+    display: none;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+.p-menubar.p-menubar-mobile {
+    position: relative; 
+}
+
+.p-menubar.p-menubar-mobile .p-menubar-button {
+    display: flex;
+}
+
+.p-menubar.p-menubar-mobile .p-menubar-root-list {
+    position: absolute;
+    display: none;
+    width: 100%;
+}
+
+.p-menubar.p-menubar-mobile .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+}
+
+.p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+}
+
+.p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+    display: flex;
+    flex-direction: column;
+    top: 100%;
+    left: 0;
+    z-index: 1;
+}
+
+// theme
+.p-menubar {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-menubar-root-list {
+        outline: 0 none;
+
+        > .p-menuitem {
+            @include horizontal-rootmenuitem();
+        }
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        min-width: $menuWidth;
+        border-radius: $borderRadius;
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-icon {
+            font-size: $menuitemSubmenuIconFontSize;
+        }
+    }
+
+    &.p-menubar-mobile {
+        .p-menubar-button {
+            width: $actionIconWidth;
+            height: $actionIconHeight;
+            color: $horizontalMenuRootMenuitemIconColor;
+            border-radius: $actionIconBorderRadius;
+            transition: $actionIconTransition;
+            outline-color: transparent;
+        
+            &:hover {
+                color: $horizontalMenuRootMenuitemIconHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+            }
+        
+            &:focus {
+                @include focused();
+            }
+        }
+
+        .p-menubar-root-list {
+            padding: $verticalMenuPadding;
+            background: $overlayMenuBg;
+            border: $overlayMenuBorder;
+            box-shadow: $overlayMenuShadow;
+    
+            .p-menuitem-separator {
+                border-top: $divider;
+                margin: $menuSeparatorMargin;
+            }
+    
+            .p-submenu-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+
+            .p-menuitem {
+                .p-menuitem-content {
+                    .p-menuitem-link {
+                        .p-submenu-icon {
+                            margin-left: auto;
+                            transition: transform $transitionDuration;
+                        }
+                    }
+                }
+
+
+                &.p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-180deg);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .p-submenu-list {
+                .p-submenu-icon {
+                    transition: transform $transitionDuration;
+                    transform: rotate(90deg);
+                }
+
+                .p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-90deg);
+                            }
+                        }
+                    }
+                }
+            }
+    
+            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_panelmenu.scss

@@ -0,0 +1,189 @@
+// core
+.p-panelmenu .p-panelmenu-header-action {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-panelmenu .p-panelmenu-header-action:focus {
+    z-index: 1;
+}
+
+.p-panelmenu .p-submenu-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-panelmenu .p-menuitem-link {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-panelmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+// theme
+.p-panelmenu {
+    .p-panelmenu-header {
+        outline: 0 none;
+
+        .p-panelmenu-header-content {
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+            outline-color: transparent;
+
+            .p-panelmenu-header-action {
+                color: $accordionHeaderTextColor;
+                padding: $accordionHeaderPadding;
+                font-weight: $accordionHeaderFontWeight;
+
+                .p-submenu-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:focus-visible {
+                .p-panelmenu-header-content {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-bottom: 0;
+            }
+
+            &:hover {
+                .p-panelmenu-header-content {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-panelmenu-content {
+        padding: $verticalMenuPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-panelmenu-root-list {
+            outline: 0 none;
+        }
+
+        .p-menuitem {
+            @include menuitem();
+
+            .p-menuitem-content {
+                .p-menuitem-link { 
+                    .p-submenu-icon {
+                        margin-right: $inlineSpacing;
+                    }
+                }
+            }
+        }
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-list:not(.p-panelmenu-root-list) {
+            padding: $treeNodeChildrenPadding;
+        }
+    }
+
+    .p-panelmenu-panel {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-panelmenu-header {
+                .p-panelmenu-header-content {
+                    border-radius: 0;
+                }
+            }
+
+            .p-panelmenu-content {
+                border-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-panelmenu-header {
+                    .p-panelmenu-header-content {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-panelmenu-header-content {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-panelmenu-header {
+                    .p-panelmenu-header-content {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-panelmenu-header:not(.p-highlight) {
+                    .p-panelmenu-header-content {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+
+                .p-panelmenu-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_steps.scss

@@ -0,0 +1,112 @@
+@use 'sass:math';
+
+// core
+.p-steps {
+    position: relative;
+}
+
+.p-steps .p-steps-list {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+}
+
+.p-steps-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex: 1 1 auto;
+    overflow: hidden;
+}
+
+.p-steps-item .p-menuitem-link {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.p-steps.p-steps-readonly .p-steps-item {
+    cursor: auto;
+}
+
+.p-steps-item.p-steps-current .p-menuitem-link {
+    cursor: default;
+}
+
+.p-steps-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.p-steps-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-steps-title {
+    display: block;
+}
+
+// theme
+.p-steps {
+    .p-steps-item {
+        .p-menuitem-link {
+            background: transparent;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+            outline-color: transparent;
+
+            .p-steps-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                z-index: 1;
+                border-radius: $stepsItemNumberBorderRadius;
+            }
+
+            .p-steps-title {
+                margin-top: $inlineSpacing;
+                color: $stepsItemTextColor;
+            }
+
+            &:not(.p-disabled):focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-steps-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-steps-title {
+                font-weight: $stepsItemActiveFontWeight;
+                color: $textColor;
+            }
+        }
+
+        &:before {
+            content:' ';
+            border-top: $divider;
+            width: 100%;
+            top: 50%;
+            left: 0;
+            display: block;
+            position: absolute;
+            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_tabmenu.scss

@@ -0,0 +1,92 @@
+// core
+.p-tabmenu {
+    overflow-x: auto;
+}
+
+.p-tabmenu-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex-wrap: nowrap;
+}
+
+.p-tabmenu-nav a {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+.p-tabmenu-nav a:focus {
+    z-index: 1;
+}
+
+.p-tabmenu-nav .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-tabmenu-ink-bar {
+    display: none;
+    z-index: 1;
+}
+
+.p-tabmenu::-webkit-scrollbar {
+    display: none;
+}
+
+// theme
+.p-tabmenu {
+    .p-tabmenu-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        .p-tabmenuitem {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-menuitem-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+                outline-color: transparent;
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-menuitem-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-menuitem-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/menu/_tieredmenu.scss

@@ -0,0 +1,95 @@
+// core
+.p-tieredmenu ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-tieredmenu .p-submenu-list {
+    position: absolute;
+    min-width: 100%;
+    z-index: 1;
+    display: none;
+}
+
+.p-tieredmenu .p-menuitem-link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-tieredmenu .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-tieredmenu .p-menuitem {
+    position: relative;
+}
+
+.p-tieredmenu .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+}
+
+.p-tieredmenu .p-menuitem-active > .p-submenu-list {
+    display: block;
+    left: 100%;
+    top: 0;
+}
+
+.p-tieredmenu-enter-from,
+.p-tieredmenu-leave-active {
+    opacity: 0;
+}
+
+.p-tieredmenu-enter-active {
+    transition: opacity 250ms;
+}
+
+// theme
+.p-tieredmenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    min-width: $menuWidth;
+
+    &.p-tieredmenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-tieredmenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/messages/_inlinemessage.scss

@@ -0,0 +1,112 @@
+// core
+.p-inline-message {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+}
+
+.p-inline-message-icon {
+    flex-shrink: 0;
+}
+
+.p-inline-message-icon-only .p-inline-message-text {
+    visibility: hidden;
+    width: 0;
+}
+
+.p-fluid .p-inline-message {
+    display: flex;
+}
+
+// theme
+.p-inline-message {
+    padding: $inlineMessagePadding;
+    margin: $inlineMessageMargin;
+    border-radius: $borderRadius;
+
+    &.p-inline-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-inline-message-secondary {
+            background: $secondaryMessageBg;
+            border: $secondaryMessageBorder;
+            border-width: $inlineMessageBorderWidth;
+            color: $secondaryMessageTextColor;
+
+            .p-inline-message-icon {
+                color: $secondaryMessageIconColor;
+            }
+        }
+    }
+
+    @if variable-exists(contrastMessageBg) {
+        &.p-inline-message-contrast {
+            background: $contrastMessageBg;
+            border: $contrastMessageBorder;
+            border-width: $inlineMessageBorderWidth;
+            color: $contrastMessageTextColor;
+
+            .p-inline-message-icon {
+                color: $contrastMessageIconColor;
+            }
+        }
+    }
+
+    .p-inline-message-icon {
+        font-size: $inlineMessageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-inline-message-text {
+        font-size: $inlineMessageTextFontSize;
+    }
+
+    &.p-inline-message-icon-only {
+        .p-inline-message-icon {
+            margin-right: 0;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/messages/_message.scss

@@ -0,0 +1,185 @@
+// core
+.p-message-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.p-message-icon {
+    flex-shrink: 0;
+}
+
+.p-message-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-message-close.p-link {
+    margin-left: auto;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-message-enter-from {
+    opacity: 0;
+}
+
+.p-message-enter-active {
+    transition: opacity 0.3s;
+}
+
+.p-message.p-message-leave-from {
+    max-height: 1000px;
+}
+
+.p-message.p-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+}
+
+.p-message-leave-active {
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
+}
+
+.p-message-leave-active .p-message-close {
+    display: none;
+}
+
+// theme
+.p-message {
+    margin: $messageMargin;
+    border-radius: $borderRadius;
+
+    .p-message-wrapper {
+        padding: $messagePadding;
+    }
+
+    .p-message-close {
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        border-radius: $actionIconBorderRadius;
+        background: transparent;
+        transition: $actionIconTransition;
+        outline-color: transparent;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+
+    &.p-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-message-icon {
+            color: $infoMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-message-icon {
+            color: $successMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-message-icon {
+            color: $warningMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-message-icon {
+            color: $errorMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-message-secondary {
+            background: $secondaryMessageBg;
+            border: $secondaryMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $secondaryMessageTextColor;
+
+            .p-message-icon {
+                color: $secondaryMessageIconColor;
+            }
+
+            .p-message-close {
+                color: $secondaryMessageIconColor;
+            }
+        }
+    }
+
+    @if variable-exists(contrastMessageBg) {
+        &.p-message-contrast {
+            background: $contrastMessageBg;
+            border: $contrastMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $contrastMessageTextColor;
+
+            .p-message-icon {
+                color: $contrastMessageIconColor;
+            }
+
+            .p-message-close {
+                color: $contrastMessageIconColor;
+            }
+        }
+    }
+
+    .p-message-text {
+        font-size: $messageTextFontSize;
+        font-weight: $messageTextFontWeight;
+    }
+
+    .p-message-icon {
+        font-size: $messageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-icon:not(.p-message-close-icon) {
+        width: $messageIconFontSize;
+        height: $messageIconFontSize;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/messages/_toast.scss

@@ -0,0 +1,203 @@
+// core
+.p-toast {
+    width: 25rem;
+    white-space: pre-line;
+    word-break: break-word;
+}
+
+.p-toast-message-icon {
+    flex-shrink: 0;
+}
+
+.p-toast-message-content {
+    display: flex;
+    align-items: flex-start;
+}
+
+.p-toast-message-text {
+    flex: 1 1 auto;
+}
+
+.p-toast-top-center {
+    transform: translateX(-50%);
+}
+
+.p-toast-bottom-center {
+    transform: translateX(-50%);
+}
+
+.p-toast-center {
+    min-width: 20vw;
+    transform: translate(-50%, -50%);
+}
+
+.p-toast-icon-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-toast-icon-close.p-link {
+    cursor: pointer;
+}
+
+/* Animations */
+.p-toast-message-enter-from {
+    opacity: 0;
+    -webkit-transform: translateY(50%);
+    -ms-transform: translateY(50%);
+    transform: translateY(50%);
+}
+
+.p-toast-message-leave-from {
+    max-height: 1000px;
+}
+
+.p-toast .p-toast-message.p-toast-message-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin-bottom: 0;
+    overflow: hidden;
+}
+
+.p-toast-message-enter-active {
+    -webkit-transition: transform 0.3s, opacity 0.3s;
+    transition: transform 0.3s, opacity 0.3s;
+}
+
+.p-toast-message-leave-active {
+    -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+}
+
+// theme
+.p-toast {
+    opacity: $toastOpacity;
+
+    .p-toast-message {
+        margin: $toastMargin;
+        box-shadow: $toastShadow;
+        border-radius: $borderRadius;
+
+        .p-toast-message-content {
+            padding: $toastPadding;
+            border-width: $toastBorderWidth;
+
+            .p-toast-message-text {
+                margin: $toastMessageTextMargin;
+            }
+
+            .p-toast-message-icon {
+                font-size: $toastIconFontSize;
+
+                &.p-icon {
+                    width: $toastIconFontSize;
+                    height: $toastIconFontSize;
+                }
+            }
+
+            .p-toast-summary {
+                font-weight: $toastTitleFontWeight;
+            }
+
+            .p-toast-detail {
+                margin: $toastDetailMargin;
+            }
+        }
+
+        .p-toast-icon-close {
+            width: $toastIconFontSize;
+            height: $toastIconFontSize;
+            border-radius: $actionIconBorderRadius;
+            background: transparent;
+            transition: $actionIconTransition;
+            outline-color: transparent;
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            &:focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-toast-message-info {
+            background: $infoMessageBg;
+            border: $infoMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $infoMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $infoMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-success {
+            background: $successMessageBg;
+            border: $successMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $successMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $successMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-warn {
+            background: $warningMessageBg;
+            border: $warningMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $warningMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $warningMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-error {
+            background: $errorMessageBg;
+            border: $errorMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $errorMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $errorMessageIconColor;
+            }
+        }
+
+        @if variable-exists(secondaryMessageBg) {
+            &.p-toast-message-secondary {
+                background: $secondaryMessageBg;
+                border: $secondaryMessageBorder;
+                border-width: $messageBorderWidth;
+                color: $secondaryMessageTextColor;
+
+                .p-toast-message-icon,
+                .p-toast-icon-close {
+                    color: $secondaryMessageIconColor;
+                }
+            }
+        }
+
+        @if variable-exists(contrastMessageBg) {
+            &.p-toast-message-contrast {
+                background: $contrastMessageBg;
+                border: $contrastMessageBorder;
+                border-width: $messageBorderWidth;
+                color: $contrastMessageTextColor;
+
+                .p-toast-message-icon,
+                .p-toast-icon-close {
+                    color: $contrastMessageIconColor;
+                }
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_avatar.scss

@@ -0,0 +1,71 @@
+// core
+.p-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1rem;
+}
+
+.p-avatar.p-avatar-image {
+    background-color: transparent;
+}
+
+.p-avatar.p-avatar-circle {
+    border-radius: 50%;
+}
+
+.p-avatar-circle img {
+    border-radius: 50%;
+}
+
+.p-avatar .p-avatar-icon {
+    font-size: 1rem;
+}
+
+.p-avatar img {
+    width: 100%;
+    height: 100%;
+}
+
+.p-avatar-group .p-avatar + .p-avatar {
+    margin-left: -1rem;
+}
+
+.p-avatar-group {
+    display: flex;
+    align-items: center;
+}
+
+// theme
+.p-avatar {
+    background-color: $avatarBg;
+    border-radius: $borderRadius;
+
+    &.p-avatar-lg {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.5rem;
+
+        .p-avatar-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    &.p-avatar-xl {
+        width: 4rem;
+        height: 4rem;
+        font-size: 2rem;
+
+        .p-avatar-icon {
+            font-size: 2rem;
+        }
+    }
+}
+
+.p-avatar-group {
+    .p-avatar {
+        border: 2px solid $panelContentBg;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_badge.scss

@@ -0,0 +1,95 @@
+// core
+.p-badge {
+    display: inline-block;
+    border-radius: 10px;
+    text-align: center;
+    padding: 0 .5rem;
+}
+
+.p-overlay-badge {
+    position: relative;
+}
+
+.p-overlay-badge .p-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%,-50%);
+    transform-origin: 100% 0;
+    margin: 0;
+}
+
+.p-badge.p-badge-dot {
+    width: .5rem;
+    min-width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    padding: 0;
+}
+
+.p-badge-no-gutter {
+    padding: 0;
+    border-radius: 50%;
+}
+
+// theme
+.p-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+
+    &.p-badge-secondary {
+        background-color: $secondaryButtonBg;
+        color: $secondaryButtonTextColor;
+    }
+
+    &.p-badge-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-badge-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-badge-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-badge-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-badge-secondary {
+            background-color: $secondaryButtonBg;
+            color: $secondaryButtonTextColor;
+        }
+    
+        &.p-badge-contrast {
+            background-color: $contrastButtonBg;
+            color: $contrastButtonTextColor;
+        }
+    }
+
+    &.p-badge-lg {
+        font-size: 1.5 * $badgeFontSize;
+        min-width: 1.5 * $badgeMinWidth;
+        height: 1.5 * $badgeHeight;
+        line-height: 1.5 * $badgeHeight;
+    }
+
+    &.p-badge-xl {
+        font-size: 2 * $badgeFontSize;
+        min-width: 2 * $badgeMinWidth;
+        height: 2 * $badgeHeight;
+        line-height: 2 * $badgeHeight;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_blockui.scss

@@ -0,0 +1,17 @@
+// core
+.p-blockui-container {
+    position: relative;
+}
+
+.p-blockui.p-component-overlay {
+    position: absolute;
+}
+
+.p-blockui-document.p-component-overlay {
+    position: fixed;
+}
+
+// theme
+.p-blockui {
+    border-radius: $borderRadius;
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_chip.scss

@@ -0,0 +1,64 @@
+@use 'sass:math';
+
+// core
+.p-chip {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-chip-text {
+    line-height: 1.5;
+}
+
+.p-chip-icon.pi {
+    line-height: 1.5;
+}
+
+.p-chip-remove-icon {
+    line-height: 1.5;
+    cursor: pointer;
+}
+
+.p-chip img {
+    border-radius: 50%;
+}
+
+// theme
+.p-chip {
+    background-color: $chipBg;
+    color: $chipTextColor;
+    border-radius: $chipBorderRadius;
+    padding: 0 nth($inputPadding, 2);
+
+    .p-chip-text {
+        line-height: 1.5;
+        margin-top: math.div(nth($inputPadding, 1), 2);
+        margin-bottom: math.div(nth($inputPadding, 1), 2);
+    }
+
+    .p-chip-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    img {
+        width: 1.5 + nth($inputPadding, 1);
+        height: 1.5 + nth($inputPadding, 1);
+        margin-left: -1 * nth($inputPadding, 2);
+        margin-right: $inlineSpacing;
+    }
+
+    .p-chip-remove-icon {
+        margin-left: $inlineSpacing;
+        border-radius: $borderRadius;
+        transition: $actionIconTransition;
+        outline-color: transparent;
+        
+        &:focus-visible {
+            @include focused();
+        }
+
+        &:focus {
+            outline: 0 none;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_inplace.scss

@@ -0,0 +1,38 @@
+// core
+.p-inplace .p-inplace-display {
+    display: inline;
+    cursor: pointer;
+}
+
+.p-inplace .p-inplace-content {
+    display: inline;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+    display: flex;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+// theme
+.p-inplace {
+    .p-inplace-display {
+        padding: $inplacePadding;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &:not(.p-disabled):hover {
+            background: $inplaceHoverBg;
+            color: $inplaceTextHoverColor;
+        }
+
+        &:focus {
+            @include focused();
+        }
+    }
+}
+

frontend/public/primevue-sass-theme/theme-base/components/misc/_metergroup.scss

@@ -0,0 +1,117 @@
+@use "sass:math";
+
+// core
+.p-metergroup {
+    display: flex;
+}
+
+.p-metergroup-meters {
+    display: flex;
+}
+
+.p-metergroup-vertical .p-metergroup-meters {
+    flex-direction: column;
+}
+
+.p-metergroup-labels {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-metergroup-vertical .p-metergroup-labels {
+    align-items: start;
+}
+
+.p-metergroup-labels-vertical {
+    flex-direction: column;
+}
+
+.p-metergroup-label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-metergroup-label-marker {
+    display: inline-flex;
+}
+
+// theme
+.p-metergroup {
+    gap: $inlineSpacing * 2;
+
+    .p-metergroup-meters {
+        background: $progressBarBg;
+        border-radius: $borderRadius;
+    }
+
+    .p-metergroup-meter {
+        border: $progressBarBorder;
+        background: $progressBarValueBg;
+    }
+
+    .p-metergroup-labels {
+        .p-metergroup-label {
+            gap: $inlineSpacing;
+        }
+
+        .p-metergroup-label-marker {
+            background: $progressBarValueBg;
+            width: 0.5rem;
+            height: 0.5rem;
+            border-radius: 100%;
+        }
+
+        .p-metergroup-label-icon {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        &.p-metergroup-labels-vertical {
+            gap: $inlineSpacing;
+        }
+
+        &.p-metergroup-labels-horizontal {
+            gap: $inlineSpacing * 2;
+        }
+    }
+
+    &.p-metergroup-horizontal {
+        flex-direction: column;
+
+        .p-metergroup-meters {
+            height: 0.5rem;
+        }
+
+        .p-metergroup-meter:first-of-type {
+            border-top-left-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+
+        .p-metergroup-meter:last-of-type {
+            border-top-right-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+    }
+
+    &.p-metergroup-vertical {
+        flex-direction: row;
+
+        .p-metergroup-meters {
+            width: 0.5rem;
+            height: 100%;
+        }
+
+        .p-metergroup-meter:first-of-type {
+            border-top-left-radius: $borderRadius;
+            border-top-right-radius: $borderRadius;
+        }
+
+        .p-metergroup-meter:last-of-type {
+            border-bottom-left-radius: $borderRadius;
+            border-bottom-right-radius: $borderRadius;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_progressbar.scss

@@ -0,0 +1,128 @@
+// core
+.p-progressbar {
+    position: relative;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    display: none;
+    border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    display: inline-flex;
+}
+
+.p-progressbar-determinate .p-progressbar-value-animate {
+    transition: width 1s ease-in-out;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    -webkit-animation-delay: 1.15s;
+    animation-delay: 1.15s;
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+
+// theme
+.p-progressbar {
+    border: $progressBarBorder;
+    height: $progressBarHeight;
+    background: $progressBarBg;
+    border-radius: $borderRadius;
+
+    .p-progressbar-value {
+        border: 0 none;
+        margin: 0;
+        background: $progressBarValueBg;
+    }
+
+    .p-progressbar-label {
+        color: $progressBarValueTextColor;
+        line-height: $progressBarHeight;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_progressspinner.scss

@@ -0,0 +1,77 @@
+// core
+.p-progress-spinner {
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+}
+
+.p-progress-spinner::before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+}
+
+.p-progress-spinner-svg {
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+// theme
+.p-progress-spinner-svg {
+    animation: p-progress-spinner-rotate 2s linear infinite;
+}
+
+.p-progress-spinner-circle {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: 0;
+    stroke: $progressSpinnerStrokeColor;
+    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@keyframes p-progress-spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes p-progress-spinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes p-progress-spinner-color {
+    100%,
+    0% {
+        stroke: $progressSpinnerColorOne;
+    }
+    40% {
+        stroke: $progressSpinnerColorTwo;
+    }
+    66% {
+        stroke: $progressSpinnerColorThree;
+    }
+    80%,
+    90% {
+        stroke: $progressSpinnerColorFour;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_ripple.scss

@@ -0,0 +1,29 @@
+// core
+.p-ripple {
+    overflow: hidden;
+    position: relative;
+}
+
+.p-ink {
+    display: block;
+    position: absolute;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 100%;
+    transform: scale(0);
+    pointer-events: none;
+}
+
+.p-ink-active {
+    animation: ripple 0.4s linear;
+}
+
+.p-ripple-disabled .p-ink {
+    display: none;
+}
+
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_scrolltop.scss

@@ -0,0 +1,60 @@
+// core
+.p-scrolltop {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-scrolltop-sticky {
+    position: sticky;
+}
+
+.p-scrolltop-sticky.p-link {
+    margin-left: auto;
+}
+
+.p-scrolltop-enter-from {
+    opacity: 0;
+}
+
+.p-scrolltop-enter-active {
+    transition: opacity 0.15s;
+}
+
+.p-scrolltop.p-scrolltop-leave-to {
+    opacity: 0;
+}
+
+.p-scrolltop-leave-active {
+    transition: opacity 0.15s;
+}
+
+// theme
+.p-scrolltop {
+    width: $scrollTopWidth;
+    height: $scrollTopHeight;
+    border-radius: $scrollTopBorderRadius;
+    box-shadow: $inputOverlayShadow;
+    transition: $actionIconTransition;
+
+    &.p-link {
+        background: $scrollTopBg;
+
+        &:hover {
+            background: $scrollTopHoverBg;
+        }
+    }
+
+    .p-scrolltop-icon {
+        font-size: $scrollTopFontSize;
+        color: $scrollTopTextColor;
+
+        &.p-icon {
+            width: $scrollTopFontSize;
+            height: $scrollTopFontSize;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_skeleton.scss

@@ -0,0 +1,43 @@
+// core
+.p-skeleton {
+    overflow: hidden;
+}
+
+.p-skeleton::after {
+    content: '';
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+}
+
+.p-skeleton.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+    animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+// theme
+.p-skeleton {
+    background-color: $skeletonBg;
+    border-radius: $borderRadius;
+
+    &:after {
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_tag.scss

@@ -0,0 +1,73 @@
+@use "sass:math";
+
+// core
+.p-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tag-icon,
+.p-tag-value,
+.p-tag-icon.pi {
+    line-height: 1.5;
+}
+
+.p-tag.p-tag-rounded {
+    border-radius: 10rem;
+}
+
+// theme
+.p-tag {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    padding: $tagPadding;
+    border-radius: $borderRadius;
+
+    &.p-tag-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-tag-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-tag-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-tag-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    @if variable-exists(secondaryMessageBg) {
+        &.p-tag-secondary {
+            background-color: $secondaryButtonBg;
+            color: $secondaryButtonTextColor;
+        }
+    
+        &.p-tag-contrast {
+            background-color: $contrastButtonBg;
+            color: $contrastButtonTextColor;
+        }
+    }
+
+    .p-tag-icon {
+        font-size: $badgeFontSize;
+
+        &:not(:last-child) {
+            margin-right: math.div($inlineSpacing, 2);
+        }
+
+        &.p-icon {
+            width: $badgeFontSize;
+            height: $badgeFontSize;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/misc/_terminal.scss

@@ -0,0 +1,37 @@
+// core
+.p-terminal {
+	height: 18rem;
+	overflow: auto;
+}
+
+.p-terminal-prompt-container {
+	display: flex;
+	align-items: center;
+}
+
+.p-terminal-input {
+	flex: 1 1 auto;
+	border: 0 none;
+	background-color: transparent;
+	color: inherit;
+	padding: 0;
+	outline: 0 none;
+}
+
+.p-terminal-input::-ms-clear {
+	display: none;
+}
+
+// theme
+.p-terminal {
+	background: $panelContentBg;
+	color: $panelContentTextColor;
+	border: $panelContentBorder;
+	padding: $panelContentPadding;
+
+	.p-terminal-input {
+		font-family: var(--font-family);
+		font-feature-settings: var(--font-feature-settings, normal);
+		font-size: $inputTextFontSize;
+	}
+}

frontend/public/primevue-sass-theme/theme-base/components/multimedia/_galleria.scss

@@ -0,0 +1,439 @@
+// core
+.p-galleria-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.p-galleria-item-wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.p-galleria-item-container {
+    position: relative;
+    display: flex;
+    height: 100%;
+}
+
+.p-galleria-item-nav {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.p-galleria-item-prev {
+    left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-galleria-item-next {
+    right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-galleria-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.p-galleria-item-nav-onhover .p-galleria-item-nav {
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+}
+
+.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
+    pointer-events: all;
+    opacity: 1;
+}
+
+.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
+    pointer-events: none;
+}
+
+.p-galleria-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+
+/* Thumbnails */
+.p-galleria-thumbnail-wrapper {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    flex-shrink: 0;
+}
+
+.p-galleria-thumbnail-prev,
+.p-galleria-thumbnail-next {
+    align-self: center;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-galleria-thumbnail-prev span,
+.p-galleria-thumbnail-next span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-galleria-thumbnail-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.p-galleria-thumbnail-items-container {
+    overflow: hidden;
+    width: 100%;
+}
+
+.p-galleria-thumbnail-items {
+    display: flex;
+}
+
+.p-galleria-thumbnail-item {
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0.5;
+}
+
+.p-galleria-thumbnail-item:hover {
+    opacity: 1;
+    transition: opacity 0.3s;
+}
+
+.p-galleria-thumbnail-item-current {
+    opacity: 1;
+}
+
+/* Positions */
+/* Thumbnails */
+.p-galleria-thumbnails-left .p-galleria-content,
+.p-galleria-thumbnails-right .p-galleria-content {
+    flex-direction: row;
+}
+
+.p-galleria-thumbnails-left .p-galleria-item-wrapper,
+.p-galleria-thumbnails-right .p-galleria-item-wrapper {
+    flex-direction: row;
+}
+
+.p-galleria-thumbnails-left .p-galleria-item-wrapper,
+.p-galleria-thumbnails-top .p-galleria-item-wrapper {
+    order: 2;
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
+.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
+    order: 1;
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
+.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+    flex-direction: column;
+    height: 100%;
+}
+
+/* Indicators */
+.p-galleria-indicators {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-galleria-indicator > button {
+    display: inline-flex;
+    align-items: center;
+}
+
+.p-galleria-indicators-left .p-galleria-item-wrapper,
+.p-galleria-indicators-right .p-galleria-item-wrapper {
+    flex-direction: row;
+    align-items: center;
+}
+
+.p-galleria-indicators-left .p-galleria-item-container,
+.p-galleria-indicators-top .p-galleria-item-container {
+    order: 2;
+}
+
+.p-galleria-indicators-left .p-galleria-indicators,
+.p-galleria-indicators-top .p-galleria-indicators {
+    order: 1;
+}
+
+.p-galleria-indicators-left .p-galleria-indicators,
+.p-galleria-indicators-right .p-galleria-indicators {
+    flex-direction: column;
+}
+
+.p-galleria-indicator-onitem .p-galleria-indicators {
+    position: absolute;
+    display: flex;
+    z-index: 1;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
+    top: 0;
+    left: 0;
+    width: 100%;
+    align-items: flex-start;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
+    right: 0;
+    top: 0;
+    height: 100%;
+    align-items: flex-end;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    align-items: flex-end;
+}
+
+.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
+    left: 0;
+    top: 0;
+    height: 100%;
+    align-items: flex-start;
+}
+
+/* FullScreen */
+.p-galleria-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-galleria-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.p-galleria-mask .p-galleria-item-nav {
+    position: fixed;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+/* Animation */
+.p-galleria-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-galleria-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.p-galleria-enter-from,
+.p-galleria-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+.p-galleria-enter-active .p-galleria-item-nav {
+    opacity: 0;
+}
+
+/* Keyboard Support */
+.p-items-hidden .p-galleria-thumbnail-item {
+    visibility: hidden;
+}
+
+.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+    visibility: visible;
+}
+
+// theme
+.p-galleria {
+    .p-galleria-close {
+        margin: $galleriaCloseIconMargin;
+        background: $galleriaCloseIconBg;
+        color: $galleriaCloseIconColor;
+        width: $galleriaCloseIconWidth;
+        height: $galleriaCloseIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaCloseIconBorderRadius;
+
+        .p-galleria-close-icon {
+            font-size: $galleriaCloseIconFontSize;
+        }
+
+        .p-icon {
+            width: $galleriaCloseIconFontSize;
+            height: $galleriaCloseIconFontSize;
+        }
+
+        &:hover {
+            background: $galleriaCloseIconHoverBg;
+            color: $galleriaCloseIconHoverColor;
+        }
+    }
+
+    .p-galleria-item-nav {
+        background: $galleriaItemNavigatorBg;
+        color: $galleriaItemNavigatorColor;
+        width: $galleriaItemNavigatorWidth;
+        height: $galleriaItemNavigatorHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaItemNavigatorBorderRadius;
+        margin: $galleriaItemNavigatorMargin;
+
+        .p-galleria-item-prev-icon,
+        .p-galleria-item-next-icon {
+            font-size: $galleriaItemNavigatorFontSize;
+        }
+
+        .p-icon {
+            width: $galleriaCloseIconFontSize;
+            height: $galleriaCloseIconFontSize;
+        }
+
+        &:not(.p-disabled) {
+            &:hover {
+                background: $galleriaItemNavigatorHoverBg;
+                color: $galleriaItemNavigatorHoverColor;
+            }
+        }
+    }
+
+    .p-galleria-caption {
+        background: $galleriaCaptionBg;
+        color: $galleriaCaptionTextColor;
+        padding: $galleriaCaptionPadding;
+    }
+
+    .p-galleria-indicators {
+        padding: $galleriaIndicatorsPadding;
+
+        .p-galleria-indicator {
+            button {
+                background-color: $galleriaIndicatorBg;
+                width: $galleriaIndicatorWidth;
+                height: $galleriaIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $galleriaIndicatorBorderRadius;
+
+                &:hover {
+                    background: $galleriaIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicators-bottom,
+    &.p-galleria-indicators-top {
+        .p-galleria-indicator {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicators-left,
+    &.p-galleria-indicators-right {
+        .p-galleria-indicator {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            background: $galleriaIndicatorsBgOnItem;
+
+            .p-galleria-indicator {
+                button {
+                    background: $galleriaIndicatorBgOnItem;
+
+                    &:hover {
+                        background: $galleriaIndicatorHoverBgOnItem;
+                    }
+                }
+
+                &.p-highlight {
+                    button {
+                        background: $highlightBg;
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-galleria-thumbnail-container {
+        background: $galleriaThumbnailContainerBg;
+        padding: $galleriaThumbnailContainerPadding;
+
+        .p-galleria-thumbnail-prev,
+        .p-galleria-thumbnail-next {
+            margin: $inlineSpacing;
+            background-color: $galleriaThumbnailNavigatorBg;
+            color: $galleriaThumbnailNavigatorColor;
+            width: $galleriaThumbnailNavigatorWidth;
+            height: $galleriaThumbnailNavigatorHeight;
+            transition: $actionIconTransition;
+            border-radius: $galleriaThumbnailNavigatorBorderRadius;
+
+            &:hover {
+                background: $galleriaThumbnailNavigatorHoverBg;
+                color: $galleriaThumbnailNavigatorHoverColor;
+            }
+        }
+
+        .p-galleria-thumbnail-item-content {
+            outline-color: transparent;
+            
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+}
+
+.p-galleria-mask {
+    --maskbg: #{$galleriaMaskBg};
+}

frontend/public/primevue-sass-theme/theme-base/components/multimedia/_image.scss

@@ -0,0 +1,128 @@
+// core
+.p-image-mask {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-image-preview-container {
+    position: relative;
+    display: inline-block;
+    line-height: 0;
+}
+
+.p-image-preview-indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s;
+    border: none;
+    padding: 0;
+}
+
+.p-image-preview-container:hover > .p-image-preview-indicator {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.p-image-preview-container > img {
+    cursor: pointer;
+}
+
+.p-image-toolbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    z-index: 1;
+}
+
+.p-image-action.p-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-image-action.p-disabled {
+    pointer-events: auto;
+}
+
+.p-image-preview {
+    transition: transform 0.15s;
+    max-width: 100vw;
+    max-height: 100vh;
+}
+
+.p-image-preview-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.p-image-preview-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.p-image-preview-enter-from,
+.p-image-preview-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+// theme
+.p-image-mask {
+    --maskbg: #{$imageMaskBg};
+}
+
+.p-image-preview-indicator {
+    background-color: transparent;
+    color: $imagePreviewIndicatorColor;
+    transition: $actionIconTransition;
+
+    .p-icon {
+        width: $imagePreviewActionIconFontSize;
+        height: $imagePreviewActionIconFontSize;
+    }
+}
+
+.p-image-preview-container {
+    &:hover {
+        > .p-image-preview-indicator {
+            background-color: $imagePreviewIndicatorBg;
+        }
+    }
+}
+
+.p-image-toolbar {
+    padding: $imagePreviewToolbarPadding;
+}
+
+.p-image-action.p-link {
+    color: $imagePreviewActionIconColor;
+    background-color: $imagePreviewActionIconBg;
+    width: $imagePreviewActionIconWidth;
+    height: $imagePreviewActionIconHeight;
+    border-radius: $imagePreviewActionIconBorderRadius;
+    transition: $actionIconTransition;
+    margin-right: $inlineSpacing;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &:hover {
+        color: $imagePreviewActionIconHoverColor;
+        background-color: $imagePreviewActionIconHoverBg;
+    }
+
+    i {
+        font-size: $imagePreviewActionIconFontSize;
+    }
+
+    .p-icon {
+        width: $imagePreviewActionIconFontSize;
+        height: $imagePreviewActionIconFontSize;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/overlay/_confirmpopup.scss

@@ -0,0 +1,144 @@
+// core
+.p-confirm-popup {
+    position: absolute;
+    margin-top: 10px;
+    top: 0;
+    left: 0;
+}
+
+.p-confirm-popup-flipped {
+    margin-top: -10px;
+    margin-bottom: 10px;
+}
+
+/* Animation */
+.p-confirm-popup-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-confirm-popup-leave-to {
+    opacity: 0;
+}
+
+.p-confirm-popup-enter-active {
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-confirm-popup-leave-active {
+    transition: opacity 0.1s linear;
+}
+
+.p-confirm-popup:after,
+.p-confirm-popup:before {
+    bottom: 100%;
+    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.p-confirm-popup:after {
+    border-width: 8px;
+    margin-left: -8px;
+}
+
+.p-confirm-popup:before {
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+.p-confirm-popup-flipped:after,
+.p-confirm-popup-flipped:before {
+    bottom: auto;
+    top: 100%;
+}
+
+.p-confirm-popup.p-confirm-popup-flipped:after {
+    border-bottom-color: transparent;
+}
+
+.p-confirm-popup.p-confirm-popup-flipped:before {
+    border-bottom-color: transparent;
+}
+
+.p-confirm-popup .p-confirm-popup-content {
+    display: flex;
+    align-items: center;
+}
+
+// theme
+.p-confirm-popup {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-confirm-popup-content {
+        padding: $confirmPopupContentPadding;
+    }
+
+    .p-confirm-popup-footer {
+        text-align: right;
+        padding: $confirmPopupFooterPadding;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &:after {
+        border-style: solid;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border-style: solid;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+        }
+    }
+
+    &.p-confirm-popup-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+
+    .p-confirm-popup-icon {
+        font-size: $primeIconFontSize * 1.5;
+
+        &.p-icon {
+            width: $primeIconFontSize * 1.5;
+            height: $primeIconFontSize * 1.5;
+        }
+    }
+
+    .p-confirm-popup-message {
+        margin-left: $inlineSpacing * 2;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/overlay/_dialog.scss

@@ -0,0 +1,192 @@
+// core
+.p-dialog-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-dialog {
+    max-height: 90%;
+    transform: scale(1);
+}
+
+.p-dialog-content {
+    overflow-y: auto;
+}
+
+.p-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+}
+
+.p-dialog-footer {
+    flex-shrink: 0;
+}
+
+.p-dialog .p-dialog-header-icons {
+    display: flex;
+    align-items: center;
+}
+
+.p-dialog .p-dialog-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Fluid */
+.p-fluid .p-dialog-footer .p-button {
+    width: auto;
+}
+
+/* Animation */
+/* Center */
+.p-dialog-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.p-dialog-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+/* Top, Bottom, Left, Right, Top* and Bottom* */
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    margin: 0.75rem;
+    transform: translate3d(0px, 0px, 0px);
+}
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    transition: all 0.3s ease-out;
+}
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+/* Maximize */
+.p-dialog-maximized {
+    width: 100vw !important;
+    height: 100vh !important;
+    top: 0px !important;
+    left: 0px !important;
+    max-height: 100%;
+    height: 100%;
+}
+.p-dialog-maximized .p-dialog-content {
+    flex-grow: 1;
+}
+
+.p-confirm-dialog .p-dialog-content {
+    display: flex;
+    align-items: center;
+}
+
+// theme
+.p-dialog {
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+    border: $overlayContentBorder;
+
+    .p-dialog-header {
+        border-bottom: $dialogHeaderBorder;
+        background: $dialogHeaderBg;
+        color: $dialogHeaderTextColor;
+        padding: $dialogHeaderPadding;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dialog-title {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-dialog-header-icon {
+            @include action-icon();
+            margin-right: $inlineSpacing;
+            
+            &:last-child {
+                margin-right: 0;
+            }            
+        }
+    }
+
+    .p-dialog-content {
+        background: $overlayContentBg;
+        color: $panelContentTextColor;
+        padding: $dialogContentPadding;
+
+        &:last-of-type {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-dialog-footer {
+        border-top: $dialogFooterBorder;
+        background: $overlayContentBg;
+        color: $panelFooterTextColor;
+        padding: $dialogFooterPadding;
+        display: flex;
+        justify-content: flex-end;
+        gap: $inlineSpacing;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    &.p-confirm-dialog {
+        .p-confirm-dialog-icon {
+            font-size: $primeIconFontSize * 2;
+        }
+
+        .p-confirm-dialog-message:not(:first-child) {
+            margin-left: $inlineSpacing * 2;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/overlay/_overlaypanel.scss

@@ -0,0 +1,136 @@
+@use 'sass:math';
+
+// core
+.p-overlaypanel {
+    margin-top: 10px;
+}
+
+.p-overlaypanel-flipped {
+    margin-top: -10px;
+    margin-bottom: 10px;
+}
+
+.p-overlaypanel-close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Animation */
+.p-overlaypanel-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-overlaypanel-leave-to {
+    opacity: 0;
+}
+
+.p-overlaypanel-enter-active {
+    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-overlaypanel-leave-active {
+    transition: opacity 0.1s linear;
+}
+
+.p-overlaypanel:after,
+.p-overlaypanel:before {
+    bottom: 100%;
+    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.p-overlaypanel:after {
+    border-width: 8px;
+    margin-left: -8px;
+}
+
+.p-overlaypanel:before {
+    border-width: 10px;
+    margin-left: -10px;
+}
+
+.p-overlaypanel-flipped:after,
+.p-overlaypanel-flipped:before {
+    bottom: auto;
+    top: 100%;
+}
+
+.p-overlaypanel.p-overlaypanel-flipped:after {
+    border-bottom-color: transparent;
+}
+
+.p-overlaypanel.p-overlaypanel-flipped:before {
+    border-bottom-color: transparent;
+}
+
+// theme
+.p-overlaypanel {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-overlaypanel-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-overlaypanel-close {
+        background: $buttonBg;
+        color: $buttonTextColor;
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $actionIconBorderRadius;
+        position: absolute;
+        top: math.div(-1 * $actionIconWidth, 2);
+        right: math.div(-1 * $actionIconWidth, 2);
+
+        &:enabled:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+        }
+    }
+
+    &:after {
+        border-style: solid;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border-style: solid;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+        }
+    }
+
+    &.p-overlaypanel-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/overlay/_sidebar.scss

@@ -0,0 +1,179 @@
+// core
+.p-sidebar-mask {
+    display: none;
+    pointer-events: none;
+    background-color: transparent;
+    transition-property: background-color;
+}
+
+.p-sidebar-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-sidebar-visible {
+    display: flex;
+}
+
+.p-sidebar {
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    transform: translate3d(0px, 0px, 0px);
+    position: relative;
+    transition: transform 0.3s;
+}
+
+.p-sidebar-content {
+    overflow-y: auto;
+    flex-grow: 1;
+}
+
+.p-sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+}
+
+.p-sidebar-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-sidebar-full .p-sidebar {
+    transition: none;
+    transform: none;
+    width: 100vw !important;
+    height: 100vh !important;
+    max-height: 100%;
+    top: 0px !important;
+    left: 0px !important;
+}
+
+/* Animation */
+/* Center */
+.p-sidebar-left .p-sidebar-enter-from,
+.p-sidebar-left .p-sidebar-leave-to {
+    transform: translateX(-100%);
+}
+.p-sidebar-right .p-sidebar-enter-from,
+.p-sidebar-right .p-sidebar-leave-to {
+    transform: translateX(100%);
+}
+.p-sidebar-top .p-sidebar-enter-from,
+.p-sidebar-top .p-sidebar-leave-to {
+    transform: translateY(-100%);
+}
+.p-sidebar-bottom .p-sidebar-enter-from,
+.p-sidebar-bottom .p-sidebar-leave-to {
+    transform: translateY(100%);
+}
+.p-sidebar-full .p-sidebar-enter-from,
+.p-sidebar-full .p-sidebar-leave-to {
+    opacity: 0;
+}
+.p-sidebar-full .p-sidebar-enter-active,
+.p-sidebar-full .p-sidebar-leave-active {
+    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* Size */
+.p-sidebar-left .p-sidebar {
+    width: 20rem;
+    height: 100%;
+}
+
+.p-sidebar-right .p-sidebar {
+    width: 20rem;
+    height: 100%;
+}
+
+.p-sidebar-top .p-sidebar {
+    height: 10rem;
+    width: 100%;
+}
+
+.p-sidebar-bottom .p-sidebar {
+    height: 10rem;
+    width: 100%;
+}
+
+.p-sidebar-left .p-sidebar-sm,
+.p-sidebar-right .p-sidebar-sm {
+    width: 20rem;
+}
+
+.p-sidebar-left .p-sidebar-md,
+.p-sidebar-right .p-sidebar-md {
+    width: 40rem;
+}
+
+.p-sidebar-left .p-sidebar-lg,
+.p-sidebar-right .p-sidebar-lg {
+    width: 60rem;
+}
+
+.p-sidebar-top .p-sidebar-sm,
+.p-sidebar-bottom .p-sidebar-sm {
+    height: 10rem;
+}
+
+.p-sidebar-top .p-sidebar-md,
+.p-sidebar-bottom .p-sidebar-md {
+    height: 20rem;
+}
+
+.p-sidebar-top .p-sidebar-lg,
+.p-sidebar-bottom .p-sidebar-lg {
+    height: 30rem;
+}
+
+.p-sidebar-left .p-sidebar-content,
+.p-sidebar-right .p-sidebar-content,
+.p-sidebar-top .p-sidebar-content,
+.p-sidebar-bottom .p-sidebar-content {
+    width: 100%;
+    height: 100%;
+}
+
+@media screen and (max-width: 64em) {
+    .p-sidebar-left .p-sidebar-lg,
+    .p-sidebar-left .p-sidebar-md,
+    .p-sidebar-right .p-sidebar-lg,
+    .p-sidebar-right .p-sidebar-md {
+        width: 20rem;
+    }
+}
+
+// theme
+.p-sidebar {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $overlayContainerShadow;
+
+    .p-sidebar-header {
+        padding: $panelHeaderPadding;
+
+        .p-sidebar-header-content {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-sidebar-close,
+        .p-sidebar-icon {
+            @include action-icon();
+        }
+
+        & + .p-sidebar-content {
+            padding-top: 0;
+        }
+    }
+
+    .p-sidebar-content {
+        padding: $panelContentPadding;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/overlay/_tooltip.scss

@@ -0,0 +1,90 @@
+// core
+.p-tooltip {
+    position:absolute;
+    display:none;
+    padding: .25em .5rem;
+    max-width: 12.5rem;
+}
+
+.p-tooltip.p-tooltip-right,
+.p-tooltip.p-tooltip-left {
+    padding: 0 .25rem;
+}
+
+.p-tooltip.p-tooltip-top,
+.p-tooltip.p-tooltip-bottom {
+    padding:.25em 0;
+}
+
+.p-tooltip .p-tooltip-text {
+    white-space: pre-line;
+    word-break: break-word;
+}
+
+.p-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    scale: 2;
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    margin-top: -.25rem;
+    border-width: .25em .25em .25em 0;
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    margin-top: -.25rem;
+    border-width: .25em 0 .25em .25rem;
+}
+
+.p-tooltip.p-tooltip-top {
+    padding: .25em 0;
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    margin-left: -.25rem;
+    border-width: .25em .25em 0;
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    margin-left: -.25rem;
+    border-width: 0 .25em .25rem;
+}
+
+// theme
+.p-tooltip {
+    .p-tooltip-text {
+        background: $tooltipBg;
+        color: $tooltipTextColor;
+        padding: $tooltipPadding;
+        box-shadow: $inputOverlayShadow;
+        border-radius: $borderRadius;
+    }
+
+    &.p-tooltip-right {
+        .p-tooltip-arrow {
+            border-right-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-left {
+        .p-tooltip-arrow {
+            border-left-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-top {
+        .p-tooltip-arrow {
+            border-top-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-bottom {
+        .p-tooltip-arrow {
+            border-bottom-color: $tooltipBg;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_accordion.scss

@@ -0,0 +1,138 @@
+// core
+.p-accordion-header-action {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-accordion-header-action:focus {
+    z-index: 1;
+}
+
+.p-accordion-header-text {
+    line-height: 1;
+}
+
+// theme
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+            outline-color: transparent;
+
+            .p-accordion-toggle-icon {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &:not(.p-disabled) {
+            .p-accordion-header-link {
+                &:focus-visible {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-accordion-content {
+        padding: $accordionContentPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-accordion-tab {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-accordion-header {
+                .p-accordion-header-link {
+                    border-radius: 0;
+                }
+            }
+
+            .p-accordion-content {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-accordion-header-link {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-accordion-header:not(.p-highlight) {
+                    .p-accordion-header-link {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+                
+                .p-accordion-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_card.scss

@@ -0,0 +1,30 @@
+.p-card {
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    box-shadow: $cardShadow;
+    border-radius: $borderRadius;
+
+    .p-card-body {
+        padding: $cardBodyPadding;
+    }
+
+    .p-card-title {
+        font-size: $cardTitleFontSize;
+        font-weight: $cardTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-card-subtitle {
+        font-weight: $cardSubTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+        color: $cardSubTitleColor;
+    }
+
+    .p-card-content {
+        padding: $cardContentPadding;
+    }
+
+    .p-card-footer {
+        padding: $cardFooterPadding;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_divider.scss

@@ -0,0 +1,96 @@
+// core
+.p-divider-horizontal {
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+}
+
+.p-divider-horizontal:before {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: '';
+}
+
+.p-divider-content {
+    z-index: 1;
+}
+
+.p-divider-vertical {
+    min-height: 100%;
+    margin: 0 1rem;
+    display: flex;
+    position: relative;
+    justify-content: center;
+}
+
+.p-divider-vertical:before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    content: '';
+}
+
+.p-divider {
+    &.p-divider-solid.p-divider-horizontal:before {
+        border-top-style: solid;
+    }
+    
+    &.p-divider-solid.p-divider-vertical:before {
+        border-left-style: solid;
+    }
+    
+    &.p-divider-dashed.p-divider-horizontal:before {
+        border-top-style: dashed;
+    }
+    
+    &.p-divider-dashed.p-divider-vertical:before {
+        border-left-style: dashed;
+    }
+    
+    &.p-divider-dotted.p-divider-horizontal:before {
+        border-top-style: dotted;
+    }
+    
+    &.p-divider-dotted.p-divider-vertical:before {
+        border-left-style: dotted;
+    }
+}
+
+// theme
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize solid $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize solid $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_fieldset.scss

@@ -0,0 +1,73 @@
+// core
+.p-fieldset-legend > a,
+.p-fieldset-legend > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-fieldset-toggleable .p-fieldset-legend a {
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-fieldset-legend-text {
+    line-height: 1;
+}
+
+// theme
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+                outline-color: transparent;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus-visible {
+                    @include focused();
+                }
+
+                &:hover {
+                    color: $panelHeaderTextHoverColor;
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_panel.scss

@@ -0,0 +1,69 @@
+// core
+.p-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.p-panel-title {
+    line-height: 1;
+}
+
+.p-panel-header-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+}
+
+// theme
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-top: 0 none;
+        
+        &:last-child {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_scrollpanel.scss

@@ -0,0 +1,70 @@
+// core
+.p-scrollpanel-wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    float: left;
+}
+
+.p-scrollpanel-content {
+    height: calc(100% + 18px);
+    width: calc(100% + 18px);
+    padding: 0 18px 18px 0;
+    position: relative;
+    overflow: auto;
+    box-sizing: border-box;
+    scrollbar-width: none;
+}
+
+.p-scrollpanel-content::-webkit-scrollbar {
+    display: none;
+}
+
+.p-scrollpanel-bar {
+    position: relative;
+    background: #c1c1c1;
+    border-radius: 3px;
+    z-index: 2;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.25s linear;
+}
+
+.p-scrollpanel-bar-y {
+    width: 9px;
+    top: 0;
+}
+
+.p-scrollpanel-bar-x {
+    height: 9px;
+    bottom: 0;
+}
+
+.p-scrollpanel-hidden {
+    visibility: hidden;
+}
+
+.p-scrollpanel:hover .p-scrollpanel-bar,
+.p-scrollpanel:active .p-scrollpanel-bar {
+    opacity: 1;
+}
+
+.p-scrollpanel-grabbed {
+    user-select: none;
+}
+
+// theme
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_splitter.scss

@@ -0,0 +1,87 @@
+// core
+.p-splitter {
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+.p-splitter-vertical {
+    flex-direction: column;
+}
+
+.p-splitter-gutter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+}
+
+.p-splitter-horizontal.p-splitter-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    height: 24px;
+    width: 100%;
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    cursor: col-resize;
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    cursor: row-resize;
+    user-select: none;
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    cursor: row-resize;
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    width: 24px;
+    height: 100%;
+}
+
+.p-splitter-panel {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.p-splitter-panel-nested {
+    display: flex;
+}
+
+.p-splitter-panel .p-splitter {
+    flex-grow: 1;
+    border: 0 none;
+}
+
+// theme
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+        
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+            transition: $formElementTransition;
+            outline-color: transparent;
+            
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}

frontend/public/primevue-sass-theme/theme-base/components/panel/_stepper.scss

@@ -0,0 +1,202 @@
+@use 'sass:math';
+
+//core
+.p-stepper .p-stepper-nav {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow-x: auto;
+}
+
+.p-stepper-vertical .p-stepper-nav {
+    flex-direction: column;
+}
+
+.p-stepper-header {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+
+    &:last-of-type {
+        flex: initial;
+    }
+}
+
+.p-stepper-header .p-stepper-action {
+    border: 0 none;
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-stepper.p-stepper-readonly .p-stepper-header {
+    cursor: auto;
+}
+
+.p-stepper-header.p-highlight .p-stepper-action {
+    cursor: default;
+}
+
+.p-stepper-title {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.p-stepper-number {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-stepper-separator {
+    flex: 1 1 0;
+}
+
+//theme
+.p-stepper {
+    .p-stepper-nav {
+        display: flex;
+        justify-content: space-between;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    
+    .p-stepper-header {
+        padding: $inlineSpacing;
+
+        .p-stepper-action {
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+            outline-color: transparent;
+            
+            .p-stepper-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                border-width: 2px;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                border-radius: $stepsItemNumberBorderRadius;
+                transition: $actionIconTransition;
+            }
+            
+            .p-stepper-title {
+                margin-left: $inlineSpacing;
+                color: $stepsItemTextColor;
+                font-weight: $stepsItemActiveFontWeight;
+                transition: $actionIconTransition;
+            }
+
+            &:not(.p-disabled):focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-stepper-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-stepper-title {
+                color: $textColor;
+            }
+        }
+
+        &:not(.p-disabled):focus-visible {
+            @include focused();
+        }
+
+        &:has(~ .p-highlight) {
+            @if variable-exists(primaryColor) {
+                .p-stepper-separator {
+                    background-color: $primaryColor;
+                }
+            }
+        }
+    }
+
+    .p-stepper-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        color: $tabviewContentTextColor;
+    }
+
+    .p-stepper-separator {
+        background-color: $timelineEventColor;
+        width: 100%;
+        height: 2px;
+        margin-inline-start: calc($inlineSpacing * 2);
+        transition: $listItemTransition;
+    }
+
+    &.p-stepper-vertical {
+        display: flex;
+        flex-direction: column;
+
+        .p-stepper-toggleable-content {
+            display: flex;
+            flex: 1 1 auto;
+            background: $tabviewContentBg;
+            color: $tabviewContentTextColor;
+        }
+
+        .p-stepper-panel {
+            display: flex;
+            flex-direction: column;
+            flex: initial;
+            
+            &.p-stepper-panel-active {
+                flex: 1 1 auto;
+            }
+
+            .p-stepper-header {
+                flex: initial;
+            }
+
+            .p-stepper-content {
+                width: 100%;
+                padding-left: calc($inlineSpacing * 2);
+            }
+
+            .p-stepper-separator {
+                flex: 0 0 auto;
+                width: 2px;
+                height: auto;
+                margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
+            }
+
+            &:has(~ .p-stepper-panel-active) {
+                @if variable-exists(primaryColor) {
+                    .p-stepper-separator {
+                        background-color: $primaryColor;
+                    }
+                }
+            }
+
+            &:last-of-type {
+                .p-stepper-content {
+                    padding-left: calc($inlineSpacing * 6);
+                }
+            }
+        }
+    }
+}