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

package/dist/components/dashboard/content-mgmt/CreateFolder.astro

@@ -1,6 +1,7 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
-import { Input, Select } from 'studiocms:ui/components';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
 import { parentFolderOptions } from './shared.js';
 
 interface Props {
@@ -42,7 +43,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components";
+import { toast } from "studiocms:ui/components/toaster";
 
     const form = document.getElementById('create-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('create-folder-container') as HTMLDivElement;

package/dist/components/dashboard/content-mgmt/CreatePage.astro

@@ -1,7 +1,10 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import pluginList from 'studiocms:plugins';
-import { Card, Input, Select, TabItem, Tabs } from 'studiocms:ui/components';
+import { Card } from 'studiocms:ui/components/card';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
+import { TabItem, Tabs } from 'studiocms:ui/components/tabs';
 import PageTypeHandler from './PageTypeHandler.astro';
 import {
 	categoriesOptions,
@@ -35,7 +38,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
     <Tabs variant={"starlight"}>
       <TabItem
         label={t("tab-label-basic-info")}
-        icon={"information-circle-20-solid"}
+        icon={"heroicons:information-circle-20-solid"}
         color={"primary"}
       >
         <div class="tab-section">
@@ -154,7 +157,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
       </TabItem>
       <TabItem
         label={t("tab-label-content")}
-        icon={"document-text-20-solid"}
+        icon={"heroicons:document-text-20-solid"}
         color={"success"}
       >
         <div class="tab-section">
@@ -211,7 +214,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
 
 <script>
-  import { toast } from "studiocms:ui/components";
+  import { toast } from "studiocms:ui/components/toaster";
   // get the elements
   const createPageForm = document.getElementById(
     "page-create-form",
@@ -325,7 +328,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
   .page-content-editor #page-content {
     height: 100%;
     width: 100%;
-    border: 1px solid hsl(var(--border));
+    border: 1px solid var(--border);
     border-radius: 4px;
     padding: 1rem;
     font-size: 1rem;

package/dist/components/dashboard/content-mgmt/EditFolder.astro

@@ -1,7 +1,8 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Input, Select } from 'studiocms:ui/components';
+import { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
 import { parentFolderOptions } from './shared.js';
 
 const urlParams = Astro.url.searchParams;
@@ -64,7 +65,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
 </script>
 
 <script>
-import { toast } from "studiocms:ui/components";
+import { toast } from "studiocms:ui/components/toaster";
 
     const form = document.getElementById('edit-folder-form') as HTMLFormElement;
     const createContainer = document.getElementById('edit-folder-container') as HTMLDivElement;

package/dist/components/dashboard/content-mgmt/EditPage.astro

@@ -5,7 +5,13 @@ import type { SettingsField } from 'studiocms:plugin-helpers';
 import pluginList from 'studiocms:plugins';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
 import type { SiteConfigCacheObject } from 'studiocms:sdk/types';
-import { Button, Card, Center, Icon, Input, Select, TabItem, Tabs } 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 { Input } from 'studiocms:ui/components/input';
+import { Select } from 'studiocms:ui/components/select';
+import { TabItem, Tabs } from 'studiocms:ui/components/tabs';
 import { editorKeys } from 'virtual:studiocms/components/Editors';
 import { Effect } from 'effect';
 import PageEditorSwapper from './PageEditorSwapper.astro';
@@ -32,11 +38,17 @@ const { lang, config } = Astro.props as Props;
 
 const enableDiffs = config.data.enableDiffs;
 
-const [[{ data: pageData }, users], editors] = await Promise.all([
+const [[currentPageData, users], editors] = await Promise.all([
 	runSDK(Effect.all([SDKCoreJs.GET.page.byId(editId), SDKCoreJs.GET.users.all()])),
 	importEditorKeys(editorKeys),
 ]);
 
+if (!currentPageData) {
+	return new Response(null, { status: 404, statusText: 'Page Not Found' });
+}
+
+const pageData = currentPageData.data;
+
 function getParentFolderValue(value: string | null): string | undefined {
 	const options = parentFolderOptions;
 	if (value === null) return 'null';
@@ -79,7 +91,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 			<form id="edit-page-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.content.page}>
 
         <Tabs variant={'starlight'}>
-          <TabItem label={t('tab-label-basic-info')} icon={'information-circle-20-solid'} color={'primary'}>
+          <TabItem label={t('tab-label-basic-info')} icon={'heroicons:information-circle-20-solid'} color={'primary'}>
             <div class="tab-section">
                 <div class="form-row">
                     <Input label={t('input-page-title')} name='page-title' isRequired defaultValue={pageData.title} />
@@ -140,7 +152,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                   </div>
             </div>
           </TabItem>
-          <TabItem label={t('tab-label-content')} icon={'document-text-20-solid'} color={'success'}>
+          <TabItem label={t('tab-label-content')} icon={'heroicons:document-text-20-solid'} color={'success'}>
 
             <input type="hidden" name="page-content-id" value={pageData.defaultContent?.id} />
 
@@ -154,7 +166,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
           {
             enableDiffs && (
-                <TabItem label={t('tab-label-diff')} icon={'archive-box-20-solid'} color={'warning'}>
+                <TabItem label={t('tab-label-diff')} icon={'heroicons:archive-box-20-solid'} color={'warning'}>
                     <div class="tab-section">
                         <div class="edit-card-list">
                     
@@ -170,13 +182,13 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
                                 <div class="card-row">
                                     <span class="card-description">{pageData.description}</span>
                                     <Button size='sm' as='a' href={Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
-                                    <Icon name="eye" width={24} height={24} class="card-icon" />
+                                    <Icon name="heroicons:eye" width={24} height={24} class="card-icon" />
                                     </Button>
                                 </div>
                                 </Card>
                             ))
                             ) : (
-                            <Card fullWidth style="background-color: hsl(var(--background-step-1));">
+                            <Card fullWidth style="background-color: var(--background-step-1);">
                                 <Center><t-content-edit-page key="diff-no-history">{t('diff-no-history')}</t-content-edit-page></Center>
                             </Card>
                             )
@@ -231,7 +243,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-page');
 
 
 <script>
-import { toast } from "studiocms:ui/components";
+import { toast } from "studiocms:ui/components/toaster";
 
 // get the elements
 const editPageForm = document.getElementById('edit-page-form') as HTMLFormElement;
@@ -322,7 +334,7 @@ editPageForm.addEventListener('submit', async (e) => {
         #page-content {
             height: 100%;
             width: 100%;
-            border: 1px solid hsl(var(--border));
+            border: 1px solid var(--border);
             border-radius: 4px;
             padding: 1rem;
             font-size: 1rem;
@@ -339,7 +351,7 @@ editPageForm.addEventListener('submit', async (e) => {
 .edit-card {
   display: flex;
   flex-direction: column;
-  background-color: hsl(var(--background-step-2));
+  background-color: var(--background-step-2);
   
   & .card-row {
     display: flex;
@@ -352,18 +364,18 @@ editPageForm.addEventListener('submit', async (e) => {
     }
 
     & .card-date {
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
       font-size: .8rem;
     }
 
     & .card-description {
       font-size: 1rem;
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
       line-clamp: 1;
     }
 
     & .card-icon {
-      color: hsl(var(--text-muted));
+      color: var(--text-muted);
     }
   }
 }

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

@@ -1,7 +1,11 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import type { SiteConfigCacheObject } from 'studiocms:sdk/types';
-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 PageList from './PageList.astro';
 
 interface Props {
@@ -17,7 +21,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 
 <div class="inner-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 />
@@ -27,12 +31,12 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
     options={[
       { 
         label: t('dropdown-create-page'), 
-        icon: 'document', 
+        icon: 'heroicons:document', 
         value: Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementCreate 
       },
       { 
         label: t('dropdown-create-folder'), 
-        icon: 'folder', 
+        icon: 'heroicons:folder', 
         value: Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementFolderCreate 
       },
     ]}
@@ -40,11 +44,11 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
     offset={8}
   >
     <Button variant="solid" color="primary" size='md' class="add-button">
-      <Icon name="plus" width={24} height={24} slot="start-content" />
+      <Icon name="heroicons:plus" width={24} height={24} slot="start-content" />
     </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>
 
@@ -133,7 +137,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 </script>
 
 <script>
-  import { DropdownHelper } from 'studiocms:ui/components';
+  import { DropdownHelper } from 'studiocms:ui/components/dropdown';
 
   const createNewDropdown = new DropdownHelper('create-new-dropdown');
 
@@ -177,14 +181,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
   }
 
   const itemTemplate = (item: SearchItem, searchTerm: string) => {
-    const url = item.type === 'folder' 
-      ? `${document.getElementById('inner-sidebar-items-search')?.dataset.editfolder}?folder=${item.id}&search=${searchTerm}`
-      : `${document.getElementById('inner-sidebar-items-search')?.dataset.editpage}/?edit=${item.id}&search=${searchTerm}`;
+    const base = document.getElementById('inner-sidebar-items-search') as HTMLDivElement;
+    const safeSearch = encodeURIComponent(searchTerm);
+    const safeId = encodeURIComponent(item.id);
+    const url = item.type === 'folder'
+      ? `${base?.dataset.editfolder}?folder=${safeId}&search=${safeSearch}`
+      : `${base?.dataset.editpage}/?edit=${safeId}&search=${safeSearch}`;
+    const safeName = DOMPurify.sanitize(item.name, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] });
     return `
-  <div id="search-selector" data-href=${url} class="inner-sidebar-link">
+  <div id="search-selector" data-href="${url}" class="inner-sidebar-link">
     ${ getIcon(item) }
     <span class="sidebar-link-text">
-      ${item.name}
+      ${safeName}
     </span>
   </div>
   `;
@@ -239,9 +247,9 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
 
     console.log(`Search Results (${results.length}) `, results);
 
-    searchItems.innerHTML = results.map(({ item }) => {
-      return itemTemplate(item, searchTerm);
-    }).join('');
+    searchItems.innerHTML = DOMPurify.sanitize(
+      results.map(({ item }) => itemTemplate(item, searchTerm)).join('')
+    );
 
     document.getElementById('inner-sidebar-items')!.style.display = 'none';
     searchItems.style.display = 'block';

package/dist/components/dashboard/content-mgmt/PageHeader.astro

@@ -1,7 +1,12 @@
 ---
 import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Center, Group, Icon, Input, Modal } from 'studiocms:ui/components';
+import { Button } from 'studiocms:ui/components/button';
+import { Center } from 'studiocms:ui/components/center';
+import { Group } from 'studiocms:ui/components/group';
+import { Icon } from 'studiocms:ui/components/icon';
+import { Input } from 'studiocms:ui/components/input';
+import { Modal } from 'studiocms:ui/components/modal';
 
 interface Props {
 	lang: UiLanguageKeys;
@@ -28,6 +33,10 @@ const editId = urlParams.get('edit') || '';
 if (editId) {
 	const res = await runSDK(SDKCoreJs.GET.page.byId(editId));
 
+	if (!res) {
+		return new Response(null, { status: 404, statusText: 'Page Not Found' });
+	}
+
 	if (editPage) {
 		pageTitle = `${res.data.title}`;
 		pageSlug = res.data.slug;
@@ -62,7 +71,7 @@ const currentMode = editPage
 <header class="page-header">
   <div class="page-title-container">
     <Button color='primary' id='nav-open' class='mobile-btn'>
-      <Icon name="bars-3" height={24} width={24} slot="start-content" />
+      <Icon name="heroicons:bars-3" height={24} width={24} slot="start-content" />
     </Button>
     <h1 class="page-title" data-link={Astro.locals.StudioCMS.routeMap.sdk.pages}>
       {currentMode === 'none' ? (
@@ -89,13 +98,13 @@ const currentMode = editPage
     { editPage && ( 
       <Group>
         <Button id="delete-page-modal-trigger" color="danger" type="submit" size="sm">
-            <Icon name="trash-20-solid" width={20} height={20} />
+            <Icon name="heroicons:trash-20-solid" width={20} height={20} />
             <t-content-header key="delete-button">
               {t('delete-button')}
             </t-content-header>
         </Button>
         <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-page-form">
-          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="save-button">
             {t('save-button')}
           </t-content-header>
@@ -126,7 +135,7 @@ const currentMode = editPage
            
             <Input name="slug-confirm" placeholder={`${pageSlug?.slice(0, pageSlug.length-2)}...`} isRequired />
             
-            <span style="color: hsl(var(--danger-base))"><t-content-header key="delete-modal-warning">
+            <span style="color: var(--danger-base)"><t-content-header key="delete-modal-warning">
             {t('delete-modal-warning')}
           </t-content-header></span>
           </div>
@@ -137,13 +146,13 @@ const currentMode = editPage
     { editFolder && ( 
       <Group>
         <Button id="delete-folder-modal-trigger" color="danger" type="submit" size="sm">
-          <Icon name="trash-20-solid" width={20} height={20} />
+          <Icon name="heroicons:trash-20-solid" width={20} height={20} />
           <t-content-header key="delete-button">
             {t('delete-button')}
           </t-content-header>
         </Button>
         <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-folder-form">
-          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="save-button">
             {t('save-button')}
           </t-content-header>
@@ -174,7 +183,7 @@ const currentMode = editPage
 
             <Input name="confirm-folder-name" placeholder={`${folderName.slice(0, folderName.length-2)}...`} isRequired />
           
-            <span style="color: hsl(var(--danger-base))"><t-content-header key="delete-modal-warning">
+            <span style="color: var(--danger-base)"><t-content-header key="delete-modal-warning">
             {t('delete-modal-warning')}
           </t-content-header></span>
           </div>
@@ -184,7 +193,7 @@ const currentMode = editPage
 
     { createFolder && ( 
       <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="create-folder-form">
-        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+        <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="create-button">
             {t('create-button')}
           </t-content-header>
@@ -194,13 +203,13 @@ const currentMode = editPage
     {createPage && ( 
       <Group>
       <Button id="draft-button" variant="outlined" size="sm" color="primary" type="submit" form="page-create-form">
-        <Icon slot="start-content" name="document-text-20-solid" width={20} height={20} />
+        <Icon slot="start-content" name="heroicons:document-text-20-solid" width={20} height={20} />
           <t-content-header key="draft-button">
             {t('draft-button')}
           </t-content-header>
       </Button>
       <Button id="publish-button" variant="solid" size="sm"  color="primary" type="submit" form="page-create-form" disabled>
-        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+        <Icon slot="start-content" name="heroicons:check-20-solid" width={20} height={20} />
           <t-content-header key="publish-button">
             {t('publish-button')}
           </t-content-header>
@@ -233,8 +242,8 @@ const currentMode = editPage
 </script>
 
 <script>
-    import { ModalHelper } from 'studiocms:ui/components';
-    import { toast } from "studiocms:ui/components";
+    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from "studiocms:ui/components/toaster";
 
     const mode = (document.getElementById('current-mode-selector') as HTMLDivElement).dataset.mode;
 
@@ -445,7 +454,7 @@ const currentMode = editPage
     }
 
     code {
-        background-color: hsl(var(--background-step-3));
+        background-color: var(--background-step-3);
         padding: .25rem;
         border-radius: 4px;
     }

package/dist/components/dashboard/content-mgmt/PluginFields.astro

@@ -1,6 +1,11 @@
 ---
 import type { SettingsField } from 'studiocms:plugin-helpers';
-import { Checkbox, Input, RadioGroup, Row, Select, Textarea } from 'studiocms:ui/components';
+import { Checkbox } from 'studiocms:ui/components/checkbox';
+import { Input } from 'studiocms:ui/components/input';
+import { RadioGroup } from 'studiocms:ui/components/radiogroup';
+import { Row } from 'studiocms:ui/components/row';
+import { Select } from 'studiocms:ui/components/select';
+import { Textarea } from 'studiocms:ui/components/textarea';
 
 interface Props {
 	fields: SettingsField[];

package/dist/components/dashboard/content-mgmt/TreeRenderer.astro

@@ -30,14 +30,14 @@ const sortedData = sortTree(data);
 
 function getIcon(pageData: CombinedPageData | null) {
 	if (pageData?.slug === 'index') {
-		return 'home-modern';
+		return 'heroicons:home-modern';
 	}
 
 	if (pageData?.draft) {
-		return 'pencil';
+		return 'heroicons:pencil';
 	}
 
-	return 'document-text';
+	return 'heroicons:document-text';
 }
 ---
 
@@ -52,7 +52,7 @@ function getIcon(pageData: CombinedPageData | null) {
     ) : (
         <TreeSidebarFolder 
             {name} 
-            icon="folder" 
+            icon="heroicons:folder" 
             href={`${Astro.locals.StudioCMS.routeMap.mainLinks.contentManagementFolderEdit}/?folder=${id}`}
             >
             {children && children.length > 0 && (
@@ -64,10 +64,10 @@ function getIcon(pageData: CombinedPageData | null) {
     )
 ))}
 {isNewPage && (
-    <TreeSidebarLink icon="document-plus" href='#'>
+    <TreeSidebarLink icon="heroicons:document-plus" href='#'>
         New Page...
     </TreeSidebarLink>
 )}
 {isNewFolder && (
-    <TreeSidebarFolder name="New Folder..." icon="folder-plus" href="#" />
+    <TreeSidebarFolder name="New Folder..." icon="heroicons:folder-plus" href="#" />
 )}

package/dist/components/dashboard/content-mgmt/TreeSidebarFolder.astro

@@ -1,13 +1,13 @@
 ---
-import { Icon } from 'studiocms:ui/components';
-import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import { Icon } from 'studiocms:ui/components/icon';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'a'> {
 	/**
 	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
 	 */
-	icon: HeroIconName;
+	icon: AvailableIcons;
 	name: string;
 	href: string;
 }
@@ -32,7 +32,7 @@ const compId = crypto.randomUUID();
     height={24}
   />
   <Icon
-    name={activeIcon as HeroIconName}
+    name={activeIcon as AvailableIcons}
     id="selected-icon"
     class="sidebar-link-icon selected"
     width={24}

package/dist/components/dashboard/content-mgmt/TreeSidebarLink.astro

@@ -1,13 +1,13 @@
 ---
-import { Icon } from 'studiocms:ui/components';
-import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import { Icon } from 'studiocms:ui/components/icon';
+import type { AvailableIcons } from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 
 interface Props extends HTMLAttributes<'a'> {
 	/**
 	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
 	 */
-	icon: HeroIconName;
+	icon: AvailableIcons;
 	href: string;
 }
 
@@ -31,7 +31,7 @@ const compId = crypto.randomUUID();
     height={24}
   />
   <Icon
-    name={activeIcon as HeroIconName}
+    name={activeIcon as AvailableIcons}
     id="selected-icon"
     class="sidebar-link-icon selected"
     width={24}

package/dist/components/dashboard/plugins/SettingsRenderer.astro

@@ -1,6 +1,11 @@
 ---
 import type { SettingsField } from 'studiocms:plugin-helpers';
-import { Checkbox, Input, RadioGroup, Row, Select, Textarea } from 'studiocms:ui/components';
+import { Checkbox } from 'studiocms:ui/components/checkbox';
+import { Input } from 'studiocms:ui/components/input';
+import { RadioGroup } from 'studiocms:ui/components/radiogroup';
+import { Row } from 'studiocms:ui/components/row';
+import { Select } from 'studiocms:ui/components/select';
+import { Textarea } from 'studiocms:ui/components/textarea';
 
 interface Props {
 	fields: SettingsField[];

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

@@ -3,7 +3,12 @@ import type { UserSessionData } from 'studiocms:auth/lib/types';
 import { FormattedDate } from 'studiocms:components';
 import { useTranslations } from 'studiocms:i18n';
 import { runSDK, SDKCoreJs } from 'studiocms:sdk';
-import { Button, Card, Center, Icon, Input, Modal } 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 { Input } from 'studiocms:ui/components/input';
+import { Modal } from 'studiocms:ui/components/modal';
 
 interface Props {
 	userSession: UserSessionData | null;
@@ -36,7 +41,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                 color='primary'
                 size='sm'
                 >
-                <Icon slot="start-content" name="plus" width={24} height={24} />
+                <Icon slot="start-content" name="heroicons:plus" width={24} height={24} />
                 <t-profile-tokens key="api-tokens-create">
                     {t('api-tokens-create')}
                 </t-profile-tokens>
@@ -53,11 +58,11 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
                 <div slot="header" class="token-list-item-header">
                     <div class="token-list-item-header-row">
                         <h4>
-                            <Icon name="key" width={24} height={24} />
+                            <Icon name="heroicons:key" width={24} height={24} />
                             {token.description}
                         </h4>
                         <Button type="submit" variant="solid" color="danger" size="sm" data-token={token.id} data-user={user.id} disabled>
-                            <Icon slot="start-content" name="trash" width={24} height={24} />
+                            <Icon slot="start-content" name="heroicons:trash" width={24} height={24} />
                             <t-profile-tokens key="api-tokens-delete-button">{t('api-tokens-delete-button')}</t-profile-tokens>
                         </Button>
                     </div>
@@ -137,7 +142,8 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 </script>
 
 <script>
-    import { ModalHelper, toast } from 'studiocms:ui/components';
+    import { ModalHelper } from 'studiocms:ui/components/modal';
+    import { toast } from 'studiocms:ui/components/toaster';
 
     const createAPITokenModal = new ModalHelper('create-api-token-modal', 'create-api-token');
     const createTokenResponseModal = new ModalHelper('create-token-response-modal');
@@ -260,13 +266,13 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
         gap: .5rem;
 
         .description {
-            color: hsl(var(--text-muted));
+            color: var(--text-muted);
         }
 
         .token-list-item {
             display: flex;
             flex-direction: column;
-            background-color: hsl(var(--background-step-2));
+            background-color: var(--background-step-2);
 
             .token-list-item-header {
                 display: flex;
@@ -296,7 +302,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:profile');
 
                     .created-at {
                         font-size: 0.75rem;
-                        color: hsl(var(--text-muted));
+                        color: var(--text-muted);
                     }
                 }
             }