@vonage/vivid-react 4.0.0 → 5.20.0

package/v3/VwcSimpleColorPicker/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcSimpleColorPicker
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/simple-color-picker
-* @param {Placement | undefined} placement - Placement of the popup with color swatches **attribute** `placement`
+* @param {Placement | undefined} placement - Preferred placement of the Color Picker's popup in relation to the anchor element **attribute** `placement`
 * @param {number} swatchesPerRow - Number of swatches per row for grid layout **attribute** `swatches-per-row`
 * @param {AnchorType | undefined} anchor - ID or direct reference to the component's anchor element. **attribute** `anchor`
 * @param {boolean} open - Indicates whether the popup is open **attribute** `open`
@@ -23,25 +23,26 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcSimpleColorPicker: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
-        placement?: any;
-        swatchesPerRow?: number | undefined;
-        anchor?: any;
-        open?: boolean | undefined;
-        swatches?: any[] | undefined;
-        label?: string | undefined;
-        value?: string | undefined;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-        required?: boolean | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onChange?: (event: SyntheticEvent) => void;
+        onInput?: (event: SyntheticEvent) => void;
+        "placement"?: any;
+        "swatchesPerRow"?: number;
+        "anchor"?: any;
+        "open"?: boolean;
+        "swatches"?: any[];
+        "label"?: string | undefined;
+        "value"?: string;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSimpleColorPicker/index.js

@@ -21,7 +21,7 @@ Code in this file were generated using following JSON:
     "text": "Placement | undefined"
    },
    "default": "'top-start'",
-   "description": "Placement of the popup with color swatches",
+   "description": "Preferred placement of the Color Picker's popup in relation to the anchor element",
    "privacy": "public"
   },
   {
@@ -333,6 +333,13 @@ Code in this file were generated using following JSON:
    },
    "description": "Fires when the value changes",
    "name": "change"
+  },
+  {
+   "type": {
+    "text": "Event"
+   },
+   "description": "Fires when the value of the element changes.",
+   "name": "input"
   }
  ],
  "attributes": [
@@ -342,7 +349,7 @@ Code in this file were generated using following JSON:
     "text": "Placement | undefined"
    },
    "default": "'top-start'",
-   "description": "Placement of the popup with color swatches",
+   "description": "Preferred placement of the Color Picker's popup in relation to the anchor element",
    "fieldName": "placement"
   },
   {
@@ -476,7 +483,8 @@ Code in this file were generated using following JSON:
     "name": "modelValue",
     "propName": "value",
     "eventNames": [
-     "input"
+     "input",
+     "@lazy:change"
     ],
     "valueMapping": "event.currentTarget.value"
    }
@@ -484,13 +492,13 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerSimpleColorPicker } from '@vonage/vivid'
 
 registerSimpleColorPicker('vvd3')
 
 const VwcSimpleColorPicker = wrapper(`vvd3-simple-color-picker`,  {
-    events: [{"name":"change","propName":"onChange"}],
+    events: [{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
     attributes: [],
     properties: ['placement', 'swatchesPerRow', 'anchor', 'open', 'swatches', 'label', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })

package/v3/VwcSimpleColorPicker/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-simple-color-picker",
-  "version": "5.5.0",
+  "version": "5.20.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "5.5.0"
+    "@vonage/vivid": "5.20.0"
   }
 }

package/v3/VwcSlider/index.d.ts

@@ -19,9 +19,8 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {Orientation} orientation - The orientation of the slider. **attribute** `orientation`
 * @param {SliderMode} mode - The selection mode. **attribute** `mode`
 * @param {boolean} markers - Display markers on/off **attribute** `markers`
-* @param {boolean} pin - Show current value on the thumb. **attribute** `pin`
-* @param {SliderConnotation | undefined} connotation - slider connotation **attribute** `connotation`
-* @param {'delegate'} _vividAriaBehaviour
+* @param {boolean} pin - Show current values on the thumbs. **attribute** `pin`
+* @param {SliderConnotation | undefined} connotation - The connotation of the component **attribute** `connotation`
 * @param {string} value - The current value of the element. **attribute** `current-value`
 * @param  currentValue
 * @param {string} initialValue - The default value of the element. This value sets the `value` property
@@ -36,31 +35,31 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcSlider: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        step?: number | undefined;
-        orientation?: string | undefined;
-        markers?: boolean | undefined;
-        connotation?: string | undefined;
-        pin?: boolean | undefined;
-        disabled?: boolean | undefined;
-        value?: string | undefined;
-        readOnly?: boolean | undefined;
-        valueAsNumber?: number | undefined;
-        valueTextFormatter?: any;
-        mode?: any;
-        _vividAriaBehaviour?: any;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        name?: string | undefined;
-        required?: boolean | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onChange?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "min"?: number;
+        "max"?: number;
+        "step"?: number;
+        "orientation"?: string;
+        "markers"?: boolean;
+        "connotation"?: string;
+        "pin"?: boolean;
+        "disabled"?: boolean;
+        "value"?: string;
+        "readOnly"?: boolean;
+        "valueAsNumber"?: number;
+        "valueTextFormatter"?: any;
+        "mode"?: any;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSlider/index.js

@@ -271,7 +271,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Show current value on the thumb.",
+   "description": "Show current values on the thumbs.",
    "privacy": "public"
   },
   {
@@ -280,7 +280,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SliderConnotation | undefined"
    },
-   "description": "slider connotation",
+   "description": "The connotation of the component",
    "privacy": "public"
   },
   {
@@ -302,25 +302,18 @@ Code in this file were generated using following JSON:
   },
   {
    "kind": "field",
-   "name": "#onMouseOver",
+   "name": "#onVisibilityChange",
    "privacy": "private"
   },
   {
    "kind": "field",
-   "name": "#onMouseOut",
+   "name": "#onMouseOver",
    "privacy": "private"
   },
   {
    "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
+   "name": "#onMouseOut",
+   "privacy": "private"
   },
   {
    "kind": "field",
@@ -589,7 +582,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Show current value on the thumb.",
+   "description": "Show current values on the thumbs.",
    "fieldName": "pin"
   },
   {
@@ -597,7 +590,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SliderConnotation | undefined"
    },
-   "description": "slider connotation",
+   "description": "The connotation of the component",
    "fieldName": "connotation"
   },
   {
@@ -749,7 +742,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 { registerSlider } from '@vonage/vivid'
 
 registerSlider('vvd3')
@@ -757,7 +750,7 @@ registerSlider('vvd3')
 const VwcSlider = wrapper(`vvd3-slider`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['min', 'max', 'step', 'orientation', 'markers', 'connotation', 'pin', 'disabled', 'value', 'readOnly', 'valueAsNumber', 'valueTextFormatter', 'min', 'max', 'step', 'orientation', 'mode', 'markers', 'pin', 'connotation', '_vividAriaBehaviour', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+    properties: ['min', 'max', 'step', 'orientation', 'markers', 'connotation', 'pin', 'disabled', 'value', 'readOnly', 'valueAsNumber', 'valueTextFormatter', 'min', 'max', 'step', 'orientation', 'mode', 'markers', 'pin', 'connotation', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSlider.displayName = 'VwcSlider'

package/v3/VwcSlider/package.json

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

package/v3/VwcSplitButton/index.d.ts

@@ -3,19 +3,17 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/split-button
 * @param {HTMLButtonElement} _action - Action HTML button element
 * @param {HTMLButtonElement} _indicator - Indicator HTML button element
-* @param {SplitButtonConnotation | undefined} connotation - The connotation the split button should have. **attribute** `connotation`
-* @param {SplitButtonShape | undefined} shape - The shape the split button should have. **attribute** `shape`
-* @param {SplitButtonAppearance | undefined} appearance - The appearance the split button should have. **attribute** `appearance`
-* @param {SplitButtonSize | undefined} size - The size the split button should have. **attribute** `size`
+* @param {SplitButtonConnotation | undefined} connotation - Sets the connotation **attribute** `connotation`
+* @param {SplitButtonShape | undefined} shape - Sets the shape **attribute** `shape`
+* @param {SplitButtonAppearance | undefined} appearance - Sets the appearance **attribute** `appearance`
+* @param {SplitButtonSize | undefined} size - Sets the size **attribute** `size`
 * @param {string | undefined} label - Indicates the split button's label. **attribute** `label`
-* @param {string} splitIndicator - Indicates the split button's icon indicator. **attribute** `split-indicator`
-* @param {boolean} disabled - Indicates if the button is disabled. **attribute** `disabled`
+* @param {string} splitIndicator - Icon for the secondary action **attribute** `split-indicator`
+* @param {boolean} disabled - Sets the disabled state **attribute** `disabled`
 * @param {| string
-        | null} indicatorAriaLabel - Defines a string value that labels the indicator element.
-
-https://www.w3.org/TR/wai-aria-1.1/#aria-label **attribute** `indicator-aria-label`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
-* @param {'delegate'} _vividAriaBehaviour
+        | null} indicatorAriaLabel - Accessible label for the secondary action **attribute** `indicator-aria-label`
+* @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} 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
@@ -23,27 +21,26 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcSplitButton: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onActionClick?: ((event: SyntheticEvent) => void) | undefined;
-        onIndicatorClick?: ((event: SyntheticEvent) => void) | undefined;
-        onClick?: ((event: SyntheticEvent) => void) | undefined;
-        _action?: any;
-        _indicator?: any;
-        connotation?: any;
-        shape?: any;
-        appearance?: any;
-        size?: any;
-        label?: string | undefined;
-        splitIndicator?: string | undefined;
-        disabled?: boolean | undefined;
-        indicatorAriaLabel?: any;
-        icon?: string | undefined;
-        _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;
+        onActionClick?: (event: SyntheticEvent) => void;
+        onIndicatorClick?: (event: SyntheticEvent) => void;
+        onClick?: (event: SyntheticEvent) => void;
+        "_action"?: any;
+        "_indicator"?: any;
+        "connotation"?: any;
+        "shape"?: any;
+        "appearance"?: any;
+        "size"?: any;
+        "label"?: string | undefined;
+        "splitIndicator"?: string;
+        "disabled"?: boolean;
+        "indicatorAriaLabel"?: string | null;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSplitButton/index.js

@@ -240,7 +240,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonConnotation | undefined"
    },
-   "description": "The connotation the split button should have.",
+   "description": "Sets the connotation",
    "privacy": "public"
   },
   {
@@ -249,7 +249,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonShape | undefined"
    },
