@vonage/vivid-react 4.0.0 → 5.20.0

package/v3/VwcCard/index.js

@@ -30,6 +30,10 @@ Code in this file were generated using following JSON:
   }
  ],
  "slots": [
+  {
+   "description": "The body slot is for the main content of the card. Displayed between the header and footer content.",
+   "name": "body"
+  },
   {
    "description": "The graphic slot overrides the icon property.",
    "name": "graphic"
@@ -58,7 +62,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "CardAppearance | undefined"
    },
-   "description": "The appearance the card should have.",
+   "description": "Sets the element's appearance.",
    "privacy": "public"
   },
   {
@@ -67,7 +71,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "the text of the card heading\naccepts string",
+   "description": "Sets the element's headline.",
    "privacy": "public"
   },
   {
@@ -76,7 +80,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "the text of the card sub-heading\naccepts string",
+   "description": "Sets the element's subtitle.",
    "privacy": "public"
   },
   {
@@ -85,7 +89,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "the text of the card sub-heading\naccepts string",
+   "description": "Sets the element's text.",
    "privacy": "public"
   },
   {
@@ -94,7 +98,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "card header icon",
+   "description": "Sets the element's icon.",
    "privacy": "public"
   },
   {
@@ -103,7 +107,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
    },
-   "description": "card elevation dp",
+   "description": "Sets the element's elevation.",
    "privacy": "public"
   },
   {
@@ -116,20 +120,6 @@ Code in this file were generated using following JSON:
    "description": "Indicates whether card should be a clickable <button> element.",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "graphicSlottedContent",
-   "type": {
-    "text": "HTMLElement[] | undefined"
-   }
-  },
-  {
-   "kind": "field",
-   "name": "hasMetaSlottedContent",
-   "type": {
-    "text": "HTMLElement[] | undefined"
-   }
-  },
   {
    "kind": "field",
    "name": "download",
@@ -246,18 +236,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/patterns/linkable.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",
@@ -292,7 +270,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "CardAppearance | undefined"
    },
-   "description": "The appearance the card should have.",
+   "description": "Sets the element's appearance.",
    "fieldName": "appearance"
   },
   {
@@ -300,7 +278,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "the text of the card heading\naccepts string",
+   "description": "Sets the element's headline.",
    "fieldName": "headline"
   },
   {
@@ -308,7 +286,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "the text of the card sub-heading\naccepts string",
+   "description": "Sets the element's subtitle.",
    "fieldName": "subtitle"
   },
   {
@@ -316,7 +294,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "the text of the card sub-heading\naccepts string",
+   "description": "Sets the element's text.",
    "fieldName": "text"
   },
   {
@@ -324,7 +302,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "card header icon",
+   "description": "Sets the element's icon.",
    "fieldName": "icon"
   },
   {
@@ -332,7 +310,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
    },
