studiocms 0.1.0-beta.25 → 0.1.0-beta.26

package/dist/components/dashboard/profile/BasicInfo.astro

@@ -1,7 +1,11 @@
 ---
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { useTranslations } from 'studiocms:i18n';
-import { Button, Card, Group, Icon, Input } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Group } from 'studiocms:ui/components/group';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
 
 interface Props {
 	currentUser: UserSessionData | null;
@@ -23,13 +27,13 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
         <div class="form-header">
             <Group>
                 <Button id="refresh-avatar" size='sm' variant={'outlined'} color={'info'} data-url={Astro.locals.StudioCMS.routeMap.endpointLinks.profile}>
-                    <Icon slot="start-content" name="user-circle" width={24} height={24} />
+                    <Icon slot="start-content" name="heroicons:user-circle" width={24} height={24} />
                     <t-profile-basic key="sync-with-libravatar">
                         {t('sync-with-libravatar')}
                     </t-profile-basic>
                 </Button>
                 <Button type='submit' size='sm' variant={'solid'} color='primary'>
-                    <Icon slot="start-content" name="check" width={24} height={24} />
+                    <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
                     <t-profile-basic key="basic-info-save-button">
                         {t('basic-info-save-button')}
                     </t-profile-basic>
@@ -80,7 +84,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
 
 <script>
-    import { toast } from "studiocms:ui/components";
+    import { toast } from "studiocms:ui/components/toaster";
 
     const syncAvatar = document.getElementById('refresh-avatar') as HTMLButtonElement;
     const syncUrl = syncAvatar.dataset.url as string;

package/dist/components/dashboard/profile/Notifications.astro

@@ -3,8 +3,11 @@ import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { Mailer } from 'studiocms:mailer';
 import { notificationTitleStrings, notificationTypes } from 'studiocms:notifier';
 import { type SiteConfigCacheObject } from 'studiocms:sdk/types';
-import { Button, Card, Icon, Toggle } from 'studiocms:ui/components';
-import { Effect } from 'effect';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Toggle } from 'studiocms:ui/components/toggle';
+import { Effect } from '../../../effect.js';
 
 interface Props {
 	currentUser: UserSessionData | null;
@@ -57,7 +60,7 @@ if (enableMailer) {
                 size='sm'
                 disabled={!isNotificationsEnabled}
                 >
-                <Icon slot="start-content" name="check" width={24} height={24} />
+                <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
                 Save
             </Button>
 
@@ -108,7 +111,7 @@ if (enableMailer) {
 </Card>
 
 <script>
-    import { toast } from 'studiocms:ui/components';
+    import { toast } from 'studiocms:ui/components/toaster';
     import { getEnabledNotificationCheckboxes, formatNotificationOptions } from 'studiocms:notifier/client'
 
     const form = document.getElementById('notifications-form') as HTMLFormElement;

package/dist/components/dashboard/profile/SocialSignin.astro

@@ -3,7 +3,10 @@ import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import type { CombinedUserData } from 'studiocms:sdk/types';
-import { Button, Card, Center, Icon } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Center } from 'studiocms:ui/components/center';
+import { Icon } from 'studiocms:ui/components/icon';
 import { providerData } from './oAuthButtonProviders.js';
 
 interface Props {
@@ -73,7 +76,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                                 <Fragment set:html={image} />
                                 <span>{label}</span>
                             </div>
-                            <Icon name="minus-circle" width={24} height={24} />
+                            <Icon name="heroicons:minus-circle" width={24} height={24} />
                         </Button>
                     ))
                 }
@@ -105,7 +108,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                                 <Fragment set:html={image} />
                                 <span>{label}</span>
                             </div>
-                            <Icon name="plus-circle" width={24} height={24} />
+                            <Icon name="heroicons:plus-circle" width={24} height={24} />
                         </Button>
                     ))
                 }
@@ -161,7 +164,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
     }
 
     .social-signin-bg {
-        background-color: hsl(var(--background-step-1));
+        background-color: var(--background-step-1);
         height: auto;
     }
 
@@ -170,7 +173,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
         align-items: stretch;
         justify-content: space-between !important;
         width: 100%;
-        margin-button: 1rem;
+        margin-bottom: 1rem;
     }
 
     .icon-and-label {

package/dist/components/dashboard/profile/UpdatePassword.astro

@@ -1,7 +1,10 @@
 ---
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { useTranslations } from 'studiocms:i18n';
-import { Button, Card, Icon, Input } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Card } from 'studiocms:ui/components/card';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
 
 interface Props {
 	currentUser: UserSessionData | null;
@@ -28,7 +31,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                 disabled={userHasNoPassword}
                 size='sm'
                 >
-                <Icon slot="start-content" name="check" width={24} height={24} />
+                <Icon slot="start-content" name="heroicons:check" width={24} height={24} />
                 <t-profile-password key="user-password-save-button">
                     {t('user-password-save-button')}
                 </t-profile-password>
@@ -99,7 +102,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { toast } from "studiocms:ui/components";
+    import { toast } from "studiocms:ui/components/toaster";
         const passwordUpdateForm = document.getElementById('password-update-form') as HTMLFormElement;
 
         passwordUpdateForm.addEventListener('submit', async (e) => {

package/dist/components/dashboard/sidebar/UserAccount.astro

@@ -1,7 +1,7 @@
 ---
 import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { getLabelForPermissionLevel } from 'studiocms:auth/utils/getLabelForPermissionLevel';
-import { User } from 'studiocms:ui/components';
+import User from '../../shared/SSRUser.astro';
 
 interface Props {
 	currentUser: UserSessionData | null;
@@ -17,7 +17,6 @@ type UserProps = PropsOf<typeof User>;
 const userProps: UserProps = {
 	name: currentUser?.user?.name || 'Visitor',
 	description: getLabelForPermissionLevel(currentUser?.permissionLevel || 'Visitor'),
-	loading: 'eager',
 };
 
 if (currentUser?.user?.avatar) {

package/dist/components/dashboard/sidebar/VersionCheck.astro

@@ -1,6 +1,6 @@
 ---
 import type { VersionCacheObject } from 'studiocms:sdk/types';
-import { Button } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
 import currentVersion from 'studiocms:version';
 import { compare } from 'semver';
 
@@ -22,7 +22,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
 </Button>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
     import { dateTimeListener } from '../component-scripts/dateTimeListener.js';
     import { dateWithTimeAndZone } from '../component-scripts/dateWithTimeAndZone.js';
     import { timeAgo } from '../component-scripts/timeAgo.js';
@@ -76,14 +76,14 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         align-items: center;
         align-content: center;
         vertical-align: middle;
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         font-weight: 700;
         flex-wrap: wrap;
         justify-content: center;
     }
 
     .version-check:hover {
-        color: hsl(var(--primary-base));
+        color: var(--primary-base);
         cursor: pointer;
     }
 
@@ -92,7 +92,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         width: 14px;
         height: 14px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775a5.25 5.25 0 0 1 10.233-2.33a3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5z'/%3E%3C/svg%3E");
-        background-color: hsl(var(--warning-base));
+        background-color: var(--warning-base);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;
@@ -106,7 +106,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         width: 14px;
         height: 14px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4.5 12.75l6 6l9-13.5'/%3E%3C/svg%3E");
-        background-color: hsl(var(--success-base));
+        background-color: var(--success-base);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;
@@ -120,7 +120,7 @@ const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'f
         width: 14px;
         height: 14px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104q-.376.034-.75.082m.75-.082a24.3 24.3 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104q.377.034.75.082M19.8 15.3l-1.57.393A9.07 9.07 0 0 1 12 15a9.07 9.07 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.3 48.3 0 0 1 12 21a48 48 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5'/%3E%3C/svg%3E");
-        background-color: hsl(var(--primary-base));
+        background-color: var(--primary-base);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;

package/dist/components/dashboard/sidebar/VersionCheckChangelog.astro

@@ -1,4 +1,6 @@
 ---
+import css from '@studiocms/ui/css/prose.css?raw';
+
 interface Props {
 	link: string;
 	changelog: string;
@@ -7,7 +9,7 @@ interface Props {
 const { link, changelog } = Astro.props;
 ---
 
-<frame-button data-link={link} data-changelog={changelog}>
+<frame-button data-link={link} data-changelog={changelog} data-styles={css}>
     <slot />
 </frame-button>
 
@@ -15,6 +17,8 @@ const { link, changelog } = Astro.props;
     if (!customElements.get('frame-button')) {
         
         class FrameButton extends HTMLElement {
+            _onKeydown: (e: KeyboardEvent) => void;
+
             constructor() {
                 super();
                 // Get the slot element
@@ -22,9 +26,11 @@ const { link, changelog } = Astro.props;
 
                 const frameContainer = document.createElement('div');
                 frameContainer.style.position = 'absolute';
+                frameContainer.setAttribute('role', 'dialog');
+                frameContainer.setAttribute('aria-modal', 'true');
                 frameContainer.style.width = '100%';
                 frameContainer.style.height = '100%';
-                frameContainer.style.backgroundColor = 'hsl(var(--background-step-1))';
+                frameContainer.style.backgroundColor = 'var(--background-step-1)';
                 frameContainer.style.display = 'none';
                 frameContainer.style.justifyContent = 'center';
                 frameContainer.style.alignItems = 'center';
@@ -50,19 +56,20 @@ const { link, changelog } = Astro.props;
                 frameButton.style.justifyContent = 'center';
                 frameButton.style.alignItems = 'center';
                 frameButton.style.transition = 'background-color 0.15s ease-in-out';
+                frameButton.setAttribute('aria-label', 'Close full changelog');
 
                 const frameContent = document.createElement('div');
                 frameContent.style.padding = '1.5rem';
                 frameContent.style.width = '100%';
                 frameContent.style.height = '90%';
-                frameContent.style.overflowX = 'none';
+                frameContent.style.overflowX = 'hidden';
                 frameContent.style.overflowWrap = 'break-word';
                 frameContent.style.overflowY = 'auto';
                 frameContent.style.scrollbarWidth = 'thin';
-                frameContent.style.scrollbarColor = 'hsl(var(--default-active)) hsl(var(--background-step-1))';
+                frameContent.style.scrollbarColor = 'var(--default-active) var(--background-step-1)';
 
                 frameButton.addEventListener('mouseenter', () => {
-                    frameButton.style.backgroundColor = 'hsl(var(--default-base))';
+                    frameButton.style.backgroundColor = 'var(--default-base)';
                 });
 
                 frameButton.addEventListener('mouseleave', () => {
@@ -83,16 +90,24 @@ const { link, changelog } = Astro.props;
                         },
                         body: JSON.stringify({ currentURLOrigin: window.location.origin }),
                     })).json();
+                    const styles = this.getAttribute('data-styles')!;
 
                     frameContent.innerHTML = `
                         <h1>Full Changelog</h1>
                         <a href="${changelogLink}" target="_blank">See on GitHub ⤴</a>
-                        ${changelog}
+                        <style>${styles}</style>
+                        <div class="prose">${changelog}</div>
                     `;
 
                     frameContainer.style.display = 'flex';
                 });
 
+                this._onKeydown = (e: KeyboardEvent) => {
+                  if (e.key === 'Escape' && frameContainer.style.display === 'flex') {
+                    frameContainer.style.display = 'none';
+                  }
+                };
+
                 frameContainer.appendChild(frameButton);
                 frameContainer.appendChild(frameContent);
 
@@ -100,6 +115,13 @@ const { link, changelog } = Astro.props;
                 shadow.appendChild(frameContainer);
                 shadow.appendChild(slot);
             }
+
+            connectedCallback() {
+                document.addEventListener('keydown', this._onKeydown);
+            }
+            disconnectedCallback() {
+                document.removeEventListener('keydown', this._onKeydown);
+            }
         }
 
         customElements.define('frame-button', FrameButton);

package/dist/components/dashboard/sidebar-modals/UserManagementModals.astro

@@ -1,5 +1,10 @@
 ---
-import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Center } from 'studiocms:ui/components/center';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Modal } from 'studiocms:ui/components/modal';
+import { Select } from 'studiocms:ui/components/select';
 ---
 <Modal
   id='create-new-user-modal'
@@ -51,7 +56,7 @@ import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/compone
       <div class="link-container">
         <code id="invite-response-placeholder"></code>
         <Button color="primary" size="sm" class="copy-btn">
-          <Icon name="document-duplicate-20-solid" width={20} height={20} />
+          <Icon name="heroicons:document-duplicate-20-solid" width={20} height={20} />
         </Button>
       </div>
     </div>
@@ -70,7 +75,7 @@ import { Button, Center, Icon, Input, Modal, Select } from 'studiocms:ui/compone
     }
 
     code {
-      background-color: hsl(var(--background-step-3));
+      background-color: var(--background-step-3);
       padding: .25rem;
       border-radius: 4px;
     }

package/dist/components/dashboard/sidebar-modals/VersionModal.astro

@@ -1,7 +1,8 @@
 ---
+import 'studiocms:ui/prose';
 import changelog from 'studiocms:changelog';
 import type { VersionCacheObject } from 'studiocms:sdk/types';
-import { Modal } from 'studiocms:ui/components';
+import { Modal } from 'studiocms:ui/components/modal';
 import currentVersion from 'studiocms:version';
 import { studioCMSSocials } from '../../../consts.js';
 import { parseMarkdown } from '../../../utils/tinyMDParser.js';
@@ -53,7 +54,7 @@ const lastChecked = new Date(latestVersion.lastCacheUpdate);
         </div>
 
         <div class="version-modal-release-notes">
-            <div><Fragment set:html={parseMarkdown(changelog)} /></div>
+            <div class="prose"><Fragment set:html={parseMarkdown(changelog)} /></div>
             <span class="release-notes-read-more">
                 <VersionCheckChangelog changelog={studioCMSSocials.changelog} link={Astro.locals.StudioCMS.routeMap.sdk.changelog}><span class="read-more-text">Full Changelog</span></VersionCheckChangelog>
             </span>
@@ -116,25 +117,25 @@ to allow for more information on a slightly bigger modal.
         font-size: 1rem;
 
         .read-more-text {
-            color: hsl(var(--text-muted));
+            color: var(--text-muted);
             text-align: end;
             font-weight: 400;
             cursor: pointer;
         }
 
         .read-more-text:hover {
-            color: hsl(var(--primary-base));
+            color: var(--primary-base);
             text-decoration: underline;
         }
 
         a {
-            color: hsl(var(--text-muted));
+            color: var(--text-muted);
             text-decoration: none;
             font-weight: 700;
         }
 
         a:hover {
-            color: hsl(var(--primary-base));
+            color: var(--primary-base);
         }
     }
 
@@ -150,7 +151,7 @@ to allow for more information on a slightly bigger modal.
 
     .version-modal-row-title {
         font-weight: 500;
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
     }
 
     .version-modal-col-value {
@@ -169,7 +170,7 @@ to allow for more information on a slightly bigger modal.
     }
 
     .version-modal-release-notes {
-        border: 1px solid hsl(var(--border));
+        border: 1px solid var(--border);
         border-radius: 0.5rem;
         padding: 1rem;
         overflow: auto;
@@ -182,7 +183,7 @@ to allow for more information on a slightly bigger modal.
     }
 
     .latest-update-check {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         font-size: .7em;
         font-weight: 700;
         text-align: center;
@@ -198,11 +199,11 @@ to allow for more information on a slightly bigger modal.
 
     a:-webkit-any-link:hover {
         text-decoration: underline;
-        color: hsl(var(--primary-base));
+        color: var(--primary-base);
     }
 
     a:-webkit-any-link {
-        color: hsl(var(--text-muted));
+        color: var(--text-muted);
         text-decoration: none;
     }
 
@@ -217,7 +218,7 @@ to allow for more information on a slightly bigger modal.
     .reload-button {
         display: flex;
         padding: 0.125rem;
-        border: 2px solid hsl(var(--border));
+        border: 2px solid var(--border);
         border-radius: 0.5rem;
         width: 1.5rem;
         height: 1.5rem;
@@ -228,10 +229,10 @@ to allow for more information on a slightly bigger modal.
         transition: all 0.15s ease;
         margin-left: 0.25rem;
         &:hover {
-            background-color: hsl(var(--border));
+            background-color: var(--border);
 
             .reload {
-                background-color: hsl(var(--primary-base));
+                background-color: var(--primary-base);
             }
         }
     }
@@ -241,7 +242,7 @@ to allow for more information on a slightly bigger modal.
         width: 16px;
         height: 16px;
         --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99'/%3E%3C/svg%3E");
-        background-color: hsl(var(--text-muted));
+        background-color: var(--text-muted);
         -webkit-mask-image: var(--svg);
         mask-image: var(--svg);
         -webkit-mask-repeat: no-repeat;

package/dist/components/dashboard/sidebarConfig.d.ts

@@ -1,12 +1,12 @@
 import type { UiLanguageKeys } from 'studiocms:i18n';
-import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 /**
  * Represents a link in the sidebar of the dashboard.
  */
 interface SidebarLink {
     title?: string;
     key?: string;
-    icon: HeroIconName;
+    icon: AvailableIcons;
     href: string;
 }
 /**

package/dist/components/dashboard/sidebarConfig.js

@@ -7,7 +7,7 @@ function filterAndProcessPages(pages, admin, permission, lang) {
   const filteredPages = [];
   for (const { title: t, icon: ico, slug, requiredPermissions } of pages) {
     const href = makeDashboardRoute(slug);
-    const icon = ico || "cube-transparent";
+    const icon = ico || "heroicons:cube-transparent";
     const title = t[lang] || t[defaultLang];
     if (admin) {
       if (requiredPermissions === void 0) {
@@ -47,7 +47,7 @@ function getSidebarLinks(lang) {
   const baseLinks = [
     {
       key: "dashboard-link-label",
-      icon: "home",
+      icon: "heroicons:home",
       href: StudioCMSRoutes.mainLinks.dashboardIndex
     },
     ...filterAndProcessPages(userPages, false, ["none", "visitor"], lang)
@@ -55,7 +55,7 @@ function getSidebarLinks(lang) {
   const editorLinks = [
     {
       key: "content-management-label",
-      icon: "pencil-square",
+      icon: "heroicons:pencil-square",
       href: StudioCMSRoutes.mainLinks.contentManagement
     },
     ...filterAndProcessPages(userPages, false, ["editor"], lang)
@@ -63,7 +63,7 @@ function getSidebarLinks(lang) {
   const adminLinks = [
     {
       key: "user-management-label",
-      icon: "user-group",
+      icon: "heroicons:user-group",
       href: StudioCMSRoutes.mainLinks.userManagement
     },
     ...filterAndProcessPages(adminPages, true, ["admin"], lang)
@@ -71,12 +71,12 @@ function getSidebarLinks(lang) {
   const ownerLinks = [
     {
       key: "site-configuration-label",
-      icon: "cog-6-tooth",
+      icon: "heroicons:cog-6-tooth",
       href: StudioCMSRoutes.mainLinks.siteConfiguration
     },
     {
       key: "mailer-configuration-label",
-      icon: "inbox",
+      icon: "heroicons:inbox",
       href: StudioCMSRoutes.mainLinks.smtpConfiguration
     },
     ...filterAndProcessPages(adminPages, true, ["owner"], lang)

package/dist/components/dashboard/user-mgmt/InnerSidebarElement.astro

@@ -1,7 +1,12 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Divider, Dropdown, Icon, Input } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Divider } from 'studiocms:ui/components/divider';
+import { Dropdown } from 'studiocms:ui/components/dropdown';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
 import UserListItem from './UserListItem.astro';
 
 interface Props {
@@ -21,7 +26,7 @@ const safeUsers: {
 	permissionsData:
 		| {
 				user: string;
-				rank: string;
+				rank: AvailablePermissionRanks;
 		  }
 		| undefined;
 }[] = Users.map(({ avatar, email, id, name, username, permissionsData }) => {
@@ -32,7 +37,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 ---
 <div class="inner-user-sidebar-header">
   <Button variant="solid" color="primary" size='md' id="back-to-outer" class="mobile-btn mid-size-btn">
-    <Icon name="arrow-left" width={24} height={24} slot="start-content" />
+    <Icon name="heroicons:arrow-left" width={24} height={24} slot="start-content" />
   </Button>
   <form id="search-form">
     <Input name='search' placeholder={t('input-placeholder-search')} type='search' required />
@@ -40,18 +45,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
   <Dropdown
     id='create-user-dropdown'
     options={[
-      { label: t('dropdown-create-user'), icon: 'user-plus', value: 'new-user' },
-      { label: t('dropdown-create-invite'), icon: 'inbox-arrow-down', value: 'new-invite' },
+      { label: t('dropdown-create-user'), icon: 'heroicons:user-plus', value: 'new-user' },
+      { label: t('dropdown-create-invite'), icon: 'heroicons:inbox-arrow-down', value: 'new-invite' },
     ]}
     align={'end'}
     offset={8}
   >
     <Button variant="solid" color="primary" size='md' class="add-button">
-      <Icon name="plus" width={24} height={24} />
+      <Icon name="heroicons:plus" width={24} height={24} />
     </Button>
   </Dropdown>
   <Button variant="solid" color="primary" size='md' class="mobile-btn" id="show-page">
-    <Icon name="x-mark" width={24} height={24} slot="start-content" />
+    <Icon name="heroicons:x-mark" width={24} height={24} slot="start-content" />
   </Button>
 </div>
 
@@ -130,8 +135,10 @@ const t = useTranslations(lang, '@studiocms/dashboard:user-mngmt-sidebar');
 </script>
 
 <script>
-    import { DropdownHelper, ModalHelper, toast } from 'studiocms:ui/components';
-  
+    import { DropdownHelper } from 'studiocms:ui/components/dropdown';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from 'studiocms:ui/components/toaster';
+
     const createNewDropdown = new DropdownHelper('create-user-dropdown');
     const createNewUserModal = new ModalHelper('create-new-user-modal');
     const createUserInviteModal = new ModalHelper('create-user-invite-modal');

package/dist/components/dashboard/user-mgmt/RankCheck.astro

@@ -1,12 +1,13 @@
 ---
 import { User } from 'studiocms:auth/lib';
-import { Effect } from 'effect';
+import type { AvailablePermissionRanks } from '@withstudiocms/auth-kit/types';
+import { Effect } from '../../../effect.js';
 
 interface Props {
-	requiredPermission?: string;
+	requiredPermission?: AvailablePermissionRanks;
 }
 
-const { requiredPermission } = Astro.props;
+const { requiredPermission = 'unknown' } = Astro.props;
 
 const { userSessionData: user } = Astro.locals.StudioCMS?.security ?? {
 	userSessionData: null,
@@ -15,11 +16,8 @@ const { userSessionData: user } = Astro.locals.StudioCMS?.security ?? {
 const isAuthorized = await Effect.runPromise(
 	Effect.gen(function* () {
 		const { isUserAllowed } = yield* User;
-		return yield* isUserAllowed(
-			user,
-			(requiredPermission as 'owner' | 'admin' | 'editor' | 'visitor' | 'unknown') ?? 'unknown'
-		);
-	}).pipe(User.Provide)
+		return yield* isUserAllowed(user, requiredPermission);
+	})
 );
 
 if (!isAuthorized) {