@vonage/vivid-react 2.10.56 → 2.10.59

package/VwcTopAppBarFixed/index.js

@@ -0,0 +1,88 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-top-app-bar-fixed",
+ "path": "./../node_modules/@vonage/vwc-top-app-bar-fixed/src/vwc-top-app-bar-fixed.ts",
+ "description": "This component is an extension of [<mwc-top-app-bar-fixed>](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed)",
+ "attributes": [
+  {
+   "name": "alternate",
+   "type": "boolean",
+   "default": "false"
+  }
+ ],
+ "properties": [
+  {
+   "name": "alternate",
+   "attribute": "alternate",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  },
+  {
+   "name": "styles",
+   "type": "CSSResult[]",
+   "default": "[\"MWCTopAppBarStyles\",\"VWCTopAppBarStyle\"]"
+  },
+  {
+   "name": "prominent",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "dense",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "centerTitle",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "scrollTarget",
+   "type": "HTMLElement | Window",
+   "bindable": false
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-top-app-bar-fixed'
+
+
+/** This component is an extension of [<mwc-top-app-bar-fixed>](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar-fixed) 
+* @param {boolean} alternate  attribute: &lt;VwcTopAppBarFixed alternate />
+* @param {boolean} prominent  
+* @param {boolean} dense  
+* @param {boolean} centerTitle  
+* @param {HTMLElement | Window} scrollTarget  
+*/
+const VwcTopAppBarFixed = wrapper('vwc-top-app-bar-fixed',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcTopAppBarFixed.propTypes = {
+  alternate: PropTypes.bool/* default: false *//* attribute: alternate */,
+  prominent: PropTypes.bool,
+  dense: PropTypes.bool,
+  centerTitle: PropTypes.bool,
+  scrollTarget: PropTypes.any /* HTMLElement | Window */
+}
+
+VwcTopAppBarFixed.defaultProps = {
+  alternate: false
+}
+
+VwcTopAppBarFixed.displayName = 'VwcTopAppBarFixed'
+
+
+
+export default VwcTopAppBarFixed

package/VwcTopAppBarFixed/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-top-app-bar-fixed",
+  "version": "2.10.59",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-top-app-bar-fixed": "2.42.0"
+  }
+}

package/index.js

@@ -0,0 +1,319 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var context = require('@vonage/vvd-context');
+var vvdFonts = require('@vonage/vvd-fonts');
+var m = require('react-dom');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var context__default = /*#__PURE__*/_interopDefaultLegacy(context);
+var m__default = /*#__PURE__*/_interopDefaultLegacy(m);
+
+var coreStyles = {
+  id: 'core.all',
+  css: "/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root p {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root b, .vvd-root strong {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1, .vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2, .vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3, .vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4, .vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root small, .vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root sub,\n.vvd-root sup {\n  font: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n\n\n"
+};
+
+var darkThemeStyles = {
+  id: 'theme.dark',
+  css: "/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-monospace, Roboto Mono);\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-upright, Montserrat);\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n}\n\n\n"
+};
+
+var lightThemeStyles = {
+  id: 'theme.light',
+  css: "/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 19 Jun 2023 09:39:55 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-monospace, Roboto Mono);\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-upright, Montserrat);\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-upright, Montserrat);\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n}\n\n\n"
+};
+
+var fontSpeziaStyles = {
+  id: 'font.spezia',
+  css: "@font-face {\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 SpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 SpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 SpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;\n}\n\n\n"
+};
+
+var vividVersion = {
+  v2: '2.42.0',
+  v3: "3.18.0"
+};
+
+/* global HTMLElement */
+var vividDataAttributePrefix = 'data-vivid';
+var appendStyleElement = function appendStyleElement() {
+  var document = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window.document;
+  return function (styleDescriptor) {
+    var attributeName = "".concat(vividDataAttributePrefix, "-id");
+    if (document.querySelectorAll("[".concat(attributeName, "=\"").concat(styleDescriptor.id, "\"]")).length > 0) {
+      return;
+    }
+    var styleElement = document.createElement('style');
+    styleElement.setAttribute('type', 'text/css');
+    styleElement.setAttribute(attributeName, styleDescriptor.id);
+    styleElement.innerHTML = styleDescriptor.css;
+    document.head.append(styleElement);
+  };
+};
+
+/**
+ * mounts Vivid context (styles) & Fonts into the target scope / document
+ * - target scope may by any `HTMLElement` or `Document` or `DocumentFragment` (including `ShadowRoot`)
+ * - default target (when not specified) is the document visible in the current scope
+ * - the API is idempotent, the style/s will be mounted only once, even if API called multiple times
+ *
+ * @param {Document | DocumentFragment | HTMLElement} target - target document/shadow root/element to mount the CSS into
+ * @param {Function} callback - callback function to be invoked once init is done
+ * @param {Object} options - options config how to init vivid. `theme` - dark | light, `font` - proprietary | oss
+ *
+ * @throws {Error} error - if the provided target argument is `null` or not a Node of type `Document` / `DocumentFragment` / `HTMLElement`
+ */
+var initVivid = function initVivid(target, callback, options) {
+  if (target instanceof HTMLElement) {
+    target.classList.add('vivid-scope'); // vivid 2.x
+    target.setAttribute("".concat(vividDataAttributePrefix, "-v2"), vividVersion.v2);
+    target.classList.add('vvd-root'); // vivid 3.x
+    target.setAttribute("".concat(vividDataAttributePrefix, "-v3"), vividVersion.v3);
+    target = undefined;
+  }
+  var appendStyle = appendStyleElement();
+  appendStyle(coreStyles);
+  appendStyle(options.theme === 'light' ? lightThemeStyles : darkThemeStyles);
+  if (options.font === 'proprietary') {
+    appendStyle(fontSpeziaStyles);
+  }
+  return Promise.all([vvdFonts.init(), context__default["default"].mount(target)]).then(callback);
+};
+
+var createVaadinGridStylePatchElement = function createVaadinGridStylePatchElement() {
+  var styleElement = document.createElement('style');
+  styleElement.innerHTML = "\n      #header {\n        z-index: 0;\n      }\n      [part~='cell'] ::slotted(vaadin-grid-cell-content) {\n        overflow: visible;\n      }";
+  return styleElement;
+};
+
+/**
+ * Patches `VwcDataGrid` (styles) to allow cell overflow to show
+ * - `VwcSlider` tooltips off the cell boundaries uncropped by the grid
+ *
+ * @param {HTMLElement} gridElement - target datagrid element to mount the CSS into
+ * @example <VwcDataGrid ref={vwcDataGridElementCellOverflowDecorator} />
+ */
+var vwcDataGridElementCellOverflowDecorator = function vwcDataGridElementCellOverflowDecorator(gridElement) {
+  return setTimeout(function () {
+    var _gridElement$shadowRo;
+    var component = gridElement === null || gridElement === void 0 ? void 0 : (_gridElement$shadowRo = gridElement.shadowRoot.querySelector('vaadin-grid')) === null || _gridElement$shadowRo === void 0 ? void 0 : _gridElement$shadowRo.shadowRoot;
+    component && component.append(createVaadinGridStylePatchElement());
+  }, 0);
+};
+
+/**
+ * Patches provided HTMLElement (styles) to crop long text and
+ * shows browser tooltip when actually cropped
+ *
+ * @param {HTMLElement} element - target element to apply the text cropping logic to
+ * @example <span ref={vwcTooltipEllipsisDecorator(text)} >{text}</span>
+ */
+var vwcTooltipEllipsisDecorator = function vwcTooltipEllipsisDecorator(fullText) {
+  return function (element) {
+    return setTimeout(function () {
+      var isTextCropped = (element === null || element === void 0 ? void 0 : element.clientHeight) < (element === null || element === void 0 ? void 0 : element.scrollHeight);
+      if (isTextCropped && element) {
+        element.setAttribute('title', fullText);
+      }
+    }, 0);
+  };
+};
+
+/**
+* Patches provided VwcTooltip instance to open/close tooltip on mouse hover
+*
+* @param {HTMLElement} tooltipElement - target element to apply behavior to
+* @param {number} timeout - timeout before showing tooltip, default: 1000
+* @param {string} minWidth - min width in pixels, default: 'none'
+* @example <VwcTooltip ref={vwcTooltipShowOnHoverDecorator()} />
+*/
+var vwcTooltipShowOnHoverDecorator = function vwcTooltipShowOnHoverDecorator() {
+  var minWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'none';
+  var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+  return function (tooltipElement) {
+    return setTimeout(function () {
+      if (!tooltipElement) {
+        return;
+      }
+      var anchorElement = document.getElementById(tooltipElement.anchor);
+      if (!anchorElement) {
+        return;
+      }
+      anchorElement.style.setProperty('pointer-events', 'auto');
+      tooltipElement.style.setProperty('--tooltip-inline-size', minWidth);
+      var showTimeoutHandler;
+      anchorElement.addEventListener("mouseover", function () {
+        showTimeoutHandler = setTimeout(function () {
+          tooltipElement.open = true;
+        }, timeout);
+      });
+      anchorElement.addEventListener("mouseout", function () {
+        clearTimeout(showTimeoutHandler);
+        tooltipElement.open = false;
+      });
+    }, 0);
+  };
+};
+
+/**
+ * Patches provided `VwcCard` (styles) to allow a sub menu triggered from an
+ * action in the card to appear over the card and not inside of it
+ *
+ * @param {HTMLElement} element - target `VwcCard` element containing the action
+ * that triggers the menu
+ * @example <VwcCard ref={vwcCardWithMenu}><VwcMenu slot='actions' /></VwcCard>
+ */
+var vwcCardWithMenu = function vwcCardWithMenu(element) {
+  return setTimeout(function () {
+    var card = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.vwc-card');
+    if (card) {
+      card.style.overflow = 'unset';
+    }
+  }, 0);
+};
+
+/**
+ * Patches provided `VwcCard` (styles) to crop long heading text and
+ * shows browser tooltip when actually cropped
+ *
+ * @param {HTMLElement} element - target `VwcCard` element to apply the `heading` cropping logic to
+ * @example <VwcCard ref={vwcCardHeadingCropDecorator(text)} heading={text} />
+ */
+var vwcCardHeadingCropDecorator = function vwcCardHeadingCropDecorator(text) {
+  return function (element) {
+    return setTimeout(function () {
+      var cardContentElement = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.vwc-card-content');
+      var titleElement = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.vwc-card-title');
+      vwcTooltipEllipsisDecorator(text)(titleElement);
+      if ((cardContentElement === null || cardContentElement === void 0 ? void 0 : cardContentElement.clientWidth) < (titleElement === null || titleElement === void 0 ? void 0 : titleElement.clientWidth)) {
+        var computedCardContentStyle = window.getComputedStyle(cardContentElement, null);
+        titleElement.setAttribute('title', text);
+        titleElement.style.width = computedCardContentStyle.getPropertyValue('width');
+        titleElement.style.overflow = 'hidden';
+        titleElement.style.display = 'block';
+        titleElement.style['white-space'] = 'nowrap';
+        titleElement.style['text-overflow'] = 'ellipsis';
+      }
+    }, 0);
+  };
+};
+
+var createStyleElement = function createStyleElement() {
+  var styleElement = document.createElement('style');
+  styleElement.innerHTML = "\n      .vwc-note {\n        contain: inherit !important;\n      }";
+  return styleElement;
+};
+
+/**
+ * Patches `VwcNote` (styles) to allow content overflow
+ *
+ * @param {HTMLElement} noteElement - target element to mount the CSS into
+ * @example <VwcNote ref={vwcNoteContentOverflowDecorator} />
+ */
+var vwcNoteContentOverflowDecorator = function vwcNoteContentOverflowDecorator(noteElement) {
+  return setTimeout(function () {
+    var component = noteElement === null || noteElement === void 0 ? void 0 : noteElement.shadowRoot;
+    component && component.append(createStyleElement());
+  }, 0);
+};
+
+var createHtmlMessageElement = function createHtmlMessageElement(html) {
+  var element = document.createElement('div');
+  element.setAttribute('class', 'mdc-snackbar__label');
+  element.setAttribute('role', 'status');
+  element.setAttribute('aria-live', 'polite');
+  element.innerHTML = html;
+  return element;
+};
+
+/**
+ * Patches `VwcSnackbar` to allow html message text
+ *
+ * @param {HTMLElement} element - target element to patch
+ * @example <VwcSnackbar ref={vwcSnackBarHtmlMessageDecorator('<b>bold</b>')} />
+ */
+var vwcSnackBarHtmlMessageDecorator = function vwcSnackBarHtmlMessageDecorator() {
+  var htmlMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '<b>bold</b>';
+  return function (element) {
+    return setTimeout(function () {
+      var component = element === null || element === void 0 ? void 0 : element.shadowRoot.querySelector('.header-and-label');
+      component === null || component === void 0 ? void 0 : component.style.setProperty('width', '100%');
+      component === null || component === void 0 ? void 0 : component.append(createHtmlMessageElement(htmlMessage));
+    }, 0);
+  };
+};
+
+/**
+ * Patches attribute value. You can pass now a `value` to the `VwcIconButton` as
+ * in normal buttons
+ *
+ * @param {any} attribute
+ * @param {any} value
+ * @param {HTMLElement} element
+ * @returns
+ */
+var vwcSetAttributeValue = function vwcSetAttributeValue(attribute, value) {
+  return function (element) {
+    element === null || element === void 0 ? void 0 : element.setAttribute(attribute, value);
+  };
+};
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+var client = createCommonjsModule(function (module, exports) {
+
+
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = m__default["default"].createRoot;
+  exports.hydrateRoot = m__default["default"].hydrateRoot;
+} else {
+  var i = m__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m__default["default"].createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m__default["default"].hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+});
+
+/* global HTMLElement */
+
+/**
+ * Renders the cell contents using React 18.x api
+ *
+ * @param {ReactNode} children - renderer contents
+ * @param {Container & { rootRenderer?: Root }} container - HTMLElement root container
+ */
+var cellRendererFactory = function cellRendererFactory(children, container) {
+  var _container$rootRender;
+  var root = (_container$rootRender = container === null || container === void 0 ? void 0 : container.rootRenderer) !== null && _container$rootRender !== void 0 ? _container$rootRender : client.createRoot(container);
+  root.render(children);
+  container.rootRenderer = root;
+};
+
+exports.cellRendererFactory = cellRendererFactory;
+exports.initVivid = initVivid;
+exports.vwcCardHeadingCropDecorator = vwcCardHeadingCropDecorator;
+exports.vwcCardWithMenu = vwcCardWithMenu;
+exports.vwcDataGridElementCellOverflowDecorator = vwcDataGridElementCellOverflowDecorator;
+exports.vwcNoteContentOverflowDecorator = vwcNoteContentOverflowDecorator;
+exports.vwcSetAttributeValue = vwcSetAttributeValue;
+exports.vwcSnackBarHtmlMessageDecorator = vwcSnackBarHtmlMessageDecorator;
+exports.vwcTooltipEllipsisDecorator = vwcTooltipEllipsisDecorator;
+exports.vwcTooltipShowOnHoverDecorator = vwcTooltipShowOnHoverDecorator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid-react",
-  "version": "2.10.56",
+  "version": "2.10.59",
   "description": "Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -27,6 +27,7 @@
     "CLI"
   ],
   "dependencies": {
+    "@vonage/vivid": "3.18.0",
     "@vonage/vivid-react-wrapper": "1.2.9",
     "@vonage/vvd-context": "2.42.0",
     "@vonage/vvd-core": "2.42.0",
@@ -92,21 +93,19 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.13.17",
     "@material-ui/core": "^4.11.1",
-    "@octokit/core": "^3.1.2",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
-    "@storybook/addon-actions": "6.5.13",
-    "@storybook/addon-controls": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-links": "6.5.13",
-    "@storybook/addons": "6.5.13",
-    "@storybook/react": "6.5.13",
+    "@storybook/addon-actions": "6.5.14",
+    "@storybook/addon-controls": "6.5.14",
+    "@storybook/addon-essentials": "6.5.14",
+    "@storybook/addon-links": "6.5.14",
+    "@storybook/addons": "6.5.14",
+    "@storybook/react": "6.5.14",
     "@types/react": "16.9.49",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "babel-jest": "^26.6.1",
     "babel-loader": "^8.2.2",
-    "extract-zip": "2.0.1",
     "fs-extra": "^9.0.1",
     "jest": "^26.6.1",
     "lodash": "^4.17.20",
@@ -132,7 +131,7 @@
     "react-dom": ">=16.8"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=14.0.0 <=18.16.0"
   },
   "optionalDependencies": {
     "prop-types": "^15.7.2"