@vonage/vivid 3.0.0-next.3 → 3.0.0-next.30

package/lib/enums.d.ts

@@ -1,5 +1,5 @@
 export declare enum Connotation {
-    Primary = "primary",
+    Accent = "accent",
     CTA = "cta",
     Success = "success",
     Alert = "alert",
@@ -13,19 +13,26 @@ export declare enum ConnotationDecorative {
 export declare enum Shape {
     Rounded = "rounded",
     Pill = "pill",
-    Circled = "circled"
+    Circled = "circled",
+    Sharp = "sharp"
 }
 export declare enum Appearance {
-    Text = "text",
     Filled = "filled",
     Outlined = "outlined",
-    Soft = "soft",
+    Duotone = "duotone",
+    Fieldset = "fieldset",
+    Subtle = "subtle",
     Ghost = "ghost"
 }
+export declare enum Density {
+    Condensed = "condensed",
+    Normal = "normal",
+    Extended = "extended"
+}
 export declare enum Size {
-    BaseSmall = "base-small",
-    Base = "base",
-    BaseLarge = "base-large"
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
 }
 export declare enum Position {
     Top = "TOP",

package/lib/fab/fab.d.ts

@@ -0,0 +1,13 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { Connotation, Density } from '../enums.js';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+export declare type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
+declare type FABDensity = Extract<Density, Density.Normal | Density.Extended>;
+export declare class Fab extends FoundationButton {
+    connotation?: FabConnotation;
+    density?: FABDensity;
+    label?: string;
+}
+export interface Fab extends AffixIconWithTrailing {
+}
+export {};

package/lib/fab/fab.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Fab } from './fab';
+export declare const FabTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Fab>;

package/lib/fab/index.d.ts

@@ -0,0 +1,4 @@
+import '../icon';
+import '../focus';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividFab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/focus/index.d.ts

@@ -1,2 +1,2 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const VIVIDFocus: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const vividFocus: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/header/header.d.ts

@@ -0,0 +1,5 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Header extends FoundationElement {
+    elevationShadow: boolean;
+    alternate: boolean;
+}

package/lib/header/header.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Header } from './header';
+export declare const headerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Header>;

package/lib/header/index.d.ts

@@ -0,0 +1,3 @@
+import '../elevation';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividHeader: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/icon/icon.d.ts

@@ -1,12 +1,11 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation, Size } from '../enums';
-declare type IconConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Info>;
+declare type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Info>;
+declare type IconSize = Extract<Size, Size.Small | Size.Medium | Size.Large>;
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;
-    size?: Size;
-    state: 'idle' | 'loading' | 'loaded' | 'fail';
-    svg: any;
-    placeholder: any;
+    size?: IconSize;
+    svg?: string;
     type?: string;
     typeChanged(): Promise<void>;
 }

package/lib/layout/index.d.ts

@@ -1,2 +1,2 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const VIVIDLayout: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const vividLayout: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/layout/layout.d.ts

@@ -4,9 +4,9 @@ export declare enum AUTO_SIZING {
     Fit = "fit",
     Fill = "fill"
 }
-declare type Gutters = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-declare type ColumnSpacing = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
-declare type ColumnBasis = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge> | 'block';
+declare type Gutters = Extract<Size, Size.Small | Size.Medium | Size.Large>;
+declare type ColumnSpacing = Extract<Size, Size.Small | Size.Medium | Size.Large>;
+declare type ColumnBasis = Extract<Size, Size.Small | Size.Medium | Size.Large> | 'block';
 export declare class Layout extends FoundationElement {
     gutters?: Gutters;
     columnBasis?: ColumnBasis;

package/lib/note/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividNote: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/note/note.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums';
+import { AffixIcon } from '../../shared/patterns';
+export declare type NoteConnotation = Connotation.Info | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export declare class Note extends FoundationElement {
+    heading?: string;
+    connotation?: NoteConnotation;
+}
+export interface Note extends AffixIcon {
+}

package/lib/note/note.template.d.ts

@@ -0,0 +1,5 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import '../icon/index';
+import type { Note } from './note';
+export declare const NoteTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Note>;

package/lib/popup/index.d.ts

@@ -0,0 +1,4 @@
+import '../elevation';
+import '../button';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividPopup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/popup/popup.d.ts

@@ -0,0 +1,17 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Placement } from '@floating-ui/dom';
+export declare class Popup extends FoundationElement {
+    #private;
+    popupEl: HTMLElement;
+    arrowEl: HTMLElement;
+    open: boolean;
+    dismissible: boolean;
+    arrow: boolean;
+    alternate: boolean;
+    corner?: Placement;
+    anchor: string;
+    constructor();
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    updatePosition(): Promise<void>;
+}

package/lib/popup/popup.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Popup } from './popup';
+export declare const popupTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Popup>;

package/lib/progress/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/progress/progress.d.ts

@@ -0,0 +1,9 @@
+import { BaseProgress } from '@microsoft/fast-foundation';
+import type { Connotation, ConnotationDecorative, Shape } from '../enums';
+export declare type ProgressConnotation = Connotation.Accent | Connotation.Success | Connotation.Alert | Connotation.CTA | ConnotationDecorative.Pacific;
+export declare type ProgressShape = Shape.Rounded | Shape.Sharp;
+export declare class Progress extends BaseProgress {
+    shape?: ProgressShape;
+    connotation?: ProgressConnotation;
+    reverse: boolean;
+}

package/lib/progress/progress.template.d.ts

@@ -0,0 +1,5 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { ProgressOptions } from '@microsoft/fast-foundation';
+import type { Progress } from './progress';
+export declare const ProgressTemplate: (context: ElementDefinitionContext, definition: ProgressOptions) => ViewTemplate<Progress>;

package/lib/progress-ring/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/progress-ring/progress-ring.d.ts

@@ -0,0 +1,7 @@
+import { BaseProgress } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums';
+export declare type ProgressRingConnotation = Connotation.Accent | Connotation.Success | Connotation.Alert | Connotation.CTA;
+export declare class ProgressRing extends BaseProgress {
+    connotation?: ProgressRingConnotation;
+    density?: -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3;
+}

package/lib/progress-ring/progress-ring.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { ProgressRing } from './progress-ring';
+export declare const ProgressRingTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<ProgressRing>;

package/lib/side-drawer/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividSideDrawer: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/side-drawer/side-drawer.d.ts

@@ -0,0 +1,7 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class SideDrawer extends FoundationElement {
+    alternate: boolean;
+    modal: boolean;
+    open: boolean;
+    position?: 'start' | 'end';
+}

package/lib/side-drawer/side-drawer.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { SideDrawer } from './side-drawer';
+export declare const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>>;

package/lib/sidenav/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividSidenav: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/sidenav/sidenav.d.ts

@@ -0,0 +1,3 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Sidenav extends FoundationElement {
+}

package/lib/sidenav/sidenav.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Sidenav } from './sidenav';
+export declare const SidenavTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Sidenav>;

package/lib/sidenav-item/index.d.ts

@@ -1,3 +1,4 @@
 import '../icon';
+import '../focus';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividSidenavItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/sidenav-item/sidenav-item.d.ts

@@ -1,7 +1,6 @@
-import { Anchor } from '@microsoft/fast-foundation';
-import { Prefix } from '../../shared/patterns/affix';
-export declare class SidenavItem extends Anchor {
-    text: string;
+import { AffixIcon } from '../../shared/patterns/affix';
+import { TextAnchor } from '../text-anchor/text-anchor';
+export declare class SidenavItem extends TextAnchor {
 }
-export interface SidenavItem extends Prefix {
+export interface SidenavItem extends AffixIcon {
 }

package/lib/text/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividText: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/text/text.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums.js';
+import type { VVDFontFace } from '../../../../../node_modules/@vonage/vivid-tokens/dist/types/typography/font-faces';
+declare type TextConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Announcement | Connotation.Info>;
+export declare class Text extends FoundationElement {
+    connotation?: TextConnotation;
+    fontFace?: VVDFontFace;
+    tight: boolean;
+}
+export {};

package/lib/text/text.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Text } from './text';
+export declare const TextTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Text>;

package/lib/text-anchor/text-anchor.d.ts

@@ -1,4 +1,7 @@
 import { Anchor } from '@microsoft/fast-foundation';
+import { AffixIcon } from '../../shared/patterns/affix';
 export declare class TextAnchor extends Anchor {
-    text: string;
+    text?: string;
+}
+export interface TextAnchor extends AffixIcon {
 }

package/lib/text-field/index.d.ts

@@ -0,0 +1,4 @@
+import '../icon';
+import '../focus';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividTextfield: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/text-field/text-field.d.ts

@@ -0,0 +1,23 @@
+import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
+import type { Appearance, Density, Shape } from '../enums';
+import { AffixIcon } from '../../shared/patterns';
+declare type TextFieldDensity = Extract<Density, Density.Normal | Density.Extended>;
+declare type TextFieldAppearance = Extract<Appearance, Appearance.Outlined | Appearance.Ghost>;
+declare type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export declare class TextField extends FoundationTextfield {
+    #private;
+    label?: string;
+    helperText?: string;
+    charCount: boolean;
+    density?: TextFieldDensity;
+    appearance?: TextFieldAppearance;
+    shape?: TextFieldShape;
+    userValid: boolean;
+    autoComplete?: string;
+    get errorValidationMessage(): string;
+    constructor();
+    validate: () => void;
+}
+export interface TextField extends AffixIcon {
+}
+export {};

package/lib/text-field/text-field.template.d.ts

@@ -0,0 +1,5 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import '../icon/index';
+import type { TextField } from './text-field';
+export declare const TextfieldTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<TextField>;

package/lib/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import '../popup';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/tooltip/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Placement } from '@floating-ui/dom';
+export declare class Tooltip extends FoundationElement {
+    text?: string;
+    open: boolean;
+    corner?: Placement;
+    anchor?: string;
+}

package/lib/tooltip/tooltip.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Tooltip } from './tooltip';
+export declare const TooltipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Tooltip>;

package/note/index.js

@@ -0,0 +1,68 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { b as AffixIcon } from '../shared/affix.js';
+import '../shared/focus.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../icon/index.js';
+import { C as Connotation } from '../shared/enums.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/object-keys.js';
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--_connotation-color-primary);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-40), inset -1px 0 0 0 var(--vvd-color-neutral-40), inset 0 -1px 0 0 var(--vvd-color-neutral-40);\n  color: var(--vvd-color-on-canvas);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning);\n}\n.base:not(.connotation-success, .connotation-info, .connotation-alert, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .heading {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.text .message {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}";
+styleInject(css_248z);
+
+class Note extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "heading", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "connotation", void 0);
+
+applyMixins(Note, AffixIcon);
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+const connotationIconMap = new Map([[Connotation.Info, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
+
+const getClasses = ({
+  connotation
+}) => classNames('base', `connotation-${connotation}`);
+
+function getHeaderTemplate() {
+  return html(_t || (_t = _`<div class="heading">${0}</div>`), x => x.heading);
+}
+
+function getIconType(note) {
+  return note.icon ? note.icon : note.connotation ? connotationIconMap.get(note.connotation) : 'megaphone-solid';
+}
+
+function getIconTemplate() {
+  return html(_t2 || (_t2 = _`<vwc-icon class="icon" type="${0}"></vwc-icon>`), getIconType);
+}
+
+const NoteTemplate = () => html(_t3 || (_t3 = _`
+    <div class="${0}">
+      ${0}
+			<div class="text">
+	        ${0}
+			    <slot class="message"></slot>
+			</div>
+    </div>
+`), getClasses, getIconTemplate(), when(x => x.heading, getHeaderTemplate()));
+
+const vividNote = Note.compose({
+  baseName: 'note',
+  template: NoteTemplate,
+  styles: css_248z
+});
+designSystem.register(vividNote());
+
+export { vividNote };

package/package.json

@@ -1,14 +1,44 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.3",
-  "main": "./index.umd.js",
+  "version": "3.0.0-next.30",
+  "type": "module",
   "module": "./index.esm.js",
+  "main": "./index.js",
+  "exports": {
+    "./accordion": "./accordion",
+    "./accordion-item": "./accordion-item",
+    "./action-group": "./action-group",
+    "./badge": "./badge",
+    "./banner": "./banner",
+    "./breadcrumb": "./breadcrumb",
+    "./breadcrumb-item": "./breadcrumb-item",
+    "./button": "./button",
+    "./calendar": "./calendar",
+    "./calendar-event": "./calendar-event",
+    "./card": "./card",
+    "./elevation": "./elevation",
+    "./fab": "./fab",
+    "./icon": "./icon",
+    "./layout": "./layout",
+    "./note": "./note",
+    "./popup": "./popup",
+    "./progress": "./progress",
+    "./progress-ring": "./progress-ring",
+    "./side-drawer": "./side-drawer",
+    "./sidenav": "./sidenav",
+    "./sidenav-item": "./sidenav-item",
+    "./text": "./text",
+    "./text-field": "./text-field",
+    "./tooltip": "./tooltip",
+    "./checkbox": "./checkbox"
+  },
   "typings": "./index.d.ts",
   "dependencies": {
-    "@microsoft/fast-element": "^1.7.0",
-    "@microsoft/fast-foundation": "^2.33.3",
-    "@microsoft/fast-web-utilities": "^5.1.0",
-    "ramda": "^0.27.2"
+    "@microsoft/fast-element": "^1.10.2",
+    "@microsoft/fast-foundation": "^2.46.9",
+    "@microsoft/fast-web-utilities": "^5.4.1",
+    "ramda": "^0.27.2",
+    "@floating-ui/dom": "^0.5.2"
   },
   "peerDependencies": {}
 }