-   "description": "The shape the split button should have.",
+   "description": "Sets the shape",
    "privacy": "public"
   },
   {
@@ -258,7 +258,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonAppearance | undefined"
    },
-   "description": "The appearance the split button should have.",
+   "description": "Sets the appearance",
    "privacy": "public"
   },
   {
@@ -267,7 +267,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonSize | undefined"
    },
-   "description": "The size the split button should have.",
+   "description": "Sets the size",
    "privacy": "public"
   },
   {
@@ -286,7 +286,7 @@ Code in this file were generated using following JSON:
     "text": "string"
    },
    "default": "'chevron-down-line'",
-   "description": "Indicates the split button's icon indicator.",
+   "description": "Icon for the secondary action",
    "privacy": "public"
   },
   {
@@ -296,7 +296,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Indicates if the button is disabled.",
+   "description": "Sets the disabled state",
    "privacy": "public"
   },
   {
@@ -306,60 +306,22 @@ Code in this file were generated using following JSON:
     "text": "| string\n\t\t| null"
    },
    "default": "null",
-   "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
+   "description": "Accessible label for the secondary action",
    "privacy": "public"
   },
-  {
-   "kind": "method",
-   "name": "handleActionClick",
-   "parameters": [
-    {
-     "name": "event",
-     "type": {
-      "text": "Event"
-     }
-    }
-   ],
-   "description": "Handles action click events.\nPrevents interaction when disabled or pending."
-  },
-  {
-   "kind": "method",
-   "name": "handleIndicatorClick",
-   "parameters": [
-    {
-     "name": "event",
-     "type": {
-      "text": "Event"
-     }
-    }
-   ],
-   "description": "Handles indicator click events.\nPrevents interaction when disabled or pending."
-  },
   {
    "kind": "field",
    "name": "icon",
    "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",
     "module": "src/shared/patterns/affix.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "VIVID_VERSION",
@@ -410,7 +372,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonConnotation | undefined"
    },
-   "description": "The connotation the split button should have.",
+   "description": "Sets the connotation",
    "fieldName": "connotation"
   },
   {
@@ -418,7 +380,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonShape | undefined"
    },
-   "description": "The shape the split button should have.",
+   "description": "Sets the shape",
    "fieldName": "shape"
   },
   {
@@ -426,7 +388,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonAppearance | undefined"
    },
-   "description": "The appearance the split button should have.",
+   "description": "Sets the appearance",
    "fieldName": "appearance"
   },
   {
@@ -434,7 +396,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SplitButtonSize | undefined"
    },
-   "description": "The size the split button should have.",
+   "description": "Sets the size",
    "fieldName": "size"
   },
   {
@@ -451,7 +413,7 @@ Code in this file were generated using following JSON:
     "text": "string"
    },
    "default": "'chevron-down-line'",
-   "description": "Indicates the split button's icon indicator.",
+   "description": "Icon for the secondary action",
    "fieldName": "splitIndicator"
   },
   {
@@ -460,7 +422,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Indicates if the button is disabled.",
+   "description": "Sets the disabled state",
    "fieldName": "disabled"
   },
   {
@@ -469,7 +431,7 @@ Code in this file were generated using following JSON:
     "text": "| string\n\t\t| null"
    },
    "default": "null",
-   "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
+   "description": "Accessible label for the secondary action",
    "fieldName": "indicatorAriaLabel"
   },
   {
@@ -477,7 +439,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",
@@ -552,7 +514,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 { registerSplitButton } from '@vonage/vivid'
 
 registerSplitButton('vvd3')
@@ -560,7 +522,7 @@ registerSplitButton('vvd3')
 const VwcSplitButton = wrapper(`vvd3-split-button`,  {
     events: [{"name":"click","propName":"onClick"},{"name":"indicator-click","propName":"onIndicatorClick"},{"name":"action-click","propName":"onActionClick"}],
     attributes: [],
-    properties: ['_action', '_indicator', 'connotation', 'shape', 'appearance', 'size', 'label', 'splitIndicator', 'disabled', 'indicatorAriaLabel', 'icon', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['_action', '_indicator', 'connotation', 'shape', 'appearance', 'size', 'label', 'splitIndicator', 'disabled', 'indicatorAriaLabel', 'icon', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSplitButton.displayName = 'VwcSplitButton'

package/v3/VwcSplitButton/package.json

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

package/v3/VwcStatus/index.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+/** VwcStatus
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/status
+* @param {string | undefined} status - The status title (e.g. "Positive", "Info", "Warning", "Alert"). **attribute** `status`
+* @param {StatusConnotation | undefined} connotation - The connotation; determines icon and color. **attribute** `connotation`
+* @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} 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
+*/
+declare const VwcStatus: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "status"?: string | undefined;
+        "connotation"?: any;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcStatus;