@corva/ui 3.53.0-4 → 3.53.0-5

package/mcp-server/server.mjs

@@ -227,7 +227,7 @@ const validateDsn = (dsn) => {
 
 const MCP_SERVER_VERSION = '1.0.0';
 
-var version = "3.53.0-4";
+var version = "3.53.0-5";
 
 const CORVA_UI_VERSION = version;
 
@@ -1401,205 +1401,9 @@ var componentsV2Data = [
 		importPath: "@corva/ui/componentsV2",
 		category: "v2",
 		description: "",
-		isExperimental: true,
-		isDeprecated: false,
+		isExperimental: false,
+		isDeprecated: true,
 		props: [
-			{
-				name: "options",
-				type: "T[]",
-				required: false,
-				description: "Options to allow selection from. Has to be assignable to `{ id: string | number; title: string; prefix?: ReactNode; }[]`"
-			},
-			{
-				name: "value",
-				type: "string | number | T | (string | number | T)[]",
-				required: false,
-				description: "Selected value. If `multiple` is `false | undefined`, and the value is an array, only the first element will be used\n\nThere's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\nto have incorrect typing if we mix T and T['id'] in `value`. Therefore, we can't use the \"correct\" typing\n```\nvalue?: T['id'] | T | (T['id'] | T)[];\n```\n\nYou may need to provide additional typings"
-			},
-			{
-				name: "multiple",
-				type: "Multiple",
-				required: false,
-				description: "If `true`, the component will support multiple selection"
-			},
-			{
-				name: "onChange",
-				type: "(value: Multiple extends undefined | false ? T | undefined : T[], reason: ChangeReason, event: ChangeEvent<unknown>) => void",
-				required: false,
-				description: "Selection change handler\nReceives an array of options if `multiple` is `true`, a single selected option or `undefined` otherwise"
-			},
-			{
-				name: "label",
-				type: "ReactNode",
-				required: false,
-				description: ""
-			},
-			{
-				name: "placeholder",
-				type: "string",
-				required: false,
-				description: ""
-			},
-			{
-				name: "optionSize",
-				type: "MenuItemProps['size']",
-				required: false,
-				description: "Controls the size of the options rendered"
-			},
-			{
-				name: "disabled",
-				type: "boolean",
-				required: false,
-				description: ""
-			},
-			{
-				name: "onCreate",
-				type: "(title: string) => void",
-				required: false,
-				description: "If exists - allows user to create own options. Called when 'Add \"whatever\"' option is selected"
-			},
-			{
-				name: "prefix",
-				type: "ReactNode",
-				required: false,
-				description: ""
-			},
-			{
-				name: "loading",
-				type: "boolean",
-				required: false,
-				description: ""
-			},
-			{
-				name: "showPopupIcon",
-				type: "boolean",
-				required: false,
-				description: ""
-			},
-			{
-				name: "clearable",
-				type: "boolean",
-				required: false,
-				description: "Controls the \"Clear\" button that's shown to the right if there is a value"
-			},
-			{
-				name: "focusOnClear",
-				type: "boolean",
-				required: false,
-				description: "Controls if the field should keep/gain focus after \"Clear\" button is clicked"
-			},
-			{
-				name: "onInputChange",
-				type: "(value: string, event: ChangeEvent<HTMLInputElement>) => void",
-				required: false,
-				description: "Triggered when user types something"
-			},
-			{
-				name: "status",
-				type: "TextInputProps['status']",
-				required: false,
-				description: ""
-			},
-			{
-				name: "message",
-				type: "TextInputProps['message']",
-				required: false,
-				description: ""
-			},
-			{
-				name: "disableFiltering",
-				type: "boolean",
-				required: false,
-				description: "Makes internal text field readonly, effectively turning component into a simple `<select/>`"
-			},
-			{
-				name: "renderOption",
-				type: "(item: T) => ReactNode",
-				required: false,
-				description: ""
-			},
-			{
-				name: "noOptionsMessage",
-				type: "ReactNode",
-				required: false,
-				description: "Message to show when there are no options"
-			},
-			{
-				name: "spacing",
-				type: "AutocompleteInputProps['spacing']",
-				required: false,
-				description: ""
-			},
-			{
-				name: "filterOptions",
-				type: "(options: T[], inputValue: string) => T[]",
-				required: false,
-				description: "Function that filters options based on input value"
-			},
-			{
-				name: "getOptionDisabled",
-				type: "(option: T) => boolean",
-				required: false,
-				description: "Function that determines if an option is disabled. Used to override the default"
-			},
-			{
-				name: "useAllOption",
-				type: "boolean",
-				required: false,
-				description: "If `multiple === true` shows an \"All\" option that selects/deselects all options"
-			},
-			{
-				name: "renderSelected",
-				type: "(data: { option: T; onDelete: MouseEventHandler }[], options: { useAllOption: boolean; allOptions: T[] }) => ReactNode",
-				required: false,
-				description: "Used to render selected values when `multiple === true`"
-			},
-			{
-				name: "groupBy",
-				type: "(option: T) => string",
-				required: false,
-				description: "Defines option grouping"
-			},
-			{
-				name: "renderGroup",
-				type: "(props: AutocompleteRenderGroupParams) => ReactNode",
-				required: false,
-				description: "Group render override"
-			},
-			{
-				name: "dropdownClassName",
-				type: "string",
-				required: false,
-				description: "A classname that will be applied to dropdown (`<Paper/>` component)"
-			},
-			{
-				name: "type",
-				type: "'default' | 'search'",
-				required: false,
-				description: "",
-				enumValues: [
-					"default",
-					"search"
-				]
-			},
-			{
-				name: "className",
-				type: "string",
-				required: false,
-				description: ""
-			},
-			{
-				name: "testId",
-				type: "string",
-				required: false,
-				description: ""
-			},
-			{
-				name: "listboxComponent",
-				type: "React.ComponentType<React.HTMLAttributes<HTMLElement>>",
-				required: false,
-				description: "Custom listbox component for rendering options (e.g., virtualized list)"
-			}
 		],
 		examples: [
 			{
@@ -3117,6 +2921,142 @@ var componentsV2Data = [
 			"chipindicator"
 		]
 	},
+	{
+		name: "ColorPicker",
+		modulePath: "componentsV2/ColorPicker",
+		importPath: "@corva/ui/componentsV2",
+		category: "v2",
+		description: "",
+		isExperimental: true,
+		isDeprecated: false,
+		props: [
+			{
+				name: "value",
+				type: "string",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onChange",
+				type: "(value: string) => void",
+				required: false,
+				description: ""
+			},
+			{
+				name: "size",
+				type: "TextInputNextProps['size']",
+				required: false,
+				description: ""
+			},
+			{
+				name: "label",
+				type: "TextInputNextProps['label']",
+				required: false,
+				description: ""
+			},
+			{
+				name: "labelPlacement",
+				type: "TextInputNextProps['labelPlacement']",
+				required: false,
+				description: ""
+			},
+			{
+				name: "disabled",
+				type: "boolean",
+				required: false,
+				description: ""
+			},
+			{
+				name: "disableOpacityDrag",
+				type: "boolean",
+				required: false,
+				description: "Disables drag to change opacity functinality"
+			},
+			{
+				name: "format",
+				type: "'rgb' | 'hex'",
+				required: false,
+				description: "Determines base format of the colour `rgb(RRR, GGG, BBB[, AAA])` or `#RRGGBB[AA]`",
+				enumValues: [
+					"rgb",
+					"hex"
+				]
+			},
+			{
+				name: "enableAlpha",
+				type: "boolean",
+				required: false,
+				description: "Allows user to control color's opacity, adds alpha channel to resulting color string"
+			},
+			{
+				name: "popoverPlacement",
+				type: "PopoverProps['placement']",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onOpen",
+				type: "() => void",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onClose",
+				type: "() => void",
+				required: false,
+				description: ""
+			},
+			{
+				name: "className",
+				type: "string",
+				required: false,
+				description: ""
+			},
+			{
+				name: "testId",
+				type: "string",
+				required: false,
+				description: ""
+			}
+		],
+		examples: [
+			{
+				name: "Default",
+				description: "",
+				code: "{\n  const [value, setValue] = useState<string>();\n  return (\n    <ColorPicker\n      {...props}\n      value={value}\n      onChange={(value, ...rest) => {\n        setValue(value);\n        props.onChange?.(value, ...rest);\n      }}\n    />\n  );\n}"
+			},
+			{
+				name: "Sizes",
+				description: "Component supports several sizes through the `size` prop:\n\n- `small` (default)\n- `medium`\n- `large`",
+				code: "<Grid cols={2}>\n    <Grid.Cell span={1}>\n      <ColorPicker label=\"Small\" size=\"small\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <ColorPicker label=\"Small\" size=\"small\" enableAlpha />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <ColorPicker label=\"Medium\" size=\"medium\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <ColorPicker label=\"Medium\" size=\"medium\" enableAlpha />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <ColorPicker label=\"Large\" size=\"large\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <ColorPicker label=\"Large\" size=\"large\" enableAlpha />\n    </Grid.Cell>\n  </Grid>"
+			},
+			{
+				name: "LabelPlacement",
+				description: "You can control how the label is positioned by using the `labelPlacement` prop",
+				code: "<SbColumn alignItems=\"stretch\">\n    <ColorPicker label=\"Label on top\" size=\"small\" labelPlacement=\"top\" />\n    <ColorPicker label=\"Label at the start\" size=\"small\" labelPlacement=\"start\" />\n    <ColorPicker label=\"Label at the end\" size=\"small\" labelPlacement=\"end\" />\n  </SbColumn>"
+			},
+			{
+				name: "TransparencyControl",
+				description: "You can control color's transparency by adding an alpha channel, by using the `enableAlpha` prop",
+				code: "{\n  const [value, setValue] = useState<string>();\n  const [valueAlpha, setValueAlpha] = useState<string>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ColorPicker label=\"Without alpha\" value={value} onChange={setValue} />\n      <ColorPicker label=\"With alpha\" value={valueAlpha} onChange={setValueAlpha} enableAlpha />\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "ColourFormat",
+				description: "You can choose between RGB and HEX formats by using the `format` prop.\n\nNote the addition of the alpha channel if `enableAlpha` is set to `true`",
+				code: "{\n  const [valueHex, setValueHex] = useState<string>('#eb492f');\n  const [valueRgb, setValueRgb] = useState<string>('rgb(235, 73, 47)');\n  const [valueHexA, setValueHexA] = useState<string>('#eb492f6b');\n  const [valueRgba, setValueRgba] = useState<string>('rgba(235, 73, 47, .42)');\n\n  return (\n    <Grid cols={2} alignItems=\"end\">\n      <Grid.Cell span={1}>\n        <ColorPicker label=\"HEX\" value={valueHex} onChange={setValueHex} format=\"hex\" />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueHex}</Grid.Cell>\n\n      <Grid.Cell span={1}>\n        <ColorPicker label=\"RGB\" value={valueRgb} onChange={setValueRgb} format=\"rgb\" />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueRgb}</Grid.Cell>\n\n      <Grid.Cell span={1}>\n        <ColorPicker\n          label=\"HEX+A\"\n          enableAlpha\n          value={valueHexA}\n          onChange={setValueHexA}\n          format=\"hex\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueHexA}</Grid.Cell>\n\n      <Grid.Cell span={1}>\n        <C\n// ... (truncated)"
+			},
+			{
+				name: "AlphaMismatch",
+				description: "If `enableAlpha` is `true` and a colour is passed that has no alpha channel, it defaults to 1.\n\nAlternatively, if `enableAlpha` is `false`, and a colour with alpha channel is passed, its alpha channel is ignored",
+				code: "{\n  const [valueHex, setValueHex] = useState<string>('#eb492f');\n  const [valueHexA, setValueHexA] = useState<string>('#eb492f6b');\n\n  return (\n    <Grid cols={2} alignItems=\"end\">\n      <Grid.Cell span={1}>\n        <ColorPicker label=\"HEX\" enableAlpha value={valueHex} onChange={setValueHex} format=\"hex\" />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueHex}</Grid.Cell>\n\n      <Grid.Cell span={1}>\n        <ColorPicker label=\"HEX+A\" value={valueHexA} onChange={setValueHexA} format=\"hex\" />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueHexA}</Grid.Cell>\n    </Grid>\n  );\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ColorPicker/ColorPicker.tsx",
+		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=157241-27474&m=dev",
+		keywords: [
+			"colorpicker"
+		]
+	},
 	{
 		name: "CompletionsOffsetWellPicker",
 		modulePath: "componentsV2/CompletionsOffsetWellPicker",
@@ -3356,98 +3296,8 @@ var componentsV2Data = [
 		category: "v2",
 		description: "",
 		isExperimental: true,
-		isDeprecated: false,
+		isDeprecated: true,
 		props: [
-			{
-				name: "label",
-				type: "ReactNode",
-				required: false,
-				description: ""
-			},
-			{
-				name: "placeholder",
-				type: "string",
-				required: false,
-				description: ""
-			},
-			{
-				name: "value",
-				type: "DatePickerValue<IsRange>",
-				required: false,
-				description: ""
-			},
-			{
-				name: "onChange",
-				type: "DatePickerChangeHandler<IsRange>",
-				required: false,
-				description: ""
-			},
-			{
-				name: "minDate",
-				type: "Date",
-				required: false,
-				description: "Minimum selectable date"
-			},
-			{
-				name: "maxDate",
-				type: "Date",
-				required: false,
-				description: "maximum selectable date"
-			},
-			{
-				name: "type",
-				type: "DatePickerType",
-				required: false,
-				description: "Type: dates only / date + time / month"
-			},
-			{
-				name: "range",
-				type: "IsRange",
-				required: false,
-				description: ""
-			},
-			{
-				name: "getTileClassName",
-				type: "(args: { activeStartDate: Date; date: Date }) => string",
-				required: false,
-				description: "Function that returns a classname / list of classnames for custom styling of date tiles"
-			},
-			{
-				name: "getTileDisabled",
-				type: "(args: { activeStartDate: Date; date: Date }) => boolean",
-				required: false,
-				description: "Returns whether a tile should be disabled. Is ***not*** meant as an alternative method of providing `minDate` or `maxDate`"
-			},
-			{
-				name: "format",
-				type: "string",
-				required: false,
-				description: "Determines how the date will be displayed and how user's input will be parsed"
-			},
-			{
-				name: "readOnly",
-				type: "boolean",
-				required: false,
-				description: "If `true` - disables user input"
-			},
-			{
-				name: "focusOnClear",
-				type: "boolean",
-				required: false,
-				description: "Controls if the field should keep/gain focus after \"Clear\" button is clicked"
-			},
-			{
-				name: "className",
-				type: "string",
-				required: false,
-				description: ""
-			},
-			{
-				name: "testId",
-				type: "string",
-				required: false,
-				description: ""
-			}
 		],
 		examples: [
 			{
@@ -6942,9 +6792,9 @@ var componentsV2Data = [
 		modulePath: "componentsV2/TextInput",
 		importPath: "@corva/ui/componentsV2",
 		category: "v2",
-		description: "",
-		isExperimental: true,
-		isDeprecated: false,
+		description: "This component is deprecated and will be eventually replaced with `TextInputNext`",
+		isExperimental: false,
+		isDeprecated: true,
 		props: [
 			{
 				name: "label",
@@ -7181,7 +7031,288 @@ var componentsV2Data = [
 			"field",
 			"entry",
 			"textfield",
-			"text field"
+			"text field",
+			"component",
+			"deprecated",
+			"will",
+			"eventually",
+			"replaced",
+			"`textinputnext`"
+		]
+	},
+	{
+		name: "TextInputNext",
+		modulePath: "componentsV2/TextInputNext",
+		importPath: "@corva/ui/componentsV2",
+		category: "v2",
+		description: "This is the latest iteration of `TextInput` component and will eventually replace it",
+		isExperimental: true,
+		isDeprecated: false,
+		props: [
+			{
+				name: "label",
+				type: "ReactNode",
+				required: false,
+				description: ""
+			},
+			{
+				name: "value",
+				type: "string | number",
+				required: false,
+				description: ""
+			},
+			{
+				name: "size",
+				type: "'small' | 'medium' | 'large'",
+				required: false,
+				description: "",
+				enumValues: [
+					"small",
+					"medium",
+					"large"
+				]
+			},
+			{
+				name: "labelPlacement",
+				type: "'top' | 'start' | 'end'",
+				required: false,
+				description: "",
+				enumValues: [
+					"top",
+					"start",
+					"end"
+				]
+			},
+			{
+				name: "onChange",
+				type: "(value: string, changeReason: TextInputChangeReason, event: ChangeEvent<HTMLInputElement>) => void",
+				required: false,
+				description: "Change handler. `TextInputChangeReason` utility type is provided"
+			},
+			{
+				name: "disabled",
+				type: "boolean",
+				required: false,
+				description: ""
+			},
+			{
+				name: "inputType",
+				type: "'text' | 'email' | 'password' | 'number' | 'phone' | 'url' | 'search'",
+				required: false,
+				description: "Underlying `input`'s element `type` attribute",
+				enumValues: [
+					"text",
+					"email",
+					"password",
+					"number",
+					"phone",
+					"url",
+					"search"
+				]
+			},
+			{
+				name: "inputMode",
+				type: "HTMLAttributes<HTMLInputElement>['inputMode']",
+				required: false,
+				description: "Input mode that hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard."
+			},
+			{
+				name: "status",
+				type: "'error' | 'loading'",
+				required: false,
+				description: "",
+				enumValues: [
+					"error",
+					"loading"
+				]
+			},
+			{
+				name: "message",
+				type: "ReactNode",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onFocus",
+				type: "FocusEventHandler<HTMLInputElement>",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onBlur",
+				type: "FocusEventHandler",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onKeyDown",
+				type: "KeyboardEventHandler",
+				required: false,
+				description: ""
+			},
+			{
+				name: "onKeyUp",
+				type: "KeyboardEventHandler",
+				required: false,
+				description: ""
+			},
+			{
+				name: "clearable",
+				type: "boolean",
+				required: false,
+				description: ""
+			},
+			{
+				name: "focusOnClear",
+				type: "boolean",
+				required: false,
+				description: "Controls if the field should keep/gain focus after \"Clear\" button is clicked"
+			},
+			{
+				name: "placeholder",
+				type: "string",
+				required: false,
+				description: ""
+			},
+			{
+				name: "prefix",
+				type: "ReactNode",
+				required: false,
+				description: ""
+			},
+			{
+				name: "suffix",
+				type: "ReactNode",
+				required: false,
+				description: ""
+			},
+			{
+				name: "inputRef",
+				type: "RefCallback<HTMLInputElement | null> | MutableRefObject<HTMLInputElement | null> | null",
+				required: false,
+				description: "Ref to an underlying `input` element"
+			},
+			{
+				name: "inputContainerRef",
+				type: "RefCallback<HTMLDivElement | null> | MutableRefObject<HTMLDivElement | null> | null",
+				required: false,
+				description: "Ref to input container that contains `input` and its affixes\nUseful for positioning of popovers"
+			},
+			{
+				name: "readOnly",
+				type: "boolean",
+				required: false,
+				description: ""
+			},
+			{
+				name: "autoFocus",
+				type: "boolean",
+				required: false,
+				description: "If `true` will focus on the field on render. Useful for modals, but may be detrimental to a11y"
+			},
+			{
+				name: "htmlAttributes",
+				type: "Omit<Partial<InputHTMLAttributes<HTMLInputElement>>, 'type' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'readOnly' | 'disabled' | 'value' | 'onChange' | 'inputMode' | 'autoFocus'>",
+				required: false,
+				description: "Escape hatch to provide arbitrary html attributes to `input`"
+			},
+			{
+				name: "elementsClassNames",
+				type: "Partial<{\n    label: string;\n    input: string;\n    inputContainer: string;\n    prefix: string;\n    suffix: string;\n    message: string;\n    numberStepButtons: string;\n  }>",
+				required: false,
+				description: "An escape hatch to tweak styling of internal elements"
+			},
+			{
+				name: "className",
+				type: "string",
+				required: false,
+				description: ""
+			},
+			{
+				name: "testId",
+				type: "string",
+				required: false,
+				description: ""
+			}
+		],
+		examples: [
+			{
+				name: "Default",
+				description: "",
+				code: "{\n  const [value, setValue] = useState('');\n  return (\n    <TextInputNext\n      {...props}\n      value={value}\n      onChange={(newValue, ...rest) => {\n        setValue(newValue);\n        props.onChange?.(newValue, ...rest);\n      }}\n    />\n  );\n}"
+			},
+			{
+				name: "Sizes",
+				description: "Component supports several sizes through the `size` prop:\n\n- `small` (default)\n- `medium`\n- `large`",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext label=\"Small\" size=\"small\" value=\"Small\" />\n    <TextInputNext label=\"Medium\" size=\"medium\" value=\"Medium\" />\n    <TextInputNext label=\"Large\" size=\"large\" value=\"Large\" />\n  </SbColumn>"
+			},
+			{
+				name: "LabelPlacement",
+				description: "You can control how the label is positioned by using the `labelPlacement` prop",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext label=\"Label on top\" size=\"small\" labelPlacement=\"top\" />\n    <TextInputNext label=\"Label at the start\" size=\"small\" labelPlacement=\"start\" />\n    <TextInputNext label=\"Label at the end\" size=\"small\" labelPlacement=\"end\" />\n  </SbColumn>"
+			},
+			{
+				name: "LongLabels",
+				description: "When label is too long to be displayed, it will be truncated.\n\nFor labels on the side, default maximum width is 50% of the component's width",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext\n      label=\"Label on top that is very long, won't fit and will be truncated because we've forseen such a case\"\n      size=\"small\"\n      labelPlacement=\"top\"\n    />\n    <TextInputNext\n      label=\"Label at the start that is very long, won't fit and will be truncated because we've forseen such a case\"\n      size=\"small\"\n      labelPlacement=\"start\"\n    />\n    <TextInputNext\n      label=\"Label at the end that is very long, won't fit and will be truncated because we've forseen such a case\"\n      size=\"small\"\n      labelPlacement=\"end\"\n    />\n  </SbColumn>"
+			},
+			{
+				name: "PrefixAndSuffix",
+				description: "You can display some content as prefix and/or suffix by using `prefix` and `suffix` props.",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext label=\"Prefix\" prefix={<BubbleChartIcon />} />\n    <TextInputNext label=\"Suffix\" suffix={<BubbleChartIcon />} />\n    <TextInputNext\n      label=\"Prefix And Suffix\"\n      prefix={<BubbleChartIcon />}\n      suffix={<BubbleChartIcon />}\n    />\n    <TextInputNext\n      label=\"Arbitrary content\"\n      prefix={\n        <SbPlaceholder style={{ height: '20px', padding: '0 8px' }}>Custom Component</SbPlaceholder>\n      }\n    />\n\n    <TextInputNext\n      label=\"Medium\"\n      size=\"medium\"\n      prefix={<BubbleChartIcon />}\n      suffix={<BubbleChartIcon />}\n    />\n    <TextInputNext\n      label=\"Large\"\n      size=\"large\"\n      prefix={<BubbleChartIcon />}\n      suffix={<BubbleChartIcon />}\n    />\n  </SbColumn>"
+			},
+			{
+				name: "EverySuffixElement",
+				description: "This example illustrates every possible element in suffix and their order",
+				code: "<TextInputNext\n    label=\"Every possible element in Suffix\"\n    inputType=\"number\"\n    value=\"123\"\n    clearable\n    status=\"loading\"\n    suffix={<BubbleChartIcon />}\n  />"
+			},
+			{
+				name: "LoadingAndErrorStates",
+				description: "You can use the `status` prop to display the component in a \"loading\" state to indicate that some process related to the field is running, or to display it in an \"error\" state that indicates a validation error",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext label=\"Loading\" status=\"loading\" />\n    <TextInputNext\n      label=\"Error\"\n      value=\"Incorrect value\"\n      status=\"error\"\n      message=\"A hint to user how to be a better person and not trigger validation errors\"\n    />\n  </SbColumn>"
+			},
+			{
+				name: "InputTypes",
+				description: "You can use the `inputType` prop to set the `input`'s type, e.g. \"number\" or \"search\".\n\nYou can use the `htmlAttributes` prop as an escape hatch to fine-tune the component further.",
+				code: "{\n  const [password, setPassword] = useState('some value');\n  const [email, setEmail] = useState('dagon@innsmouth.com');\n  const [search, setSearch] = useState('search query');\n  const [number, setNumber] = useState('5');\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TextInputNext\n        label=\"Password\"\n        inputType=\"password\"\n        value={password}\n        onChange={setPassword}\n        htmlAttributes={{ autoComplete: 'off' }}\n      />\n      <TextInputNext label=\"Email\" inputType=\"email\" value={email} onChange={setEmail} />\n      <TextInputNext label=\"Search\" inputType=\"search\" value={search} onChange={setSearch} />\n      <TextInputNext\n        label=\"Number\"\n        inputType=\"number\"\n        value={number}\n        onChange={setNumber}\n        htmlAttributes={{ step: 0.5, min: 0, max: 10 }}\n      />\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "Autofocus",
+				description: "To immediately focus the field after rendering, use the `autoFocus` prop.\n\nPlease note, this may be detrimental to a11y",
+				code: "{\n  const [modalOpen, setModalOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setModalOpen(true)}>Open modal</Button>\n      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title=\"Modal\">\n        <TextInputNext label=\"Auto-focused field\" autoFocus />\n      </Modal>\n    </>\n  );\n}"
+			},
+			{
+				name: "Clearable",
+				description: "You can use `clearable` prop to display the \"clear\" button when the field has value.\n\nTo distinguish between \"field clear\" and \"regular\" change, you can use the second argument of `onChange` callback as shown in this example",
+				code: "{\n  const [value, setValue] = useState('Some value');\n\n  const onChange = useCallback<Required<TextInputNextProps>['onChange']>(\n    (value, changeReason, event) => {\n      // eslint-disable-next-line no-console\n      console.log('onChange', value, changeReason, event);\n\n      if (changeReason === 'clear') {\n        // eslint-disable-next-line no-console\n        console.log('Cleared!');\n      }\n\n      setValue(value);\n    },\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TextInputNext label=\"Focus after clear\" value={value} onChange={onChange} clearable />\n      <TextInputNext\n        label=\"No focus after clear\"\n        value={value}\n        onChange={onChange}\n        clearable\n        focusOnClear={false}\n      />\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "Message",
+				description: "You can provide additional information about the field or its validation by using the `message` prop.\n\nPlease note, the component provides a `<TextInput.MessageWithIcon>` to create a message with icon easily",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext\n      label=\"With icon\"\n      message={\n        <TextInputNext.MessageWithIcon>\n          You can put some things here that could be very long but never fret, we've got you!\n        </TextInputNext.MessageWithIcon>\n      }\n    />\n    <TextInputNext\n      label=\"Without icon\"\n      message=\"You can put some things here that could be very long but never fret, we've got you!\"\n    />\n  </SbColumn>"
+			},
+			{
+				name: "RequiredFieldsAndInfoIcons",
+				description: "You can use the `<TextInput.Label />` components to easily add required field notification, unit, and/or info hint icon",
+				code: "<TextInputNext\n    label={\n      <TextInputNext.Label required unit=\"mi\" infoTooltip=\"What the hell is a kilometer?!\">\n        Depth\n      </TextInputNext.Label>\n    }\n  />"
+			},
+			{
+				name: "FineTuningStyles",
+				description: "You can use `elementsClassNames` prop to fine-tune the styling of internal elements.\n\nFor instance - you can control the width of label when it's positioned to the side of the field",
+				code: "<SbColumn alignItems=\"stretch\">\n    <TextInputNext\n      labelPlacement=\"start\"\n      label=\"Extremely long label that's too long to be displayed normally and will be truncated\"\n      elementsClassNames={{ label: storyStyles.narrowLabel }}\n    />\n    <TextInputNext\n      labelPlacement=\"start\"\n      label=\"Extremely long label that's too long to be displayed normally and will be truncated\"\n      elementsClassNames={{ label: storyStyles.wideLabel }}\n    />\n  </SbColumn>"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextInputNext/TextInputNext.tsx",
+		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142449-52520&m=dev",
+		keywords: [
+			"textinputnext",
+			"latest",
+			"iteration",
+			"`textinput`",
+			"component",
+			"will",
+			"eventually",
+			"replace"
 		]
 	},
 	{
@@ -78845,7 +78976,6 @@ var entries = [
 			"filter"
 		],
 		tags: [
-			"experimental"
 		],
 		category: "components-v2",
 		importPath: "@corva/ui/componentsV2",
@@ -79157,6 +79287,21 @@ var entries = [
 		importPath: "@corva/ui/componentsV2",
 		searchText: "chipindicator  chipindicator"
 	},
+	{
+		id: "component-v2-ColorPicker",
+		type: "component",
+		name: "ColorPicker",
+		description: "",
+		keywords: [
+			"colorpicker"
+		],
+		tags: [
+			"experimental"
+		],
+		category: "components-v2",
+		importPath: "@corva/ui/componentsV2",
+		searchText: "colorpicker  colorpicker"
+	},
 	{
 		id: "component-v2-CompletionsOffsetWellPicker",
 		type: "component",
@@ -79981,7 +80126,7 @@ var entries = [
 		id: "component-v2-TextInput",
 		type: "component",
 		name: "TextInput",
-		description: "",
+		description: "This component is deprecated and will be eventually replaced with `TextInputNext`",
 		keywords: [
 			"textinput",
 			"form",
@@ -79990,14 +80135,41 @@ var entries = [
 			"field",
 			"entry",
 			"textfield",
-			"text field"
+			"text field",
+			"component",
+			"deprecated",
+			"will",
+			"eventually",
+			"replaced",
+			"`textinputnext`"
+		],
+		tags: [
+		],
+		category: "components-v2",
+		importPath: "@corva/ui/componentsV2",
+		searchText: "textinput this component is deprecated and will be eventually replaced with `textinputnext` textinput form input text field entry textfield text field component deprecated will eventually replaced `textinputnext`"
+	},
+	{
+		id: "component-v2-TextInputNext",
+		type: "component",
+		name: "TextInputNext",
+		description: "This is the latest iteration of `TextInput` component and will eventually replace it",
+		keywords: [
+			"textinputnext",
+			"latest",
+			"iteration",
+			"`textinput`",
+			"component",
+			"will",
+			"eventually",
+			"replace"
 		],
 		tags: [
 			"experimental"
 		],
 		category: "components-v2",
 		importPath: "@corva/ui/componentsV2",
-		searchText: "textinput  textinput form input text field entry textfield text field"
+		searchText: "textinputnext this is the latest iteration of `textinput` component and will eventually replace it textinputnext latest iteration `textinput` component will eventually replace"
 	},
 	{
 		id: "component-v2-TextLink",
@@ -89978,6 +90150,7 @@ var byCategory = {
 		"component-v2-Chip",
 		"component-v2-ChipAlert",
 		"component-v2-ChipIndicator",
+		"component-v2-ColorPicker",
 		"component-v2-CompletionsOffsetWellPicker",
 		"component-v2-CopyToClipboard",
 		"component-v2-Counter",
@@ -90019,6 +90192,7 @@ var byCategory = {
 		"component-v2-Text",
 		"component-v2-TextEndTruncated",
 		"component-v2-TextInput",
+		"component-v2-TextInputNext",
 		"component-v2-TextLink",
 		"component-v2-TextMiddleTruncated",
 		"component-v2-ToggleButtons",
@@ -90711,6 +90885,8 @@ var byTag = {
 		"component-v2-Popper",
 		"component-v2-Text",
 		"component-v2-TextEndTruncated",
+		"component-v2-TextInput",
+		"component-v2-TextInputNext",
 		"component-v2-UniversalLink"
 	],
 	appsizeprovider: [
@@ -90956,6 +91132,9 @@ var byTag = {
 	chipindicator: [
 		"component-v2-ChipIndicator"
 	],
+	colorpicker: [
+		"component-v2-ColorPicker"
+	],
 	completionsoffsetwellpicker: [
 		"component-v2-CompletionsOffsetWellPicker"
 	],
@@ -91045,7 +91224,9 @@ var byTag = {
 	will: [
 		"component-v2-FilesDropzone",
 		"component-v2-FilesLoader",
-		"component-v2-Popper"
+		"component-v2-Popper",
+		"component-v2-TextInput",
+		"component-v2-TextInputNext"
 	],
 	need: [
 		"component-v2-FilesDropzone",
@@ -91589,6 +91770,34 @@ var byTag = {
 	"text field": [
 		"component-v2-TextInput"
 	],
+	deprecated: [
+		"component-v2-TextInput"
+	],
+	eventually: [
+		"component-v2-TextInput",
+		"component-v2-TextInputNext"
+	],
+	replaced: [
+		"component-v2-TextInput"
+	],
+	"`textinputnext`": [
+		"component-v2-TextInput"
+	],
+	textinputnext: [
+		"component-v2-TextInputNext"
+	],
+	latest: [
+		"component-v2-TextInputNext"
+	],
+	iteration: [
+		"component-v2-TextInputNext"
+	],
+	"`textinput`": [
+		"component-v2-TextInputNext"
+	],
+	replace: [
+		"component-v2-TextInputNext"
+	],
 	textlink: [
 		"component-v2-TextLink"
 	],