@vonage/vivid-react 4.0.0 → 5.19.0

package/v3/VwcSelect/index.d.ts

@@ -13,21 +13,22 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {string | undefined} successText  **attribute** `success-text`
 * @param {string | undefined} value  **attribute** `current-value`
 * @param {boolean} multiple - Indicates if the listbox is in multi-selection mode. **attribute** `multiple`
-* @param {boolean} open - The open attribute. **attribute** `open`
-* @param {SelectSize | undefined} scale - The size the select should have. **attribute** `scale`
-* @param {SelectAppearance | undefined} appearance - The appearance attribute. **attribute** `appearance`
-* @param {SelectShape | undefined} shape - The shape attribute. **attribute** `shape`
-* @param {boolean} fixedDropdown - The fixed-dropdown attribute. **attribute** `fixed-dropdown`
-* @param {string | undefined} placeholder - The placeholder attribute. **attribute** `placeholder`
+* @param {boolean} open - Sets the element's menu to be open **attribute** `open`
+* @param {SelectSize | undefined} scale - Sets the display size of the input element **attribute** `scale`
+* @param {SelectAppearance | undefined} appearance - Sets the element's appearance **attribute** `appearance`
+* @param {SelectShape | undefined} shape - Sets the shape of the select element **attribute** `shape`
+* @param {boolean} fixedDropdown - Sets the position strategy of the dropdown to fixed **attribute** `fixed-dropdown`
+* @param {string | undefined} placeholder - Sets the text to be displayed when no option is selected **attribute** `placeholder`
+* @param {boolean} clearable - Adds a clear button to the select that clears the selected value(s). **attribute** `clearable`
 * @param {string | undefined} helperText - Provides additional information to help the user enter the correct information.
 To add HTML to the helper text, use the helper-text slot instead. **attribute** `helper-text`
 * @param {string | undefined} errorText - Provides a custom error message. Any current error state will be overridden. **attribute** `error-text`
 * @param  validate
 * @param {string | undefined} successText - Provides a custom success message. Any current error state will be overridden. **attribute** `success-text`
 * @param {string | undefined} label - The label for the form element. **attribute** `label`
-* @param {'host'} _vividAriaBehaviour
 * @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} 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
@@ -46,39 +47,40 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcSelect: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onInput?: ((event: SyntheticEvent) => void) | undefined;
-        onChange?: ((event: SyntheticEvent) => void) | undefined;
-        disabled?: any;
-        errorText?: string | undefined;
-        helperText?: string | undefined;
-        icon?: string | undefined;
-        iconTrailing?: any;
-        initialValue?: string | undefined;
-        label?: string | undefined;
-        name?: string | undefined;
-        required?: any;
-        successText?: string | undefined;
-        value?: string | undefined;
-        multiple?: boolean | undefined;
-        open?: boolean | undefined;
-        scale?: any;
-        appearance?: any;
-        shape?: any;
-        fixedDropdown?: boolean | undefined;
-        placeholder?: string | undefined;
-        validate?: any;
-        _vividAriaBehaviour?: any;
-        currentValue?: any;
-        options?: any[] | undefined;
-        selectedIndex?: number | undefined;
-        selectedOptions?: any[] | undefined;
-        slottedOptionFilter?: 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;
+        onInput?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "disabled"?: any;
+        "errorText"?: string | undefined;
+        "helperText"?: string | undefined;
+        "icon"?: string | undefined;
+        "iconTrailing"?: any;
+        "initialValue"?: string | undefined;
+        "label"?: string | undefined;
+        "name"?: string | undefined;
+        "required"?: any;
+        "successText"?: string | undefined;
+        "value"?: string | undefined;
+        "multiple"?: boolean;
+        "open"?: boolean;
+        "scale"?: any;
+        "appearance"?: any;
+        "shape"?: any;
+        "fixedDropdown"?: boolean;
+        "placeholder"?: string | undefined;
+        "clearable"?: boolean;
+        "validate"?: any;
+        "currentValue"?: any;
+        "options"?: any[];
+        "selectedIndex"?: number;
+        "selectedOptions"?: any[];
+        "slottedOptionFilter"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSelect/index.js

@@ -86,7 +86,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The open attribute.",
+   "description": "Sets the element's menu to be open",
    "privacy": "public"
   },
   {
@@ -95,7 +95,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectSize | undefined"
    },
-   "description": "The size the select should have.",
+   "description": "Sets the display size of the input element",
    "privacy": "public"
   },
   {
@@ -104,7 +104,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectAppearance | undefined"
    },
-   "description": "The appearance attribute.",
+   "description": "Sets the element's appearance",
    "privacy": "public"
   },
   {
@@ -113,7 +113,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectShape | undefined"
    },
-   "description": "The shape attribute.",
+   "description": "Sets the shape of the select element",
    "privacy": "public"
   },
   {
@@ -123,7 +123,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The fixed-dropdown attribute.",
+   "description": "Sets the position strategy of the dropdown to fixed",
    "privacy": "public"
   },
   {
@@ -132,7 +132,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "The placeholder attribute.",
+   "description": "Sets the text to be displayed when no option is selected",
    "privacy": "public"
   },
   {
@@ -216,6 +216,16 @@ Code in this file were generated using following JSON:
    "kind": "method",
    "name": "formResetCallback"
   },
+  {
+   "kind": "field",
+   "name": "clearable",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Adds a clear button to the select that clears the selected value(s).",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "helperText",
@@ -333,18 +343,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/patterns/form-elements/form-element.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'host'",
-   "type": {
-    "text": "'host'"
-   },
-   "inheritedFrom": {
-    "name": "HostSemantics",
-    "module": "src/shared/aria/host-semantics.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "iconTrailing",
@@ -365,7 +363,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",
@@ -608,23 +606,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/foundation/listbox/listbox.ts"
    }
   },
-  {
-   "kind": "method",
-   "name": "getNextSelectableIndex",
-   "privacy": "protected",
-   "parameters": [
-    {
-     "name": "fromIndex",
-     "type": {
-      "text": "number"
-     }
-    }
-   ],
-   "inheritedFrom": {
-    "name": "Listbox",
-    "module": "src/shared/foundation/listbox/listbox.ts"
-   }
-  },
   {
    "kind": "method",
    "name": "_validSelectedIndex",
@@ -721,7 +702,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The open attribute.",
+   "description": "Sets the element's menu to be open",
    "fieldName": "open"
   },
   {
@@ -729,7 +710,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectSize | undefined"
    },
-   "description": "The size the select should have.",
+   "description": "Sets the display size of the input element",
    "fieldName": "scale"
   },
   {
@@ -737,7 +718,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectAppearance | undefined"
    },
-   "description": "The appearance attribute.",
+   "description": "Sets the element's appearance",
    "fieldName": "appearance"
   },
   {
@@ -745,7 +726,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectShape | undefined"
    },
-   "description": "The shape attribute.",
+   "description": "Sets the shape of the select element",
    "fieldName": "shape"
   },
   {
@@ -754,7 +735,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The fixed-dropdown attribute.",
+   "description": "Sets the position strategy of the dropdown to fixed",
    "fieldName": "fixedDropdown"
   },
   {
@@ -762,9 +743,18 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "The placeholder attribute.",
+   "description": "Sets the text to be displayed when no option is selected",
    "fieldName": "placeholder"
   },
+  {
+   "name": "clearable",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Adds a clear button to the select that clears the selected value(s).",
+   "fieldName": "clearable"
+  },
   {
    "name": "helper-text",
    "type": {
@@ -831,7 +821,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",
@@ -918,6 +908,10 @@ Code in this file were generated using following JSON:
    "name": "WithSuccessText",
    "module": "/src/shared/patterns"
   },
+  {
+   "name": "Localized",
+   "module": "/src/shared/patterns"
+  },
   {
    "name": "FormElement",
    "module": "/src/shared/patterns"
@@ -947,7 +941,8 @@ Code in this file were generated using following JSON:
     "name": "modelValue",
     "propName": "value",
     "eventNames": [
-     "input"
+     "input",
+     "@lazy:change"
     ],
     "valueMapping": "event.currentTarget.value"
    }
@@ -974,7 +969,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 { registerSelect } from '@vonage/vivid'
 
 registerSelect('vvd3')
@@ -982,7 +977,7 @@ registerSelect('vvd3')
 const VwcSelect = wrapper(`vvd3-select`,  {
     events: [{"name":"change","propName":"onChange"},{"name":"input","propName":"onInput"}],
     attributes: [],
-    properties: ['disabled', 'errorText', 'helperText', 'icon', 'iconTrailing', 'initialValue', 'label', 'name', 'required', 'successText', 'value', 'multiple', 'open', 'scale', 'appearance', 'shape', 'fixedDropdown', 'placeholder', 'helperText', 'errorText', 'validate', 'successText', 'label', '_vividAriaBehaviour', 'iconTrailing', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'options', 'selectedIndex', 'selectedOptions', 'slottedOptionFilter', 'VIVID_VERSION', 'componentName']
+    properties: ['disabled', 'errorText', 'helperText', 'icon', 'iconTrailing', 'initialValue', 'label', 'name', 'required', 'successText', 'value', 'multiple', 'open', 'scale', 'appearance', 'shape', 'fixedDropdown', 'placeholder', 'clearable', 'helperText', 'errorText', 'validate', 'successText', 'label', 'iconTrailing', 'icon', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'options', 'selectedIndex', 'selectedOptions', 'slottedOptionFilter', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSelect.displayName = 'VwcSelect'

package/v3/VwcSelect/package.json

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

package/v3/VwcSelectableBox/index.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcSelectableBox
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/selectable-box
-* @param {boolean} checked - Controls the checked state of the box **attribute** `checked`
-* @param {boolean} clickableBox - Makes the entire selectable box clickable **attribute** `clickable-box`
-* @param {SelectableBoxConnotation | undefined} connotation - The connotation the selectable box should have. **attribute** `connotation`
-* @param {SelectableBoxControlType | undefined} controlType - The type of control the box should have: checkbox or radio. **attribute** `control-type`
-* @param {SelectableBoxControlPlacement} controlPlacement - Defines where the control (checkbox or radio) should be located. **attribute** `control-placement`
-* @param {boolean} tight - Removes the padding around the box's slot content **attribute** `tight`
-* @param {'delegate'} _vividAriaBehaviour
+* @param {boolean} checked - Controls the checked state **attribute** `checked`
+* @param {boolean} clickableBox - Sets the whole box to be clickable **attribute** `clickable-box`
+* @param {SelectableBoxConnotation | undefined} connotation - Controls the color of the box and its control **attribute** `connotation`
+* @param {SelectableBoxControlType | undefined} controlType - Controls the type of control in the box **attribute** `control-type`
+* @param {SelectableBoxControlPlacement} controlPlacement - Controls where the control should be placed in the box **attribute** `control-placement`
+* @param {boolean} tight - Removes the padding from the boxes content area **attribute** `tight`
+* @param {boolean} disabled - Controls the disabled state of the box and its control **attribute** `disabled`
 * @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
@@ -15,20 +15,20 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcSelectableBox: {
     (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;
-        checked?: boolean | undefined;
-        clickableBox?: boolean | undefined;
-        connotation?: any;
-        controlType?: any;
-        controlPlacement?: any;
-        tight?: boolean | 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;
+        onChange?: (event: SyntheticEvent) => void;
+        "checked"?: boolean;
+        "clickableBox"?: boolean;
+        "connotation"?: any;
+        "controlType"?: any;
+        "controlPlacement"?: any;
+        "tight"?: boolean;
+        "disabled"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSelectableBox/index.js

@@ -63,7 +63,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Controls the checked state of the box",
+   "description": "Controls the checked state",
    "privacy": "public"
   },
   {
@@ -73,7 +73,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Makes the entire selectable box clickable",
+   "description": "Sets the whole box to be clickable",
    "privacy": "public"
   },
   {
@@ -82,7 +82,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectableBoxConnotation | undefined"
    },
-   "description": "The connotation the selectable box should have.",
+   "description": "Controls the color of the box and its control",
    "privacy": "public"
   },
   {
@@ -91,7 +91,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectableBoxControlType | undefined"
    },
-   "description": "The type of control the box should have: checkbox or radio.",
+   "description": "Controls the type of control in the box",
    "privacy": "public"
   },
   {
@@ -101,7 +101,7 @@ Code in this file were generated using following JSON:
     "text": "SelectableBoxControlPlacement"
    },
    "default": "'end-stacked'",
-   "description": "Defines where the control (checkbox or radio) should be located.",
+   "description": "Controls where the control should be placed in the box",
    "privacy": "public"
   },
   {
@@ -111,20 +111,18 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Removes the padding around the box's slot content",
+   "description": "Removes the padding from the boxes content area",
    "privacy": "public"
   },
   {
    "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
+   "name": "disabled",
    "type": {
-    "text": "'delegate'"
+    "text": "boolean"
    },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
+   "default": "false",
+   "description": "Controls the disabled state of the box and its control",
+   "privacy": "public"
   },
   {
    "kind": "field",
@@ -170,7 +168,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Controls the checked state of the box",
+   "description": "Controls the checked state",
    "fieldName": "checked"
   },
   {
@@ -179,7 +177,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Makes the entire selectable box clickable",
+   "description": "Sets the whole box to be clickable",
    "fieldName": "clickableBox"
   },
   {
@@ -187,7 +185,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectableBoxConnotation | undefined"
    },
-   "description": "The connotation the selectable box should have.",
+   "description": "Controls the color of the box and its control",
    "fieldName": "connotation"
   },
   {
@@ -195,7 +193,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "SelectableBoxControlType | undefined"
    },
-   "description": "The type of control the box should have: checkbox or radio.",
+   "description": "Controls the type of control in the box",
    "fieldName": "controlType"
   },
   {
@@ -204,7 +202,7 @@ Code in this file were generated using following JSON:
     "text": "SelectableBoxControlPlacement"
    },
    "default": "'end-stacked'",
-   "description": "Defines where the control (checkbox or radio) should be located.",
+   "description": "Controls where the control should be placed in the box",
    "fieldName": "controlPlacement"
   },
   {
@@ -213,8 +211,17 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "Removes the padding around the box's slot content",
+   "description": "Removes the padding from the boxes content area",
    "fieldName": "tight"
+  },
+  {
+   "name": "disabled",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Controls the disabled state of the box and its control",
+   "fieldName": "disabled"
   }
  ],
  "mixins": [
@@ -278,7 +285,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 { registerSelectableBox } from '@vonage/vivid'
 
 registerSelectableBox('vvd3')
@@ -286,7 +293,7 @@ registerSelectableBox('vvd3')
 const VwcSelectableBox = wrapper(`vvd3-selectable-box`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['checked', 'clickableBox', 'connotation', 'controlType', 'controlPlacement', 'tight', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['checked', 'clickableBox', 'connotation', 'controlType', 'controlPlacement', 'tight', 'disabled', 'VIVID_VERSION', 'componentName']
 })
 
 VwcSelectableBox.displayName = 'VwcSelectableBox'

package/v3/VwcSelectableBox/package.json

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

package/v3/VwcSideDrawer/index.d.ts

@@ -12,19 +12,19 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcSideDrawer: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onClose?: ((event: SyntheticEvent) => void) | undefined;
-        onOpen?: ((event: SyntheticEvent) => void) | undefined;
-        onCancel?: ((event: SyntheticEvent) => void) | undefined;
-        alternate?: boolean | undefined;
-        modal?: boolean | undefined;
-        open?: boolean | undefined;
-        trailing?: 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;
+        onClose?: (event: SyntheticEvent) => void;
+        onOpen?: (event: SyntheticEvent) => void;
+        onCancel?: (event: SyntheticEvent) => void;
+        "alternate"?: boolean;
+        "modal"?: boolean;
+        "open"?: boolean;
+        "trailing"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSideDrawer/index.js

@@ -175,7 +175,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 { registerSideDrawer } from '@vonage/vivid'
 
 registerSideDrawer('vvd3')

package/v3/VwcSideDrawer/package.json

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