@genesislcap/pbc-notify-ui 1.0.32 → 1.0.34

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/parameter-builder/parameter-builder.template.js

@@ -1,36 +1,36 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, ref, repeat, when } from '@microsoft/fast-element';
+import { html, ref, repeat, when } from '@genesislcap/web-core';
 import { ALL_PARAM_SOURCE_TYPES, PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT, } from '../../../../types/param-source-type';
 import { ALL_PARAM_TYPES } from '../../../../types/param-type';
 export const ParameterBuilderTemplate = html `
   <div class="parameter-builder">
-    <zero-text-field
+    <rapid-text-field
       id="param-name"
       placeholder="Name"
       :value=${sync((x) => x.name)}
-    ></zero-text-field>
+    ></rapid-text-field>
 
-    <zero-text-field
+    <rapid-text-field
       id="param-label"
       placeholder="Label"
       :value=${sync((x) => x.label)}
-    ></zero-text-field>
+    ></rapid-text-field>
 
-    <zero-select
+    <rapid-select
       id="param-source-type"
       :value=${sync((x) => x.sourceType)}
       class="param-source-type"
     >
       ${repeat((x) => ALL_PARAM_SOURCE_TYPES, html `
-          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
         `)}
-    </zero-select>
+    </rapid-select>
 
     ${when((x) => x.sourceType === PARAM_SOURCE_TYPE_USER_TEXT, html `
-        <zero-text-field class="param-source" disabled></zero-text-field>
+        <rapid-text-field class="param-source" disabled></rapid-text-field>
       `)}
     ${when((x) => x.sourceType === PARAM_SOURCE_TYPE_REQ_REP, html `
-        <zero-select
+        <rapid-select
           ${ref('sourceSelect')}
           id="param-source"
           :value=${sync((x) => x.sourceSelected)}
@@ -38,27 +38,27 @@ export const ParameterBuilderTemplate = html `
           ?disabled=${(x) => x.sourceType !== PARAM_SOURCE_TYPE_REQ_REP}
         >
           ${repeat((x) => x.reqRepItems, html `
-              <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
             `)}
-        </zero-select>
+        </rapid-select>
       `)}
     ${when((x) => x.sourceType === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
-        <zero-text-field
+        <rapid-text-field
           ${ref('sourceTextField')}
           class="param-source"
           placeholder="item1,item2,item3"
           :value=${sync((x) => x.sourceTyped)}
-        ></zero-text-field>
+        ></rapid-text-field>
       `)}
 
-    <zero-select id="param-type" :value=${sync((x) => x.type)} class="param-type">
+    <rapid-select id="param-type" :value=${sync((x) => x.type)} class="param-type">
       ${repeat((x) => ALL_PARAM_TYPES, html `
-          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
         `)}
-    </zero-select>
+    </rapid-select>
 
-    <zero-button appearance="icon" class="delete" @click=${(x) => x.deleteParameter()}>
-      <zero-icon name="trash" part="icon"></zero-icon>
-    </zero-button>
+    <rapid-button appearance="icon" class="delete" @click=${(x) => x.deleteParameter()}>
+      <rapid-icon name="trash" part="icon"></rapid-icon>
+    </rapid-button>
   </div>
 `;

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-builder/template-condition-builder.js

@@ -1,10 +1,10 @@
 import { __awaiter, __decorate } from "tslib";
-import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
+import { attr, customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { LogicalOperator, RightCriteria, nullAndBlankLogicalOperatorValues, } from '../../../../../../notify.types';
 import { logger } from '../../../../../../utils';
 import { ConditionBuilderStyles } from '../../../../styles/condition-builder.styles';
 import { TemplateConditionBuilderTemplate } from './template-condition-builder.template';
-let TemplateConditionBuilder = class TemplateConditionBuilder extends FASTElement {
+let TemplateConditionBuilder = class TemplateConditionBuilder extends GenesisElement {
     constructor() {
         super(...arguments);
         this.leftValueItems = [];

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-condition-builder/template-condition-builder.template.js

@@ -1,20 +1,19 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat, when } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
+import { classNames, html, repeat, when } from '@genesislcap/web-core';
 import { LogicalOperator, RightCriteria, nullAndBlankLogicalOperatorValues, } from '../../../../../../notify.types';
 export const TemplateConditionBuilderTemplate = html `
   <div class="condition-builder">
-    <zero-select
+    <rapid-select
       :value=${sync((x) => x.leftValue)}
       :initialValue=${sync((x) => x.leftValue)}
       class="left-value"
     >
       ${repeat((x) => x.leftValueItems, html `
-          <zero-option value=${(x) => JSON.stringify(x)}>${(x) => x.FIELD_NAME}</zero-option>
+          <rapid-option value=${(x) => JSON.stringify(x)}>${(x) => x.FIELD_NAME}</rapid-option>
         `)}
-    </zero-select>
+    </rapid-select>
 
-    <zero-select
+    <rapid-select
       class="logical-operator${(x) => classNames([
     '-null-and-blank',
     nullAndBlankLogicalOperatorValues.includes(LogicalOperator[x.logicalOperator]),
@@ -22,45 +21,45 @@ export const TemplateConditionBuilderTemplate = html `
       :value=${sync((x) => x.logicalOperator)}
     >
       ${repeat((_) => Object.values(LogicalOperator), html `
-          <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+          <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
         `)}
-    </zero-select>
+    </rapid-select>
 
     ${when((x) => !nullAndBlankLogicalOperatorValues.includes(LogicalOperator[x.logicalOperator]), html `
-        <zero-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
+        <rapid-select class="right-criteria" :value=${sync((x) => x.rightCriteria)}>
           ${repeat((_) => Object.values(RightCriteria), html `
-              <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+              <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
             `)}
-        </zero-select>
+        </rapid-select>
 
         ${when((x) => x.rightCriteria === RightCriteria.VALUE, html `
-            <zero-text-field
+            <rapid-text-field
               class="right-criteria-text"
               :value=${sync((x) => x.rightValueText)}
               placeholder="Value"
               autocomplete="off"
-            ></zero-text-field>
+            ></rapid-text-field>
           `)}
         ${when((x) => x.rightCriteria === RightCriteria.USER_ENTRY, html `
-            <zero-select class="right-criteria-select" :value=${sync((x) => x.rightValueSelect)}>
+            <rapid-select class="right-criteria-select" :value=${sync((x) => x.rightValueSelect)}>
               ${(x) => rightValueItemsOptions(x.rightValueItems)}
-            </zero-select>
+            </rapid-select>
           `)}
       `)}
 
-    <zero-button appearance="icon" class="delete" @click=${(x) => x.deleteCondition()}>
-      <zero-icon
+    <rapid-button appearance="icon" class="delete" @click=${(x) => x.deleteCondition()}>
+      <rapid-icon
         style="opacity: 0.5"
         variant="regular"
         name="trash-alt"
         size="lg"
         part="icon"
-      ></zero-icon>
-    </zero-button>
+      ></rapid-icon>
+    </rapid-button>
   </div>
 `;
 const rightValueItemsOptions = (rightValueItems) => html `
   ${repeat((x) => rightValueItems, html `
-      <zero-option value="${(x) => { var _a; return (_a = x.UUID) !== null && _a !== void 0 ? _a : ''; }}">${(x) => { var _a; return (_a = x.PARAM_NAME) !== null && _a !== void 0 ? _a : ''; }}</zero-option>
+      <rapid-option value="${(x) => { var _a; return (_a = x.UUID) !== null && _a !== void 0 ? _a : ''; }}">${(x) => { var _a; return (_a = x.PARAM_NAME) !== null && _a !== void 0 ? _a : ''; }}</rapid-option>
     `)}
 `;

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.js

@@ -1,5 +1,5 @@
 import { __awaiter, __decorate } from "tslib";
-import { customElement, FASTElement, observable, volatile } from '@microsoft/fast-element';
+import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
 import { Assignment, defaultUpdateType, Severity, } from '../../../../../notify.types';
 import { NotifyService } from '../../../../../services/notify.service';
 import { SystemService } from '../../../../../services/system.service';
@@ -9,7 +9,7 @@ import { DynamicRuleUtils, showNotificationError, TemplateUtils, isEmpty, } from
 import { DynamicRuleDialogStyles } from '../../../styles/dynamic-rule.styles';
 import { TemplateDialogTemplate } from './template-dialog.template';
 import { TemplateDialogMode } from './template-dialog.types';
-let TemplateDialog = class TemplateDialog extends FASTElement {
+let TemplateDialog = class TemplateDialog extends GenesisElement {
     constructor() {
         super(...arguments);
         this.templateDialogMode = null;

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.js

@@ -1,56 +1,56 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, ref, repeat } from '@microsoft/fast-element';
+import { html, ref, repeat } from '@genesislcap/web-core';
 import { Severity, UpdateType } from '../../../../../notify.types';
 import { eventDetail } from '../../../../../utils/eventDetail';
 export const TemplateDialogTemplate = html `
-  <zero-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
+  <rapid-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
     <div slot="top" class="dialog-top">${(x) => x.templateDialogTitle}</div>
 
     <div class="dialog-content">
       <div class="content-row">
         <div class="control">
-          <zero-text-field :value=${sync((x) => x.name)} autofocus>Name</zero-text-field>
+          <rapid-text-field :value=${sync((x) => x.name)} autofocus>Name</rapid-text-field>
         </div>
 
         <div class="control">
-          <zero-text-field :value=${sync((x) => x.description)}>Description</zero-text-field>
+          <rapid-text-field :value=${sync((x) => x.description)}>Description</rapid-text-field>
         </div>
       </div>
 
       <div class="content-row">
         <div class="control">
           <label>Resource</label>
-          <zero-select :value=${sync((x) => x.resource)} position="below">
+          <rapid-select :value=${sync((x) => x.resource)} position="below">
             ${repeat((x) => x.resources, html `
-                <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+                <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
               `)}
-          </zero-select>
+          </rapid-select>
         </div>
 
         <div class="control">
           <label>Topic</label>
-          <zero-select :value=${sync((x) => x.topic)}>
+          <rapid-select :value=${sync((x) => x.topic)}>
             ${repeat((x) => x.topics, html `
-                <zero-option value=${(x) => x}>${(x) => x}</zero-option>
+                <rapid-option value=${(x) => x}>${(x) => x}</rapid-option>
               `)}
-          </zero-select>
+          </rapid-select>
         </div>
 
         <div class="control">
           <label>Severity</label>
-          <zero-select :value=${sync((x) => x.severity)}>
+          <rapid-select :value=${sync((x) => x.severity)}>
             <options-datasource
               value-field="value"
               label-field="value"
-              option-element="zero-option"
+              option-element="rapid-option"
               :data=${(_) => Object.values(Severity).map((value) => ({ value }))}
             ></options-datasource>
-          </zero-select>
+          </rapid-select>
         </div>
 
         <div class="control">
           <label>Update Type</label>
-          <zero-multiselect
+          <rapid-multiselect
             :selectedOptions=${(x) => x.updateType}
             @selectionChange=${(x, c) => {
     x.updateType = c.event.detail;
@@ -63,17 +63,17 @@ export const TemplateDialogTemplate = html `
               label-field="value"
               :data=${() => Object.values(UpdateType).map((value) => ({ value, label: value }))}
             ></multiselect-datasource>
-          </zero-multiselect>
+          </rapid-multiselect>
         </div>
       </div>
 
       <div class="content-row">
         <div class="control">
-          <zero-text-field :value=${sync((x) => x.header)}>Header</zero-text-field>
+          <rapid-text-field :value=${sync((x) => x.header)}>Header</rapid-text-field>
         </div>
 
         <div class="control">
-          <zero-text-field :value=${sync((x) => x.message)}>Message</zero-text-field>
+          <rapid-text-field :value=${sync((x) => x.message)}>Message</rapid-text-field>
         </div>
       </div>
 
@@ -91,7 +91,7 @@ export const TemplateDialogTemplate = html `
           </div>
 
           <div class="content-row">
-            <zero-button @click=${(x) => x.newParameter()}>+ Parameter</zero-button>
+            <rapid-button @click=${(x) => x.newParameter()}>+ Parameter</rapid-button>
           </div>
         </div>
       </div>
@@ -112,20 +112,20 @@ export const TemplateDialogTemplate = html `
           </div>
 
           <div class="content-row">
-            <zero-button @click=${(x) => x.newCondition()}>+ Condition</zero-button>
+            <rapid-button @click=${(x) => x.newCondition()}>+ Condition</rapid-button>
           </div>
         </div>
       </div>
     </div>
 
     <div slot="bottom" class="dialog-bottom">
-      <zero-button
+      <rapid-button
         appearance="accent"
         @click=${(x) => x.submit()}
         ?disabled=${(x) => x.validateRequiredFields}
       >
         Submit
-      </zero-button>
+      </rapid-button>
     </div>
-  </zero-modal>
+  </rapid-modal>
 `;

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-management.js

@@ -1,11 +1,11 @@
 import { __awaiter, __decorate } from "tslib";
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
-import { customElement, FASTElement, html, ref, repeat } from '@microsoft/fast-element';
+import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
 import { TemplateService } from '../../../../services/template.service';
 import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { TEMPLATE_MANAGEMENT_COLUMNS } from './columns';
 import { TemplateDialogMode } from './template-dialog/template-dialog.types';
-let TemplateManagement = class TemplateManagement extends FASTElement {
+let TemplateManagement = class TemplateManagement extends GenesisElement {
     openTemplateDialog() {
         this.templateDialog.openDialog({ mode: TemplateDialogMode.CREATE });
     }
@@ -31,7 +31,7 @@ let TemplateManagement = class TemplateManagement extends FASTElement {
                     },
                 ],
             },
-        }, 'zero');
+        }, 'rapid');
     }
 };
 __decorate([
@@ -43,20 +43,20 @@ TemplateManagement = __decorate([
         template: html `
     <div class="container">
       <div class="header">
-        <zero-button class="add" @click=${(x) => x.openTemplateDialog()}>
-          <zero-icon name="plus" size="lg" variant="solid"></zero-icon>
+        <rapid-button class="add" @click=${(x) => x.openTemplateDialog()}>
+          <rapid-icon name="plus" size="lg" variant="solid"></rapid-icon>
           Add
-        </zero-button>
+        </rapid-button>
       </div>
 
       <div class="grid">
-        <zero-grid-pro only-template-col-defs>
+        <rapid-grid-pro only-template-col-defs>
           <grid-pro-genesis-datasource resource-name="ALL_RULE_TEMPLATES">
             ${repeat((x) => TEMPLATE_MANAGEMENT_COLUMNS(x), html `
                 <grid-pro-column :definition=${(x) => x} />
               `)}
           </grid-pro-genesis-datasource>
-        </zero-grid-pro>
+        </rapid-grid-pro>
       </div>
     </div>
 

package/dist/esm/components/foundation-notification-dashboard/notification-dashboard.js

@@ -1,13 +1,13 @@
 import { __awaiter, __decorate } from "tslib";
 import { Auth } from '@genesislcap/foundation-comms';
-import { FASTElement, customElement, observable } from '@microsoft/fast-element';
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
 import { loadRemotes } from '../components';
 import { FoundationNotificationDashboardStyles as styles } from './notification-dashboard.styles';
 import { FoundationNotificationDashboardTemplate as template } from './notification-dashboard.template';
 /**
  * @public
  */
-let FoundationNotificationDashboard = class FoundationNotificationDashboard extends FASTElement {
+let FoundationNotificationDashboard = class FoundationNotificationDashboard extends GenesisElement {
     constructor() {
         super(...arguments);
         this.ready = false;

package/dist/esm/components/foundation-notification-dashboard/notification-dashboard.styles.js

@@ -1,11 +1,11 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@genesislcap/web-core';
 /**
  * @public
  */
 export const FoundationNotificationDashboardStyles = css `
   .notification-dashboard,
-  zero-tabs,
-  zero-tab-panel {
+  rapid-tabs,
+  rapid-tab-panel {
     height: 100%;
   }
 `;

package/dist/esm/components/foundation-notification-dashboard/notification-dashboard.template.js

@@ -1,12 +1,12 @@
-import { html, repeat, when } from '@microsoft/fast-element';
+import { html, repeat, when } from '@genesislcap/web-core';
 import { NOTIFICATION_DASHBOARD_TABS, } from './notification-dashboard.tabs';
 export const FoundationNotificationDashboardTemplate = html `
   <div class="notification-dashboard">
-    <zero-tabs class="tabs">
+    <rapid-tabs class="tabs">
       <!-- Tabs -->
       ${repeat((_) => NOTIFICATION_DASHBOARD_TABS, html `
           ${when((x, c) => c.parent.auth.currentUser.hasPermission(x.right), html `
-              <zero-tab slot="${(x) => x.id}-tab">${(x) => x.name}</zero-tab>
+              <rapid-tab slot="${(x) => x.id}-tab">${(x) => x.name}</rapid-tab>
             `)}
         `)}
 
@@ -16,12 +16,12 @@ export const FoundationNotificationDashboardTemplate = html `
               ${
 /* HTML Render */
 (x) => html `
-                  <zero-tab-panel slot="${x.id}-tab" id="${x.id}-tab-panel">
+                  <rapid-tab-panel slot="${x.id}-tab" id="${x.id}-tab-panel">
                     <${x.component}></${x.component}>
-                  </zero-tab-panel>
+                  </rapid-tab-panel>
                 `}
             `)}
         `)}
-    </zero-tabs>
+    </rapid-tabs>
   </div>
 `;

package/dist/esm/components/foundation-notification-dashboard/notification-dashboard.utils.js

@@ -254,6 +254,6 @@ export function showNotificationError(error) {
                 type: 'error',
             },
         },
-    }, 'zero');
+    }, 'rapid');
 }
 // #endregion

package/dist/esm/components/foundation-notification-dashboard/styles/condition-builder.styles.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@genesislcap/web-core';
 export const ConditionBuilderStyles = css `
   .condition-builder {
     display: flex;
@@ -6,27 +6,29 @@ export const ConditionBuilderStyles = css `
     margin-bottom: calc(var(--design-unit) * 2px);
   }
 
-  zero-button {
+  rapid-button {
     margin: 0;
   }
 
   .delete {
     margin: 0;
+    display: flex;
+    justify-content: center;
   }
 
-  zero-text-field {
+  rapid-text-field {
     width: 100%;
   }
 
-  zero-select {
+  rapid-select {
     min-width: auto;
   }
 
-  zero-select.left-value::part(control) {
+  rapid-select.left-value::part(control) {
     width: 250px;
   }
 
-  zero-select.logical-operator::part(control) {
+  rapid-select.logical-operator::part(control) {
     width: 160px;
   }
 
@@ -34,16 +36,20 @@ export const ConditionBuilderStyles = css `
     width: 100%;
   }
 
-  zero-select.right-criteria::part(control) {
+  rapid-select.right-criteria::part(control) {
     width: 135px;
   }
 
-  zero-select.right-criteria-select {
+  rapid-select.right-criteria-user-entry {
+    width: 100%;
+  }
+
+  rapid-select.right-criteria-select {
     width: 100%;
     min-width: 0;
   }
 
-  zero-select::part(listbox) {
+  rapid-select::part(listbox) {
     max-height: 160px;
   }
 `;

package/dist/esm/components/foundation-notification-dashboard/styles/dynamic-rule.styles.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@genesislcap/web-core';
 export const DynamicRuleManagementStyles = css `
   .container {
     display: flex;
@@ -18,7 +18,7 @@ export const DynamicRuleManagementStyles = css `
 // #region Dialog
 const modalWidthPx = 940;
 const top = css `
-  zero-modal::part(top) {
+  rapid-modal::part(top) {
     padding: calc(var(--design-unit) * 4px);
     border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
     margin: 0;
@@ -30,7 +30,7 @@ const top = css `
   }
 `;
 const bottom = css `
-  zero-modal::part(bottom) {
+  rapid-modal::part(bottom) {
     padding: calc(var(--design-unit) * 4px);
     border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
     margin: 0;
@@ -41,32 +41,32 @@ const bottom = css `
   }
 `;
 const textField = css `
-  zero-text-field {
+  rapid-text-field {
     display: flex;
     flex-direction: column;
     gap: calc(var(--design-unit) * 2px);
   }
 
-  zero-text-field::part(label) {
+  rapid-text-field::part(label) {
     margin: 0;
     color: var(--neutral-foreground-rest);
   }
 
-  zero-text-field::part(label)::after {
+  rapid-text-field::part(label)::after {
     content: '*';
   }
 `;
 const select = css `
-  zero-select,
-  zero-multiselect::part(root) {
+  rapid-select,
+  rapid-multiselect::part(root) {
     min-width: 0;
   }
 
-  zero-select::part(listbox) {
+  rapid-select::part(listbox) {
     max-height: 160px;
   }
 
-  zero-multiselect {
+  rapid-multiselect {
     max-height: 40px;
   }
 `;
@@ -74,7 +74,7 @@ export const DynamicRuleDialogStyles = css `
   ${top}
   ${bottom}
 
-  zero-modal::part(dialog) {
+  rapid-modal::part(dialog) {
     padding: 0;
     background: var(--neutral-layer-4);
     border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
@@ -119,10 +119,18 @@ export const DynamicRuleDialogStyles = css `
   ${textField}
   ${select}
 
-  zero-button {
+  rapid-button {
     margin: 0;
   }
 
+  rapid-select {
+    min-width: 0;
+  }
+
+  rapid-select::part(listbox) {
+    max-height: 160px;
+  }
+
   .horizontal {
     flex-direction: row;
   }
@@ -134,5 +142,17 @@ export const DynamicRuleDialogStyles = css `
   .topic {
     min-width: revert-layer;
   }
+
+  ::-webkit-scrollbar {
+    width: calc((var(--base-height-multiplier) + var(--design-unit)) * 1px);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--neutral-layer-1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--neutral-fill-rest);
+  }
 `;
 // #endregion

package/dist/esm/components/foundation-notification-dashboard/styles/management.styles.js

@@ -1,4 +1,4 @@
-import { css } from '@microsoft/fast-element';
+import { css } from '@genesislcap/web-core';
 export const managementGridStyles = css `
   :host {
     height: 100%;

package/dist/esm/services/alert.service.js

@@ -1,6 +1,6 @@
 import { __awaiter, __decorate } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
-import { DI } from '@microsoft/fast-foundation';
+import { DI } from '@genesislcap/web-core';
 class AlertServiceImpl {
     getAlerts() {
         return this.connect.stream('ALL_NOTIFY_ALERT_RECORDS', (streamMessage) => {

package/dist/esm/services/inbox.service.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { Auth, Connect } from '@genesislcap/foundation-comms';
-import { DI } from '@microsoft/fast-foundation';
+import { DI } from '@genesislcap/web-core';
 import { logger } from '../utils';
 class FoundationInboxServiceImpl {
     constructor() {