-   "description": "card elevation dp",
+   "description": "Sets the element's elevation.",
    "fieldName": "elevation"
   },
   {
@@ -470,7 +448,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 { registerCard } from '@vonage/vivid'
 
 registerCard('vvd3')
@@ -478,7 +456,7 @@ registerCard('vvd3')
 const VwcCard = wrapper(`vvd3-card`,  {
     events: [],
     attributes: [],
-    properties: ['appearance', 'headline', 'subtitle', 'text', 'icon', 'elevation', 'clickableCard', 'graphicSlottedContent', 'hasMetaSlottedContent', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['appearance', 'headline', 'subtitle', 'text', 'icon', 'elevation', 'clickableCard', 'download', 'href', 'hreflang', 'ping', 'referrerpolicy', 'rel', 'target', 'type', 'control', 'VIVID_VERSION', 'componentName']
 })
 
 VwcCard.displayName = 'VwcCard'

package/v3/VwcCard/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-card",
-  "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/VwcCheckbox/index.d.ts

@@ -11,8 +11,7 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {string | null} tabindex  **attribute** `tabindex`
 * @param {CheckboxConnotation | undefined} connotation - The connotation the checklist should have. **attribute** `connotation`
 * @param {boolean} readOnly - When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information. **attribute** `readonly`
-* @param {boolean} indeterminate - The indeterminate state of the control. **attribute** `indeterminate`
-* @param {'delegate'} _vividAriaBehaviour
+* @param {boolean} indeterminate - Indicates whether a checkbox is in an indeterminate state. **attribute** `indeterminate`
 * @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`
@@ -38,36 +37,36 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcCheckbox: {
     (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;
-        onInput?: ((event: SyntheticEvent) => void) | undefined;
-        onClick?: any;
-        label?: string | undefined;
-        value?: string | undefined;
-        checked?: any;
-        indeterminate?: any;
-        disabled?: any;
-        readonly?: any;
-        tabindex?: string | null | undefined;
-        connotation?: any;
-        readOnly?: boolean | undefined;
-        _vividAriaBehaviour?: any;
-        helperText?: string | undefined;
-        errorText?: string | undefined;
-        validate?: any;
-        successText?: string | undefined;
-        defaultChecked?: boolean | undefined;
-        checkedAttribute?: any;
-        currentChecked?: 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;
+        onInput?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "onClick"?: any;
+        "label"?: string | undefined;
+        "value"?: string | undefined;
+        "checked"?: boolean | undefined;
+        "indeterminate"?: boolean | undefined;
+        "disabled"?: boolean | undefined;
+        "readonly"?: boolean | undefined;
+        "tabindex"?: string | null;
+        "connotation"?: any;
+        "readOnly"?: boolean;
+        "helperText"?: string | undefined;
+        "errorText"?: string | undefined;
+        "validate"?: any;
+        "successText"?: string | undefined;
+        "defaultChecked"?: boolean;
+        "checkedAttribute"?: any;
+        "currentChecked"?: any;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "name"?: string;
+        "required"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcCheckbox/index.js

@@ -101,21 +101,9 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The indeterminate state of the control.",
+   "description": "Indicates whether a checkbox is in an indeterminate state.",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "helperText",
@@ -514,7 +502,7 @@ Code in this file were generated using following JSON:
     "text": "boolean"
    },
    "default": "false",
-   "description": "The indeterminate state of the control.",
+   "description": "Indicates whether a checkbox is in an indeterminate state.",
    "fieldName": "indeterminate"
   },
   {
@@ -750,7 +738,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 { registerCheckbox } from '@vonage/vivid'
 
 registerCheckbox('vvd3')
@@ -758,7 +746,7 @@ registerCheckbox('vvd3')
 const VwcCheckbox = wrapper(`vvd3-checkbox`,  {
     events: [{"name":"change","propName":"onChange"},{"name":"input","propName":"onInput"}],
     attributes: [],
-    properties: ['onClick', 'label', 'value', 'checked', 'indeterminate', 'disabled', 'readonly', 'tabindex', 'connotation', 'readOnly', 'indeterminate', '_vividAriaBehaviour', 'helperText', 'errorText', 'validate', 'successText', 'label', 'defaultChecked', 'checked', 'checkedAttribute', 'currentChecked', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+    properties: ['onClick', 'label', 'value', 'checked', 'indeterminate', 'disabled', 'readonly', 'tabindex', 'connotation', 'readOnly', 'indeterminate', 'helperText', 'errorText', 'validate', 'successText', 'label', 'defaultChecked', 'checked', 'checkedAttribute', 'currentChecked', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })
 
 VwcCheckbox.displayName = 'VwcCheckbox'

package/v3/VwcCheckbox/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-checkbox",
-  "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/VwcColorPicker/index.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcColorPicker
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/color-picker
-* @param {string} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user. **attribute** `placeholder`
-* @param {string | undefined} savedColorsKey - Sets the localStorage saved colors key explicitly. **attribute** `saved-colors-key`
+* @param {string} placeholder - Text that appears in the input element when it has no value set **attribute** `placeholder`
+* @param {string | undefined} savedColorsKey - Sets the localStorage key used to store saved colors explicitly **attribute** `saved-colors-key`
 * @param {boolean} disableSavedColors - Disables the saving colors functionality **attribute** `disable-saved-colors`
 * @param {number} maxSwatches - Limits number of swatches that can be saved. **attribute** `max-swatches`
 * @param {string | undefined} helperText - Provides additional information to help the user enter the correct information.
@@ -10,7 +10,6 @@ To add HTML to the helper text, use the helper-text slot instead. **attribute**
 * @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 {'delegate'} _vividAriaBehaviour
 * @param {boolean} open - Indicates whether the popup is open **attribute** `open`
 * @param {ColorSwatch[]} swatches - List of color swatches, has to be an array of objects
 
@@ -30,31 +29,31 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcColorPicker: {
     (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;
-        placeholder?: string | undefined;
-        savedColorsKey?: string | undefined;
-        disableSavedColors?: boolean | undefined;
-        maxSwatches?: number | undefined;
-        helperText?: string | undefined;
-        errorText?: string | undefined;
-        validate?: any;
-        successText?: string | undefined;
-        _vividAriaBehaviour?: 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;
+        "placeholder"?: string;
+        "savedColorsKey"?: string | undefined;
+        "disableSavedColors"?: boolean;
+        "maxSwatches"?: number;
+        "helperText"?: string | undefined;
+        "errorText"?: string | undefined;
+        "validate"?: any;
+        "successText"?: string | undefined;
+        "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/VwcColorPicker/index.js

@@ -28,7 +28,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string"
    },
-   "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
+   "description": "Text that appears in the input element when it has no value set",
    "privacy": "public"
   },
   {
@@ -37,7 +37,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Sets the localStorage saved colors key explicitly.",
+   "description": "Sets the localStorage key used to store saved colors explicitly",
    "privacy": "public"
   },
   {
@@ -165,18 +165,6 @@ Code in this file were generated using following JSON:
     "module": "src/shared/patterns/form-elements/with-success-text.ts"
    }
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "open",
@@ -424,6 +412,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": [
@@ -432,7 +427,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string"
    },
-   "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
+   "description": "Text that appears in the input element when it has no value set",
    "fieldName": "placeholder"
   },
   {
@@ -440,7 +435,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "Sets the localStorage saved colors key explicitly.",
+   "description": "Sets the localStorage key used to store saved colors explicitly",
    "fieldName": "savedColorsKey"
   },
   {
@@ -627,7 +622,8 @@ Code in this file were generated using following JSON:
     "name": "modelValue",
     "propName": "value",
     "eventNames": [
-     "input"
+     "input",
+     "@lazy:change"
     ],
     "valueMapping": "event.currentTarget.value"
    }
@@ -635,15 +631,15 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerColorPicker } from '@vonage/vivid'
 
 registerColorPicker('vvd3')
 
 const VwcColorPicker = wrapper(`vvd3-color-picker`,  {
-    events: [{"name":"change","propName":"onChange"}],
+    events: [{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['placeholder', 'savedColorsKey', 'disableSavedColors', 'maxSwatches', 'helperText', 'errorText', 'validate', 'successText', '_vividAriaBehaviour', 'open', 'swatches', 'label', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
+    properties: ['placeholder', 'savedColorsKey', 'disableSavedColors', 'maxSwatches', 'helperText', 'errorText', 'validate', 'successText', 'open', 'swatches', 'label', 'value', 'currentValue', 'initialValue', 'disabled', 'name', 'required', 'VIVID_VERSION', 'componentName']
 })
 
 VwcColorPicker.displayName = 'VwcColorPicker'

package/v3/VwcColorPicker/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-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/VwcCombobox/index.d.ts

@@ -3,24 +3,23 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/combobox
 * @param {ComboboxAutocomplete | undefined} autocomplete - The autocomplete attribute. **attribute** `autocomplete`
 * @param {ListboxOption[]} filteredOptions - The collection of currently filtered options.
-* @param {ComboboxAppearance | undefined} appearance - The appearance attribute. **attribute** `appearance`
-* @param {ComboboxShape | undefined} shape - The shape attribute. **attribute** `shape`
-* @param {ComboboxSize | undefined} scale - The size the combobox should have. **attribute** `scale`
+* @param {ComboboxAppearance | undefined} appearance - Sets the element's appearance **attribute** `appearance`
+* @param {ComboboxShape | undefined} shape - Sets the shape of the combobox element **attribute** `shape`
+* @param {ComboboxSize | undefined} scale - Sets the display size of the input element **attribute** `scale`
 * @param {PopupPlacement | undefined} placement - the placement of the combobox
 
 HTML Attribute: string **attribute** `placement`
-* @param {boolean} fixedDropdown - Whether the dropdown is using a fixed positioning strategy. **attribute** `fixed-dropdown`
-* @param {Popup} _popup
-* @param {HTMLElement} _anchor
-* @param {boolean} open - The open attribute. **attribute** `open`
-* @param {ListboxOption[]} options - The list of options.
+* @param {boolean} fixedDropdown - Sets the position strategy of the dropdown to fixed **attribute** `fixed-dropdown`
+* @param {boolean} open - Sets the element's menu to be open **attribute** `open`
+* @param {ListboxOption[]} options - A read-only list of options.
 * @param {string} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user. **attribute** `placeholder`
 * @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 {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 {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
@@ -38,39 +37,38 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcCombobox: {
     (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;
-        autocomplete?: any;
-        filteredOptions?: any[] | undefined;
-        appearance?: any;
-        shape?: any;
-        scale?: any;
-        placement?: any;
-        fixedDropdown?: boolean | undefined;
-        _popup?: any;
-        _anchor?: any;
-        open?: boolean | undefined;
-        options?: any[] | undefined;
-        placeholder?: string | undefined;
-        helperText?: string | undefined;
-        errorText?: string | undefined;
-        successText?: string | undefined;
-        label?: string | undefined;
-        icon?: string | undefined;
-        value?: string | undefined;
-        currentValue?: any;
-        initialValue?: string | undefined;
-        disabled?: boolean | undefined;
-        name?: string | undefined;
-        required?: boolean | 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;
+        onChange?: (event: SyntheticEvent) => void;
+        onChange?: (event: SyntheticEvent) => void;
+        "autocomplete"?: any;
+        "filteredOptions"?: any[];
+        "appearance"?: any;
+        "shape"?: any;
+        "scale"?: any;
+        "placement"?: any;
+        "fixedDropdown"?: boolean;
+        "open"?: boolean;
+        "options"?: any[];
+        "placeholder"?: string;
+        "helperText"?: string | undefined;
+        "errorText"?: string | undefined;
+        "successText"?: string | undefined;
+        "label"?: string | undefined;
+        "icon"?: string | undefined;
+        "value"?: string;
+        "currentValue"?: any;
+        "initialValue"?: string;
+        "disabled"?: boolean;
+        "name"?: string;
+        "required"?: boolean;
+        "selectedIndex"?: number;
+        "selectedOptions"?: any[];
+        "slottedOptionFilter"?: any;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };