@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/VwcButton/index.d.ts

@@ -14,9 +14,12 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {boolean} pending - Displays the button in pending state. **attribute** `pending`
 * @param {boolean} dropdownIndicator - Display a chevron to indicate that the button opens a dropdown. **attribute** `dropdown-indicator`
 * @param {boolean} active - Displays the button in active state. **attribute** `active`
+* @param {boolean} pressed - Indicates the button is in a pressed/toggled state.
+Sets `aria-pressed` on the button element. **attribute** `pressed`
 * @param {string | undefined} label - Indicates the button's label. **attribute** `label`
 * @param {boolean} iconTrailing - Indicates the icon affix alignment. **attribute** `icon-trailing`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
+* @param {string | undefined} icon - A decorative icon the custom element should have. See the [Vivid Icon
+Gallery](/icons/icons-gallery/) for available icons and `icon-name`s **attribute** `icon`
 * @param {string | undefined} download - Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `download`
 * @param {string | undefined} href - The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `href`
 * @param {string | undefined} hreflang - Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `hreflang`
@@ -26,7 +29,6 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {'_self' | '_blank' | '_parent' | '_top' | undefined} target - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `target`
 * @param {'submit' | 'reset' | 'button'} type - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information. **attribute** `type`
 * @param {HTMLButtonElement} control - References the root element
-* @param {'delegate'} _vividAriaBehaviour
 * @param {boolean} autofocus - Determines if the element should receive document focus on page load. **attribute** `autofocus`
 * @param {string} formId - The id of a form to associate the element to. **attribute** `form`
 * @param {string} formaction - See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details. **attribute** `formaction`
@@ -48,49 +50,49 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcButton: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onClick?: ((event: SyntheticEvent) => void) | undefined;
-        icon?: string | undefined;
-        disabled?: any;
-        type?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onClick?: (event: SyntheticEvent) => void;
+        "icon"?: string | undefined;
+        "disabled"?: any;
+        "type"?: string | undefined;
         "icon-trailing"?: any;
-        title?: string | undefined;
-        connotation?: any;
-        shape?: any;
-        appearance?: any;
-        size?: any;
-        stacked?: boolean | undefined;
-        pending?: boolean | undefined;
-        dropdownIndicator?: boolean | undefined;
-        active?: boolean | undefined;
-        label?: string | undefined;
-        iconTrailing?: boolean | undefined;
-        download?: string | undefined;
-        href?: string | undefined;
-        hreflang?: string | undefined;
-        ping?: string | undefined;
-        referrerpolicy?: string | undefined;
-        rel?: string | undefined;
-        target?: any;
-        control?: any;
-        _vividAriaBehaviour?: any;
-        autofocus?: boolean | undefined;
-        formId?: string | undefined;
-        formaction?: string | undefined;
-        formenctype?: string | undefined;
-        formmethod?: string | undefined;
-        formnovalidate?: boolean | undefined;
-        formtarget?: any;
-        value?: string | undefined;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        name?: string | undefined;
-        required?: boolean | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        "title"?: string;
+        "connotation"?: any;
+        "shape"?: any;
+        "appearance"?: any;
+        "size"?: any;
+        "stacked"?: boolean;
+        "pending"?: boolean;
+        "dropdownIndicator"?: boolean;
+        "active"?: boolean;
+        "pressed"?: boolean;
+        "label"?: string | undefined;
+        "iconTrailing"?: boolean;
+        "download"?: string | undefined;
+        "href"?: string | undefined;
+        "hreflang"?: string | undefined;
+        "ping"?: string | undefined;
+        "referrerpolicy"?: string | undefined;
+        "rel"?: string | undefined;
+        "target"?: any;
+        "control"?: any;
+        "autofocus"?: boolean;
+        "formId"?: string;
+        "formaction"?: string;
+        "formenctype"?: string;
+        "formmethod"?: string;
+        "formnovalidate"?: boolean;
+        "formtarget"?: any;
+        "value"?: string;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcButton/index.js

@@ -44,6 +44,14 @@ Code in this file were generated using following JSON:
    "name": "--vvd-button-cta-fierce-primary",
    "default": "var(--vvd-color-cta-700)"
   },
+  {
+   "name": "--vvd-button-cta-dim",
+   "default": "var(--vvd-color-cta-200)"
+  },
+  {
+   "name": "--vvd-button-cta-pale",
+   "default": "var(--vvd-color-cta-300)"
+  },
   {
    "name": "--vvd-button-success-primary",
    "default": "var(--vvd-color-success-500)"
@@ -80,6 +88,14 @@ Code in this file were generated using following JSON:
    "name": "--vvd-button-success-fierce-primary",
    "default": "var(--vvd-color-success-700)"
   },
+  {
+   "name": "--vvd-button-success-dim",
+   "default": "var(--vvd-color-success-200)"
+  },
+  {
+   "name": "--vvd-button-success-pale",
+   "default": "var(--vvd-color-success-300)"
+  },
   {
    "name": "--vvd-button-alert-primary",
    "default": "var(--vvd-color-alert-500)"
@@ -116,6 +132,14 @@ Code in this file were generated using following JSON:
    "name": "--vvd-button-alert-fierce-primary",
    "default": "var(--vvd-color-alert-700)"
   },
+  {
+   "name": "--vvd-button-alert-dim",
+   "default": "var(--vvd-color-alert-200)"
+  },
+  {
+   "name": "--vvd-button-alert-pale",
+   "default": "var(--vvd-color-alert-300)"
+  },
   {
    "name": "--vvd-button-announcement-primary",
    "default": "var(--vvd-color-announcement-500)"
@@ -152,6 +176,14 @@ Code in this file were generated using following JSON:
    "name": "--vvd-button-announcement-fierce-primary",
    "default": "var(--vvd-color-announcement-700)"
   },
+  {
+   "name": "--vvd-button-announcement-dim",
+   "default": "var(--vvd-color-announcement-200)"
+  },
+  {
+   "name": "--vvd-button-announcement-pale",
+   "default": "var(--vvd-color-announcement-300)"
+  },
   {
    "name": "--vvd-button-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
@@ -187,6 +219,14 @@ Code in this file were generated using following JSON:
   {
    "name": "--vvd-button-accent-fierce-primary",
    "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-button-accent-dim",
+   "default": "var(--vvd-color-neutral-200)"
+  },
+  {
+   "name": "--vvd-button-accent-pale",
+   "default": "var(--vvd-color-neutral-300)"
   }
  ],
  "slots": [
@@ -281,6 +321,16 @@ Code in this file were generated using following JSON:
    "description": "Displays the button in active state.",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "pressed",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the button is in a pressed/toggled state.\nSets `aria-pressed` on the button element.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "label",
@@ -310,7 +360,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -434,18 +484,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/foundation/button/button.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "autofocus",
@@ -949,6 +987,15 @@ Code in this file were generated using following JSON:
    "description": "Displays the button in active state.",
    "fieldName": "active"
   },
+  {
+   "name": "pressed",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the button is in a pressed/toggled state.\nSets `aria-pressed` on the button element.",
+   "fieldName": "pressed"
+  },
   {
    "name": "label",
    "type": {
@@ -975,7 +1022,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -1246,10 +1293,39 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "button"
+ },
+ "vividTesting": {
+  "selectors": [
+   {
+    "name": "byLabel",
+    "args": [
+     "byLabel"
+    ]
+   }
+  ],
+  "actions": [
+   {
+    "name": "click",
+    "args": [
+     "click",
+     "#control"
+    ]
+   }
+  ],
+  "queries": [],
+  "refs": [
+   {
+    "name": "control",
+    "args": [
+     "shadow",
+     "button.control"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerButton } from '@vonage/vivid'
 
 registerButton('vvd3')
@@ -1257,7 +1333,7 @@ registerButton('vvd3')
 const VwcButton = wrapper(`vvd3-button`,  {
     events: [{"name":"click","propName":"onClick"}],
     attributes: [],
-    properties: ['icon', 'disabled', 'type', 'icon-trailing', 'title', 'connotation', 'shape', 'appearance', 'size', 'stacked', 'pending', 'dropdownIndicator', 'active', 'label', 'iconTrailing', 'icon', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', '_vividAriaBehaviour', 'autofocus', 'formId', 'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+    properties: ['icon', 'disabled', 'type', 'icon-trailing', 'title', 'connotation', 'shape', 'appearance', 'size', 'stacked', 'pending', 'dropdownIndicator', 'active', 'pressed', 'label', 'iconTrailing', 'icon', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', 'autofocus', 'formId', 'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })
 
 VwcButton.displayName = 'VwcButton'

package/v3/VwcButton/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-button",
-  "version": "4.29.0",
+  "version": "5.19.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.19.0"
   }
 }

package/v3/VwcCalendar/index.d.ts

@@ -1,22 +1,11 @@
 import React, { ReactNode } from 'react';
 /** VwcCalendar
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/calendar
-* @param {Date | string | undefined} datetime - The date within a week of choice.
-Accepts any parameter acceptable by the `Date()` constructor. **attribute** `datetime`
-* @param {'sunday' | 'monday' | undefined} startDay - The day to show as the first within a work week.
-Accepts either Sunday or Monday
-Calendar will - programmatically - default to Monday if not specified
-
-(only applicable for views of more than a single day) **attribute** `start-day`
-* @param {string | string[] | undefined | undefined} locales - A locale string or array of locale strings that contain one or more language or locale tags.
-If you include more than one locale string,
-list them in descending order of priority so that the first entry is the preferred locale.
-If you omit this parameter, the default locale of the JavaScript runtime is used.
-This parameter must conform to BCP 47 standards; see the Intl.Collator object for details.
-e.g. en-US | en-US, he-IL **attribute** `locales`
-* @param {boolean} hour12 - The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.
-Unless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24) **attribute** `hour12`
-* @param {CalendarSticky} stickyMode - Sticky header and sticky column options **attribute** `sticky-mode`
+* @param {Date | string | undefined} datetime - Sets the week to display **attribute** `datetime`
+* @param {'sunday' | 'monday' | undefined} startDay - Sets the first day of the week to display **attribute** `start-day`
+* @param {string | string[] | undefined | undefined} locales - Sets the locale to be displayed **attribute** `locales`
+* @param {boolean} hour12 - Displays a time in 12 hour format **attribute** `hour12`
+* @param {CalendarSticky} stickyMode - Set the `sticky-mode` attribute **attribute** `sticky-mode`
 * @param  getEventContext - Fire an event
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
@@ -25,18 +14,18 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcCalendar: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        datetime?: any;
-        startDay?: any;
-        locales?: any;
-        hour12?: boolean | undefined;
-        stickyMode?: any;
-        getEventContext?: any;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "datetime"?: any;
+        "startDay"?: any;
+        "locales"?: any;
+        "hour12"?: boolean;
+        "stickyMode"?: any;
+        "getEventContext"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcCalendar/index.js

@@ -48,7 +48,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "Date | string | undefined"
    },
-   "description": "The date within a week of choice.\nAccepts any parameter acceptable by the `Date()` constructor.",
+   "description": "Sets the week to display",
    "privacy": "public"
   },
   {
@@ -57,7 +57,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "'sunday' | 'monday' | undefined"
    },
-   "description": "The day to show as the first within a work week.\nAccepts either Sunday or Monday\nCalendar will - programmatically - default to Monday if not specified\n\n(only applicable for views of more than a single day)",
+   "description": "Sets the first day of the week to display",
    "privacy": "public"
   },
   {
@@ -66,7 +66,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | string[] | undefined | undefined"
    },
-   "description": "A locale string or array of locale strings that contain one or more language or locale tags.\nIf you include more than one locale string,\nlist them in descending order of priority so that the first entry is the preferred locale.\nIf you omit this parameter, the default locale of the JavaScript runtime is used.\nThis parameter must conform to BCP 47 standards; see the Intl.Collator object for details.\ne.g. en-US | en-US, he-IL",
+   "description": "Sets the locale to be displayed",
    "privacy": "public"
   },
   {
@@ -76,7 +76,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.\nUnless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24)",
+   "description": "Displays a time in 12 hour format",
    "privacy": "public"
   },
   {
@@ -85,7 +85,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "CalendarSticky"
    },
-   "description": "Sticky header and sticky column options",
+   "description": "Set the `sticky-mode` attribute",
    "privacy": "public"
   },
   {
@@ -153,18 +153,6 @@ Code in this file were generated using following JSON:
     }
    ]
   },
-  {
-   "kind": "method",
-   "name": "onKeydown",
-   "parameters": [
-    {
-     "name": "{ key }",
-     "type": {
-      "text": "KeyboardEvent"
-     }
-    }
-   ]
-  },
   {
    "kind": "method",
    "name": "initializeScrollPosition",
@@ -204,7 +192,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "Date | string | undefined"
    },
-   "description": "The date within a week of choice.\nAccepts any parameter acceptable by the `Date()` constructor.",
+   "description": "Sets the week to display",
    "fieldName": "datetime"
   },
   {
@@ -212,7 +200,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "'sunday' | 'monday' | undefined"
    },
-   "description": "The day to show as the first within a work week.\nAccepts either Sunday or Monday\nCalendar will - programmatically - default to Monday if not specified\n\n(only applicable for views of more than a single day)",
+   "description": "Sets the first day of the week to display",
    "fieldName": "startDay"
   },
   {
@@ -220,7 +208,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | string[] | undefined | undefined"
    },
-   "description": "A locale string or array of locale strings that contain one or more language or locale tags.\nIf you include more than one locale string,\nlist them in descending order of priority so that the first entry is the preferred locale.\nIf you omit this parameter, the default locale of the JavaScript runtime is used.\nThis parameter must conform to BCP 47 standards; see the Intl.Collator object for details.\ne.g. en-US | en-US, he-IL",
+   "description": "Sets the locale to be displayed",
    "fieldName": "locales"
   },
   {
@@ -229,7 +217,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.\nUnless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24)",
+   "description": "Displays a time in 12 hour format",
    "fieldName": "hour12"
   },
   {
@@ -237,7 +225,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "CalendarSticky"
    },
-   "description": "Sticky header and sticky column options",
+   "description": "Set the `sticky-mode` attribute",
    "fieldName": "stickyMode"
   }
  ],
@@ -251,7 +239,7 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerCalendar } from '@vonage/vivid'
 
 registerCalendar('vvd3')

package/v3/VwcCalendar/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-calendar",
-  "version": "4.29.0",
+  "version": "5.19.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.19.0"
   }
 }

package/v3/VwcCalendarEvent/index.d.ts

@@ -1,14 +1,13 @@
 import React, { ReactNode } from 'react';
 /** VwcCalendarEvent
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/calendar-event
-* @param {string | undefined} heading - the heading of the event **attribute** `heading`
-* @param {string | undefined} description - the description of the event **attribute** `description`
-* @param {CalendarEventConnotation | undefined} connotation - The connotation the calendar event should have. **attribute** `connotation`
-* @param {CalendarEventAppearance | undefined} appearance - The appearance the calendar event should have. **attribute** `appearance`
-* @param {number | undefined} overlapCount - sets card display precendence and indentation **attribute** `overlap-count`
-* @param {number | undefined} start - time of day event starts **attribute** `start`
-* @param {number | undefined} duration - event's time duration in hours **attribute** `duration`
-* @param {'delegate'} _vividAriaBehaviour
+* @param {string | undefined} heading - Sets the event heading **attribute** `heading`
+* @param {string | undefined} description - Sets the event description **attribute** `description`
+* @param {CalendarEventConnotation | undefined} connotation - Sets the first day of the week to display **attribute** `connotation`
+* @param {CalendarEventAppearance | undefined} appearance - Sets the event's appearance **attribute** `appearance`
+* @param {number | undefined} overlapCount - Sets the stacking context of the event when it overlaps with another **attribute** `overlap-count`
+* @param {number | undefined} start - Sets the event start time (e.g. `14` = 2pm) **attribute** `start`
+* @param {number | undefined} duration - Sets the event duration (e.g. `2` = 2 hours) **attribute** `duration`
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 * @param {string} componentName - Core component name, without prefix
@@ -16,20 +15,19 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcCalendarEvent: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        heading?: string | undefined;
-        description?: string | undefined;
-        connotation?: any;
-        appearance?: any;
-        overlapCount?: any;
-        start?: any;
-        duration?: any;
-        _vividAriaBehaviour?: any;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "heading"?: string | undefined;
+        "description"?: string | undefined;
+        "connotation"?: any;
+        "appearance"?: any;
+        "overlapCount"?: any;
+        "start"?: any;
+        "duration"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };