npm - @corva/ui - Versions diffs - 3.79.0-4 → 3.79.0-5 - Mend

@corva/ui 3.79.0-4 → 3.79.0-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/mcp-server/server.mjs +24 -7
package/package.json +1 -1

package/mcp-server/server.mjs CHANGED Viewed

@@ -248,7 +248,7 @@ const validateDsn = dsn => {
 const MCP_SERVER_VERSION = '1.9.1';
-var version = "3.79.0-4";
+var version = "3.79.0-5";
 const CORVA_UI_VERSION = version;
@@ -1174,7 +1174,7 @@ const SEARCH_CONFIG = {
   }
 };
-var componentsV2Data = [{name:"Accordion",modulePath:"componentsV2/Accordion",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Accordion",specifier:"@corva/ui/componentsV2",exportName:"Accordion"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:"Title to show"},{name:"children",type:"ReactNode",required:true,description:"Content to hide under accordion"},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"iconPosition",type:"'start' | 'end'",required:false,description:"",enumValues:["start","end"]},{name:"titleHover",type:"boolean",required:false,description:"Controls title's color change on hover"},{name:"open",type:"boolean",required:false,description:""},{name:"onChange",type:"(isOpen: boolean, event: ChangeEvent) => void",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"unmountWhenClosed",type:"boolean",required:false,description:"Controls whether content should persist in DOM tree if closed"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Accordion {...props} />"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`\n\nNote that it does not affect content of the `<Accordion/>`",code:"<SbColumn>\n    <Accordion title=\"Medium\" size=\"medium\">\n      {text}\n    </Accordion>\n    <Accordion title=\"small\" size=\"small\">\n      {text}\n    </Accordion>\n  </SbColumn>"},{name:"IconPosition",description:"Component can render its icon either before or after title. This is controlled with `iconPosition` prop:\n\n- `start` (default)\n- `end`",code:"<SbColumn>\n    <Accordion title=\"Start\" iconPosition=\"start\">\n      {text}\n    </Accordion>\n    <Accordion title=\"End\" iconPosition=\"end\">\n      {text}\n    </Accordion>\n  </SbColumn>"},{name:"ControlledAccordion",description:"You can open/close `<Accordion/>` programmatically by using the `open` and `onChange` props.\n\n`onChange` is called regardless of the mode, allowing you to keep track of `<Accordion/>`'s state",code:"{\n  const [isOpen, setIsOpen] = useState(true);\n\n  return (\n    <Accordion\n      title={`Controlled: ${isOpen ? 'open' : 'closed'}`}\n      open={isOpen}\n      onChange={setIsOpen}\n    >\n      {text}\n    </Accordion>\n  );\n}"},{name:"TitleWithStaticColor",description:"Use the `titleHover` prop to control if title changes color on hover",code:"<Accordion title=\"Static color\" titleHover={false} size=\"medium\">\n    {text}\n  </Accordion>"},{name:"KeepContentMountedWhenClosed",description:"By default, Accordion unmounts its content when closed due to performance reasons. You can change it by providing the `unmountWhenClosed` prop.",code:"<SbColumn alignItems=\"stretch\">\n    <Accordion title=\"Unmounts content on close\">{text}</Accordion>\n    <Accordion title=\"Keeps content mounted\" unmountWhenClosed={false}>\n      {text}\n    </Accordion>\n  </SbColumn>"},{name:"WithAdditionalContentInTitle",description:"You can add arbitrary content to title. The container is a flex element with preset positioning and gaps.\n\nDo not forget to disable event propagation for interactive elements",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Accordion\n        title={\n          <>\n            With Button\n            <ButtonIcon size=\"xs\" onClick={e => e.stopPropagation()}>\n              <BubbleChartIcon />\n            </ButtonIcon>\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n\n      <Accordion\n        title={\n          <>\n            With Chip on the right\n            {/* Use classes for this IRL */}\n            <div style={{ marginLeft: 'auto' }}>\n              <Chip size=\"small\">Chip</Chip>\n            </div>\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n\n      <Accordion\n        title={\n          <>\n            With Info Icon\n            <Tooltip title=\"Information goes here\">\n              <span>\n                <InfoIcon size={16} />\n              </span>\n            </Tooltip>\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n\n      <Accordion\n        title={\n          <>\n            With Counter\n            <Counter count={100} max={99} size=\"small\" />\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n    </SbColumn>\n  );\n}"},{name:"FocusStateAndOverflow",description:"Care must be taken while using Accordion in scrollable containers, so its focus state is not \"cut off\".",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div\n        style={{\n          overflowX: 'auto',\n          height: '100px',\n        }}\n      >\n        <Accordion title=\"Title\">{text}</Accordion>\n      </div>\n      <div\n        style={{\n          overflowX: 'auto',\n          height: '100px',\n          // Add paddings to blocks with overflow\n          padding: '8px',\n        }}\n      >\n        <Accordion title=\"Title\">{text}</Accordion>\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Accordion/Accordion.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=60299-60817",keywords:["accordion","expand","collapse","panel","faq"]},{name:"AppCommonsProvider",modulePath:"componentsV2/AppCommonsProvider",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"AppCommonsProvider",specifier:"@corva/ui/componentsV2/AppCommonsProvider/AppCommonsProvider",form:"named",exportName:"AppCommonsProvider"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isBrowserFullscreen",type:"boolean",required:false,description:""},{name:"enterBrowserFullscreen",type:"() => void",required:false,description:""},{name:"exitBrowserFullscreen",type:"() => void",required:false,description:""},{name:"isSeparateWindow",type:"boolean",required:false,description:""},{name:"openSeparateWindow",type:"() => void",required:false,description:""},{name:"closeSeparateWindow",type:"() => void",required:false,description:""},{name:"setSeparateWindowTitle",type:"(title: string) => void",required:false,description:""},{name:"maximized",type:"boolean",required:true,description:""},{name:"appId",type:"number",required:true,description:""},{name:"app",type:"App",required:true,description:""},{name:"appSettings",type:"AppSettings",required:false,description:""},{name:"onSettingChange",type:"(key: string, value: unknown) => void",required:true,description:""},{name:"onSettingsChange",type:"(value: unknown) => void",required:true,description:""},{name:"well",type:"Well",required:false,description:""},{name:"rig",type:"Asset",required:false,description:""},{name:"fracFleet",type:"FracFleet",required:false,description:""},{name:"interventionUnit",type:"InterventionUnit",required:false,description:""},{name:"wells",type:"Well[]",required:false,description:""},{name:"dashboardMeta",type:"AppDashboardMeta",required:false,description:""},{name:"appHeadersV3Enabled",type:"boolean",required:false,description:""},{name:"isNonIsolatedApp",type:"boolean",required:false,description:""},{name:"disableAppAssetSelection",type:"boolean",required:false,description:""},{name:"isMultiRig",type:"boolean",required:false,description:""},{name:"currentUser",type:"User",required:false,description:""},{name:"globalOffsetWells",type:"GlobalOffsetWell[]",required:false,description:""},{name:"globalOffsetWellsVersion",type:"number",required:false,description:""},{name:"globalOffsetWellsToken",type:"number",required:false,description:""},{name:"isExpanded",type:"boolean",required:false,description:"True in any of the three modes: dashboard maximize, browser fullscreen, separate window"},{name:"setMaximized",type:"(maximized: boolean) => void",required:true,description:""},{name:"appData",type:"unknown",required:false,description:""},{name:"layoutEnvironment",type:"({ type?: string } & Record<string, unknown>) | null",required:false,description:""},{name:"appSettingsComponent",type:"ComponentType<any>",required:false,description:""},{name:"toggleAnnotationsList",type:"() => void",required:false,description:""},{name:"onHelpCenterClick",type:"() => void",required:false,description:""},{name:"secondaryMenuItems",type:"{ title: ReactNode; onClick?: () => void; icon?: ReactNode }[]",required:false,description:""},{name:"isInsideNewMobileApp",type:"boolean",required:false,description:""},{name:"reloadApp",type:"() => void",required:false,description:""},{name:"onAppRemove",type:"AppCommonsContextTypeInternal['removeApp']",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppCommonsProvider/AppCommonsProvider.tsx",keywords:["appcommonsprovider"]},{name:"AppContainer",modulePath:"componentsV2/AppContainer",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppContainer",specifier:"@corva/ui/componentsV2",exportName:"AppContainer"},category:"v2",description:"A container component for an app. Provides needed CSS containment for header/footer responsivity and styling. Needs a container with set height to work properly.\n\n`ref` points to root element",agentSummary:"App shell with header, content and footer slots plus the containment AppHeader relies on. Needs App Commons context and a set-height parent.",isExperimental:true,isDeprecated:false,props:[{name:"header",type:"ReactNode",required:false,description:"App header, usually `AppHeader`"},{name:"children",type:"ReactNode",required:false,description:"App content"},{name:"footer",type:"ReactNode",required:false,description:"App footer, usually `AppFooter`"},{name:"elementsClassNames",type:"Partial<{\n    header: string;\n    footer: string;\n    content?: string;\n  }>",required:false,description:"An escape hatch to tweak styling of internal elements"},{name:"panels",type:"Record<string, PanelConfig>",required:false,description:"Config object for standard app panels"},{name:"settingsInitiallyPinned",type:"boolean",required:false,description:""},{name:"settingsPinningEnabled",type:"boolean",required:false,description:""},{name:"settingsHeaderControls",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Context>\n    <AppContainer {...props} />\n  </Context>"},{name:"FullExample",description:"",code:"// Mimicking DevCenterAppContainer's context\n  <Context>\n    <AppContainer\n      header={<AppHeader />}\n      footer={\n        <AppFooter\n          asset={{\n            asset_id: 59241352,\n            name: 'Some asset',\n          }}\n          lastUpdate={Math.floor(new Date().getTime() / 1000)}\n        />\n      }\n    >\n      Some content\n    </AppContainer>\n  </Context>"},{name:"MaximizedApp",description:"Component automatically adjusts its header container to accommodate close button when app is maximized",code:"{\n  const app = (\n    <AppContainer\n      header={\n        <SbPlaceholder style={{ padding: 0 }}>\n          <AppHeader />\n        </SbPlaceholder>\n      }\n      footer={\n        <SbPlaceholder style={{ padding: 0, display: 'block' }}>\n          <AppFooter\n            asset={{\n              asset_id: 59241352,\n              name: 'Some asset',\n            }}\n            lastUpdate={Math.floor(new Date().getTime() / 1000)}\n          />\n        </SbPlaceholder>\n      }\n    >\n      <SbPlaceholder style={{ padding: 0, textAlign: 'left' }}>Some content</SbPlaceholder>\n    </AppContainer>\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Context appName=\"Regular\" crossLines={false}>\n        {app}\n      </Context>\n      <Context appName=\"Maximized\" crossLines={false} maximized>\n        {app}\n      </Context>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppContainer/AppContainer.tsx",keywords:["appcontainer","container","component","provides","needed","containment","header","footer","responsivity","styling","needs"]},{name:"AppDqPopover",modulePath:"componentsV2/AppDqPopover",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"AppDqPopover",specifier:"@corva/ui/componentsV2/AppDqPopover/AppDqPopover",form:"named",exportName:"AppDqPopover"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"HTMLElement | null",required:false,description:""},{name:"placement",type:"ComponentProps<typeof Popover>['placement']",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""},{name:"alertsData",type:"ReturnType<typeof useWellnessAlerts>['wellnessAlerts']['alertsData']",required:false,description:""},{name:"contentRef",type:"Ref<HTMLDivElement>",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppDqPopover/AppDqPopover.tsx",keywords:["appdqpopover"]},{name:"AppFooter",modulePath:"componentsV2/AppFooter",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppFooter",specifier:"@corva/ui/componentsV2",exportName:"AppFooter"},category:"v2",description:"Application footer. DataQuality Popover is described [here](https://www.figma.com/design/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=83011-88407)",agentSummary:"Data quality, Last Update and warning footer. Needs App Commons context; AppContainer hides its footer slot when App Headers V3 is enabled.",isExperimental:true,isDeprecated:false,props:[{name:"lastUpdate",type:"number | string | Date",required:false,description:"Unix timestamp (no milliseconds), JS timestamp (with milliseconds), a string in ISO-8601 format, or a Date object of the last update"},{name:"asset",type:"Asset",required:false,description:"Needed for data quality"},{name:"multiRigAssets",type:"Asset[]",required:false,description:"Needed for data quality"},{name:"loadDqData",type:"boolean",required:false,description:"Controls initial load of alerts: otherwise the alerts will be loaded only if App ID is in the whitelist"},{name:"showWarning",type:"boolean",required:false,description:"Shows \"Recommendations may be incorect...\" warning"},{name:"warningMessage",type:"ReactNode",required:false,description:"Warning message to be shown"},{name:"dqData",type:"ReturnType<typeof useWellnessAlerts>",required:false,description:"An escape hatch for when you want to use DQ data in your app, and don't want to load it twice"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"// Mimicking DevCenterAppContainer's context\n  <AppCommonsProvider\n    maximized={false}\n    appId={238}\n    app={{}}\n    appSettings={{}}\n    onSettingChange={() => {}}\n    onSettingsChange={() => {}}\n    setMaximized={() => {}}\n  >\n    <AppFooter {...props} />\n  </AppCommonsProvider>"},{name:"WithWarningMessage",description:"You can display a waring message by using the `showWarning` and `warningMessage` props. `AppFooter` automatically detects if message overflows and hides it in an icon's tooltip if needed.\n\nUse `AppFooter.defaultWarningMessage` property to construct your own message, based on the default one",code:"<AppCommonsProvider\n    maximized={false}\n    appId={238}\n    app={{}}\n    appSettings={{}}\n    onSettingChange={() => {}}\n    onSettingsChange={() => {}}\n    setMaximized={() => {}}\n  >\n    <Grid>\n      <Grid.Cell>\n        <AppFooter showWarning />\n      </Grid.Cell>\n      <Grid.Cell>\n        <AppFooter showWarning warningMessage=\"With custom message\" />\n      </Grid.Cell>\n      <Grid.Cell>\n        <AppFooter\n          showWarning\n          warningMessage={`${AppFooter.defaultWarningMessage}. With custom message added`}\n        />\n      </Grid.Cell>\n      <Grid.Cell />\n    </Grid>\n  </AppCommonsProvider>"},{name:"LastUpdateFormats",description:"You can pass `lastUpdate` as a number, string, or a `Date` object",code:"{\n  const date = new Date();\n\n  return (\n    <AppCommonsProvider\n      maximized={false}\n      appId={238}\n      app={{}}\n      appSettings={{}}\n      onSettingChange={() => {}}\n      onSettingsChange={() => {}}\n      setMaximized={() => {}}\n    >\n      <SbColumn alignItems=\"stretch\">\n        {/* Unix timestamp */}\n        <AppFooter lastUpdate={Math.ceil(date.getTime() / 1000)} />\n        {/* JS timestamp (with milliseconds) */}\n        <AppFooter lastUpdate={date.getTime()} />\n        {/* ISO string */}\n        <AppFooter lastUpdate={date.toISOString()} />\n        {/* Date object */}\n        <AppFooter lastUpdate={date} />\n      </SbColumn>\n    </AppCommonsProvider>\n  );\n}"},{name:"WithExternalData",description:"If you use data quality data in your app and don't want to load it twice, you can pass it as a `dqData` prop",code:"{\n  return (\n    <AppCommonsProvider\n      maximized={false}\n      appId={238}\n      app={{}}\n      appSettings={{}}\n      onSettingChange={() => {}}\n      onSettingsChange={() => {}}\n      setMaximized={() => {}}\n    >\n      <SbColumn alignItems=\"stretch\">\n        <AppFooter dqData={okData} />\n        <AppFooter dqData={errorData} />\n      </SbColumn>\n    </AppCommonsProvider>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppFooter/AppFooter.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=97872-7741",keywords:["appfooter","application","footer","dataquality","popover","described","here"]},{name:"AppHeader",modulePath:"componentsV2/AppHeader",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppHeader",specifier:"@corva/ui/componentsV2",exportName:"AppHeader"},category:"v2",description:"App header component. Must be used inside `<AppContainer/>` to have proper responsiveness.\n\nReceives most of its data from `<DevCenterAppContainer/>`'s context.",agentSummary:"App top bar: app name, version controls, asset chips, Pad Mode select. Needs App Commons context and AppContainer; the V1 AppHeader takes data as props.",isExperimental:true,isDeprecated:false,props:[{name:"logo",type:"string | ReactElement",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"Used for offset wells, etc"},{name:"padModeDisabled",type:"boolean",required:false,description:"Disables Pad Mode select for completions"},{name:"padModeWells",type:"ReturnType<typeof useAppCommons>['wells']",required:false,description:"Override wells for Pad Mode Selector"},{name:"onPadModeChange",type:"(value?: any) => void",required:false,description:"Override change handler for Pad Mode Selector. Useful when pad mode change should also change something else in settings or app's internal store\n\n`onSettingChange` from `useAppCommons` hook is used by default"},{name:"elementsClassNames",type:"{\n    title?: string;\n    additional?: string;\n    additionalControls?: string;\n    chips?: string;\n    buttons?: string;\n    versionSelect?: string;\n    titleControls?: string;\n    actions?: string;\n  }",required:false,description:"An escape hatch to tweak the styling of internal elements\n\n`actions`, `buttons`, `titleControls` and `versionSelect` are for *V3 only*"},{name:"title",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"rightSideContent",type:"ReactNode",required:false,description:""},{name:"additionalControls",type:"ReactNode",required:false,description:"**(V3 only)** Place for Offset Wells, etc"},{name:"asset",type:"Asset | Asset[]",required:false,description:"**(V3 only)** Asset for data quality alerts"},{name:"dqData",type:"UseWellnessAlertsReturnType",required:false,description:"**(V3 only)** An escape hatch for when you want to use DQ data in your app, and don't want to load it twice"},{name:"lastUpdate",type:"number | string | Date",required:false,description:"**(V3 only)** Unix timestamp (no milliseconds), JS timestamp (with milliseconds), a string in ISO-8601 format, or a Date object of the last update"},{name:"showComments",type:"boolean",required:false,description:"**(V3 only)** Shows \"Add Comment\" button"},{name:"additionalActions",type:"AdditionalAction[]",required:false,description:"**(V3 only)** List of additional actions to show as buttons on the right side"},{name:"titleControls",type:"ReactNode",required:false,description:"**(V3 only)** Used to put some controls alongside title"},{name:"titleControlsPosition",type:"'right' | 'left'",required:false,description:"**(V3 only)** Title controls position",enumValues:["right","left"]},{name:"disableSettings",type:"boolean",required:false,description:"**(V3 only)** Disables settings button"},{name:"showAssetChips",type:"boolean",required:false,description:"**(V3 only)** Shows asset chips if true"},{name:"disableAssetSelector",type:"boolean",required:false,description:"**(V3 only)** Disables asset selector"},{name:"titleMenuActions",type:"TitleMenuAction[]",required:false,description:"**(V3 only)** Additional actions to be shown in title dropdown menu"},{name:"responsivenessConfig",type:"AppHeaderV3Props['responsivenessConfig']",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ContextWrapper app={app} {...entities}>\n    <AppHeader {...props} />\n  </ContextWrapper>"},{name:"VersionBadges",description:"Component displays an appropriate badge next to app's name depending on `app.package.label`",code:"{\n  const prodApp = structuredClone(app);\n  if (prodApp.package) {\n    prodApp.package.label = PACKAGE_LABELS.PROD;\n  }\n  const betaApp = structuredClone(app);\n  if (betaApp.package) {\n    betaApp.package.label = PACKAGE_LABELS.BETA;\n  }\n  const devApp = structuredClone(app);\n  if (devApp.package) {\n    devApp.package.label = PACKAGE_LABELS.DEV;\n  }\n  const versionedApp = structuredClone(app);\n  if (versionedApp.package) {\n    versionedApp.package.label = undefined;\n  }\n  const longVersionApp = structuredClone(app);\n  if (longVersionApp.package) {\n    longVersionApp.package.label = undefined;\n    longVersionApp.package.version = 'Some-long-version-name-probably-an-app-from-a-PR';\n  }\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper app={prodApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={betaApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={devApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={versionedApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={longVersionApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n    </SbColumn>\n  );\n}"},{name:"WithLogo",description:"Use `logo` prop to add a branding logo to component",code:"<ContextWrapper app={app} {...entities}>\n    <AppHeader logo=\"https://www.corva.ai/assets/Delta-Corva_White.png\" />\n  </ContextWrapper>"},{name:"Completions",description:"Component automatically detects app's segment to display asset chips & Pad Mode select if needed",code:"{\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'App with a fairly long name that will be truncated at some point';\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        appSettings={{\n          settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n        }}\n      >\n        <AppHeader>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        well={undefined}\n        appSettings={{\n          settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n        }}\n      >\n        <AppHeader>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        well={undefined}\n        appSettings={{ settingsByAsset: { 'pad--1230': { mode: 'pad' } } }}\n      >\n        <AppHeader>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        well={undefined}\n        appSettings={{\n          settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n        }}\n      >\n        <AppHeader rightSideContent={<div>Right Content</div>}>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n    </SbColumn>\n  );\n}"},{name:"WithCustomPadWells",description:"Use `padModeWells` prop to provide a pad mode selector options, different from the default ones",code:"{\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'Completions App';\n\n  const padModeWells = entities?.wells?.map((well, index) => ({\n    ...well,\n    name: `Custom well ${index}`,\n  }));\n\n  return (\n    <ContextWrapper app={completionsApp} {...entities} well={undefined}>\n      <SbColumn alignItems=\"stretch\">\n        <AppHeader />\n        <AppHeader padModeWells={padModeWells} />\n      </SbColumn>\n    </ContextWrapper>\n  );\n}"},{name:"WithCustomPadModeChangeHandler",description:"Use `onPadModeChange` prop to provide a custom pad mode change handler. Note that it is called *instead of* original `onSettingChange`",code:"{\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'Completions App';\n\n  return (\n    <ContextWrapper app={completionsApp} {...entities} well={undefined}>\n      <AppHeader\n        onPadModeChange={value =>\n          // eslint-disable-next-line no-alert\n          alert(`Custom Pad Mode Change Handler\\n\\n${JSON.stringify(value)}`)\n        }\n      />\n    </ContextWrapper>\n  );\n}"},{name:"HiddenChips",description:"Component hides its asset chips depending on dashboard meteadata: no chips on single-asset dashboard, only well chips if there are several wells selected, all chips are shown otherwise.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper\n        app={{ ...app, name: 'App on single-asset dashboard' }}\n        {...entities}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n      >\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper\n        app={{ ...app, name: 'App on single-asset dashboard with multiple wells' }}\n        {...entities}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: true }}\n      >\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper\n        app={{ ...app, name: 'App on multi-asset dashboard' }}\n        {...entities}\n        dashboardMeta={{ isMultiAsset: true, isMultiWell: false }}\n      >\n        <AppHeader />\n      </ContextWrapper>\n    </SbColumn>\n  );\n}"},{name:"WithCustomTitle",description:"You can use the `title` prop to provide a custom title",code:"<ContextWrapper app={app} {...entities}>\n    <AppHeader\n      title={\n        <>\n          Custom <u>title</u> goes here\n        </>\n      }\n    />\n  </ContextWrapper>"},{name:"Responsiveness",description:"Component needs to be a child of `<AppContainer/>` to be properly responsive: `<AppContainer/>` provides CSS containment on which this component relies for its own responsiveness.\n\nSee [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) for more info.",code:"{\n  const min = 375;\n  const max = 980;\n  const [width, setWidth] = useState(max);\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'Completions App with a long name that will be truncated';\n  completionsApp.package = {\n    ...completionsApp.package,\n    label: PACKAGE_LABELS.DEV,\n  };\n  const completionsAppWithLongVersion = structuredClone(completionsApp);\n  completionsAppWithLongVersion.package = {\n    ...completionsApp.package,\n    label: undefined,\n    version: 'Some-long-and-probably-in-development-version',\n  };\n  const appWithBadge = structuredClone(app);\n  appWithBadge.package = {\n    ...completionsApp.package,\n    label: PACKAGE_LABELS.DEV,\n  };\n\n  return (\n    <div style={{ margin: '0 -30px' }}>\n      <SbColumn>\n        {/* TODO use own slider */}\n        <div style={{ width: `${max - min}px` }}>\n          <Slider\n            value={width}\n            onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n            min={min}\n            max={max}\n          />\n        </div>\n\n        <div>Size: {width}px</div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsApp}\n            {...entities}\n            appSettings={{\n              settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n            }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsApp}\n            {...entities}\n            well={undefined}\n            appSettings={{\n              settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n            }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsApp}\n            {...entities}\n            well={undefined}\n            appSettings={{ settingsByAsset: { 'pad--1230': { mode: 'pad' } } }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsAppWithLongVersion}\n            {...entities}\n            well={undefined}\n            appSettings={{ settingsByAsset: { 'pad--1230': { mode: 'pad' } } }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper app={appWithBadge} {...entities}>\n            <AppContainer\n              header={\n                <AppHeader logo={logo}>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper app={appWithBadge} {...entities}>\n            <AppContainer header={<AppHeader logo={logo} />} />\n          </ContextWrapper>\n        </div>\n      </SbColumn>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppHeader/AppHeader.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=97792-2751",keywords:["appheader","header","component","must","used","inside","appcontainer","have","proper","responsiveness","receives"]},{name:"AppPanel",modulePath:"componentsV2/AppPanel",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppPanel",specifier:"@corva/ui/componentsV2",exportName:"AppPanel"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppPanel/AppPanel.tsx",keywords:["apppanel"]},{name:"AppSettings",modulePath:"componentsV2/AppSettings",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"AppSettings",specifier:"@corva/ui/componentsV2/AppSettings/AppSettings",form:"named",exportName:"AppSettings"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppSettings/AppSettings.tsx",keywords:["appsettings"]},{name:"AppSettingsDivider",modulePath:"componentsV2/AppSettingsDivider",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppSettingsDivider",specifier:"@corva/ui/componentsV2",exportName:"AppSettingsDivider"},category:"v2",description:"Common divider for settings blocks in `<AppHeader/>` component",isExperimental:true,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<AppSettingsDivider {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppSettingsDivider/AppSettingsDivider.tsx",keywords:["appsettingsdivider","common","divider","settings","blocks","appheader","component"]},{name:"Autocomplete",modulePath:"componentsV2/Autocomplete",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Autocomplete",specifier:"@corva/ui/componentsV2",exportName:"Autocomplete"},category:"v2",description:"This component is deprecated, use `AutocompleteNext` instead.\n\nA select/autocomplete/search with options component.\n\nProvides generic `AutocompleteProps<OptionType, Multiple>` and `AutocompleteChangeHandler<OptionType, Multiple>` types to simplify typing:\n\n```ts\nconst handler = useCallback<AutocompleteChangeHandler<Option>>(/* snip */); // For single select (default)\nconst handler = useCallback<AutocompleteChangeHandler<Option, true>>(/* snip */); // For multi select\n\n```\n\nYou can see usage examples in stories below",agentSummary:"Searchable single or multi select over id/title options. Same base as AutocompleteNext but keeps the legacy type and spacing props instead of size and labelPlacement.",isExperimental:false,isDeprecated:true,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{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 false | undefined ? 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:"TextInputNextProps['status']",required:false,description:""},{name:"message",type:"TextInputNextProps['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:"TextInputProps['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:"useOnlyOptionButton",type:"boolean",required:false,description:"If `multiple === true` shows a \"Select Only\" button on option that selects only the corresponding option"},{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:"popperProps",type:"Partial<AutocompletePopperProps>",required:false,description:"Escape hatch to customize dropdown popper behavior.\n`open`, `anchorEl`, and `children` are controlled internally."},{name:"type",type:"'default' | 'search'",required:false,description:"",enumValues:["default","search"]},{name:"onOpen",type:"() => void",required:false,description:"Called when the dropdown is opened"},{name:"onClose",type:"(reason: MuiAutocompleteCloseReason) => void",required:false,description:"Called when the dropdown is closed"},{name:"listboxComponent",type:"ComponentType<HTMLAttributes<HTMLElement>>",required:false,description:"Custom listbox component for rendering options (e.g., virtualized list)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<number[]>([]);\n\n  return (\n    <Autocomplete\n      {...props}\n      options={options}\n      value={value}\n      onChange={(newValue, reason, event) => {\n        props.onChange?.(newValue as never, reason, event);\n        // These type castings is generally not needed, Autocomplete will determine its type based on `multiple` prop\n        // Which generally should be statically analyzable\n        if (newValue instanceof Array) {\n          setValue((newValue as Option[]).map(({ id }) => id));\n        } else if (newValue) {\n          setValue([(newValue as Option)?.id]);\n        } else {\n          setValue([]);\n        }\n      }}\n      filterOptions={undefined}\n    />\n  );\n}"},{name:"Types",description:"Component supports 2 visual styles, controlled with the `type` prop.\n\nPlease note, that `label` prop is ignored for `search` type",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Default\"\n        type=\"default\"\n      />\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Search\"\n        placeholder=\"Search\"\n        prefix={<SearchOne />}\n        showPopupIcon={false}\n        type=\"search\"\n      />\n    </SbColumn>\n  );\n}"},{name:"OptionsSize",description:"Component supports several option sizes, controlled through `optionSize` prop:\n\n- `medium` (default)\n- `large`",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Medium\"\n        optionSize=\"medium\"\n      />\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Large\"\n        optionSize=\"large\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Single",description:"Single-option is the default behaviour.",code:"{\n  const [value, setValue] = useState<number>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return <Autocomplete options={options} value={value} onChange={onChange} label=\"Single\" />;\n}"},{name:"WithObjectsAsValue",description:"You can use objects in `value` prop.\n\n⚠️ Be wary of mixing `T`s and `T['id']`s in `value`: due to [TS bug](https://github.com/microsoft/TypeScript/issues/47599) you may need to provide additional typing to `onChange`",code:"{\n  const [valueSingle, setValueSingle] = useState<Option | undefined>(options[2]);\n  const [valueMultiple, setValueMultiple] = useState<(Option | number)[]>([\n    options[0],\n    options[2],\n    9,\n  ]);\n  const [valueMultiple2, setValueMultiple2] = useState<Option[]>([options[0], options[2]]);\n\n  // There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\n  // to have incorrect typing if we mix T and T['id'] in `value`.\n  const onMultipleChange = useCallback<AutocompleteChangeHandler<Option, true>>(\n    v => setValueMultiple(v),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={valueSingle}\n        onChange={setValueSingle}\n        label=\"With objects as value (single)\"\n      />\n\n      <Autocomplete\n        multiple\n        options={options}\n        value={valueMultiple}\n        onChange={onMultipleChange}\n        label=\"With objects as value (multiple, mixed objects and ids)\"\n      />\n\n      <Autocomplete\n        multiple\n        options={options}\n        value={valueMultiple2}\n        onChange={setValueMultiple2}\n        label=\"With objects as value (multiple, pure)\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Multiple",description:"Pass `multiple` prop to make component be able to select multiple values.\n\nUse `useAllOption` prop to add a special \"All\" option that allows user to quickly select all options. This option will be visible only if there are several options to choose from",code:"{\n  const [value, setValue] = useState<number[]>([1]);\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete multiple options={options} value={value} onChange={onChange} label=\"Multiple\" />\n      <Autocomplete\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" option'}\n        useAllOption\n      />\n      <Autocomplete\n        multiple\n        options={options.slice(0, 1)}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" and only 1 option'}\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"MultipleWithCustomSelectedRender",description:"Use `renderSelected` prop to customize how the selected values are rendered.\n\nBy default the component displays the selected item's title, \"X Selected\", or \"All\", depending on its value",code:"<SbColumn alignItems=\"stretch\">\n    <Autocomplete\n      multiple\n      options={options}\n      value={options}\n      onChange={() => {}}\n      label=\"Default multiple - all selected\"\n    />\n    <Autocomplete\n      multiple\n      options={options}\n      value={[1, 2, 3]}\n      onChange={() => {}}\n      label=\"Default multiple - some selected\"\n    />\n    <Autocomplete\n      multiple\n      options={options}\n      value={[1]}\n      onChange={() => {}}\n      label=\"Default multiple - one selected\"\n    />\n    <Autocomplete\n      multiple\n      options={options}\n      value={[1]}\n      onChange={() => {}}\n      label=\"Multiple with custom value render\"\n      renderSelected={data => {\n        if (data.length === 0) {\n          return null;\n        }\n\n        return (\n          <>\n            <Chip onDelete={data[0].onDelete} size=\"small\" type=\"outlined\">\n              {data[0].option.title}\n            </Chip>\n            {data.length > 1 && ` +${data.length - 1}`}\n          </>\n        );\n      }}\n    />\n  </SbColumn>"},{name:"Empty",description:"Use `noOptionsMessage` option to customize the message that is shown when there are no options to select",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete label=\"Empty\" onChange={() => {}} />\n      <Autocomplete\n        label=\"Empty with custom empty message\"\n        noOptionsMessage={<u>Nobody here but us chickens</u>}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Loading",description:"Use `loading` prop to indicate that some data is being loaded. Note that if there are no options, a custom message will be shown",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Loading State\"\n        loading\n      />\n\n      <Autocomplete\n        options={options.slice(0, 0)}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Empty Loading State\"\n        loading\n      />\n    </SbColumn>\n  );\n}"},{name:"Spacing",description:"As with `TextInput`, the component supports several spacing options:\n\n- `normal` (default)\n- `dense`",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Grid>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Normal\"\n          spacing=\"normal\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Dense\"\n          spacing=\"dense\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Normal\"\n          spacing=\"normal\"\n          placeholder=\"Search\"\n          prefix={<SearchOne />}\n          showPopupIcon={false}\n          type=\"search\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Dense\"\n          spacing=\"dense\"\n          placeholder=\"Search\"\n          prefix={<SearchOne />}\n          showPopupIcon={false}\n          type=\"search\"\n        />\n      </Grid.Cell>\n    </Grid>\n  );\n}"},{name:"OptionPrefix",description:"To display an icon/prefix to the left of the option, pass it as a `prefix` property of the option",code:"{\n  const icons = [ActivitySourceIcon, BroadcastIcon, LineChartIcon, AdjustmentIcon];\n  const optionsWithPrefix = options.slice(0, 4).map((option, index) => {\n    const Icon = icons[index];\n    return { ...option, prefix: <Icon /> };\n  });\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Autocomplete\n      options={optionsWithPrefix}\n      value={value}\n      onChange={value => setValue(value?.id)}\n      label=\"With Prefix\"\n    />\n  );\n}"},{name:"CustomOptionRender",description:"You can control how the option renders by providing the `renderOption` prop.\n\nNote that in this case, you will need to wrap the texts in `<TextMiddleTruncated/>` or `<TextEndTruncated/>`",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"Custom Option Render\"\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"CustomOptionFilter",description:"You can control how the option is filtered by providing the `filterOptions` prop. Useful when you want to add some additional data to the filtering condition.\n\nIn this example, you can also filter by group.",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"Custom Option Filter\"\n      filterOptions={(options, inputValue) =>\n        options.filter(\n          ({ title, group }) =>\n            title.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase()) ||\n            group.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase())\n        )\n      }\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"Disabled",description:"You can control which options are disabled by providing the `getOptionDisabled` prop",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Autocomplete\n      label=\"With disabled options\"\n      options={options}\n      value={value}\n      onChange={option => setValue(option?.id)}\n      getOptionDisabled={option => option.group === 'Great Old Ones'}\n    />\n  );\n}"},{name:"Prefix",description:"You can add a prefix to the component through `prefix` prop.",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"With Prefix\"\n      prefix={<SearchOne />}\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"PopupIconAndClearButton",description:"You can control the existence of \"Clear\" button and \"Popup Icon\" by using `clearable` and `showPopupIcon` props respectively",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        label=\"Default: Clearable, Popup Icon\"\n        value={1}\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label=\"Not Clearable\"\n        value={1}\n        clearable={false}\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label=\"No Popup Icon\"\n        value={1}\n        showPopupIcon={false}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Error",description:"To display the component in an error state, use the `state` prop. You can add a message with a `message` prop",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"With Error\"\n      status=\"error\"\n      message=\"Some error message\"\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"OnInputChange",description:"You can access what user is typing by providing the `onInputChange` prop. Useful for implementing search-like behaviour",code:"{\n  const [value, setValue] = useState<number>();\n  const [loading, setLoading] = useState(false);\n  const [loadedOptions, setLoadedOptions] = useState<typeof options>([]);\n  const currentSearchRef = useRef<string>();\n\n  const onInputChange = useCallback(async (value: string) => {\n    if (!value.trim()) {\n      return;\n    }\n\n    currentSearchRef.current = value;\n    setLoading(true);\n    await new Promise(r => setTimeout(r, 2_000));\n    if (currentSearchRef.current === value) {\n      setLoading(false);\n      const newOptions = options.map(option => ({\n        ...option,\n        title: `${value}: ${option.title}`,\n      }));\n      setLoadedOptions(newOptions);\n    }\n  }, []);\n\n  return (\n    <Autocomplete\n      value={value}\n      onChange={option => setValue(option?.id)}\n      options={loadedOptions}\n      label=\"Searchable\"\n      prefix={<SearchOne />}\n      onInputChange={onInputChange}\n      loading={loading}\n    />\n  );\n}"},{name:"WithGroups",description:"You can group options by providing the `groupBy` prop.\n\nYou can control the render of groups by providing the `renderGroup` prop.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        label=\"With Groups\"\n        value={1}\n        groupBy={option => option.group}\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label={'With Groups, multiselect with \"All\" option'}\n        value={[1]}\n        groupBy={option => option.group}\n        multiple\n        useAllOption\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label=\"With Custom Groups\"\n        value={1}\n        groupBy={option => option.group}\n        renderGroup={({ children, group }) => {\n          return (\n            <div>\n              <div style={{ textAlign: 'center' }}>\n                <Text size={12}>{group}</Text>\n              </div>\n              <ul style={{ padding: 0 }}>{children}</ul>\n            </div>\n          );\n        }}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"DisableFiltering",description:"You can disable option filtering by providing the `disableFilter` prop. In this case, the component will behave as regular `<select/>`",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"No Autocomplete\"\n      value={1}\n      onChange={() => {}}\n      disableFiltering\n    />\n  );\n}"},{name:"Createable",description:"By providing the `onCreate` prop you can add the ability to add user-defined options to the select",code:"{\n  const [ownOptions, setOwnOptions] = useState(options);\n  const [value, setValue] = useState<number[]>([]);\n\n  const createOption = useCallback((title: string) => {\n    const newOption: typeof options[number] = {\n      id: Math.ceil(Math.random() * 1000),\n      title,\n      group: 'User-Created',\n    };\n\n    setValue(oldValue => [newOption.id, ...oldValue]);\n    setOwnOptions(oldValue => [newOption, ...oldValue]);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={ownOptions}\n        label=\"Createable\"\n        value={value[0]}\n        onChange={option => setValue(option ? [option.id] : [])}\n        onCreate={createOption}\n      />\n      <Autocomplete\n        label=\"Createable Multiple\"\n        options={ownOptions}\n        value={value}\n        onChange={options => setValue(options.map(({ id }) => id))}\n        onCreate={createOption}\n        multiple\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"DropdownClassName",description:"You can add a custom class name to a dropdown by using the `dropdownClassName` prop",code:"<Autocomplete\n    options={options}\n    label=\"With custom dropdown styles\"\n    dropdownClassName={styles.customDropdown}\n    onChange={() => {}}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Autocomplete/Autocomplete.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=30021-123203",keywords:["autocomplete","search","typeahead","suggest","filter","component","deprecated","autocompletenext","instead","select","options","provides","generic"]},{name:"Avatar",modulePath:"componentsV2/Avatar",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Avatar",specifier:"@corva/ui/componentsV2",exportName:"Avatar"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"number",required:false,description:""},{name:"name",type:"string",required:false,description:""},{name:"imageSrc",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Avatar {...props} />"},{name:"Sizes",description:"You can controls Avatar's size with `size` prop. Font-size is calculated dynamically based on `size` and the following \"breakpoints\":\n\n```tsx\nconst SizeToFontSizeMap = {\n  0: 0,\n  24: 12,\n  32: 14,\n  40: 16,\n  48: 20,\n  128: 64,\n  200: 80,\n}\n```",code:"{\n  const [size, setSize] = useState(40);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own slider */}\n      <Slider\n        value={size}\n        onChange={(_, value) => setSize(value instanceof Array ? value[0] : value)}\n        min={16}\n        max={300}\n      />\n\n      <div>Size: {size}px</div>\n      <div>Font size: {getFontSize(size)}px</div>\n\n      <Avatar size={size} name=\"Enoch Bowen\" />\n    </SbColumn>\n  );\n}"},{name:"Colors",description:"Avatar displays initials by default, with a background color determined by name",code:"<SbColumn>\n    <SbRow>\n      <Avatar name=\"András Arató\" />\n      <Avatar name=\"Ian Moone\" />\n      <Avatar name=\"Richard C. Mongler\" />\n      <Avatar name=\"Raquel Cantú\" />\n    </SbRow>\n    Available colors:\n    <SbRow>\n      {ColorsArray.map(color => (\n        <div\n          key={color}\n          style={{ background: color, width: '40px', height: '40px', borderRadius: '50%' }}\n        />\n      ))}\n    </SbRow>\n  </SbColumn>"},{name:"WithImage",description:"You can provide `imageSrc` prop to display an image",code:"<Avatar\n    size={40}\n    name=\"András Arató\"\n    imageSrc=\"https://i.kym-cdn.com/entries/icons/facebook/000/016/546/hidethepainharold.jpg\"\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Avatar/Avatar.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=68263-106336",keywords:["avatar","user","profile","image","icon"]},{name:"AvatarGroup",modulePath:"componentsV2/AvatarGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AvatarGroup",specifier:"@corva/ui/componentsV2",exportName:"AvatarGroup"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"Omit<AvatarProps, 'size'>[]",required:false,description:"Array of `<Avatar/>` component props to render"},{name:"size",type:"number",required:false,description:""},{name:"max",type:"number",required:false,description:""},{name:"disableTooltips",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<AvatarGroup {...props} items={items} />"},{name:"Items",description:"`items` prop accepts an array of `<Avatar/>` component's props",code:"<AvatarGroup\n    items={[\n      {\n        name: 'Terry Pratchett',\n        imageSrc:\n          'https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Terry_Pratchett_in_Milan_2007.jpg/800px-Terry_Pratchett_in_Milan_2007.jpg',\n        testId: 'user-123',\n      },\n      {\n        name: 'András Arató',\n        imageSrc: 'https://i.kym-cdn.com/entries/icons/facebook/000/016/546/hidethepainharold.jpg',\n        testId: 'user-321',\n      },\n    ]}\n  />"},{name:"WithoutTooltips",description:"Component automatically provides tooltips for its children. You can disable this by using the `disableTooltips` prop",code:"<AvatarGroup items={items} disableTooltips />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AvatarGroup/AvatarGroup.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=68263-106336",keywords:["avatargroup"]},{name:"BadgeBase",modulePath:"componentsV2/BadgeBase",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"BadgeBase",specifier:"@corva/ui/componentsV2/BadgeBase/BadgeBase",form:"named",exportName:"BadgeBase"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content over which position the badge"},{name:"badge",type:"ReactNode",required:true,description:""},{name:"offsetX",type:"number",required:true,description:""},{name:"offsetY",type:"number",required:true,description:""},{name:"badgeHeight",type:"number",required:true,description:""},{name:"className",type:"string",required:false,description:"Container className"},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeBase/BadgeBase.tsx",keywords:["badgebase","statusbadge","status","badge","status badge"]},{name:"BadgeComment",modulePath:"componentsV2/BadgeComment",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"BadgeComment",specifier:"@corva/ui/componentsV2",exportName:"BadgeComment"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<BadgeComment {...props}>\n    <Avatar name=\"Ian Moone\" size={24} />\n  </BadgeComment>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeComment/BadgeComment.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=98744-14653",keywords:["badgecomment","comment","annotation","note"]},{name:"BadgeCounter",modulePath:"componentsV2/BadgeCounter",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"BadgeCounter",specifier:"@corva/ui/componentsV2",exportName:"BadgeCounter"},category:"v2",description:"A component for displaying a badge over icons/buttons/etc",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content over which position the badge"},{name:"count",type:"number",required:true,description:""},{name:"max",type:"number",required:false,description:"Maximum value after which the plus sign will be shown"},{name:"type",type:"CounterProps['type']",required:false,description:""},{name:"badgeClassName",type:"string",required:false,description:"Badge className"},{name:"offsetX",type:"number",required:false,description:"X offset of badge center from top right corner in pixels"},{name:"offsetY",type:"number",required:false,description:"Y offset of badge center from top right corner in pixels"},{name:"className",type:"string",required:false,description:"Container className"},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<BadgeCounter {...props}>\n    <RemindIcon />\n  </BadgeCounter>"},{name:"UsageWithComplexComponents",description:"Component can be used with complex components like `<ButtonIcon/>` or `<Menu.Item/>`",code:"<SbColumn>\n    <ButtonIcon>\n      <BadgeCounter count={10} type=\"error\">\n        <RemindIcon />\n      </BadgeCounter>\n    </ButtonIcon>\n\n    <Menu.Item\n      prefix={\n        <BadgeCounter count={10} type=\"error\">\n          <RemindIcon />\n        </BadgeCounter>\n      }\n      size=\"large\"\n    >\n      Menu Item\n    </Menu.Item>\n  </SbColumn>"},{name:"OffsetControl",description:"You can fine-tune badge's position with `ofsetX` and `offsetY` props",code:"{\n  const [offsetX, setOffsetX] = useState(0);\n  const [offsetY, setOffsetY] = useState(-1);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own sliders  */}\n      <div>\n        offsetX: {offsetX}\n        <Slider\n          value={offsetX}\n          onChange={(_, value) => setOffsetX(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n      <div>\n        offsetY: {offsetY}\n        <Slider\n          value={offsetY}\n          onChange={(_, value) => setOffsetY(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n\n      <BadgeCounter count={100} max={99} type=\"error\" offsetX={offsetX} offsetY={offsetY}>\n        <SbPlaceholder style={{ height: '200px', width: '100%' }} />\n      </BadgeCounter>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeCounter/BadgeCounter.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59511",keywords:["badgecounter","counter","count","number","indicator","badge","statusbadge","status","status badge","component","displaying","over","icons","buttons"]},{name:"BadgeDot",modulePath:"componentsV2/BadgeDot",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"BadgeDot",specifier:"@corva/ui/componentsV2",exportName:"BadgeDot"},category:"v2",description:"A component for displaying a badge over icons/buttons/etc",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content over which position the badge"},{name:"badgeClassName",type:"string",required:false,description:"Badge className"},{name:"offsetX",type:"number",required:false,description:"X offset of badge center from top right corner in pixels"},{name:"offsetY",type:"number",required:false,description:"Y offset of badge center from top right corner in pixels"},{name:"className",type:"string",required:false,description:"Container className"},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<BadgeDot {...props}>\n    <RemindIcon />\n  </BadgeDot>"},{name:"UsageWithComplexComponents",description:"Component can be used with complex components like `<ButtonIcon/>` or `<Menu.Item/>`",code:"<SbColumn>\n    <ButtonIcon>\n      <BadgeDot>\n        <RemindIcon />\n      </BadgeDot>\n    </ButtonIcon>\n\n    <Menu.Item\n      prefix={\n        <BadgeDot>\n          <RemindIcon />\n        </BadgeDot>\n      }\n      size=\"large\"\n    >\n      Menu Item\n    </Menu.Item>\n  </SbColumn>"},{name:"OffsetControl",description:"You can fine-tune badge's position with `ofsetX` and `offsetY` props",code:"{\n  const [offsetX, setOffsetX] = useState(-3);\n  const [offsetY, setOffsetY] = useState(-2);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own sliders  */}\n      <div>\n        offsetX: {offsetX}\n        <Slider\n          value={offsetX}\n          onChange={(_, value) => setOffsetX(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n      <div>\n        offsetY: {offsetY}\n        <Slider\n          value={offsetY}\n          onChange={(_, value) => setOffsetY(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n\n      <BadgeDot offsetX={offsetX} offsetY={offsetY}>\n        <SbPlaceholder style={{ height: '200px', width: '100%' }} />\n      </BadgeDot>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeDot/BadgeDot.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59511",keywords:["badgedot","dot","status","notification","indicator","statusbadge","badge","status badge","component","displaying","over","icons","buttons"]},{name:"Breadcrumbs",modulePath:"componentsV2/Breadcrumbs",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Breadcrumbs",specifier:"@corva/ui/componentsV2",exportName:"Breadcrumbs"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"{\n    title: ReactNode;\n    to?: string;\n\n    className?: string;\n    testId?: string;\n  }[]",required:true,description:""},{name:"onItemClick",type:"(to?: string) => void",required:false,description:""},{name:"activeIndex",type:"number",required:false,description:""},{name:"showBackIcon",type:"boolean",required:false,description:"Renders a back button before items. Clicking on it will call `onItemClick` with the arguments for the first item"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Breadcrumbs {...props} items={items} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Breadcrumbs/Breadcrumbs.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=30300-122821",keywords:["breadcrumbs","navigation","path","trail","breadcrumb"]},{name:"Button",modulePath:"componentsV2/Button",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Button",specifier:"@corva/ui/componentsV2",exportName:"Button"},category:"v2",description:"Allows users to perform actions. The `ref` is forwarded to the root element.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"type",type:"'primary' | 'secondary' | 'primaryDestructive' | 'secondaryDestructive' | 'tertiary' | 'chart' | 'chartColored'",required:false,description:"Button visual style",enumValues:["primary","secondary","primaryDestructive","secondaryDestructive","tertiary","chart","chartColored"]},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseEnter",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"htmlAttributes",type:"Omit<Partial<ButtonHTMLAttributes<HTMLButtonElement>>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'disabled' | 'children' | 'color'>",required:false,description:"Escape hatch for when you need to override/add attributes to the `<button/>` tag"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Button {...props} />"},{name:"Type",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary`: use for primary/main actions\n- `secondary` (default): use for secondary actions\n- `tertiary`: use for tertiary/additional actions\n- `primaryDestructive`: use for primary/main actions that have a destructive effect (for instance - entity deletion)\n- `secondaryDestructive`: use for secondary destructive actions\n- `chart`: use as chart controls, etc.",code:"<SbColumn>\n    <Button type=\"primary\">Button</Button>\n    <Button type=\"secondary\">Button</Button>\n    <Button type=\"tertiary\">Button</Button>\n    <Button type=\"primaryDestructive\">Button</Button>\n    <Button type=\"secondaryDestructive\">Button</Button>\n    <Button type=\"chart\">Button</Button>\n  </SbColumn>"},{name:"Sizes",description:"Adjust the component size using the `size` prop. It supports 3 sizes:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium",code:"<SbColumn>\n    <Button size=\"large\" type=\"primary\">\n      Button\n    </Button>\n    <Button size=\"medium\" type=\"primary\">\n      Button\n    </Button>\n    <Button size=\"small\" type=\"primary\">\n      Button\n    </Button>\n  </SbColumn>"},{name:"WithPrefixSuffix",description:"Use `prefix` and/or `suffix` props to display additional content, usually - an icon, but you can put there anything",code:"<SbColumn>\n    <Button prefix={<ArrowLeftIcon />} size=\"large\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"large\">\n      Button\n    </Button>\n    <Button prefix={<ArrowLeftIcon />} size=\"medium\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"medium\">\n      Button\n    </Button>\n    <Button prefix={<ArrowLeftIcon />} size=\"small\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"small\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"small\" type=\"chart\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"small\" type=\"chartColored\">\n      Button\n    </Button>\n  </SbColumn>"},{name:"WithHTMLAttributes",description:"In some cases there is a need to pass raw HTML attributes to a button, as an escape hatch. Use `htmlAttributes` prop to provide them",code:"<Button\n    htmlAttributes={{\n      type: 'submit',\n      form: 'someBogusFormIdAsAnExample',\n      value: 'value',\n      name: 'name',\n    }}\n  >\n    type=\"submit\"\n  </Button>"},{name:"ChartButtonMenu",description:"You can use `chartColored` and `chart` types to implement a menu/popover with opened state",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button\n        ref={anchorRef}\n        onClick={() => setIsOpen(true)}\n        type={isOpen ? 'chartColored' : 'chart'}\n        size=\"small\"\n      >\n        Click me!\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        Menu content here\n      </Menu>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Button/Button.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59490&node-type=frame",keywords:["button","action","click","submit","trigger","cta","allows","users","perform","actions","forwarded","root","element"]},{name:"ButtonIcon",modulePath:"componentsV2/ButtonIcon",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ButtonIcon",specifier:"@corva/ui/componentsV2",exportName:"ButtonIcon"},category:"v2",description:"Allows users to perform actions. The `ref` is forwarded to the root element.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"ariaLabel",type:"AriaAttributes['aria-label']",required:false,description:"Accessible name for the icon-only button."},{name:"ariaLabelledBy",type:"AriaAttributes['aria-labelledby']",required:false,description:""},{name:"ariaDescribedBy",type:"AriaAttributes['aria-describedby']",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseDown",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseUp",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"size",type:"'xs' | 'small' | 'medium' | 'large'",required:false,description:"",enumValues:["xs","small","medium","large"]},{name:"type",type:"'primary' | 'secondary' | 'tertiary' | 'secondaryBg' | 'tertiaryBg'",required:false,description:"Button visual style",enumValues:["primary","secondary","tertiary","secondaryBg","tertiaryBg"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"isActive",type:"boolean",required:false,description:"Holds the hover treatment while the menu or popover this opens is on screen."},{name:"disableFocusState",type:"boolean",required:false,description:""},{name:"onMouseEnter",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Icon-only buttons must have an accessible name. Use `ariaLabel` when there is no visible element that can be referenced by `ariaLabelledBy`.",code:"<ButtonIcon {...props}>\n    <SettingTwoIcon />\n  </ButtonIcon>"},{name:"Sizes",description:"Component supports 3 sizes through `size` prop:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium\n- `xs`: even smaller",code:"<SbColumn>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"large\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"medium\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"small\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"xs\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"},{name:"Type",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary`: use primarily as a FAB\n- `secondary`: use for important actions\n- `tertiary` (default): use for regular actions\n- `secondaryBg`: secondary, with a background\n- `tertiaryBg`: tertiary, with a background",code:"<SbColumn>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"primary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"secondary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"tertiary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"secondaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"},{name:"Active",description:"A button that opens a menu keeps the hover treatment while that menu is on screen: pass `isActive`, since the pointer has moved on to the menu and `:hover` no longer holds.",code:"<SbColumn>\n    <ButtonIcon ariaLabel=\"More actions\" type=\"tertiary\" isActive>\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"More actions\" type=\"tertiaryBg\" isActive>\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonIcon/ButtonIcon.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=11980-17002",keywords:["buttonicon","iconbutton","icon","button","icon button","allows","users","perform","actions","forwarded","root","element"]},{name:"ButtonLive",modulePath:"componentsV2/ButtonLive",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ButtonLive",specifier:"@corva/ui/componentsV2",exportName:"ButtonLive"},category:"v2",description:"Used in apps in which we can enable real-time mode. This button indicates that real-time mode is not enabled, to indicate real-time data updates, use the `<IndicatorLive/>` component",agentSummary:"Go-to-Live button shown while real-time mode is off, with preset Live label and tooltip. Once live is on, render IndicatorLive instead.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"tooltip",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ButtonLive {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`\n",code:"<SbColumn>\n    <ButtonLive size=\"large\" />\n    <ButtonLive size=\"medium\" />\n    <ButtonLive size=\"small\" />\n  </SbColumn>"},{name:"Tooltip",description:"Component has an integrated tooltip, the default text can be changed through `tooltip` prop",code:"<SbColumn>\n    <ButtonLive />\n    <ButtonLive tooltip=\"Some custom tooltip\" />\n  </SbColumn>"},{name:"WithIndicator",description:"Use `<IndicatorLive/>` when switching to \"real-time\" mode",code:"{\n  const [isLive, setIsLive] = useState(false);\n\n  return (\n    <SbColumn>\n      <Button type=\"tertiary\" onClick={() => setIsLive(false)}>\n        Reset\n      </Button>\n\n      {isLive ? (\n        <IndicatorLive state=\"live\" type=\"buttonLike\" />\n      ) : (\n        <ButtonLive onClick={() => setIsLive(true)} />\n      )}\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonLive/ButtonLive.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=37968-137488",keywords:["buttonlive","used","apps","which","enable","real-time","mode","button","indicates","enabled","indicate"]},{name:"ButtonText",modulePath:"componentsV2/ButtonText",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ButtonText",specifier:"@corva/ui/componentsV2",exportName:"ButtonText"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"type",type:"'primary' | 'secondary'",required:false,description:"",enumValues:["primary","secondary"]},{name:"size",type:"'xs' | 'small' | 'medium' | 'large'",required:false,description:"",enumValues:["xs","small","medium","large"]},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ButtonText {...props} />"},{name:"Type",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary`: use for primary/main actions\n- `secondary` (default): use for secondary actions",code:"<SbColumn>\n    <ButtonText type=\"primary\">Primary</ButtonText>\n    <ButtonText type=\"secondary\">Secondary</ButtonText>\n  </SbColumn>"},{name:"Sizes",description:"Adjust the component size using the `size` prop. It supports 4 sizes:\n\n- `large`\n- `medium` (default)\n- `small`\n- `xs`",code:"<SbColumn>\n    <ButtonText size=\"large\">Large</ButtonText>\n    <ButtonText size=\"medium\">Medium</ButtonText>\n    <ButtonText size=\"small\">Small</ButtonText>\n    <ButtonText size=\"xs\">XS (Extra Small)</ButtonText>\n  </SbColumn>"},{name:"WithPrefixSuffix",description:"Use `prefix` and/or `suffix` props to display additional content, usually - an icon, but you can put there anything",code:"<Grid cols={2}>\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"large\">\n        Large\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"large\">\n        Large\n      </ButtonText>\n    </Cell>\n\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"medium\">\n        Medium\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"medium\">\n        Medium\n      </ButtonText>\n    </Cell>\n\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"small\">\n        Small\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"small\">\n        Small\n      </ButtonText>\n    </Cell>\n\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"xs\">\n        XS (Extra Small)\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"xs\">\n        XS (Extra Small)\n      </ButtonText>\n    </Cell>\n  </Grid>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonText/ButtonText.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=36517-144850",keywords:["buttontext"]},{name:"ChartAxisExtreme",modulePath:"componentsV2/ChartAxisExtreme",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChartAxisExtreme",specifier:"@corva/ui/componentsV2",exportName:"ChartAxisExtreme"},category:"v2",description:"Control for editing axis' extremes in Highcharts charts.\n\nProvides `ChartAxisExtremeValidator` and `ChartAxisExtremeChangeHandler` utility types to simplify typing",agentSummary:"Overlay to edit one Highcharts axis min or max by typing or dragging; needs a live Axis object.",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"number",required:true,description:""},{name:"onChange",type:"ChartAxisExtremeChangeHandler",required:false,description:""},{name:"formatValue",type:"(value: number) => string | number",required:false,description:""},{name:"axis",type:"Axis",required:true,description:""},{name:"extremeType",type:"AxisExtremeType",required:true,description:""},{name:"validate",type:"ChartAxisExtremeValidator",required:false,description:"Validates possible value on both manual input & drag actions"},{name:"dragDeltaValue",type:"number | ((deltaPixels: number) => number)",required:false,description:"Governs \"sensitivity\" of drag.\nA number indicates how many pixels should a user drag to change axis extreme by 1.\nA function accepts dragged distance in pixels and returns *how much value should change*.\nGenerally, positive input should generate positive output. Can be used in conjunction with `validate` prop to force min/max value when dragging"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Highcharts usually treats axis's extremes as a *suggestion*, and sets actual extremes depending on ticks.\n\nTo override this use `axis.tickPositioner` to force tick positions, or `axis.tickInterval = 0` to disable them altogether. You may need to use custom tick formatter (`axis.labels.formatter`) to account for fractions.\n\nExample of tick positioner:\n\n```tsx\ntickPositioner() {\n  const { min, max } = this.getExtremes();\n  const step = (max - min) / 4; // 5 ticks, 4 intervals\n\n  if (step === 0) {\n    return [];\n  }\n\n  return [min + step, min + 2 * step, min + 3 * step]; // Omitting first and last ticks\n}\n```",code:"{\n  const chartRef = useRef<HighchartsReact | null>(null);\n\n  const [axisExtremes, setAxisExtremes] = useState<{ min: number; max: number }>();\n\n  const chartOptions = useMemo(() => {\n    return {\n      ...rawChartOptionsSingleAxis,\n      chart: {\n        ...rawChartOptionsSingleAxis.chart,\n        events: {\n          redraw() {\n            setAxisExtremes({ min: this.yAxis[0].min || 0, max: this.yAxis[0].max || 0 });\n          },\n        } as Highcharts.ChartEventsOptions,\n      },\n    };\n  }, []);\n\n  const onActualChange = useCallback<ChartAxisExtremeChangeHandler>(\n    (...args) => {\n      onChange?.(...args);\n      const [value, { axis, extremeType }] = args;\n      const { min, max } = axis.getExtremes();\n\n      const newMin = extremeType === 'min' ? value : min;\n      const newMax = extremeType === 'max' ? value : max;\n\n      axis.setExtremes(newMin, newMax, true);\n    },\n    [onChange]\n  );\n\n  return (\n    <div style={{ height: '300px', position: 'relative', width: '100%' }}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              {...rest}\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onActualChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              {...rest}\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onActualChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"AutomaticPositioning",description:"Component positions itself automatically based on which axis object is passed through its `axis` prop.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const options = useMemo(\n    () => ({\n      ...chartOptions,\n      yAxis: {\n        ...chartOptions.yAxis,\n        ...getChartVerticalAxis({ title: 'Y axis 1', opposite: true }),\n      },\n    }),\n    [chartOptions]\n  );\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={options}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"XAxis",description:"Component supports horizontal axes too.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig(true);\n\n  const options = useMemo(\n    () => ({\n      ...chartOptions,\n      xAxis: {\n        ...chartOptions.xAxis,\n        ...getChartHorizontalAxis({ title: 'X axis 1' }),\n      },\n    }),\n    [chartOptions]\n  );\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={options}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.xAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.xAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"WithValidation",description:"You can use `validate` prop to provide constraints for user input & drag actions.\n\nUse `ChartAxisExtremeValidator` utility type to simplify advanced usage.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const validateMin = useCallback<ChartAxisExtremeValidator>(\n    value => value >= -10 && value <= 30,\n    []\n  );\n\n  const validateMax = useCallback<ChartAxisExtremeValidator>(\n    value => value >= 80 && value <= 120,\n    []\n  );\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n              validate={validateMax}\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n              validate={validateMin}\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"SensitivityAndStepControls",description:"You can control drag sensitivity and/or control the value by how much the value changes on drag by using the `dragDeltaValue` prop.\n\nIn this example, value is changed by 10 for each 10 pixels dragged, in increments of 10.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const dragDeltaValue = useCallback((deltaDrag: number) => Math.round(deltaDrag / 10) * 10, []);\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n              dragDeltaValue={dragDeltaValue}\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n              dragDeltaValue={dragDeltaValue}\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"Animations",description:"Component automatically uses chart's animation options. If there's a discrepancy, try setting chart's animation options explicitly",code:"{\n  const [animation, setAnimation] = useState(false);\n\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const chartOptionsWithAnimation = useMemo<typeof chartOptions>(\n    () => ({\n      ...chartOptions,\n      chart: {\n        ...chartOptions.chart,\n        animation: animation\n          ? {\n              duration: 1000,\n            }\n          : false,\n      },\n    }),\n    [animation, chartOptions]\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch\n        size=\"small\"\n        offLabel=\"No animation\"\n        onLabel=\"Long animation\"\n        disableOffState\n        checked={animation}\n        onChange={setAnimation}\n      />\n      <div style={containerStyle}>\n        <ChartWrapper chartRef={chartRef}>\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={chartOptionsWithAnimation}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n          {axisExtremes && chartRef.current && (\n            <>\n              <ChartAxisExtreme\n                axis={chartRef.current.chart.yAxis[0]}\n                value={axisExtremes.max}\n                onChange={onChange}\n                extremeType=\"max\"\n              />\n              <ChartAxisExtreme\n                axis={chartRef.current.chart.yAxis[0]}\n                value={axisExtremes.min}\n                onChange={onChange}\n                extremeType=\"min\"\n              />\n            </>\n          )}\n        </ChartWrapper>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"NoTickPositioner",description:"If you want to use auto-set extremes, you can use `axis.showFirstLabel=false` and `axis.showLastLabel=false` to hide extra labels",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const options = useMemo(() => {\n    const yAxis = {\n      ...(Array.isArray(chartOptions.yAxis) ? chartOptions.yAxis[0] : chartOptions.yAxis),\n      tickPositioner: undefined,\n      showFirstLabel: false,\n      showLastLabel: false,\n    };\n\n    return { ...chartOptions, yAxis };\n  }, [chartOptions]);\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={options}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChartAxisExtreme/ChartAxisExtreme.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=121233-260984&m=dev",keywords:["chartaxisextreme","control","editing","axis","extremes","highcharts","charts","provides","chartaxisextremevalidator","chartaxisextremechangehandler","utility"]},{name:"ChartHelper",modulePath:"componentsV2/ChartHelper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChartHelper",specifier:"@corva/ui/componentsV2",exportName:"ChartHelper"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"placement",type:"'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",required:false,description:"",enumValues:["top","top-start","top-end","bottom","bottom-start","bottom-end"]},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ChartHelper {...props} />"},{name:"UsageWithChartWrapper",description:"",code:"{\n  const chartRef = useRef<HighchartsReact>(null);\n\n  return (\n    <ChartWrapper chartRef={chartRef}>\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={baseOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n      <ChartHelper>\n        Press <Hotkey keys=\"Cmd+Shift+X\" /> to do cool stuff\n      </ChartHelper>\n    </ChartWrapper>\n  );\n}"},{name:"Placement",description:"Component supports several placements through its `placement` prop",code:"{\n  const chartRef = useRef<HighchartsReact>(null);\n  const [placement, setPlacement] = useState<Props['placement']>();\n\n  return (\n    <Grid cols={3}>\n      <Grid.Cell span={1}>\n        <Select\n          options={placementOptions}\n          value={placement}\n          onChange={value => setPlacement(value?.id)}\n          placeholder=\"Default Placement\"\n        />\n      </Grid.Cell>\n      <Grid.Cell>\n        <ChartWrapper chartRef={chartRef}>\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={baseOptions}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n          <ChartHelper placement={placement}>\n            Press <Hotkey keys=\"Cmd+Shift+X\" /> to do stuff\n          </ChartHelper>\n        </ChartWrapper>\n      </Grid.Cell>\n    </Grid>\n  );\n}"},{name:"WithPrefixAndSuffix",description:"You can pass prefix and suffix as `prefix` and `suffix` props respectively.",code:"{\n  const chartRef = useRef<HighchartsReact>(null);\n  return (\n    <ChartWrapper chartRef={chartRef}>\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={baseOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n      <ChartHelper\n        prefix={<InfoIcon />}\n        suffix={\n          <>\n            <Tooltip title=\"Configure something\">\n              <ButtonIcon size=\"xs\">\n                <SettingIcon />\n              </ButtonIcon>\n            </Tooltip>\n\n            <Tooltip title=\"Close helper\">\n              <ButtonIcon size=\"xs\">\n                <CloseSmallIcon />\n              </ButtonIcon>\n            </Tooltip>\n          </>\n        }\n      >\n        Press <Hotkey keys=\"Cmd+A\" /> to do a thing\n      </ChartHelper>\n    </ChartWrapper>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChartHelper/ChartHelper.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=159413-22927&m=dev",keywords:["charthelper"]},{name:"Checkbox",modulePath:"componentsV2/Checkbox",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Checkbox",specifier:"@corva/ui/componentsV2",exportName:"Checkbox"},category:"v2",description:"Checkboxes allow the user to select one or more items from a set. In 90% of cases you'll want to use `<CheckboxGroup />`",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"labelPlacement",type:"'top' | 'bottom' | 'start' | 'end'",required:false,description:"Controls whee the label will be placed",enumValues:["top","bottom","start","end"]},{name:"label",type:"ReactNode",required:false,description:"Label"},{name:"disabled",type:"boolean",required:false,description:""},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"onChange",type:"(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:"Called when a checkbox is checked/unchecked"},{name:"indeterminate",type:"boolean",required:false,description:"Forces checkbox to an indeterminate state. This state is purely visual, `onChange` callback is still called with correct `checked` argument"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [checked, setChecked] = useState(false);\n  return (\n    <Checkbox\n      {...props}\n      checked={checked}\n      onChange={(...args) => {\n        props.onChange?.(...args);\n        setChecked(args[0]);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Checkbox size=\"medium\" label=\"Label\" />\n    <Checkbox size=\"small\" label=\"Label\" />\n  </SbColumn>"},{name:"LabelPlacementAndMargins",description:"Component supports different label positions relative to the checkbox. This is controlled through the `labelPlacement` prop\n\n- `end` (default): to the right\n- `start`: to the left. Use `text-align: right;` on the container for best results\n- `top`\n- `bottom`\n\nNote that the checkbox's active area is slightly shifted from the container",code:"<SbColumn alignItems=\"start\">\n    <SbPlaceholder style={{ ...styleProp, textAlign: 'right' }}>\n      <Checkbox label=\"start\" labelPlacement=\"start\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Checkbox label=\"end\" labelPlacement=\"end\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Checkbox label=\"top\" labelPlacement=\"top\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Checkbox label=\"bottom\" labelPlacement=\"bottom\" />\n    </SbPlaceholder>\n  </SbColumn>"},{name:"Indeterminate",description:"You can make a checkbox \"partially selected\" or \"indeterminate\" by using the `indeterminate` prop. Note that this state is purely visual: the checkbox retains its internal state and the callbacks are still fired with correct values",code:"{\n  const [checked, setChecked] = useState(true);\n  return (\n    <SbColumn>\n      <Checkbox label=\"Label\" indeterminate checked={checked} onChange={setChecked} />\n      <Checkbox label=\"Label\" indeterminate checked={checked} onChange={setChecked} size=\"small\" />\n      <Text>Actual checked state: {String(checked)}</Text>\n    </SbColumn>\n  );\n}"},{name:"InteractiveExample",description:"An interactive example of several checkboxes that control the same value",code:"{\n  const [value, setValue] = useState<('one' | 'other')[]>([]);\n  const toggleValue = (checked: boolean, value: 'one' | 'other') =>\n    setValue(current => (checked ? [...current, value] : current.filter(item => item !== value)));\n\n  return (\n    <SbRow>\n      <Checkbox\n        label=\"One\"\n        checked={value.includes('one')}\n        onChange={checked => toggleValue(checked, 'one')}\n      />\n      <Checkbox\n        label=\"Other\"\n        checked={value.includes('other')}\n        onChange={checked => toggleValue(checked, 'other')}\n      />\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Checkbox/Checkbox.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=71387-72060",keywords:["checkbox","toggle","check","boolean","option","checkboxes","allow","user","select","more","items","cases","want","checkboxgroup"]},{name:"CheckboxGroup",modulePath:"componentsV2/CheckboxGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"CheckboxGroup",specifier:"@corva/ui/componentsV2",exportName:"CheckboxGroup"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"T[]",required:false,description:"Selected value"},{name:"onChange",type:"(value: T[], event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"options",type:"{ value: T; label: ReactNode; }[]",required:false,description:"Array of values and their labels"},{name:"label",type:"ReactNode",required:false,description:"Group label"},{name:"status",type:"'error'",required:false,description:""},{name:"message",type:"ReactNode",required:false,description:""},{name:"spacing",type:"'dense' | 'normal'",required:false,description:"controls spacing between options",enumValues:["dense","normal"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState([options[0].value, options[2].value]);\n  return (\n    <CheckboxGroup\n      {...props}\n      options={options}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <CheckboxGroup\n      label=\"Size: medium\"\n      options={options}\n      value={[options[0].value]}\n      size=\"medium\"\n    />\n    <CheckboxGroup label=\"Size: small\" options={options} value={[options[0].value]} size=\"small\" />\n  </SbRow>"},{name:"Spacing",description:"Component supports 2 spacing options, controlled through `spacing` prop:\n\n- `normal` (default)\n- `dense`",code:"<SbRow>\n    <CheckboxGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"normal\"\n    />\n    <CheckboxGroup\n      label=\"Spacing: dense\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"dense\"\n    />\n  </SbRow>"},{name:"Horisontal",description:"Radios can be displayed in a row by using the `direction` prop which can receive the following options:\n\n- `vertical` (default)\n- `horizontal`",code:"<SbRow>\n    <CheckboxGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"normal\"\n      direction=\"horizontal\"\n    />\n    <CheckboxGroup\n      label=\"Spacing: dense\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"dense\"\n      direction=\"horizontal\"\n    />\n  </SbRow>"},{name:"NonScalarValues",description:"`<CheckboxGroup />` can work with any type of options `value`, which is represented in component types. You can either define the type explicitly or rely on inferred typings\n\nOption comparison is done with strict equality (`===`)",code:"{\n  // Option's `value` is an object\n  const complexOptions = useMemo(\n    () =>\n      options.map(({ label }) => ({\n        label,\n        value: { randomId: Math.round(Math.random() * 1000), name: label },\n      })),\n    []\n  );\n  const [value, setValue] = useState([complexOptions[0].value]);\n\n  return (\n    <SbColumn>\n      <CheckboxGroup\n        options={complexOptions}\n        value={value}\n        onChange={value => setValue(value)}\n        message={`Value: ${JSON.stringify(value)}`}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/CheckboxGroup/CheckboxGroup.tsx",keywords:["checkboxgroup"]},{name:"Chip",modulePath:"componentsV2/Chip",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Chip",specifier:"@corva/ui/componentsV2",exportName:"Chip"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"onClick",type:"MouseEventHandler",required:false,description:""},{name:"onDelete",type:"MouseEventHandler",required:false,description:""},{name:"deleteButtonTooltip",type:"ReactNode",required:false,description:""},{name:"size",type:"'xs' | 'small' | 'medium'",required:false,description:"",enumValues:["xs","small","medium"]},{name:"type",type:"'default' | 'outlined'",required:false,description:"",enumValues:["default","outlined"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"state",type:"'neutral' | 'info' | 'caution' | 'warning' | 'error' | 'success' | 'pending'",required:false,description:"",enumValues:["neutral","info","caution","warning","error","success","pending"]},{name:"shape",type:"'round' | 'square'",required:false,description:"",enumValues:["round","square"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Chip {...props} />"},{name:"Sizes",description:"Component supports several sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Chip size=\"medium\">Medium</Chip>\n    <Chip size=\"small\">Small</Chip>\n  </SbColumn>"},{name:"Types",description:"Component supports several types through its `type` prop\n\n- `default` (default)\n- `outlined`",code:"<SbColumn>\n    <Chip type=\"default\">Default</Chip>\n    <Chip type=\"outlined\">Outlined</Chip>\n  </SbColumn>"},{name:"Shapes",description:"Component supports several shapes through its `shape` prop\n\n- `round` (default)\n- `square`",code:"<Grid>\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\">Round</Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\">Square</Chip>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\" type=\"outlined\">\n        Round\n      </Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\" type=\"outlined\">\n        Square\n      </Chip>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\" size=\"small\">\n        Round\n      </Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\" size=\"small\">\n        Square\n      </Chip>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\" type=\"outlined\" size=\"small\">\n        Round\n      </Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\" type=\"outlined\" size=\"small\">\n        Square\n      </Chip>\n    </Grid.Cell>\n  </Grid>"},{name:"PrefixAndSuffix",description:"You can add an icon (or any arbitrary node) to Chip as a prefix or suffix by using the `prefix` and `suffix` props.\n\nNote that if those are [valid React elements](https://react.dev/reference/react/isValidElement), the `size` prop will be injected",code:"<Grid gap={1}>\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} size=\"small\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<BubbleChartIcon />} suffix={<BubbleChartIcon />} size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} size=\"small\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<BubbleChartIcon />} suffix={<BubbleChartIcon />} state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} state=\"info\" size=\"small\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip\n          prefix={<BubbleChartIcon />}\n          suffix={<BubbleChartIcon />}\n          size=\"small\"\n          type=\"outlined\"\n        >\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} size=\"small\" type=\"outlined\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} state=\"info\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} state=\"info\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip\n          prefix={<BubbleChartIcon />}\n          suffix={<BubbleChartIcon />}\n          state=\"info\"\n          size=\"small\"\n          type=\"outlined\"\n        >\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" state=\"info\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} state=\"info\" size=\"small\" type=\"outlined\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n  </Grid>"},{name:"CommonAffixes",description:"There are several common affixes provided along with Chip:\n\n- `Chip.Chip.Affix.Check`: checkbox mark. Use `className` prop to customize\n- `Chip.Affix.Indicator`: a `<ChipIndicator/>` which automatically adjusts own size. Use `className` prop to customize\n- `Chip.Affix.Dot`: status/legend dot. Use `className` or `color` props to change color to your custom one",code:"<SbColumn>\n    <Chip prefix={<Chip.Affix.Check />}>With Chip.Affix.Check</Chip>\n\n    <Chip prefix={<Chip.Affix.Indicator>Indicator</Chip.Affix.Indicator>} size=\"medium\">\n      With Chip.Affix.Indicator\n    </Chip>\n\n    <Chip prefix={<Chip.Affix.Indicator>Indicator</Chip.Affix.Indicator>} size=\"small\">\n      With Chip.Affix.Indicator, small\n    </Chip>\n\n    <Chip prefix={<Chip.Affix.Dot />}>With Chip.Affix.Dot</Chip>\n\n    <Chip prefix={<Chip.Affix.Dot color=\"#FF0000\" />}>With Chip.Affix.Dot and custom color</Chip>\n  </SbColumn>"},{name:"DeleteButton",description:"You can display a delete button by providing the `onDelete` prop. Note that if both `onDelete` and `onClick` props are provided, and the delete icon is clicked, `onClick` callback is not called.\n\nYou can use the `deleteButtonTooltip` prop to add a tooltip to the delete button",code:"<SbColumn>\n    <Chip onDelete={handlers.onDelete}>Deletable</Chip>\n    <Chip onDelete={handlers.onDelete} deleteButtonTooltip=\"Delete\">\n      Deletable with tooltip\n    </Chip>\n  </SbColumn>"},{name:"States",description:"Component's color is determined by the `state` prop. Available states:\n\n- `neutral`\n- `info`\n- `error`\n- `pending`\n- `success`\n- `warning`\n- `caution`",code:"{\n  return (\n    <Grid gap={1}>\n      {StatesArray.map(state => (\n        <Fragment key={state}>\n          <Grid.Cell span={3}>\n            <Chip state={state} {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <Chip state={state} type=\"outlined\" {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <Chip state={state} disabled {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <Chip state={state} type=\"outlined\" disabled {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n        </Fragment>\n      ))}\n    </Grid>\n  );\n}"},{name:"WithTruncatedText",description:"Component works seamlessly with `<TextEndTruncated/>` or `<TextMiddleTruncated/>`.",code:"<SbColumn>\n    <Chip prefix={<BubbleChartIcon />}>\n      <TextEndTruncated>{longText}</TextEndTruncated>\n    </Chip>\n    <Chip prefix={<BubbleChartIcon />}>\n      <TextMiddleTruncated>{longText}</TextMiddleTruncated>\n    </Chip>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Chip/Chip.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=131635-139275",keywords:["chip","tag","label","badge","pill"]},{name:"ChipAlert",modulePath:"componentsV2/ChipAlert",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChipAlert",specifier:"@corva/ui/componentsV2",exportName:"ChipAlert"},category:"v2",description:"A restyle of `<Chip/>` used for alerts. Accepts most of `<Chip/>`'s props\n\n⚠️⚠️⚠️ This component is deprecated, use `<Chip state=\"yourFavouriteColour\" size=\"small\"/>` instead.",agentSummary:"Alert-state restyle of the V2 Chip: a thin wrapper rendering Chip at size small, colored by a required state prop.",isExperimental:false,isDeprecated:true,props:[{name:"children",type:"ChipProps['children']",required:false,description:"Component contents"},{name:"state",type:"'info' | 'caution' | 'warning' | 'error' | 'success' | 'pending'",required:true,description:"Defines colour variant",enumValues:["info","caution","warning","error","success","pending"]},{name:"prefix",type:"ChipProps['prefix']",required:false,description:""},{name:"suffix",type:"ChipProps['suffix']",required:false,description:""},{name:"onClick",type:"ChipProps['onClick']",required:false,description:""},{name:"onDelete",type:"ChipProps['onDelete']",required:false,description:""},{name:"type",type:"ChipProps['type']",required:false,description:""},{name:"disabled",type:"ChipProps['disabled']",required:false,description:""},{name:"className",type:"ChipProps['className']",required:false,description:""},{name:"testId",type:"ChipProps['testId']",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ChipAlert {...props} />"},{name:"States",description:"Component's color is determined by the `state` prop. Available states:\n\n- `info`\n- `error`\n- `pending`\n- `success`\n- `warning`\n- `caution`",code:"{\n  const handlers = { onClick: () => {}, onDelete: () => {} };\n  return (\n    <Grid gap={1}>\n      {StatesArray.map(state => (\n        <Fragment key={state}>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} type=\"outlined\" {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} disabled {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} type=\"outlined\" disabled {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n        </Fragment>\n      ))}\n    </Grid>\n  );\n}"},{name:"PrefixAndSuffix",description:"You can add an icon (or any arbitrary node) to ChipAlert as a prefix or suffix by using the `prefix` and `suffix` props.\n\nNote that if those are [valid React elements](https://react.dev/reference/react/isValidElement), the `size` prop will be injected",code:"<SbRow>\n    <SbColumn>\n      <ChipAlert prefix={<BubbleChartIcon />} state=\"info\" onClick={() => {}} onDelete={() => {}}>\n        Label\n      </ChipAlert>\n      <ChipAlert suffix={<BubbleChartIcon />} state=\"info\" onClick={() => {}} onDelete={() => {}}>\n        Label\n      </ChipAlert>\n      <ChipAlert\n        prefix={<BubbleChartIcon />}\n        suffix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert prefix=\"string prefix\" state=\"info\" onClick={() => {}} onDelete={() => {}}>\n        Label\n      </ChipAlert>\n    </SbColumn>\n    <SbColumn>\n      <ChipAlert\n        prefix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert\n        suffix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert\n        prefix={<BubbleChartIcon />}\n        suffix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert\n        prefix=\"string prefix\"\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n    </SbColumn>\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChipAlert/ChipAlert.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=12317-58",keywords:["chipalert","restyle","chip","used","alerts","accepts","most","props","component","deprecated","state"]},{name:"ChipIndicator",modulePath:"componentsV2/ChipIndicator",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChipIndicator",specifier:"@corva/ui/componentsV2",exportName:"ChipIndicator"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"state",type:"'primary' | 'neutral' | 'error' | 'info' | 'warning' | 'success'",required:false,description:"",enumValues:["primary","neutral","error","info","warning","success"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ChipIndicator {...props} />"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <ChipIndicator size=\"medium\">Medium</ChipIndicator>\n    <ChipIndicator size=\"small\">Small</ChipIndicator>\n  </SbRow>"},{name:"States",description:"Component's color is determined by the `state` prop. Available states:\n\n- `primary`\n- `neutral`\n- `info`\n- `error`\n- `success`\n- `warning`",code:"<SbColumn>\n    {StatesArray.map(state => (\n      <ChipIndicator state={state} key={state}>\n        {state}\n      </ChipIndicator>\n    ))}\n  </SbColumn>"},{name:"WithCustomBackground",description:"You can set your own background by overriding the `background-color` or `background` CSS properties. You can also override the `color` CSS property.",code:"<ChipIndicator className={styles.custom}>Oooh, SHINY!!!</ChipIndicator>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChipIndicator/ChipIndicator.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=131054-63682",keywords:["chipindicator"]},{name:"ColorPicker",modulePath:"componentsV2/ColorPicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ColorPicker",specifier:"@corva/ui/componentsV2",exportName:"ColorPicker"},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:"elementsClassNames",type:"Partial<Omit<\n      Required<TextInputNextProps>['elementsClassNames'],\n      'message' | 'numberStepButtons' | 'prefix' | 'suffix'\n    > &\n      Record<'indicator' | 'popover', string>>",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:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Keyboard: Enter, Space, or Arrow Down opens the picker. Arrow keys move through palette colors. In the custom picker, Left/Right adjust saturation, Up/Down adjust brightness, and the hue and opacity sliders support arrow keys, Page Up/Down, Home, and End. Hold Shift with an arrow key for a coarse adjustment.",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        <ColorPicker\n          label=\"RGBA\"\n          enableAlpha\n          value={valueRgba}\n          onChange={setValueRgba}\n          format=\"rgb\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueRgba}</Grid.Cell>\n    </Grid>\n  );\n}"},{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",keywords:["colorpicker","color","palette","pick","swatch"]},{name:"CompletionsOffsetWellPicker",modulePath:"componentsV2/CompletionsOffsetWellPicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"CompletionsOffsetWellPicker",specifier:"@corva/ui/componentsV2",exportName:"CompletionsOffsetWellPicker"},category:"v2",description:"Completions Offset Well Picker component allows users to select offset wells for completions operations with visual map and filtering capabilities, component requires `@tanstack/react-query` provider for data fetching and state management.",agentSummary:"Fullscreen completions offset well picker: map, pad filters and pads table. Fetches pads itself by companyId; needs QueryClientProvider.",isExperimental:true,isDeprecated:false,props:[{name:"companyId",type:"string",required:true,description:"The company ID to fetch pads and wells data for"},{name:"selectedPadId",type:"number",required:false,description:"The ID of the currently selected pad from app wrapper"},{name:"selectedOffsetWellIds",type:"number[]",required:true,description:"Array of well IDs selected as offset wells"},{name:"onOffsetWellsSelect",type:"(offsetWells: MappedPad['wells']) => void",required:true,description:"Callback when user selects/deselects offset wells"},{name:"wells",type:"Well[]",required:false,description:"Optional array of well objects with metadata from app wrapper"},{name:"well",type:"Well",required:false,description:"Optional single well object for current well from app wrapper"},{name:"maxRadiusInMiles",type:"number",required:false,description:"Maximum radius in miles a user can select (optional).\nThe picker starts at 10 miles, capped by this value when provided."},{name:"isGlobalSelector",type:"boolean",required:false,description:"Show global selector icon instead of well icon"},{name:"testId",type:"string",required:false,description:"Optional test ID for testing purposes"},{name:"buttonLabel",type:"ReactNode",required:false,description:"Label for <OffsetWellsButton/>"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        {...props}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n      />\n    </QueryClientProvider>\n  );\n}"},{name:"WithSelectedWells",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        companyId=\"1\"\n        selectedPadId={111}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n      />\n    </QueryClientProvider>\n  );\n}"},{name:"GlobalSelector",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        companyId=\"1\"\n        selectedPadId={111}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n        isGlobalSelector\n      />\n    </QueryClientProvider>\n  );\n}"},{name:"CustomToggleText",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        companyId=\"1\"\n        selectedPadId={111}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n        buttonLabel=\"\"\n      />\n    </QueryClientProvider>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/CompletionsOffsetWellPicker/CompletionsOffsetWellPicker.tsx",keywords:["completionsoffsetwellpicker","completions","offset","well","picker","component","allows","users","select","wells","operations"]},{name:"CopyToClipboard",modulePath:"componentsV2/CopyToClipboard",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"CopyToClipboard",specifier:"@corva/ui/componentsV2",exportName:"CopyToClipboard"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"text",type:"string",required:true,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"tooltipDisabled",type:"boolean",required:false,description:""},{name:"tooltipTitle",type:"ReactNode",required:false,description:""},{name:"tooltipPlacement",type:"TooltipProps['placement']",required:false,description:""},{name:"tooltipDuration",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<CopyToClipboard {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <CopyToClipboard text=\"Some text to copy\" size=\"large\" />\n    <CopyToClipboard text=\"Some text to copy\" size=\"medium\" />\n    <CopyToClipboard text=\"Some text to copy\" size=\"small\" />\n  </SbColumn>"},{name:"Positioning",description:"Component is displayed as an `inline-flex` by default to seamlessly work in text blocks",code:"<SbColumn>\n    <Text size={16}>\n      This is some copyable stuff: 12345678 <CopyToClipboard text=\"12345678\" />\n    </Text>\n\n    <Text size={14}>\n      This is some copyable stuff: 12345678 <CopyToClipboard text=\"12345678\" size=\"small\" />\n    </Text>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/CopyToClipboard/CopyToClipboard.tsx",keywords:["copytoclipboard","copy","clipboard","duplicate"]},{name:"Counter",modulePath:"componentsV2/Counter",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Counter",specifier:"@corva/ui/componentsV2",exportName:"Counter"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"count",type:"number",required:true,description:""},{name:"max",type:"number",required:false,description:"Maximum value after which the plus sign will be shown"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"type",type:"'default' | 'primary' | 'error'",required:false,description:"",enumValues:["default","primary","error"]},{name:"onClick",type:"MouseEventHandler",required:false,description:""},{name:"onDelete",type:"MouseEventHandler",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Counter {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <Counter count={25} size=\"large\" />\n    <Counter count={25} size=\"medium\" />\n    <Counter count={25} size=\"small\" />\n  </SbRow>"},{name:"WithMaximum",description:"Pass a `max` prop to limit the number shown in the component",code:"<Counter count={250} max={99} />"},{name:"Clickable",description:"Pass a `onClick` prop to make component clickable",code:"<Counter count={25} onClick={console.log} />"},{name:"Deleteable",description:"Pass a `onDelete` prop to display the delete icon",code:"<Counter count={25} onDelete={console.log} />"},{name:"Types",description:"Component supports several colour options via the `type` prop:\n\n- `default` (default)\n- `primary`\n- `error`\n",code:"<SbRow>\n    <Counter count={25} type=\"default\" />\n    <Counter count={25} type=\"primary\" />\n    <Counter count={25} type=\"error\" />\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Counter/Counter.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59511",keywords:["counter","count","number","badge","indicator"]},{name:"DatePicker",modulePath:"componentsV2/DatePicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"DatePicker",specifier:"@corva/ui/componentsV2",exportName:"DatePicker"},category:"v2",description:"This component is deprecated, use `DatePickerNext` instead.\n\n\n\nA date/date-tme/month picker with range support.\n\nProvides generic `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>` types to simplify typing:\n\n```ts\nconst handler = useCallback<DatePickerChangeHandler>(/* snip */); // For single select (default)\nconst handler = useCallback<DatePickerChangeHandler<true>>(/* snip */); // For range select\n\n```\n\nYou can see usage examples in stories below",agentSummary:"Date, date-time, or month picker with range support over native Date values. Same base as DatePickerNext but with the legacy TextInput field.",isExperimental:true,isDeprecated:true,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"value",type:"DatePickerValue<IsRange>",required:false,description:""},{name:"onChange",type:"DatePickerChangeHandler<IsRange>",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",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:"type",type:"DatePickerType",required:false,description:"Type: dates only / date + time / month"},{name:"minDate",type:"Date",required:false,description:"Minimum selectable date"},{name:"maxDate",type:"Date",required:false,description:"maximum selectable date"},{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"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<DatePickerValue>();\n\n  return (\n    <DatePicker\n      {...props}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n      range={false}\n    />\n  );\n}"},{name:"Formatting",description:"You can configure the format in which values will be displayed by using the `format` prop.\n\nIf not set, the component uses different default formats for different `type`s and for different `range` values:\n\n`range={false}`\n  * `date`: `MMM DD YYYY`\n  * `dateTime`: `MMM DD YYYY HH:mm`\n  * `month`: `MMMM YYYY`\n\n`range={true}`\n  * `date`: `MM/DD/YYYY`\n  * `dateTime`: `MM/DD/YYYY HH:mm`\n  * `month`: `MMM YYYY`\n\nFull list of accepted tokens can be found [here](https://momentjs.com/docs/#/displaying/format/)",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 5, 16, 17));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePicker label=\"Default format\" value={value} onChange={setValue} />\n      <DatePicker\n        label=\"ISO format\"\n        value={value}\n        onChange={setValue}\n        format=\"YYYY-MM-DDTHH:mm:ss.SSSZ\"\n      />\n    </SbColumn>\n  );\n}"},{name:"MinMax",description:"You can limit minimum and maximum selectable dates by providing `minDate` and `maxDate` props respectively.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePicker label=\"Date - no constraints\" value={value} onChange={setValue} />\n      <DatePicker\n        label=\"Date - constrained\"\n        value={value}\n        onChange={setValue}\n        minDate={new Date(2024, 11, 31)}\n        maxDate={new Date(2026, 0, 1)}\n      />\n    </SbColumn>\n  );\n}"},{name:"DisabledDates",description:"You can disable any date by using the `getTileDisabled` prop.\n\nPlease note, this is ***not*** meant to be used as an alternative method of setting `minDate` or `maxDate`",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 11));\n  return (\n    <DatePicker\n      label=\"Date with disabled dates\"\n      value={value}\n      onChange={setValue}\n      getTileDisabled={({ date }) =>\n        date.getTime() === new Date(2025, 8, 10).getTime() ||\n        date.getTime() === new Date(2025, 8, 11).getTime() ||\n        date.getTime() === new Date(2025, 8, 12).getTime()\n      }\n    />\n  );\n}"},{name:"DateAndTimeMode",description:"You can select time in addition to date by using the `type` prop: `type=\"dateTime\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 3, 51, 0));\n\n  return <DatePicker label=\"Date + Time\" value={value} onChange={setValue} type=\"dateTime\" />;\n}"},{name:"MonthsSelection",description:"You can select months instead of days by using the `type` prop: `type=\"month\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return <DatePicker label=\"Month\" value={value} onChange={setValue} type=\"month\" />;\n}"},{name:"RangeSelection",description:"You can select a time range by using the `range` prop. Notice, that it changes types of DatePicker's `value` and `onChange` props.\n\nTo simplify working with those, 2 helper types are exported: `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>`",code:"{\n  const [value, setValue] = useState<DatePickerValue<true>>([\n    new Date(2025, 8, 8, 3, 51, 0),\n    new Date(2025, 8, 14, 5, 51, 0),\n  ]);\n\n  const onChange = useCallback<DatePickerChangeHandler<true>>(value => {\n    // Do something with value here\n    setValue(value);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePicker label=\"Date\" value={value} onChange={onChange} type=\"date\" range />\n      <DatePicker label=\"Month\" value={value} onChange={onChange} type=\"month\" range />\n      <DatePicker label=\"Date & Time\" value={value} onChange={onChange} type=\"dateTime\" range />\n    </SbColumn>\n  );\n}"},{name:"UsingPartsOfDatePicker",description:"You can use parts of `<DatePicker/>` exported as `DatePicker.Controls` and `DatePicker.Grid`.\n\nThese components are pretty simple, so you will need to write accompanying logic yourself.",code:"{\n  const [activeStartDate, setActiveStartDate] = useState<Date>(new Date(2025, 8, 8, 5, 16, 17));\n  const [selected, setSelected] = useState<Date>();\n\n  return (\n    <SbColumn>\n      <SbPlaceholder>\n        <DatePicker.Controls date={activeStartDate} setDate={setActiveStartDate} />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <DatePicker.Grid\n          onChange={setSelected}\n          activeStartDate={activeStartDate}\n          selected={selected}\n        />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/DatePicker/DatePicker.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=103431-4455",keywords:["datepicker","date","calendar","time","schedule","component","deprecated","datepickernext","instead","date-tme","month","picker","range","support"]},{name:"DragHandle",modulePath:"componentsV2/DragHandle",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"DragHandle",specifier:"@corva/ui/componentsV2",exportName:"DragHandle"},category:"v2",description:"A common drag handle for all drag-and-drop applications",isExperimental:true,isDeprecated:false,props:[{name:"onClick",type:"ButtonIconProps['onClick']",required:false,description:""},{name:"onMouseDown",type:"ButtonIconProps['onMouseDown']",required:false,description:""},{name:"onMouseUp",type:"ButtonIconProps['onMouseUp']",required:false,description:""},{name:"size",type:"ButtonIconProps['size']",required:false,description:""},{name:"disabled",type:"ButtonIconProps['disabled']",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<DragHandle {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through `size` prop:\n\n- `large`: use for large, handles\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium\n- `xs`: even smaller",code:"<SbColumn>\n    <DragHandle size=\"large\" />\n    <DragHandle size=\"medium\" />\n    <DragHandle size=\"small\" />\n    <DragHandle size=\"xs\" />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/DragHandle/DragHandle.tsx",keywords:["draghandle","drag","reorder","sort","move","handle","common","drag-and-drop","applications"]},{name:"EmptyState",modulePath:"componentsV2/EmptyState",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"EmptyState",specifier:"@corva/ui/componentsV2",exportName:"EmptyState"},category:"v2",description:"⚠️⚠️⚠️ To properly display its image, this component expects one of the following:\n\n- to have its own height set through `className` prop\n- its parent to have a definite height\n- to be positioned absolutely (will take 100% of width and height by default)",agentSummary:"Empty/error placeholder: title, subtitle and an illustration picked by image key. Needs a definite height; V2 replacement for V1 EmptyState.",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:""},{name:"subTitle",type:"ReactNode",required:false,description:""},{name:"image",type:"keyof typeof Images",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={{ height: '450px' }}>\n    <EmptyState {...props} />\n  </div>"},{name:"Illustrations",description:"Component supports several \"standard\" illustrations, controlled through the `image` prop",code:"<SbRow>\n    {images.map(key => (\n      <div key={key} style={{ width: '290px', height: '340px' }}>\n        <EmptyState title={key} image={key} />\n      </div>\n    ))}\n  </SbRow>"},{name:"Responsiveness",description:"Component automatically adjusts its illustration size depending on its own size.\n\nVertical breakpoints: `400px` (small) and `300px` (hidden). Horizontal breakpoint: `482px`.",code:"{\n  const [width, setWidth] = useState(502);\n  const [height, setHeight] = useState(502);\n\n  // TODO use own sliders\n  return (\n    <Grid>\n      <Grid.Cell span={3}>\n        Width: {width - 2}px\n        <Slider\n          value={width}\n          onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n          min={200}\n          max={502}\n        />\n      </Grid.Cell>\n      <Grid.Cell span={3}>\n        Height: {height - 2}px\n        <Slider\n          value={height}\n          onChange={(_, value) => setHeight(value instanceof Array ? value[0] : value)}\n          min={200}\n          max={502}\n        />\n      </Grid.Cell>\n      <Grid.Cell>\n        <SbPlaceholder\n          style={{\n            width: `${width}px`,\n            height: `${height}px`,\n          }}\n        >\n          <EmptyState title=\"Title\" subTitle=\"Subtitle\" />\n        </SbPlaceholder>\n      </Grid.Cell>\n    </Grid>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/EmptyState/EmptyState.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9662-18",keywords:["emptystate","empty","no data","placeholder","blank","no results","properly","display","image","component","expects","following","have","height","through","classname"]},{name:"FileIcon",modulePath:"componentsV2/FileIcon",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FileIcon",specifier:"@corva/ui/componentsV2",exportName:"FileIcon"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"name",type:"string",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FileIcon {...props} />"},{name:"FileTypes",description:"Icon is determined by a filename's extension passed into `name` prop",code:"{\n  return (\n    <SbRow>\n      {ExtensionsToIconArray.map(([ext], index) => (\n        <div key={index} style={{ textAlign: 'center', width: '50px', fontSize: '12px' }}>\n          <FileIcon name={`file${ext}`} />\n          <br />\n          {ext}\n        </div>\n      ))}\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FileIcon/FileIcon.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=76260-54718",keywords:["fileicon"]},{name:"FilesDropzone",modulePath:"componentsV2/FilesDropzone",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FilesDropzone",specifier:"@corva/ui/componentsV2",exportName:"FilesDropzone"},category:"v2",description:"A dropzone for file uploads. Most likely you will need `<FilesProcessor/>`",isExperimental:true,isDeprecated:false,props:[{name:"onDrop",type:"DropzoneOptions['onDrop']",required:false,description:"Handles file drop"},{name:"children",type:"ReactNode",required:false,description:"Component content"},{name:"multiple",type:"boolean",required:false,description:"Controls if dropzone accepts multiple files"},{name:"accept",type:"string[] | string",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nNB: file extensions <b>must</b> start with `.`<br/>, otherwise they will be treated as MIME types\nfile extensions will be shown below the dropzone in the description\n\nExample:<br/>\n`.xsl,image/*,.csv`<br/>\nWill accept any file with `xsl` or `csv` extensions, and also - any file with `image/...` MIME type"},{name:"maxFiles",type:"number",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"number",required:false,description:"Maximum file size to accept"},{name:"disabled",type:"boolean",required:false,description:""},{name:"error",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesDropzone {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FilesDropzone/FilesDropzone.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=92818-11759",keywords:["filesdropzone","upload","drag","drop","file","attachment","dropzone","uploads","most","likely","will","need","filesprocessor"]},{name:"FilesLoader",modulePath:"componentsV2/FilesLoader",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FilesLoader",specifier:"@corva/ui/componentsV2",exportName:"FilesLoader"},category:"v2",description:"A component to indicate and control file upload. Most likely you will need `<FilesProcessor/>`",isExperimental:true,isDeprecated:false,props:[{name:"name",type:"string",required:false,description:""},{name:"preview",type:"File | string",required:false,description:""},{name:"indeterminate",type:"boolean",required:false,description:""},{name:"complete",type:"boolean",required:false,description:""},{name:"total",type:"number",required:false,description:"Total progress value (bytes by default)"},{name:"current",type:"number",required:false,description:"Current progress value (bytes by default)"},{name:"error",type:"ReactNode",required:false,description:"Error to show"},{name:"onDelete",type:"() => void",required:false,description:"If exists - displays the \"Delete\" button"},{name:"onReload",type:"() => void",required:false,description:"If exists - displays the \"Reload\" button on error state"},{name:"onCancel",type:"() => void",required:false,description:"If exists - displays the \"Cancel\" button when loading"},{name:"formatProgress",type:"(total?: number, current?: number) => ReactNode",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesLoader {...props} />"},{name:"LoadingStates",description:"Use `indeterminate` prop to force the progress bar to be indeterminate. \"Cancel\" button is shown if its handler is provided",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} />\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} indeterminate />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      indeterminate\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n  </SbColumn>"},{name:"CompletedState",description:"Use `complete` prop to indicate that upload succeeded. \"Delete\" button is shown if its handler is provided",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} complete />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      complete\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n  </SbColumn>"},{name:"ErrorState",description:"Use `error` prop to display an error. This is treated as if upload was complete. \"Delete\" and \"Reload\" buttons are shown if their handlers are provided",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} error=\"Upload failed\" />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      error=\"Upload failed\"\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n  </SbColumn>"},{name:"CustomProgressFormatting",description:"You can provide your own progress formatting function through `formatProgress` prop",code:"<FilesLoader\n    name=\"cat.png\"\n    current={10_000}\n    total={20_000}\n    formatProgress={(total, current) => (\n      <>\n        Goats teleported: <em>{current}</em> of <em>{total}</em>\n      </>\n    )}\n  />"},{name:"WithPreviewImage",description:"You can pass `preview` prop to display a preview. Note that `name` takes precedence over `preview`",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader\n      name=\"cat.png\"\n      preview=\"https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg\"\n      current={10_000}\n      total={20_000}\n    />\n    <FilesLoader\n      preview=\"https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg?dummyparam=dummyvalue\"\n      current={10_000}\n      total={20_000}\n    />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FilesLoader/FilesLoader.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=74164-77295",keywords:["filesloader","component","indicate","control","file","upload","most","likely","will","need","filesprocessor"]},{name:"FilesProcessor",modulePath:"componentsV2/FilesProcessor",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FilesProcessor",specifier:"@corva/ui/componentsV2",exportName:"FilesProcessor"},category:"v2",description:"File upload/parsing/processing flow. Comes with `FilesProcessorFunction` utility type",isExperimental:true,isDeprecated:false,props:[{name:"processFile",type:"FilesProcessorFunction<T>",required:true,description:"Function that processes file (uploads, parses, etc.)"},{name:"onDone",type:"(results: T[]) => void",required:true,description:"Called when files are uploaded/reuploaded"},{name:"value",type:"ValueItem[]",required:false,description:"Files list to display\n\n`type ValueItem = {id: string | number; name: string; preview?: File | string};`"},{name:"preview",type:"boolean",required:false,description:"Shows preview for images being processed and from `value` prop. Pass `preview` property to an item of `value`."},{name:"onDelete",type:"(item: ValueItem) => void",required:false,description:"Used in conjunction with `value`. Called when user presses \"delete\" button. If undefined - no button is shown"},{name:"onStartProcessing",type:"(files: File[]) => void",required:false,description:"Fired when file(s) selected for processing"},{name:"onProcessingFailure",type:"(file: File, isCancelled?: boolean, error?: Error) => void",required:false,description:"Fired when file processing failed or cancelled"},{name:"multiple",type:"FilesDropzoneProps['multiple']",required:false,description:"Controls if multiple files can be processed"},{name:"accept",type:"FilesDropzoneProps['accept']",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nSee `FilesDropzone`'s props"},{name:"maxFiles",type:"FilesDropzoneProps['maxFiles']",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"FilesDropzoneProps['maxSize']",required:false,description:"Maximum file size to accept"},{name:"formatProgress",type:"ProcessorProps<object>['formatProgress']",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState([\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    { id: 3, name: 'My Cat.jpeg' },\n  ]);\n\n  const processFile: FilesProcessorFunction<{\n    id: number;\n    fileName: string;\n  }> = useCallback(async (file, onProgress, registerOnCancel) => {\n    // eslint-disable-next-line no-console\n    registerOnCancel(() => console.log('CANCELLED', file));\n\n    for (let i = 0, c = 5; i < c; i += 1) {\n      onProgress(100 * c, 100 * (i + 1));\n      // eslint-disable-next-line no-await-in-loop\n      await new Promise(r => setTimeout(r, 500));\n    }\n\n    return {\n      id: Math.random() * 1000,\n      fileName: file.name,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      {...props}\n      processFile={processFile}\n      value={value}\n      onDone={(results, ...rest) => {\n        props.onDone?.(results, ...rest);\n\n        const mapResults = (result: typeof results[number]) => ({\n          id: result.id,\n          name: result.fileName,\n        });\n\n        setValue(items => [...results.map(mapResults), ...items]);\n      }}\n      onDelete={(item, ...rest) => {\n        props.onDelete?.(item, ...rest);\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"},{name:"SingleFileProcessing",description:"If `multiple` prop is `false` or `undefined`, the component will accept only a single file and will not display a dropzone if `value` is not empty",code:"{\n  const [value, setValue] = useState<\n    {\n      id: number;\n      name: string;\n    }[]\n  >([]);\n\n  const processFile: FilesProcessorFunction<{\n    id: number;\n    name: string;\n  }> = useCallback(async (file, onProgress) => {\n    for (let i = 0, c = 5; i < c; i += 1) {\n      onProgress(100 * c, 100 * (i + 1));\n      // eslint-disable-next-line no-await-in-loop\n      await new Promise(r => setTimeout(r, 100));\n    }\n\n    return {\n      id: Math.random() * 1000,\n      name: file.name,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      processFile={processFile}\n      value={value}\n      onDone={setValue}\n      onDelete={item => {\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"},{name:"Indeterminate",description:"If you don't call `onProgress` (second argument of `processFile`), processing will be \"indetermiante\"",code:"{\n  const [value, setValue] = useState(() => [\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    { id: 3, name: 'My Cat.jpeg' },\n  ]);\n\n  const processFile: FilesProcessorFunction<{\n    id: number;\n    fileName: string;\n  }> = useCallback(async file => {\n    await new Promise(r => setTimeout(r, 5000));\n\n    return {\n      id: Math.random() * 1000,\n      fileName: file.name,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      multiple\n      processFile={processFile}\n      value={value}\n      onDone={results => {\n        const mapResults = (result: typeof results[number]) => ({\n          id: result.id,\n          name: result.fileName,\n        });\n\n        setValue(items => [...results.map(mapResults), ...items]);\n      }}\n      onDelete={item => {\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"},{name:"WithPreviewImages",description:"Use `preview` prop to show file previews while processing if available. To show previews for pre-existing files/or already processed ones, use the `preview` property of the `value prop's item`",code:"{\n  const [value, setValue] = useState<{ id: number; name: string; preview?: string | File }[]>([\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    {\n      id: 3,\n      name: 'My Cat.jpeg',\n      preview:\n        'https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg',\n    },\n  ]);\n\n  const processFile = useCallback<\n    FilesProcessorFunction<{\n      id: number;\n      fileName: string;\n      preview: File | string;\n    }>\n  >(async (file, onProgress) => {\n    for (let i = 0, c = 15; i < c; i += 1) {\n      onProgress(100 * c, 100 * (i + 1));\n      // eslint-disable-next-line no-await-in-loop\n      await new Promise(r => setTimeout(r, 500));\n    }\n\n    return {\n      id: Math.random() * 1000,\n      fileName: file.name,\n      // In real life this should be an URL to uploaded file\n      preview: file,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      preview\n      multiple\n      processFile={processFile}\n      value={value}\n      onDone={results => {\n        setValue(items => [\n          ...results.map(result => ({\n            id: result.id,\n            name: result.fileName,\n            preview: result.preview,\n          })),\n          ...items,\n        ]);\n      }}\n      onDelete={item => {\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FilesProcessor/FilesProcessor.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=73896-71907",keywords:["filesprocessor","file","upload","parsing","processing","flow","comes","filesprocessorfunction","utility","type"]},{name:"Grid",modulePath:"componentsV2/Grid",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Grid",specifier:"@corva/ui/componentsV2",exportName:"Grid"},category:"v2",description:"Grid is a wrapper component that allows users to arrange children items in a grid of columns and rows. It's based on the CSS grid.\n\nUse `<Grid.Cell/>` as children for the best experience",agentSummary:"CSS grid layout wrapper arranging Grid.Cell children by span and rows. Defaults to 12 columns and a theme spacing gap; no provider needed.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"cols",type:"number",required:false,description:"Amount of columns"},{name:"gap",type:"number",required:false,description:"Number of theme `spacing`-s between cells"},{name:"alignItems",type:"CSSProperties['alignItems']",required:false,description:""},{name:"justifyItems",type:"CSSProperties['justifyItems']",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Grid {...props}>\n    {new Array(12).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={1}>\n        <Content />\n      </Grid.Cell>\n    ))}\n  </Grid>"},{name:"CellSpan",description:"You can use the `span` prop of `<Grid.Cell/>` to control how many columns it occupies. A cell occupies all columns by default",code:"<Grid>\n    <Grid.Cell>\n      <Content>Span: undefined</Content>\n    </Grid.Cell>\n\n    <Grid.Cell span={12}>\n      <Content>Span: 12</Content>\n    </Grid.Cell>\n\n    {new Array(2).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={6}>\n        <Content>Span: 6</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(3).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={4}>\n        <Content>Span: 4</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(4).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={3}>\n        <Content>Span: 3</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(6).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={2}>\n        <Content>Span: 2</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(12).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={1}>\n        <Content>Span: 1</Content>\n      </Grid.Cell>\n    ))}\n  </Grid>"},{name:"AlignItems",description:"By default all cells stretch vertically to the height of the highest cell in row. You can override this behaviour by using the `alignItems` prop. Accepts all CSS values for `align-items`",code:"<SbColumn alignItems=\"stretch\">\n    <Grid>\n      <Grid.Cell span={4}>\n        <Content>Default</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>Default</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>\n          Really\n          <br />\n          Tall\n          <br />\n          Content\n        </Content>\n      </Grid.Cell>\n    </Grid>\n    <Grid alignItems=\"flex-end\">\n      <Grid.Cell span={4}>\n        <Content>flex-end</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>flex-end</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>\n          Really\n          <br />\n          Tall\n          <br />\n          Content\n        </Content>\n      </Grid.Cell>\n    </Grid>\n  </SbColumn>"},{name:"JustifyItems",description:"By default all cells stretch horizontally to their target width in columns. You can override this behaviour by using the `justifyItems` prop. Accepts all CSS values for `justify-items`",code:"<Grid justifyItems=\"center\">\n    <Grid.Cell span={6}>\n      <Content>\n        Very wide content goes here because we need something really long and wide to showcase our\n        awesome features\n      </Content>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Content>Not wide</Content>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Content>Short</Content>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Content>Slightly wider</Content>\n    </Grid.Cell>\n  </Grid>"},{name:"Multirow",description:"You can use the `rows` prop of `<Grid.Cell/>` to control how many rows it occupies. A cell occupies 1 row by default",code:"<Grid>\n    <Grid.Cell span={4} rows={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4} rows={2}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n  </Grid>"},{name:"ColumnsCount",description:"If you want to have a number of columns other than the default value, use the `cols` prop",code:"<Grid cols={2}>\n    <Grid.Cell span={1}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <Content />\n    </Grid.Cell>\n  </Grid>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Grid/Grid.tsx",keywords:["grid","layout","columns","rows","responsive","wrapper","component","allows","users","arrange","children","items"]},{name:"Header",modulePath:"componentsV2/Header",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Header",specifier:"@corva/ui/componentsV2",exportName:"Header"},category:"v2",description:"A component for headers: a thin wrapper over `<Text/>` with preset display variants",isExperimental:true,isDeprecated:false,props:[{name:"appearance",type:"'H1' | 'H2' | 'H3' | 'appName'",required:true,description:"",enumValues:["H1","H2","H3","appName"]},{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Header {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Header/Header.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=88924-113475&node-type=frame",keywords:["header","headerlayout","layout","header layout","component","headers","thin","wrapper","over","text","preset","display","variants"]},{name:"HideInNativeApp",modulePath:"componentsV2/HideInNativeApp",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"HideInNativeApp",specifier:"@corva/ui/componentsV2",exportName:"HideInNativeApp"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/HideInNativeApp/index.tsx",keywords:["hideinnativeapp"]},{name:"Hint",modulePath:"componentsV2/Hint",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Hint",specifier:"@corva/ui/componentsV2",exportName:"Hint"},category:"v2",description:"Used for attracting user's attention to new features, providing usage hints, etc",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"children",type:"ReactElement",required:false,description:"⚠️ Has to be a <i>single</i> reffable child (use `forwardRef` for custom components)"},{name:"title",type:"ReactNode",required:false,description:""},{name:"description",type:"ReactNode",required:false,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"anchorEl",type:"HTMLElement | null",required:false,description:"Allows anchoring to arbitrary element"},{name:"onClose",type:"() => void",required:false,description:"Close button is shown only when this prop is present"},{name:"primaryActionText",type:"ReactNode",required:false,description:"Contents of the primary button"},{name:"primaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for primary button"},{name:"secondaryActionText",type:"ReactNode",required:false,description:"Contents of the secondary button"},{name:"secondaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for secondary button"},{name:"stepCurrent",type:"number",required:false,description:""},{name:"stepsTotal",type:"number",required:false,description:""},{name:"flip",type:"boolean",required:false,description:"Controls if hint should flip to other side of an element to fit into the viewport"},{name:"popperProps",type:"Partial<PopperProps>",required:false,description:"Escape hatch for popper props. `modifiers` property will be merged with `<Hint/>`'s own modifiers."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Hint {...props}>\n    <SbPlaceholder style={{ width: '100px', height: '100px' }}>Element</SbPlaceholder>\n  </Hint>"},{name:"CustomComponents",description:"To position `Hint` to a custom component, or to a specific node inside the custom component, use `forwardRef`",code:"{\n  const CustomComponent = useMemo(\n    () =>\n      forwardRef<HTMLButtonElement>((_, ref) => {\n        return (\n          <SbPlaceholder style={{ padding: '20px 0' }}>\n            <div>\n              I'm a child component\n              <br />\n              <Button ref={ref}>I have a ref</Button>\n            </div>\n          </SbPlaceholder>\n        );\n      }),\n    []\n  );\n\n  return (\n    <Hint description=\"I'm positioned to a forwarded ref\" open>\n      <CustomComponent />\n    </Hint>\n  );\n}"},{name:"AnchorEl",description:"`Hint` can be positioned relative to an arbitrary element by passing `anchorEl` prop. In this case, positioning relative to children is disabled",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  return (\n    <div style={{ padding: '80px 0' }}>\n      <Button ref={setAnchorEl}>This is not a child</Button>\n\n      <Hint\n        description=\"I have children but am positioned to a button\"\n        open={!!anchorEl}\n        anchorEl={anchorEl}\n        placement=\"top\"\n      >\n        <span>This is a child</span>\n      </Hint>\n\n      <Hint open={!!anchorEl} anchorEl={anchorEl} description=\"I have no children at all!\" />\n    </div>\n  );\n}"},{name:"Flip",description:"Make the component flip to the other side of anchor element to fit into the viewport by providing the `flip` prop.\n\n⚠️⚠️⚠️ Be careful with this prop when using `Hint` in apps: since tooltips, modals, popovers, etc change app's viewport when open, `Hint` may flip itself unintentionally if its anchor element is not a child of `<AppContainer/>`'s root element in DOM.",code:"<Hint description=\"This hint is flipping!\" open flip>\n    <SbPlaceholder>Child</SbPlaceholder>\n  </Hint>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Hint/Hint.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597-20397",keywords:["hint","help","info","question","tooltip","information","used","attracting","user","attention","features","providing","usage","hints"]},{name:"Hotkey",modulePath:"componentsV2/Hotkey",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Hotkey",specifier:"@corva/ui/componentsV2",exportName:"Hotkey"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"keys",type:"ReactNode[] | ReactNode",required:true,description:"Key or key combination. In case of `string`, can be separated by `,` or `+` signs."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Hotkey {...props} />"},{name:"UsageInText",description:"Integrates seamlessly into plain text",code:"<Text>\n    Some text that can be pretty long, and have a hotkey <Hotkey keys=\"Ctrl+Shift+X\" /> inside.\n  </Text>"},{name:"PredefinedIcons",description:"You can use the predefined icons for commonly-used keys",code:"{\n  const keys = Object.keys(ReplacementIcons);\n\n  return (\n    <Grid cols={3}>\n      {keys.map(key => (\n        <Fragment key={key}>\n          <Grid.Cell span={1}>{key}</Grid.Cell>\n          <Grid.Cell span={2}>\n            <Hotkey keys={key} />\n          </Grid.Cell>\n        </Fragment>\n      ))}\n    </Grid>\n  );\n}"},{name:"InputVariants",description:"Can receive a wide variety of inputs as `keys` prop",code:"<SbColumn>\n    <Hotkey keys=\"Ctrl+Shift+A\" />\n    <Hotkey keys=\"Ctrl,Shift,A\" />\n    <Hotkey keys={['Ctrl', 'Shift', 'A']} />\n    {/* eslint-disable-next-line react/jsx-key */}\n    <Hotkey keys={['Esc', <PowerIcon />]} />\n    <Hotkey keys={<PowerIcon />} />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Hotkey/Hotkey.tsx",keywords:["hotkey"]},{name:"ImageViewer",modulePath:"componentsV2/ImageViewer",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"ImageViewer",specifier:"@corva/ui/componentsV2/ImageViewer/ImageViewer",form:"named",exportName:"ImageViewer"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"src",type:"string",required:false,description:""},{name:"width",type:"number",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""},{name:"onOpen",type:"() => void",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ImageViewer/ImageViewer.tsx",keywords:["imageviewer"]},{name:"IndicatorLive",modulePath:"componentsV2/IndicatorLive",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"IndicatorLive",specifier:"@corva/ui/componentsV2",exportName:"IndicatorLive"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"state",type:"'live' | 'offline'",required:true,description:"",enumValues:["live","offline"]},{name:"type",type:"'buttonLike' | 'indicator'",required:false,description:"",enumValues:["buttonLike","indicator"]},{name:"children",type:"React.ReactNode",required:false,description:"Content"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"lastActive",type:"string",required:false,description:""},{name:"disableTooltip",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<IndicatorLive {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`\n",code:"<SbColumn>\n    <IndicatorLive state=\"live\" size=\"large\" />\n    <IndicatorLive state=\"live\" size=\"medium\" />\n    <IndicatorLive state=\"live\" size=\"small\" />\n  </SbColumn>"},{name:"States",description:"Online status is controlled through the `state` prop that accepts the following values:\n\n- `live`\n- `offline`",code:"<SbColumn>\n    <IndicatorLive state=\"live\" />\n    <IndicatorLive state=\"offline\" />\n  </SbColumn>"},{name:"Types",description:"Component supports 2 visual styles controlled through the `type` prop:\n\n- `buttonLike` (default), often used in plase of `<ButtonLive/>`\n- `indicator`, used as a static indicator",code:"<SbColumn>\n    <IndicatorLive state=\"live\" type=\"buttonLike\" />\n    <IndicatorLive state=\"live\" type=\"indicator\" />\n  </SbColumn>"},{name:"IntegratedTooltip",description:"Component has an integrated tooltip, its content depends on `state` and `lastActive` props",code:"{\n  const lastActive = new Intl.DateTimeFormat('en-US', {\n    month: 'short',\n    day: '2-digit',\n    year: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true,\n  }).format(new Date());\n\n  return (\n    <SbColumn>\n      <IndicatorLive state=\"live\" />\n      <IndicatorLive state=\"offline\" />\n      <IndicatorLive state=\"offline\" lastActive={lastActive} />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/IndicatorLive/IndicatorLive.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=69896-51646",keywords:["indicatorlive"]},{name:"InterventionEventSelector",modulePath:"componentsV2/InterventionEventSelector",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"InterventionEventSelector",specifier:"@corva/ui/componentsV2",exportName:"InterventionEventSelector"},category:"v2",description:"A chip that opens a menu of intervention unit events for a well, letting the user scope app data to a single event or view all events. Fetches events by `wellId` (a well id, not a well asset id) and renders nothing when the well has no events. Self-contained: it ships its own `@tanstack/react-query` client, so host apps need no provider; stories are populated by seeding that client’s cache. A selection that does not belong to the current well is automatically reset to \"All events\" once the events load.",isExperimental:true,isDeprecated:false,props:[{name:"wellId",type:"number | null | undefined",required:true,description:""},{name:"selectedEventId",type:"number | string | null",required:true,description:"`null` means \"All events\""},{name:"onChange",type:"(eventId: number | null, event: InterventionUnitEvent | null) => void",required:true,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [selectedEventId, setSelectedEventId] = useState<number | string | null>(null);\n\n  return (\n    <InterventionEventSelector\n      {...props}\n      wellId={WELL_ID}\n      selectedEventId={selectedEventId}\n      onChange={setSelectedEventId}\n    />\n  );\n}"},{name:"WithSelectedEvent",description:"When an event is selected, the chip is labeled with the event operation and its start date. Selecting \"All events\" resets the selection (`onChange` is called with `null`).",code:"{\n  const [selectedEventId, setSelectedEventId] = useState<number | string | null>(5);\n\n  return (\n    <InterventionEventSelector\n      wellId={WELL_ID}\n      selectedEventId={selectedEventId}\n      onChange={setSelectedEventId}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/InterventionEventSelector/InterventionEventSelector.tsx",figmaUrl:"https://www.figma.com/file/DymK26x1RgI6IQKJBR8xDU/Navigation-Chips?node-id=37-19221",keywords:["interventioneventselector","chip","opens","menu","intervention","unit","events","well","letting","user","scope"]},{name:"Label",modulePath:"componentsV2/Label",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Label",specifier:"@corva/ui/componentsV2",exportName:"Label"},category:"v2",description:"Component for labelling blocks. Positioned absolutely by default, and takes up to 100% of container width.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"position",type:"'left' | 'right'",required:false,description:"",enumValues:["left","right"]},{name:"state",type:"'primary' | 'error' | 'info' | 'success' | 'neutral' | 'warning'",required:false,description:"",enumValues:["primary","error","info","success","neutral","warning"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Label {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `small`\n- `medium` (default)\n",code:"<SbColumn alignItems=\"stretch\">\n    <div className={styles.demoBlock}>\n      <Label size=\"small\">small</Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\">medium</Label>\n    </div>\n  </SbColumn>"},{name:"States",description:"Component's color is determined by the state prop. Available states:\n\n- `primary`\n- `neutral`\n- `info`\n- `error`\n- `warning`\n- `success`\n",code:"<SbColumn alignItems=\"stretch\">\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"primary\">\n        primary\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"neutral\">\n        neutral\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"info\">\n        info\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"error\">\n        error\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"warning\">\n        warning\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"success\">\n        success\n      </Label>\n    </div>\n  </SbColumn>"},{name:"PrefixAndSuffix",description:"You can add prefix/suffix by using the `prefix` and `suffix` props respectively.",code:"<Label prefix={<BubbleChartIcon />} suffix={<BubbleChartIcon />}>\n    With prefix and suffix\n  </Label>"},{name:"RealLifeExample",description:"You can adjust side paddings through CSS as needed.",code:"<Paper className={styles.demoPaper}>\n    <Label className={styles.paperLabel}>label with correct side padding</Label>\n    <SbPlaceholder className={styles.dummyContent}>Content</SbPlaceholder>\n  </Paper>"},{name:"WithTruncatedText",description:"Component works seamlessly with `<TextEndTruncated/>` or `<TextMiddleTruncated/>`.",code:"<Paper className={styles.demoPaper}>\n    <Label className={styles.paperLabel}>\n      <TextMiddleTruncated>\n        Extremely long label with correct side padding that will be truncated because we need to\n        provide an example\n      </TextMiddleTruncated>\n    </Label>\n    <SbPlaceholder className={styles.dummyContent}>Content</SbPlaceholder>\n  </Paper>"},{name:"CustomBackground",description:"You can set your own background by overriding the `background-color` or `background` CSS properties. You can also override the `color` CSS property.",code:"<Label size=\"medium\" className={styles.aaaaaaayPrettyLabel}>\n    A-a-a-a-a-ay! Pretty Label!\n  </Label>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Label/Label.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=128629-7086",keywords:["label","labelscounter","labels","counter","labels counter","assetnamelabel","asset","name","asset name label","component","labelling","blocks","positioned","absolutely","default","takes","container","width"]},{name:"LiveDotIndicator",modulePath:"componentsV2/LiveDotIndicator",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"LiveDotIndicator",specifier:"@corva/ui/componentsV2/LiveDotIndicator/LiveDotIndicator",form:"named",exportName:"LiveDotIndicator"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"state",type:"'live' | 'offline'",required:true,description:"",enumValues:["live","offline"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LiveDotIndicator/LiveDotIndicator.tsx",keywords:["livedotindicator"]},{name:"LoaderCircular",modulePath:"componentsV2/LoaderCircular",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"LoaderCircular",specifier:"@corva/ui/componentsV2",exportName:"LoaderCircular"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"'xs' | 'small' | 'medium' | 'large'",required:false,description:"",enumValues:["xs","small","medium","large"]},{name:"value",type:"number",required:false,description:"Value in range of 0-100. If omitted, the loader becomes indeterminate"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LoaderCircular {...props} />"},{name:"Sizes",description:"Component supports several sizing options:\n\n- `\"xs\"`\n- `\"small\" (default)`\n- `\"medium\"`\n- `\"large\"`",code:"<SbRow>\n    <LoaderCircular size=\"xs\" />\n    <LoaderCircular size=\"small\" />\n    <LoaderCircular size=\"medium\" />\n    <LoaderCircular size=\"large\" />\n  </SbRow>"},{name:"DeterminateVsIndeterminate",description:"The component is displayed in an \"indeterminate\" state by default. It's useful when we don't have the exact percentage of progress completion or we want to indicate that something is being loaded.\n\nProvide a `value` prop with values in a `[0, 100]` range to switch to \"determinate\" mode which allows to display the exact percentage",code:"<SbRow>\n    <LoaderCircular size=\"large\" />\n    <LoaderCircular value={33} size=\"large\" />\n    <LoaderCircular value={66} size=\"large\" />\n    <LoaderCircular value={100} size=\"large\" />\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LoaderCircular/LoaderCircular.tsx",keywords:["loadercircular","loading","spinner","progress","loadingindicator","indicator","loading indicator"]},{name:"LoaderLinear",modulePath:"componentsV2/LoaderLinear",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"LoaderLinear",specifier:"@corva/ui/componentsV2",exportName:"LoaderLinear"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"number",required:false,description:"Value in range of 0-100. If omitted, the loader becomes indeterminate"},{name:"type",type:"'primary' | 'fancy'",required:false,description:"",enumValues:["primary","fancy"]},{name:"size",type:"'medium' | 'small'",required:false,description:"",enumValues:["medium","small"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LoaderLinear {...props} />"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn alignItems=\"stretch\">\n    <LoaderLinear value={50} size=\"medium\" />\n    <LoaderLinear value={50} size=\"small\" />\n  </SbColumn>"},{name:"Types",description:"Component supports several types through its `type` prop\n\n- `primary` (default)\n- `fancy`",code:"<SbColumn alignItems=\"stretch\">\n    <Text>Primary</Text>\n    <LoaderLinear type=\"primary\" value={100} />\n    <LoaderLinear type=\"primary\" value={70} />\n    <LoaderLinear type=\"primary\" />\n    <Text>Fancy</Text>\n    <LoaderLinear type=\"fancy\" value={100} />\n    <LoaderLinear type=\"fancy\" value={70} />\n    <LoaderLinear type=\"fancy\" />\n  </SbColumn>"},{name:"DeterminateVsIndeterminate",description:"The component is displayed in an \"indeterminate\" state by default. It's useful when we don't have the exact percentage of progress completion or we want to indicate that something is being loaded.\n\nProvide a `value` prop with values in a `[0, 100]` range to switch to \"determinate\" mode which allows to display the exact percentage",code:"<SbColumn alignItems=\"stretch\">\n    <Text>Determinate</Text>\n    <LoaderLinear value={33} />\n    <LoaderLinear value={66} />\n    <LoaderLinear value={100} />\n    <Text>Indeterminate</Text>\n    <LoaderLinear />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LoaderLinear/LoaderLinear.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=114392-19904",keywords:["loaderlinear","loading","progress","bar","loadingindicator","indicator","loading indicator"]},{name:"LoaderLogo",modulePath:"componentsV2/LoaderLogo",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"LoaderLogo",specifier:"@corva/ui/componentsV2",exportName:"LoaderLogo"},category:"v2",description:"Used to provide a visual clue that the page/app/large UI block is in loading state",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"number",required:false,description:""},{name:"inverted",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LoaderLogo {...props} />"},{name:"Inverted",description:"Use `inverted` prop to display loader on white/light backgrounds",code:"<div style={{ background: '#fff' }}>\n    <LoaderLogo inverted />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LoaderLogo/LoaderLogo.tsx",keywords:["loaderlogo","loading","splash","brand","startup","loadingindicator","indicator","loading indicator","used","provide","visual","clue","page","large","block","state"]},{name:"Menu",modulePath:"componentsV2/Menu",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Menu",specifier:"@corva/ui/componentsV2",exportName:"Menu"},category:"v2",description:"A `<Popover/>` with additional bells and whistles to simplify menu creation.\n\nAccepts most of the props of the `<Popover/>` component\n\nProvides `<Menu.Item/>`, `<Menu.Group/>`, and `<Menu.Divider/>` subcomponents as its properties",agentSummary:"Item-list popover built on V2 Popover: Menu.Item with prefix/suffix content, selected and destructive states, plus Group and Divider. PopoverPanel covers freeform panel content.",isExperimental:true,isDeprecated:false,props:[{name:"anchorEl",type:"Required<PopoverProps>['anchorEl']",required:true,description:"A HTML element, or a function that returns it. It's used to set the position of the menu."},{name:"containerRef",type:"Ref<HTMLDivElement>",required:false,description:"Ref to content container"},{name:"className",type:"string",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey') => void",required:false,description:""},{name:"open",type:"boolean",required:true,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""},{name:"backdrop",type:"boolean",required:false,description:"Determines if backdrop should be rendered"},{name:"preventScroll",type:"boolean",required:false,description:"Prevents scroll when open"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"preventOverflow",type:"boolean",required:false,description:"Controls if Popover should stay inside its constraining element"},{name:"flip",type:"boolean",required:false,description:"Controls if Popover should flip to opposite side if there's no space to fit it"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`."},{name:"animate",type:"boolean",required:false,description:"Controls whether popover should animate itself"},{name:"style",type:"CSSProperties",required:false,description:"Escape hatch for when you need to pass dimensions/additional styles from JS"},{name:"popperClassName",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu\n        {...props}\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      >\n        {options.map(item => (\n          <Menu.Item\n            key={item}\n            onClick={(...args) => {\n              // eslint-disable-next-line no-console\n              console.log(`Menu item \"${item}\" onClick called with args:`, ...args);\n              setIsOpen(false);\n            }}\n          >\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Positioning",description:"You can control component's position by using `placement` prop. Refer to `<Popover/>`'s documentation page for details.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        placement=\"left-start\"\n      >\n        {options.map(item => (\n          <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Sizes",description:"Item size is controlled through the `size` prop of `<Menu.Item/>` component:\n\n- `medium` (default)\n- `large`",code:"{\n  const [open, setOpen] = useState(false);\n  const [size, setSize] = useState<ComponentProps<typeof Menu['Item']>['size']>();\n  const [anchor, setAnchor] = useState<HTMLElement>();\n\n  const getButtonClickHandler =\n    (newSize: typeof size): MouseEventHandler<HTMLButtonElement> =>\n    e => {\n      setAnchor(e.currentTarget);\n      setSize(newSize);\n      setOpen(true);\n    };\n\n  return (\n    <SbColumn>\n      <Button onClick={getButtonClickHandler('medium')}>Medium</Button>\n      <Button onClick={getButtonClickHandler('large')}>Large</Button>\n\n      <Menu open={open} anchorEl={anchor as HTMLElement} onClose={() => setOpen(false)}>\n        {options.map(item => (\n          <Menu.Item key={item} onClick={() => setOpen(false)} size={size}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </SbColumn>\n  );\n}"},{name:"SelectedItems",description:"You can display a menu item as selected by passing the `selected` prop",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        {options.map((item, index) => (\n          <Menu.Item key={item} onClick={() => setIsOpen(false)} selected={index === 2}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Types",description:"Component supports the following visual styles, controlled with a `type` prop:\n- `normal` (default)\n- `destructive`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        <Menu.Item type=\"normal\">Normal</Menu.Item>\n        <Menu.Item type=\"destructive\">Destructive</Menu.Item>\n      </Menu>\n    </>\n  );\n}"},{name:"PrefixAndSuffix",description:"You can display arbitrary content as prefix and/or suffix by using `prefix` and `suffix` props. Note that if those are [valid React elements](https://react.dev/reference/react/isValidElement), `size` and `className` props will be injected",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  const affixes = [SettingTwoIcon, BubbleChartIcon, AlarmClockIcon, ApplicationIcon];\n\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} prefix={<Icon />} size=\"large\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n        <Menu.Divider />\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} suffix={<Icon />} size=\"large\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n        <Menu.Divider />\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} prefix={<Icon />} size=\"medium\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n        <Menu.Divider />\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} suffix={<Icon />} size=\"medium\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Checkboxes",description:"Component has a special integration with `<Checkbox/>` component to allow \"multi-select\" menus. Use `<Menu.Divider/>` to separate the \"Select All\" option from the rest",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [value, setValue] = useState<string[]>([]);\n\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        <Menu.Item\n          size=\"large\"\n          prefix={\n            <Checkbox\n              checked={value.length === options.length}\n              indeterminate={value.length > 0 && value.length !== options.length}\n            />\n          }\n          onClick={() => {\n            if (value.length === options.length) {\n              setValue([]);\n            } else {\n              setValue([...options]);\n            }\n          }}\n        >\n          All\n        </Menu.Item>\n\n        <Menu.Divider />\n\n        {options.map(option => {\n          const checked = value.includes(option);\n          return (\n            <Menu.Item\n              key={option}\n              size=\"large\"\n              prefix={<Checkbox checked={checked} />}\n              onClick={() =>\n                setValue(prev => {\n                  if (checked) {\n                    return prev.filter(item => item !== option);\n                  }\n\n                  return [...prev, option];\n                })\n              }\n            >\n              {option}\n            </Menu.Item>\n          );\n        })}\n\n        <Menu.Divider />\n\n        {options.map(option => {\n          const checked = value.includes(option);\n          return (\n            <Menu.Item\n              key={option}\n              size=\"medium\"\n              prefix={<Checkbox checked={checked} />}\n              onClick={() =>\n                setValue(prev => {\n                  if (checked) {\n                    return prev.filter(item => item !== option);\n                  }\n\n                  return [...prev, option];\n                })\n              }\n            >\n              {option}\n            </Menu.Item>\n          );\n        })}\n      </Menu>\n    </>\n  );\n}"},{name:"Groups",description:"You can separate menu items into groups by using the `<Menu.Group/>` component",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        <Menu.Group label=\"Some Group\">\n          {options.map(item => (\n            <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n              {item}\n            </Menu.Item>\n          ))}\n        </Menu.Group>\n        <Menu.Group label=\"Other Group\">\n          {options.map(item => (\n            <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n              {item}\n            </Menu.Item>\n          ))}\n        </Menu.Group>\n      </Menu>\n    </>\n  );\n}"},{name:"Dividers",description:"You can separate menu items with a line by using the `<Menu.Divider/>` component",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        {options.map((item, i) => (\n          <Fragment key={item}>\n            {i === 3 && <Menu.Divider />}\n            <Menu.Item onClick={() => setIsOpen(false)}>{item}</Menu.Item>\n          </Fragment>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"ConstrainedMenu",description:"This example demonstrates a very common usecase: when menu has a fixed width and may have a scroll. In this case, menu size is controlled with `className` prop. It is recommended to use `<TextMiddleTruncated/>` to truncate menu items' text content",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={styles.constrainedMenu}\n      >\n        {options.concat(options).map((item, index) => (\n          <Menu.Item key={index} onClick={() => setIsOpen(false)}>\n            <TextMiddleTruncated>{`${item} `.repeat(5)}</TextMiddleTruncated>\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"OpenOnHover",description:"This example illustrates Menu operation on hover. Note that `backdrop` prop is used to omit backdrop rendering.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const closeTimerRef = useRef<NodeJS.Timeout>();\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  const onMouseEnter = () => {\n    clearTimeout(closeTimerRef.current);\n    setIsOpen(true);\n  };\n\n  const onMouseLeave = () => {\n    clearTimeout(closeTimerRef.current);\n    closeTimerRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 500);\n  };\n\n  return (\n    <>\n      <Button ref={toggleRef} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n        Hover me!\n      </Button>\n\n      <Menu\n        open={isOpen}\n        anchorEl={toggleRef.current}\n        backdrop={false}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {options.map(item => (\n          <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"SubMenus",description:"This example illustrates a basic case of \"nested\" Menus",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const subMenuAnchorRef = useRef<HTMLLIElement>(null);\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);\n  const closeTimerRef = useRef<NodeJS.Timeout>();\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setIsSubMenuOpen(false);\n  }, []);\n\n  const onMouseEnter = useCallback(() => {\n    clearTimeout(closeTimerRef.current);\n    setIsSubMenuOpen(true);\n  }, []);\n\n  const onMouseLeave = useCallback(() => {\n    clearTimeout(closeTimerRef.current);\n    closeTimerRef.current = setTimeout(() => {\n      setIsSubMenuOpen(false);\n    }, 500);\n  }, []);\n\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={close}>\n        <Menu.Item>Menu Item</Menu.Item>\n        <Menu.Item\n          onClick={() => setIsSubMenuOpen(true)}\n          ref={subMenuAnchorRef}\n          suffix={<RightIcon />}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          Click to open submenu\n        </Menu.Item>\n      </Menu>\n\n      <Menu\n        open={isSubMenuOpen}\n        anchorEl={subMenuAnchorRef.current}\n        onClose={close}\n        placement=\"right-start\"\n        backdrop={false}\n        preventScroll={false}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        <Menu.Item onClick={close}>Sub-Menu Item</Menu.Item>\n        <Menu.Item onClick={close}>Sub-Menu Item</Menu.Item>\n        <Menu.Item onClick={close}>Sub-Menu Item</Menu.Item>\n      </Menu>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Menu/Menu.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597-17471",keywords:["menu","dropdown","options","select","popover","menuitem","item","menu item","contextmenuitem","context","context menu item","iconmenu","icon","icon menu","additional","bells","whistles","simplify","creation","accepts","most","props"]},{name:"Modal",modulePath:"componentsV2/Modal",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Modal",specifier:"@corva/ui/componentsV2",exportName:"Modal"},category:"v2",description:"Modal component. Uses `<ModalWindow/>` under the hood to display the actual window",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"size",type:"'small' | 'medium' | 'large' | 'fullscreen'",required:false,description:"",enumValues:["small","medium","large","fullscreen"]},{name:"title",type:"ReactNode",required:false,description:""},{name:"showCloseButton",type:"boolean",required:false,description:""},{name:"primaryActionText",type:"ReactNode",required:false,description:"Contents of the primary button"},{name:"primaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for primary button"},{name:"primaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for primary button"},{name:"secondaryActionText",type:"ReactNode",required:false,description:"Contents of the secondary button"},{name:"secondaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for secondary button"},{name:"secondaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for secondary button"},{name:"actions",type:"ReactNode",required:false,description:"Additional actions to render in Modal's footer"},{name:"open",type:"boolean",required:true,description:""},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey' | 'closeButtonClick') => void",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        {...props}\n        open={isOpen}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      />\n    </>\n  );\n}"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `small`: 416px\n- `medium`: 552px\n- `large`: 768px\n- `fullscreen`: has its own height, takes 80% of viewport width, or 1152px, whichever is smaller",code:"{\n  const [size, setSize] = useState<Props['size']>();\n\n  return (\n    <SbColumn>\n      <Button onClick={() => setSize('small')}>Small</Button>\n      <Button onClick={() => setSize('medium')}>Medium</Button>\n      <Button onClick={() => setSize('large')}>Large</Button>\n      <Button onClick={() => setSize('fullscreen')}>Fullscreen</Button>\n      <Modal open={!!size} size={size} title={`Size: ${size}`} onClose={() => setSize(undefined)}>\n        Some content goes here\n      </Modal>\n    </SbColumn>\n  );\n}"},{name:"Actions",description:"Component supports 2 \"default\" actions, primary and secondary, which are controlled through `primaryAction*` and `secondaryAction*` props",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Modal with actions\"\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n        primaryActionText=\"Primary action\"\n        primaryActionHandler={() => {\n          // eslint-disable-next-line no-alert\n          alert('Primary action clicked');\n          setIsOpen(false);\n        }}\n        secondaryActionText=\"Secondary action\"\n        secondaryActionHandler={() => {\n          // eslint-disable-next-line no-alert\n          alert('Secondary action clicked');\n          setIsOpen(false);\n        }}\n      >\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"CustomActions",description:"You can add additional actions to modal by using `actions` prop. Additional actions are rendered alongside \"default\" ones",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Modal with custom actions\"\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n        actions={\n          <SbPlaceholder className={storyStyles.additionalAction}>\n            Put your additional actions here\n          </SbPlaceholder>\n        }\n      >\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"CloseVectors",description:"You can control the vectors through which user can close modal by using the following props:\n\n- `closeOnBackdropClick`: controls if modal should close when user clicks on backdrop\n- `closeOnEscape`: controls if modal should close when user presses the `Escape` key\n- `showCloseButton`: controls if close button should be shown",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Modal without close button\"\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n        primaryActionText=\"Close\"\n        primaryActionHandler={() => setIsOpen(false)}\n        closeOnBackdropClick={false}\n        closeOnEscape={false}\n        showCloseButton={false}\n      >\n        This modal has no close button, and can not be closed by pressing <Hotkey keys=\"Esc\" /> key\n        or clicking on the backdrop\n      </Modal>\n    </>\n  );\n}"},{name:"FullscreenModal",description:"Fullscreen modal has slightly differnt styles for its inner components: they allow usage of `height: 100%` to simplify usage with charts, etc.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const [height, setHeight] = useState('auto');\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Fullscreen Modal\"\n        onClose={() => setIsOpen(false)}\n        size=\"fullscreen\"\n      >\n        <div className={storyStyles.fullscreenContent} style={{ height }}>\n          <div className={storyStyles.fullscreenContentText}>\n            <SbColumn>\n              <Text>Height:</Text>\n              <RadioGroup\n                direction=\"vertical\"\n                value={height}\n                onChange={setHeight}\n                options={[\n                  { value: 'auto', label: 'Too small: (auto)' },\n                  { value: '200vh', label: 'Too big (200vh)' },\n                  { value: '100%', label: 'Just right (100%)' },\n                ]}\n              />\n            </SbColumn>\n          </div>\n        </div>\n      </Modal>\n    </>\n  );\n}"},{name:"WithAdditionalControlsInTitle",description:"You can pass `ReactNode` as `title`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title={\n          <div className={storyStyles.customTitle}>\n            Modal\n            <div className={storyStyles.actions}>\n              <Tooltip title=\"Upload\">\n                <ButtonIcon size=\"medium\" type=\"tertiaryBg\">\n                  <UploadIcon />\n                </ButtonIcon>\n              </Tooltip>\n\n              <Tooltip title=\"Download\">\n                <ButtonIcon size=\"medium\" type=\"tertiaryBg\">\n                  <DownloadIcon />\n                </ButtonIcon>\n              </Tooltip>\n            </div>\n          </div>\n        }\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n      >\n        Modal contents\n      </Modal>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Modal/Modal.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382-40936",keywords:["modal","dialog","popup","overlay","confirmation","component","uses","modalwindow","under","hood","display","actual","window"]},{name:"ModalWindow",modulePath:"componentsV2/ModalWindow",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ModalWindow",specifier:"@corva/ui/componentsV2",exportName:"ModalWindow"},category:"v2",description:"Modal window for `<Modal/>` component. Can be used for custom implementations of modals.\n\nRefer to `<Modal/>` for more examples.",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"onClose",type:"() => void",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large' | 'fullscreen'",required:false,description:"",enumValues:["small","medium","large","fullscreen"]},{name:"showCloseButton",type:"boolean",required:false,description:""},{name:"primaryActionText",type:"ReactNode",required:false,description:"Contents of the primary button"},{name:"primaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for primary button"},{name:"primaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for primary button"},{name:"secondaryActionText",type:"ReactNode",required:false,description:"Contents of the secondary button"},{name:"secondaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for secondary button"},{name:"secondaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for secondary button"},{name:"actions",type:"ReactNode",required:false,description:"Additional actions to render in Modal's footer"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ModalWindow {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ModalWindow/ModalWindow.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382-40936",keywords:["modalwindow","modal","window","component","used","custom","implementations","modals","refer","more","examples"]},{name:"OffsetWellsButton",modulePath:"componentsV2/OffsetWellsButton",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"OffsetWellsButton",specifier:"@corva/ui/componentsV2",exportName:"OffsetWellsButton"},category:"v2",description:"\nA modern button component for managing offset wells in drilling applications. \nDisplays well count, provides edit functionality, and supports expand/collapse behavior for well lists.\n\n**Key Features:**\n- Well count display with customizable label\n- Edit button with tooltip\n- Expandable/collapsible behavior for well lists\n- Limitations warning indicator\n- Disabled state support\n- Tooltip management options\n  ",agentSummary:"Offset wells count button with edit tooltip, expand chevron and limitations warning. Button only, renders no list or modal; CompletionsOffsetWellPicker embeds it as its trigger.",isExperimental:true,isDeprecated:false,props:[{name:"wells",type:"OffsetWell[] | number",required:false,description:""},{name:"onClick",type:"MouseEventHandler",required:false,description:""},{name:"expanded",type:"boolean",required:false,description:"Whether the wells list is currently expanded"},{name:"onExpand",type:"(expanded: boolean, event: MouseEvent<HTMLButtonElement>) => void",required:false,description:"Callback fired when expand/collapse button is clicked"},{name:"showLimitationsMessage",type:"boolean",required:false,description:"Shows info icon with limitations warning tooltip"},{name:"label",type:"ReactNode",required:false,description:"Custom label for the button (defaults to \"Offset Wells\")"},{name:"disabled",type:"boolean",required:false,description:"Disables all interactions with the component"},{name:"isExpandTooltipDisabled",type:"boolean",required:false,description:"Disables tooltips on expand/collapse button"},{name:"tooltipTitle",type:"string",required:false,description:"Custom text for the edit tooltip (defaults to 'Edit Offset Wells')"},{name:"forceExpandButton",type:"boolean",required:false,description:"Force showing expand icon even when wells === 0"},{name:"icon",type:"ReactElement | null",required:false,description:"Icon to display in the button (defaults to Well icon)"},{name:"className",type:"string",required:false,description:"Additional CSS class name"},{name:"testId",type:"string",required:false,description:"Test ID for the main button"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [expanded, setExpanded] = useState(props.expanded || false);\n\n  return (\n    <OffsetWellsButton\n      {...props}\n      expanded={expanded}\n      onExpand={(newExpanded, ...rest) => {\n        setExpanded(newExpanded);\n        props.onExpand?.(newExpanded, ...rest);\n      }}\n      onClick={props.onClick}\n    />\n  );\n}"},{name:"ExpandCollapse",description:"Expand chevron/clickable area is controlled by the `onExpand` prop.",code:"{\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <SbColumn>\n      <Text size={12} tagName=\"div\" color=\"T8\">\n        Currently: {expanded ? 'Expanded' : 'Collapsed'}\n      </Text>\n      <OffsetWellsButton\n        wells={[]}\n        forceExpandButton\n        expanded={expanded}\n        onClick={noop}\n        onExpand={setExpanded}\n      />\n      <OffsetWellsButton wells={mockWells(6)} onClick={noop} expanded={expanded} />\n    </SbColumn>\n  );\n}"},{name:"WellCounts",description:"Component shows its expand button if `wells` prop has a \"non-empty\" value",code:"<SbColumn>\n    <OffsetWellsButton wells={mockWells(3)} onClick={noop} onExpand={noop} />\n    <OffsetWellsButton wells={[]} onClick={noop} />\n  </SbColumn>"},{name:"CustomLabels",description:"You can pass custom label as a string or a `ReactNode` (useful for responsivity). \n\nComponent will add colon to label automatically if a string is passed",code:"<SbColumn>\n    <OffsetWellsButton wells={mockWells(5)} onClick={noop} onExpand={noop} />\n    <OffsetWellsButton wells={mockWells(3)} label=\"Parent Wells\" onClick={noop} onExpand={noop} />\n    <OffsetWellsButton wells={mockWells(2)} label=\"\" onClick={noop} onExpand={noop} />\n    <OffsetWellsButton\n      wells={mockWells(2)}\n      label={\n        <SbPlaceholder style={{ display: 'inline-block', width: 'auto', padding: '0 8px' }}>\n          Label:\n        </SbPlaceholder>\n      }\n      onClick={noop}\n      onExpand={noop}\n    />\n  </SbColumn>"},{name:"Icons",description:"You can pass a custom icon using the `icon` prop",code:"<OffsetWellsButton\n    wells={mockWells(4)}\n    icon={<Global size={20} />}\n    onClick={noop}\n    onExpand={noop}\n  />"},{name:"LimitationsMessage",description:"You can show the limitations warning indicator by providing the `showLimitationsMessage` prop.",code:"<OffsetWellsButton wells={mockWells(8)} onClick={noop} onExpand={noop} showLimitationsMessage />"},{name:"Tooltips",description:"You can disable expand/collapse tooltips by using the `isExpandTooltipDisabled` prop",code:"<OffsetWellsButton wells={mockWells(5)} onClick={noop} onExpand={noop} isExpandTooltipDisabled />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/OffsetWellsButton/OffsetWellsButton.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=133682-1140",keywords:["offsetwellsbutton","modern","button","component","managing","offset","wells","drilling","applications","displays","well"]},{name:"PadModeSelect",modulePath:"componentsV2/PadModeSelect",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"PadModeSelect",specifier:"@corva/ui/componentsV2",exportName:"PadModeSelect"},category:"v2",description:"Pad mode selection component. Needs App Commons context to work",isExperimental:true,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Wrapper>\n    <PadModeSelect {...props} />\n  </Wrapper>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/PadModeSelect/PadModeSelect.tsx",keywords:["padmodeselect","mode","selection","component","needs","commons","context","work"]},{name:"Paper",modulePath:"componentsV2/Paper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Paper",specifier:"@corva/ui/componentsV2",exportName:"Paper"},category:"v2",description:"A low-level component that serves as a container for cards, popovers, modals, etc",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"type",type:"'popover' | 'menu'",required:false,description:"Controls paper's background depending on application",enumValues:["popover","menu"]},{name:"style",type:"CSSProperties",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Paper {...props} />"},{name:"Types",description:"Depending on the application (popover with arbitrary content or a dropdown menu with selectable items) you may need different backgrounds. You can control that by using the `type` prop:\n\n- `popover` (default) used for popovers with arbitrary content (info panels, blocks with settings, etc)\n- `menu` used for dropdown menus (actions, autocompletes, etc)",code:"<SbColumn alignItems=\"stretch\">\n    <Paper type=\"popover\">\n      <SbPlaceholder style={{ height: '200px' }}>Popover</SbPlaceholder>\n    </Paper>\n    <Paper type=\"menu\">\n      <SbPlaceholder style={{ height: '200px' }}>Menu</SbPlaceholder>\n    </Paper>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Paper/Paper.tsx",keywords:["paper","card","container","panel","surface","low-level","component","serves","cards","popovers","modals"]},{name:"Popover",modulePath:"componentsV2/Popover",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Popover",specifier:"@corva/ui/componentsV2",exportName:"Popover"},category:"v2",description:"A low-level component for creating popovers with a backdrop. Provides very little own styling by default",isExperimental:true,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"anchorEl",type:"PopperProps['anchorEl']",required:false,description:"A HTML element, a function that returns it, or a virtual element exposing\n`getBoundingClientRect` (to anchor at a point). Sets the position of the popover."},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey') => void",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""},{name:"backdrop",type:"boolean",required:false,description:"Determines if backdrop should be rendered"},{name:"preventScroll",type:"boolean",required:false,description:"Prevents scroll when open"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"preventOverflow",type:"boolean",required:false,description:"Controls if Popover should stay inside its constraining element"},{name:"flip",type:"boolean",required:false,description:"Controls if Popover should flip to opposite side if there's no space to fit it"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`."},{name:"animate",type:"boolean",required:false,description:"Controls whether popover should animate itself"},{name:"style",type:"CSSProperties",required:false,description:"Escape hatch for when you need to pass dimensions/additional styles from JS"},{name:"type",type:"PaperProps['type']",required:false,description:"Controls paper's background depending on application: `menu` should be used for dropdown menus (with selectable options as opposed to arbitrary content)"},{name:"className",type:"string",required:false,description:""},{name:"popperClassName",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <SbPlaceholder style={{ display: 'inline-block', width: 'auto' }}>\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open Popover\n        </Button>\n      </SbPlaceholder>\n      <Popover\n        {...props}\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      />\n    </>\n  );\n}"},{name:"Types",description:"Depending on the application (popover with arbitrary content or a dropdown menu with selectable items) you may need different backgrounds. You can control that by using the `type` prop:\n\n- `popover` (default) used for popovers with arbitrary content (info panels, blocks with settings, etc)\n- `menu` used for dropdown menus (actions, autocompletes, etc)",code:"{\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const popoverAnchorRef = useRef<HTMLButtonElement>(null);\n  const menuAnchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <SbColumn>\n      <Button size=\"small\" onClick={() => setIsPopoverOpen(true)} ref={popoverAnchorRef}>\n        Popover\n      </Button>\n\n      <Button size=\"small\" onClick={() => setIsMenuOpen(true)} ref={menuAnchorRef}>\n        Menu\n      </Button>\n\n      <Popover\n        onClose={() => setIsPopoverOpen(false)}\n        anchorEl={popoverAnchorRef.current}\n        open={isPopoverOpen}\n        type=\"popover\"\n      >\n        <SbPlaceholder style={{ width: '200px', height: '200px' }}>Popover</SbPlaceholder>\n      </Popover>\n\n      <Popover\n        onClose={() => setIsMenuOpen(false)}\n        anchorEl={menuAnchorRef.current}\n        open={isMenuOpen}\n        type=\"menu\"\n      >\n        <SbPlaceholder style={{ width: '200px', height: '200px' }}>Menu</SbPlaceholder>\n      </Popover>\n    </SbColumn>\n  );\n}"},{name:"Placement",description:"Component supports different placements. Opening animation varies slightly for each of them",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [placement, setPlacement] = useState<Required<Props>['placement']>(placements[0]);\n\n  const options = placements.map(id => ({\n    id,\n    title: id,\n  }));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ width: '200px' }}>\n        <Autocomplete\n          label=\"Placement\"\n          value={placement}\n          onChange={value => value?.id && setPlacement(value?.id)}\n          options={options}\n          clearable={false}\n        />\n      </div>\n\n      <div\n        style={{ height: '300px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}\n      >\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open Popover\n        </Button>\n      </div>\n\n      <Popover\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        placement={placement}\n      >\n        <div style={{ padding: '40px 20px' }}>Popover content goes here</div>\n      </Popover>\n    </SbColumn>\n  );\n}"},{name:"CloseVectors",description:"You can control the vectors through which user can close popover by using the following props:\n\n- `closeOnBackdropClick`: controls if popover should close when user clicks on backdrop\n- `closeOnEscape`: controls if popover should close when user presses the `Escape` key",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <SbPlaceholder style={{ display: 'inline-block', width: 'auto' }}>\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open Popover\n        </Button>\n      </SbPlaceholder>\n\n      <Popover\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        // This will never be called\n        onClose={() => setIsOpen(false)}\n        closeOnBackdropClick={false}\n        closeOnEscape={false}\n      >\n        <SbColumn>\n          This popover can not be closed by pressing <Hotkey keys=\"Esc\" /> key or clicking on the\n          backdrop.\n          <Button onClick={() => setIsOpen(false)}>Close</Button>\n        </SbColumn>\n      </Popover>\n    </>\n  );\n}"},{name:"OpenOnHover",description:"This example illustrates Popover operation on hover. Note that `backdrop` prop is used to omit backdrop rendering.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const closeTimerRef = useRef<NodeJS.Timeout>();\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  const onMouseEnter = () => {\n    clearTimeout(closeTimerRef.current);\n    setIsOpen(true);\n  };\n\n  const onMouseLeave = () => {\n    clearTimeout(closeTimerRef.current);\n    closeTimerRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 500);\n  };\n\n  return (\n    <>\n      <Button ref={toggleRef} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n        Hover me!\n      </Button>\n\n      <Popover\n        open={isOpen}\n        anchorEl={toggleRef.current}\n        backdrop={false}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        Content\n      </Popover>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Popover/Popover.tsx",keywords:["popover","popup","overlay","floating","hover","low-level","component","creating","popovers","backdrop","provides","very","little","styling","default"]},{name:"PopoverPanel",modulePath:"componentsV2/PopoverPanel",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"PopoverPanel",specifier:"@corva/ui/componentsV2",exportName:"PopoverPanel"},category:"v2",description:"A component for creating general-purpose popovers. Provides necessary styling & structural components:\n\n`PopoverPanel.Header`, `PopoverPanel.Content`, `PopoverPanel.Footer`, and `PopoverPanel.Divider`\n\nAccepts same props as `Popover`",agentSummary:"Popover with panel structure: Header with close button and actions, scrollable Content, sticky Footer, Divider. Same props as V2 Popover; use Menu for item lists.",isExperimental:true,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"anchorEl",type:"PopperProps['anchorEl']",required:false,description:"A HTML element, a function that returns it, or a virtual element exposing\n`getBoundingClientRect` (to anchor at a point). Sets the position of the popover."},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey') => void",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""},{name:"backdrop",type:"boolean",required:false,description:"Determines if backdrop should be rendered"},{name:"preventScroll",type:"boolean",required:false,description:"Prevents scroll when open"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"preventOverflow",type:"boolean",required:false,description:"Controls if Popover should stay inside its constraining element"},{name:"flip",type:"boolean",required:false,description:"Controls if Popover should flip to opposite side if there's no space to fit it"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`."},{name:"animate",type:"boolean",required:false,description:"Controls whether popover should animate itself"},{name:"style",type:"CSSProperties",required:false,description:"Escape hatch for when you need to pass dimensions/additional styles from JS"},{name:"type",type:"PaperProps['type']",required:false,description:"Controls paper's background depending on application: `menu` should be used for dropdown menus (with selectable options as opposed to arbitrary content)"},{name:"className",type:"string",required:false,description:""},{name:"popperClassName",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <SbPlaceholder style={{ display: 'inline-block', width: 'auto' }}>\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open PopoverPanel\n        </Button>\n      </SbPlaceholder>\n      <PopoverPanel\n        {...props}\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      >\n        <PopoverPanel.Content>Content</PopoverPanel.Content>\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"Subcomponents",description:"PopoverPanel ships with a set of subcomponents that cover most layout needs:\n\n- `PopoverPanel.Header` renders a header.\n- `PopoverPanel.Content` renders a scrollable content area.\n- `PopoverPanel.Footer` renders a sticky footer.\n- `PopoverPanel.Divider` renders a separator that can be used both inside and between content blocks. Please note, the divider has own margins when used inside `PopoverPanel.Content`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const [tallContent, setTallContent] = useState(false);\n  const [fixedHeight, setFixedHeight] = useState(false);\n  const [headerLongText, setHeaderLongText] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={classNames(styles.withWidth, fixedHeight && styles.withHeight)}\n      >\n        <PopoverPanel.Header onClose={() => setIsOpen(false)}>\n          {headerLongText ? longHeaderText : headerShortText}\n        </PopoverPanel.Header>\n        <PopoverPanel.Content>\n          <Switch\n            size=\"small\"\n            onLabel=\"Long header content\"\n            checked={headerLongText}\n            onChange={setHeaderLongText}\n          />\n          <PopoverPanel.Divider margin=\"medium\" />\n          <Switch\n            size=\"small\"\n            onLabel=\"Fixed popover height\"\n            checked={fixedHeight}\n            onChange={setFixedHeight}\n          />\n          <PopoverPanel.Divider margin=\"medium\" />\n          <Switch\n            size=\"small\"\n            onLabel=\"Tall content\"\n            checked={tallContent}\n            onChange={setTallContent}\n          />\n\n          {tallContent && (\n            <>\n              <PopoverPanel.Divider margin=\"medium\" />\n              <SbPlaceholder className={styles.tallContent}>Tall content</SbPlaceholder>\n            </>\n          )}\n        </PopoverPanel.Content>\n\n        <PopoverPanel.Footer>\n          <SbPlaceholder style={{ height: '50px' }}>Footer</SbPlaceholder>\n        </PopoverPanel.Footer>\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"AdditionalControlsInHeader",description:"Use `actions` prop of `PopoverPanel.Header` to render extra controls before the close button.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={styles.withWidth}\n      >\n        <PopoverPanel.Header\n          onClose={() => setIsOpen(false)}\n          actions={\n            <>\n              <ButtonIcon size=\"small\">\n                <LockIcon />\n              </ButtonIcon>\n\n              <ButtonIcon size=\"small\">\n                <LocalPinIcon />\n              </ButtonIcon>\n            </>\n          }\n        >\n          Header{' '}\n          <Chip size=\"small\" state=\"success\">\n            Chip\n          </Chip>\n        </PopoverPanel.Header>\n        <PopoverPanel.Content>Content</PopoverPanel.Content>\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"NoHeaderOrFooter",description:"`PopoverPanel.Content` automatically adjusts its vertical paddings when header and/or footer are absent.",code:"{\n  const [hasHeader, setHasHeader] = useState(false);\n  const [hasFooter, setHasFooter] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={styles.withWidth}\n      >\n        {hasHeader && <PopoverPanel.Header>Header</PopoverPanel.Header>}\n        <PopoverPanel.Content>\n          <SbColumn alignItems=\"stretch\">\n            <Switch size=\"small\" onLabel=\"Header\" checked={hasHeader} onChange={setHasHeader} />\n            <Switch size=\"small\" onLabel=\"Footer\" checked={hasFooter} onChange={setHasFooter} />\n          </SbColumn>\n        </PopoverPanel.Content>\n        {hasFooter && <PopoverPanel.Footer>Footer</PopoverPanel.Footer>}\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"OnlyHeaderAndFooter",description:"`PopoverPanel.Header` and `PopoverPanel.Footer` position themselves automatically, you can use your own implementation of content if you need to.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={classNames(styles.withWidth, styles.withHeight)}\n      >\n        <PopoverPanel.Header onClose={() => setIsOpen(false)}>Header</PopoverPanel.Header>\n\n        <SbPlaceholder style={{ height: '50px' }}>\n          Custom content\n          <br />\n          (not PopoverPanel.Content)\n        </SbPlaceholder>\n\n        <PopoverPanel.Footer>\n          <SbPlaceholder style={{ height: '50px' }}>Footer</SbPlaceholder>\n        </PopoverPanel.Footer>\n      </PopoverPanel>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/PopoverPanel/PopoverPanel.tsx",keywords:["popoverpanel","component","creating","general-purpose","popovers","provides","necessary","styling","structural","components"]},{name:"Popper",modulePath:"componentsV2/Popper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Popper",specifier:"@corva/ui/componentsV2",exportName:"Popper"},category:"v2",description:"A low-level component for displaying popups, tooltips, etc. You will most likely need `<Popover/>`, `<Menu/>` or `<Tooltip/>`",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode | ((props: {\n        placement: MuiPopperPlacementType;\n        TransitionProps?: TransitionProps;\n      }) => ReactNode)",required:true,description:"Contents of the popover"},{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"AnchorEl | (() => AnchorEl) | null",required:false,description:"Defines an HTML node to which the content will be positioned"},{name:"placement",type:"'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'",required:false,description:"Defines placement",enumValues:["bottom-end","bottom-start","bottom","left-end","left-start","left","right-end","right-start","right","top-end","top-start","top"]},{name:"modifiers",type:"object",required:false,description:"Popper's modifiers. See [documentation](https://popper.js.org/docs/v1/#modifiers)"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`. Does not open \"pseudo-fullscreen\" for an isolated app if passed."},{name:"transition",type:"boolean",required:false,description:"Help supporting a react-transition-group/Transition component"},{name:"className",type:"string",required:false,description:""},{name:"popperRef",type:"Ref<PopperJs>",required:false,description:"Ref to popper object. Use `scheduleUpdate` method for performant reposition/recalculation as per [docs](https://popper.js.org/docs/v1/#popperscheduleupdate)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(anchorEl ? undefined : e.currentTarget)}>\n        Toggle Open\n      </Button>\n      <Popper {...props} open={!!anchorEl} anchorEl={anchorEl} />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Popper/Popper.tsx",keywords:["popper","floating","positioned","overlay","popup","low-level","component","displaying","popups","tooltips","will","most","likely","need","popover"]},{name:"Radio",modulePath:"componentsV2/Radio",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Radio",specifier:"@corva/ui/componentsV2",exportName:"Radio"},category:"v2",description:"Radio buttons allow the user to select one option from a set. In 90% of cases you'll want to use `<RadioGroup />`",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"labelPlacement",type:"'top' | 'bottom' | 'start' | 'end'",required:false,description:"Controls whee the label will be placed",enumValues:["top","bottom","start","end"]},{name:"label",type:"ReactNode",required:false,description:"Label"},{name:"disabled",type:"boolean",required:false,description:""},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"onChange",type:"(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:"Called when a radio is checked. Is _not_ called when radio is unchecked."}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Radio {...props} />"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Radio size=\"medium\" label=\"Label\" />\n    <Radio size=\"small\" label=\"Label\" />\n  </SbColumn>"},{name:"LabelPlacementAndMargins",description:"Component supports different label positions relative to the radio. This is controlled through the `labelPlacement` prop\n\n- `end` (default): to the right\n- `start`: to the left. Use `text-align: right;` on the container for best results\n- `top`\n- `bottom`\n\nNote that the radio's active area is slightly shifted from the container",code:"<SbColumn alignItems=\"start\">\n    <SbPlaceholder style={{ ...styleProp, textAlign: 'right' }}>\n      <Radio label=\"start\" labelPlacement=\"start\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Radio label=\"end\" labelPlacement=\"end\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Radio label=\"top\" labelPlacement=\"top\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Radio label=\"bottom\" labelPlacement=\"bottom\" />\n    </SbPlaceholder>\n  </SbColumn>"},{name:"InteractiveExample",description:"An interactive example. Note that the `onChange` _is not_ called when radio becomes unchecked",code:"{\n  const [value, setValue] = useState<'one' | 'other'>();\n\n  return (\n    <SbRow>\n      <Radio label=\"One\" checked={value === 'one'} onChange={() => setValue('one')} />\n      <Radio label=\"Other\" checked={value === 'other'} onChange={() => setValue('other')} />\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Radio/Radio.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699-1638",keywords:["radio","choice","option","select","group","buttons","allow","user","cases","want","radiogroup"]},{name:"RadioAndCheckboxGroup",modulePath:"componentsV2/RadioAndCheckboxGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"RadioAndCheckboxGroup",specifier:"@corva/ui/componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup",form:"named",exportName:"RadioAndCheckboxGroup"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"component",type:"ComponentType<InputComponentProps>",required:true,description:""},{name:"getOnChangeHandler",type:"(optionValue: T, value?: V | undefined) => InputComponentProps['onChange']",required:true,description:""},{name:"getOptionChecked",type:"(optionValue: T, value?: V | undefined) => boolean",required:true,description:""},{name:"value",type:"V",required:false,description:""},{name:"options",type:"{ value: T; label: ReactNode; }[]",required:false,description:"Array of values and their labels"},{name:"label",type:"ReactNode",required:false,description:"Group label"},{name:"message",type:"ReactNode",required:false,description:""},{name:"status",type:"'error'",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"spacing",type:"'dense' | 'normal'",required:false,description:"controls spacing between options",enumValues:["dense","normal"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup.tsx",keywords:["radioandcheckboxgroup"]},{name:"RadioAndCheckboxLabel",modulePath:"componentsV2/RadioAndCheckboxLabel",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"RadioAndCheckboxLabel",specifier:"@corva/ui/componentsV2/RadioAndCheckboxLabel/RadioAndCheckboxLabel",form:"named",exportName:"RadioAndCheckboxLabel"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"control",type:"ReactElement",required:true,description:"Control to show"},{name:"label",type:"ReactNode",required:false,description:"Label"},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"disabled",type:"boolean",required:false,description:""},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"onChange",type:"(event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"labelPlacement",type:"'top' | 'bottom' | 'start' | 'end'",required:false,description:"Controls whee the label will be placed",enumValues:["top","bottom","start","end"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/RadioAndCheckboxLabel/RadioAndCheckboxLabel.tsx",keywords:["radioandcheckboxlabel"]},{name:"RadioGroup",modulePath:"componentsV2/RadioGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"RadioGroup",specifier:"@corva/ui/componentsV2",exportName:"RadioGroup"},category:"v2",description:"Radio buttons allow the user to select one option from a set. Works with almost any type of `value`",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"T",required:false,description:"Selected value"},{name:"onChange",type:"(value: T, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"options",type:"{ value: T; label: ReactNode; }[]",required:false,description:"Array of values and their labels"},{name:"label",type:"ReactNode",required:false,description:"Group label"},{name:"status",type:"'error'",required:false,description:""},{name:"message",type:"ReactNode",required:false,description:""},{name:"spacing",type:"'dense' | 'normal'",required:false,description:"controls spacing between options",enumValues:["dense","normal"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<string>(options[0].value);\n  return (\n    <RadioGroup\n      {...props}\n      options={options}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <RadioGroup label=\"Size: medium\" options={options} value={options[0].value} size=\"medium\" />\n    <RadioGroup label=\"Size: small\" options={options} value={options[0].value} size=\"small\" />\n  </SbRow>"},{name:"Spacing",description:"Component supports 2 spacing options, controlled through `spacing` prop:\n\n- `normal` (default)\n- `dense`",code:"<SbRow>\n    <RadioGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={options[0].value}\n      spacing=\"normal\"\n    />\n    <RadioGroup label=\"Spacing: dense\" options={options} value={options[0].value} spacing=\"dense\" />\n  </SbRow>"},{name:"Horisontal",description:"Radios can be displayed in a row by using the `direction` prop which can receive the following options:\n\n- `vertical` (default)\n- `horizontal`",code:"<SbRow>\n    <RadioGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={options[0].value}\n      spacing=\"normal\"\n      direction=\"horizontal\"\n    />\n    <RadioGroup\n      label=\"Spacing: dense\"\n      options={options}\n      value={options[0].value}\n      spacing=\"dense\"\n      direction=\"horizontal\"\n    />\n  </SbRow>"},{name:"NonScalarValues",description:"`<RadioGroup />` can work with any type of options `value`, which is represented in component types. You can either define the type explicitly or rely on inferred typings\n\nOption comparison is done with strict equality (`===`)",code:"{\n  // Option's `value` is an object\n  const complexOptions = useMemo(\n    () =>\n      options.map(({ label }) => ({\n        label,\n        value: { randomId: Math.round(Math.random() * 1000), name: label },\n      })),\n    []\n  );\n  const [value, setValue] = useState(complexOptions[0].value);\n\n  return (\n    <SbColumn>\n      <RadioGroup\n        options={complexOptions}\n        value={value}\n        onChange={value => setValue(value)}\n        message={`Value: ${JSON.stringify(value)}`}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/RadioGroup/RadioGroup.tsx",keywords:["radiogroup","radio","buttons","allow","user","select","option","works","almost","type","value"]},{name:"Select",modulePath:"componentsV2/Select",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Select",specifier:"@corva/ui/componentsV2",exportName:"Select"},category:"v2",description:"A select component.\n\nProvides generic `SelectProps<OptionType, Multiple>` and `SelectChangeHandler<OptionType, Multiple>` types to simplify typing:\n\n```ts\nconst handler = useCallback<SelectChangeHandler<Option>>(/* snip */); // For single select (default)\nconst handler = useCallback<SelectChangeHandler<Option, true>>(/* snip */); // For multi select\n\n```\n\nYou can see usage examples in stories below.\n\nUse `label` for a visible accessible name. If a visible label is not appropriate, pass `aria-label` or `aria-labelledby` through `htmlAttributes`.",agentSummary:"Plain dropdown over id/title options: AutocompleteNext with typing disabled, no search, filtering or onCreate. Takes options and value, unlike the MenuItem-children V1 Select.",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"TextInputNextProps['size']",required:false,description:""},{name:"labelPlacement",type:"TextInputNextProps['labelPlacement']",required:false,description:""},{name:"elementsClassNames",type:"TextInputNextProps['elementsClassNames']",required:false,description:"Escape hatch to fine-tune the styling of underlying elements"},{name:"htmlAttributes",type:"TextInputNextProps['htmlAttributes']",required:false,description:"HTML attributes forwarded to the underlying input."},{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 false | undefined ? 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:"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:"status",type:"TextInputNextProps['status']",required:false,description:""},{name:"message",type:"TextInputNextProps['message']",required:false,description:""},{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:"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:"useOnlyOptionButton",type:"boolean",required:false,description:"If `multiple === true` shows a \"Select Only\" button on option that selects only the corresponding option"},{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:"popperProps",type:"Partial<AutocompletePopperProps>",required:false,description:"Escape hatch to customize dropdown popper behavior.\n`open`, `anchorEl`, and `children` are controlled internally."},{name:"onOpen",type:"() => void",required:false,description:"Called when the dropdown is opened"},{name:"onClose",type:"(reason: MuiAutocompleteCloseReason) => void",required:false,description:"Called when the dropdown is closed"},{name:"listboxComponent",type:"ComponentType<HTMLAttributes<HTMLElement>>",required:false,description:"Custom listbox component for rendering options (e.g., virtualized list)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<number[]>([]);\n\n  return (\n    <Select\n      {...props}\n      options={options}\n      value={value}\n      onChange={(newValue, reason, event) => {\n        props.onChange?.(newValue as never, reason, event);\n        // These type castings is generally not needed, Autocomplete will determine its type based on `multiple` prop\n        // Which generally should be statically analyzable\n        if (newValue instanceof Array) {\n          setValue((newValue as Option[]).map(({ id }) => id));\n        } else if (newValue) {\n          setValue([(newValue as Option)?.id]);\n        }\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop, inherited from `<TextInput/>`:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select {...commonProps} label=\"Small\" size=\"small\" />\n      <Select {...commonProps} label=\"Medium\" size=\"medium\" />\n      <Select {...commonProps} label=\"Large\" size=\"large\" />\n    </SbColumn>\n  );\n}"},{name:"LabelPlacement",description:"Component supports 3 label placement options through a `labelPlacement` prop, inherited from `<TextInput/>`:\n\n- `top` (default)\n- `start`\n- `end`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select {...commonProps} label=\"Label at the top\" labelPlacement=\"top\" />\n      <Select {...commonProps} label=\"Label at the start\" labelPlacement=\"start\" />\n      <Select {...commonProps} label=\"Label at the end\" labelPlacement=\"end\" />\n    </SbColumn>\n  );\n}"},{name:"OptionsSize",description:"Component supports several option sizes, controlled through `optionSize` prop:\n\n- `medium` (default)\n- `large`",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Medium options\"\n        optionSize=\"medium\"\n      />\n      <Select\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Large options\"\n        optionSize=\"large\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Single",description:"Single-option is the default behaviour.",code:"{\n  const [value, setValue] = useState<number>();\n\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return <Select options={options} value={value} onChange={onChange} label=\"Single\" />;\n}"},{name:"WithObjectsAsValue",description:"You can use objects in `value` prop.\n\n⚠️ Be wary of mixing `T`s and `T['id']`s in `value`: due to [TS bug](https://github.com/microsoft/TypeScript/issues/47599) you may need to provide additional typing to `onChange`",code:"{\n  const [valueSingle, setValueSingle] = useState<Option | undefined>(options[2]);\n  const [valueMultiple, setValueMultiple] = useState<(Option | number)[]>([\n    options[0],\n    options[2],\n    9,\n  ]);\n  const [valueMultiple2, setValueMultiple2] = useState<Option[]>([options[0], options[2]]);\n\n  // There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\n  // to have incorrect typing if we mix T and T['id'] in `value`.\n  const onMultipleChange = useCallback<SelectChangeHandler<Option, true>>(\n    v => setValueMultiple(v),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        value={valueSingle}\n        onChange={setValueSingle}\n        label=\"With objects as value (single)\"\n      />\n\n      <Select\n        multiple\n        options={options}\n        value={valueMultiple}\n        onChange={onMultipleChange}\n        label=\"With objects as value (multiple, mixed objects and ids)\"\n      />\n\n      <Select\n        multiple\n        options={options}\n        value={valueMultiple2}\n        onChange={setValueMultiple2}\n        label=\"With objects as value (multiple, pure)\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Multiple",description:"Pass `multiple` prop to make component be able to select multiple values.\n\nUse `useAllOption` prop to add a special \"All\" option that allows user to quickly select all options.",code:"{\n  const [value, setValue] = useState<number[]>([1]);\n\n  const onChange = useCallback<SelectChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select multiple options={options} value={value} onChange={onChange} label=\"Multiple\" />\n      <Select\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" option'}\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"MultipleWithCustomSelectedRender",description:"Use `renderSelected` prop to customize how the selected values are rendered.\n\nBy default the component displays the selected item's title, \"X Selected\", or \"All\", depending on its value. It is provided as `Select.selectedValueRenderers.default`.\n\nYou can use the \"Multiline Chips\" renderer, provided as `Select.selectedValueRenderers.chipsMultiline`",code:"{\n  const [value, setValue] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  const onChange = useCallback<SelectChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        multiple\n        options={options}\n        value={options}\n        onChange={() => {}}\n        label=\"Default multiple - all selected\"\n      />\n      <Select\n        multiple\n        options={options}\n        value={[1, 2, 3]}\n        onChange={() => {}}\n        label=\"Default multiple - some selected\"\n      />\n      <Select\n        multiple\n        options={options}\n        value={[1]}\n        onChange={() => {}}\n        label=\"Default multiple - one selected\"\n      />\n      <Select\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with chips\"\n        renderSelected={Select.selectedValueRenderers.chipsMultiline}\n      />\n      <Select\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with custom value render\"\n        renderSelected={data => {\n          if (data.length === 0) {\n            return null;\n          }\n\n          return (\n            <>\n              <Chip\n                onDelete={data[0].onDelete}\n                size=\"small\"\n                shape=\"square\"\n                className={styles.customChip}\n              >\n                {data[0].option.title}\n              </Chip>\n              {data.length > 1 && ` +${data.length - 1}`}\n            </>\n          );\n        }}\n      />\n    </SbColumn>\n  );\n}"},{name:"Empty",description:"Use `noOptionsMessage` option to customize the message that is shown when there are no options to select",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select label=\"Empty\" onChange={() => {}} />\n      <Select\n        label=\"Empty with custom empty message\"\n        noOptionsMessage={<u>Nobody here but us chickens</u>}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Loading",description:"Use `loading` prop to indicate that some data is being loaded. Note that if there are no options, a custom message will be shown",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Loading State\"\n        loading\n      />\n\n      <Select\n        options={options.slice(0, 0)}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Empty Loading State\"\n        loading\n      />\n    </SbColumn>\n  );\n}"},{name:"OptionPrefix",description:"To display an icon/prefix to the left of the option, pass it as a `prefix` property of the option",code:"{\n  const icons = [SearchOne, BroadcastIcon, LineChartIcon, AdjustmentIcon];\n  const optionsWithPrefix = options.slice(0, 4).map((option, index) => {\n    const Icon = icons[index];\n    return { ...option, prefix: <Icon /> };\n  });\n  const [valueArr, setValueArr] = useState<number[]>();\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={optionsWithPrefix}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Single\"\n      />\n      <Select\n        multiple\n        options={optionsWithPrefix}\n        value={valueArr}\n        onChange={value => setValueArr(value?.map(({ id }) => id))}\n        label=\"Multiple\"\n      />\n    </SbColumn>\n  );\n}"},{name:"CustomOptionRender",description:"You can control how the option renders by providing the `renderOption` prop.\n\nNote that in this case, you will need to wrap the texts in `<TextMiddleTruncated/>` or `<TextEndTruncated/>`",code:"{\n  return (\n    <Select\n      options={options}\n      label=\"Custom Option Render\"\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"Disabled",description:"You can control which options are disabled by providing the `getOptionDisabled` prop",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Select\n      label=\"With disabled options\"\n      options={options}\n      value={value}\n      onChange={option => setValue(option?.id)}\n      getOptionDisabled={option => option.group === 'Great Old Ones'}\n    />\n  );\n}"},{name:"Prefix",description:"You can add a prefix to the component through `prefix` prop.",code:"{\n  return (\n    <Select\n      options={options}\n      label=\"With Prefix\"\n      prefix={<SearchOne />}\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"PopupIconAndClearButton",description:"You can control the existence of \"Clear\" button and \"Popup Icon\" by using `clearable` and `showPopupIcon` props respectively",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        label=\"Default: Clearable, Popup Icon\"\n        value={1}\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label=\"Not Clearable\"\n        value={1}\n        clearable={false}\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label=\"No Popup Icon\"\n        value={1}\n        showPopupIcon={false}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Error",description:"To display the component in an error state, use the `status` prop. You can add a message with a `message` prop",code:"{\n  return (\n    <Select\n      options={options}\n      label=\"With Error\"\n      status=\"error\"\n      message=\"Some error message\"\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"WithGroups",description:"You can group options by providing the `groupBy` prop.\n\nYou can control the render of groups by providing the `renderGroup` prop.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        label=\"With Groups\"\n        value={1}\n        groupBy={option => option.group}\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label={'With Groups, multiselect with \"All\" option'}\n        value={[1]}\n        groupBy={option => option.group}\n        multiple\n        useAllOption\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label=\"With Custom Groups\"\n        value={1}\n        groupBy={option => option.group}\n        renderGroup={({ children, group }) => {\n          return (\n            <div>\n              <div style={{ textAlign: 'center' }}>\n                <Text size={12}>{group}</Text>\n              </div>\n              <ul style={{ padding: 0 }}>{children}</ul>\n            </div>\n          );\n        }}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"DropdownClassName",description:"You can add a custom class name to a dropdown by using the `dropdownClassName` prop",code:"<Select\n    options={options}\n    label=\"With custom dropdown styles\"\n    dropdownClassName={styles.customDropdown}\n    onChange={() => {}}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Select/Select.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=162399-10653",keywords:["select","dropdown","choose","pick","options","component","provides","generic","selectprops","optiontype","multiple","selectchangehandler","types","simplify"]},{name:"Skeleton",modulePath:"componentsV2/Skeleton",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Skeleton",specifier:"@corva/ui/componentsV2",exportName:"Skeleton"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"type",type:"'text' | 'circle' | 'block'",required:false,description:"",enumValues:["text","circle","block"]},{name:"width",type:"number | string",required:false,description:"`number` value is treated as pixels, everything else is passed through unchanged"},{name:"height",type:"number | string",required:false,description:"`number` value is treated as pixels, everything else is passed through unchanged"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Skeleton {...props} />"},{name:"SkeletonForText",description:"Use `type=\"text\"` to make component mimic a text line. It automatically adjusts its height depending on font-size and line-height.\n\nWorks both as an only child, and as a part of a paragraph",code:"<Grid>\n    <Grid.Cell span={6}>\n      <Text size={14}>\n        <Skeleton />\n      </Text>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Text size={14}>Some text here</Text>\n    </Grid.Cell>\n\n    <Grid.Cell span={6}>\n      <Text size={24}>\n        <Skeleton />\n      </Text>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Text size={24}>Some text here</Text>\n    </Grid.Cell>\n\n    <Grid.Cell span={6}>\n      <Header appearance=\"H1\">\n        <Skeleton />\n      </Header>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Header appearance=\"H1\">Some text</Header>\n    </Grid.Cell>\n\n    <Grid.Cell>\n      <Text size={14}>\n        Some text <Skeleton width={60} /> with skeletons\n      </Text>\n    </Grid.Cell>\n\n    <Grid.Cell>\n      <Text size={16}>\n        Some text <Skeleton width={60} /> with skeletons\n      </Text>\n    </Grid.Cell>\n\n    <Grid.Cell>\n      <Text size={20}>\n        Some text <Skeleton width={60} /> with skeletons\n      </Text>\n    </Grid.Cell>\n  </Grid>"},{name:"SkeletonForBlocks",description:"Use `type=\"block\"` to make component mimic a block: an image, a chart, etc. Use `height` or `className` props to give it correct height",code:"<Skeleton height={250} type=\"block\" />"},{name:"SkeletonForAvatars",description:"Use `type=\"block\"` to make component mimic a circular element: an Avatar for example.",code:"<SbRow>\n    <Skeleton type=\"circle\" width={40} height={40} />\n    <Avatar name=\"Enoch Bowen\" size={40} />\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Skeleton/Skeleton.tsx",keywords:["skeleton","loading","placeholder","shimmer"]},{name:"Slider",modulePath:"componentsV2/Slider",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Slider",specifier:"@corva/ui/componentsV2",exportName:"Slider"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"min",type:"number",required:true,description:"Minimum value"},{name:"max",type:"number",required:true,description:"Maximum value"},{name:"from",type:"number",required:false,description:"Range start value"},{name:"to",type:"number",required:false,description:"Range end value"},{name:"onChange",type:"(range: SliderOnChangeParam) => void",required:false,description:"Callback function called every time `from` or `to` values are changed. Bound to mousemove event"},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"Determines component's direction.\n\nNote that if `vertical`, component takes 100% of available vertical space",enumValues:["horizontal","vertical"]},{name:"reversed",type:"boolean",required:false,description:"Flips component's direction from left-to-right to right-to-left, and from top-to-bottom to bottom-to-top"},{name:"precision",type:"number",required:false,description:"Digits after decimal point"},{name:"minRange",type:"number",required:false,description:"Minimum allowed difference between `from` and `to` values"},{name:"range",type:"boolean",required:false,description:"If `false` - fixes range's lower border, effectively turning the component into a single-value `Slider`"},{name:"disabled",type:"boolean",required:false,description:""},{name:"showInputs",type:"boolean",required:false,description:"Hides input fields on the edges of the slider"},{name:"step",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 2000,\n    to: 4000,\n  });\n\n  return <Slider {...props} {...value} onChange={setValue} />;\n}"},{name:"InputFields",description:"Input fields on the sides of the slider are editable by default. The `onChange` callback is called on each `change` event.",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({ from: 2000, to: 8000 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...value} min={0} max={10000} onChange={setValue} />\n    </SbColumn>\n  );\n}"},{name:"Direction",description:"Component supports 2 directions, controlled by a `direction` prop:\n\n- `horizontal` (default)\n- `vertical`\n\nUse the `reversed` prop to reverse direction",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 2000,\n    to: 8000,\n  });\n\n  const props = {\n    ...value,\n    onChange: setValue,\n    min: 0,\n    max: 10000,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...props} direction=\"horizontal\" />\n      <Slider {...props} direction=\"horizontal\" reversed />\n      <SbRow style={{ height: '300px' }}>\n        <Slider {...props} direction=\"vertical\" />\n        <Slider {...props} direction=\"vertical\" reversed />\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"MinRange",description:"Use the `minRange` prop to set minimum range size",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0,\n    to: 8000,\n  });\n\n  return <Slider {...value} min={0} max={10000} onChange={setValue} minRange={2000} />;\n}"},{name:"NoInputs",description:"You can hide inputs by using the `showInputs` prop",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0,\n    to: 8000,\n  });\n\n  return <Slider {...value} min={0} max={10000} onChange={setValue} showInputs={false} />;\n}"},{name:"RegularSlider",description:"You can use the `range={false}` prop to enable the \"standard slider\" mode. Note, that `from` property is still passed to the `onChange` handler",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0,\n    to: 8000,\n  });\n\n  const props = {\n    ...value,\n    onChange: setValue,\n    min: 0,\n    max: 10000,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...props} direction=\"horizontal\" range={false} />\n      <Slider {...props} direction=\"horizontal\" reversed range={false} />\n      <SbRow style={{ height: '300px' }}>\n        <Slider {...props} direction=\"vertical\" range={false} />\n        <Slider {...props} direction=\"vertical\" reversed range={false} />\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"Precision",description:"You can add `precision` prop to use decimal values",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0.2,\n    to: 0.5,\n  });\n\n  const props = {\n    ...value,\n    onChange: setValue,\n    min: 0,\n    max: 1,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...props} direction=\"horizontal\" precision={1} />\n      <Slider {...props} direction=\"horizontal\" precision={3} />\n    </SbColumn>\n  );\n}"},{name:"WithStep",description:"You can add `step` prop to control minimum change of slider",code:"{\n  const [valueBasic, setValueBasic] = useState<SliderOnChangeParam>({ from: 2000, to: 8000 });\n  const [valueWrong, setValueWrong] = useState<SliderOnChangeParam>({\n    from: 2000,\n    to: 8000,\n  });\n  const [valueWrongEnd, setValueWrongEnd] = useState<SliderOnChangeParam>({ from: 2500, to: 8500 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Basic. Range: 0 - 10000, step 1000</Text>\n      <Slider {...valueBasic} min={0} max={10000} onChange={setValueBasic} step={1000} />\n\n      <Text>\n        \"Shifted\" values. Range: 500 - 10500, step 1000, values are not multiples of 1000 starting\n        from 500\n      </Text>\n      <Slider {...valueWrong} min={500} max={10500} onChange={setValueWrong} step={1000} />\n\n      <Text>\n        Range: 500 - 11000, step 1000, max is not a multiple of 1000 starting from 500.\n        <br />\n        Max is adjusted to 10500\n      </Text>\n      <Slider {...valueWrongEnd} min={500} max={11000} onChange={setValueWrongEnd} step={1000} />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Slider/Slider.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=61015-109319",keywords:["slider"]},{name:"SliderAdvanced",modulePath:"componentsV2/SliderAdvanced",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"SliderAdvanced",specifier:"@corva/ui/componentsV2",exportName:"SliderAdvanced"},category:"v2",description:"Slider intended to overlay graphs and other axes. Provides `SliderAdvancedOnChangeParam`, `SliderAdvancedDragElement`, and `SliderAdvancedHandleProps` utility types.",agentSummary:"Graph-overlay range slider with editable, read-only or minimal handles. Slider is the standalone one and replaces V1 AdvancedSlider.",isExperimental:true,isDeprecated:false,props:[{name:"min",type:"number",required:true,description:"Minimum value"},{name:"max",type:"number",required:true,description:"Maximum value"},{name:"from",type:"number",required:true,description:"Range start value"},{name:"to",type:"number",required:true,description:"Range end value"},{name:"onChange",type:"(value: SliderAdvancedOnChangeParam) => void",required:false,description:""},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"reversed",type:"boolean",required:false,description:"Reverses axis"},{name:"floatingHandlePosition",type:"'default' | 'reverse' | 'none'",required:false,description:"Positions \"floating\" handle (outside of track)",enumValues:["default","reverse","none"]},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"formatValue",type:"(value: number) => number",required:false,description:"Processes `from` and `to` passed to `onChange`"},{name:"onDragStart",type:"(element: SliderAdvancedDragElement) => void",required:false,description:""},{name:"onDragEnd",type:"(element: SliderAdvancedDragElement) => void",required:false,description:""},{name:"handleComponent",type:"ComponentType<SliderAdvancedHandleProps>",required:false,description:""},{name:"elementsClassNames",type:"Partial<{\n    track: string;\n    startHandle: string;\n    endHandle: string;\n    bar: string;\n  }>",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 1_000, to: 2_000 });\n  return (\n    <div style={props.direction === 'vertical' ? { height: 400 } : undefined}>\n      <SliderAdvanced {...props} {...value} onChange={setValue} />\n    </div>\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 1_000, to: 4_000 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <SliderAdvanced min={0} max={5_000} {...value} onChange={setValue} size=\"small\" />\n      <SliderAdvanced min={0} max={5_000} {...value} onChange={setValue} size=\"medium\" />\n      <SliderAdvanced min={0} max={5_000} {...value} onChange={setValue} size=\"large\" />\n    </SbColumn>\n  );\n}"},{name:"Direction",description:"Component supports 2 directions, controlled by a `direction` prop:\n\n- `horizontal` (default)\n- `vertical`\n\nUse the `reversed` prop to reverse direction",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 1_000, to: 4_000 });\n  const props = { ...value, min: 0, max: 5_000, onChange: setValue };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <SliderAdvanced {...props} direction=\"horizontal\" />\n      <SliderAdvanced {...props} direction=\"horizontal\" reversed />\n      <SbRow style={{ height: '300px' }}>\n        <SliderAdvanced {...props} direction=\"vertical\" />\n        <SliderAdvanced {...props} direction=\"vertical\" reversed />\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"HandleVariants",description:"You can provide your custom drag handles by using the `handleComponent` prop.\n\nComponent provides the following \"standard\" handles out of the box, exported as `SliderAdvanced.Handles.*`:\n\n- `Editable` (default)\n- `Readonly`\n\n- `Minimal`",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 0, to: 2_000 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <SbPlaceholder>\n        <SliderAdvanced\n          min={0}\n          max={5_000}\n          {...value}\n          onChange={setValue}\n          handleComponent={SliderAdvanced.Handles.Editable}\n        />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <SliderAdvanced\n          min={0}\n          max={5_000}\n          {...value}\n          onChange={setValue}\n          handleComponent={SliderAdvanced.Handles.Readonly}\n        />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <SliderAdvanced\n          min={0}\n          max={5_000}\n          {...value}\n          onChange={setValue}\n          handleComponent={SliderAdvanced.Handles.Minimal}\n        />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"},{name:"CustomHandleFormat",description:"For custom display formats, use `formatValue` and `parseFieldValue` props of the `<SliderAdvanced.Handles.Editable/>` component.\n\nUse `className` and `elementsClassNames` props to tweak paddings if needed",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 0, to: 47_226 });\n\n  const numberToTime = useCallback(\n    (value: number) => moment.utc(value * 1000).format('HH:mm:ss'),\n    []\n  );\n\n  const timeToNumber = useCallback((value: string) => {\n    const parts = String(value).trim().split(':');\n\n    if (parts.length < 2 || parts.length > 3 || !parts.every(part => /^\\d+$/.test(part))) {\n      return NaN;\n    }\n\n    const [hours, minutes, seconds = '0'] = parts;\n\n    return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);\n  }, []);\n\n  const MyHandle = useMemo(\n    () => (props: SliderAdvancedHandleProps) =>\n      (\n        <SliderAdvanced.Handles.Editable\n          {...props}\n          formatValue={numberToTime}\n          parseFieldValue={timeToNumber}\n        />\n      ),\n    [numberToTime, timeToNumber]\n  );\n\n  const elementsClassNames = useMemo(\n    () => ({ endHandle: storyStyles.wideHandle, startHandle: storyStyles.wideHandle }),\n    []\n  );\n\n  return (\n    <SliderAdvanced\n      min={0}\n      max={86400}\n      {...value}\n      onChange={setValue}\n      handleComponent={MyHandle}\n      className={storyStyles.rootWithPadding}\n      elementsClassNames={elementsClassNames}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/SliderAdvanced/SliderAdvanced.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=92653-18704&p=f&m=dev",keywords:["slideradvanced","slider","intended","overlay","graphs","other","axes","provides","slideradvancedonchangeparam","slideradvanceddragelement","slideradvancedhandleprops"]},{name:"Stepper",modulePath:"componentsV2/Stepper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Stepper",specifier:"@corva/ui/componentsV2",exportName:"Stepper"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"steps",type:"Step[]",required:true,description:""},{name:"activeStep",type:"number",required:false,description:""},{name:"size",type:"'medium' | 'large'",required:false,description:"",enumValues:["medium","large"]},{name:"onStepClick",type:"(index: number, clickedStep: Step) => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Stepper {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `large`\n- `medium` (default)\n",code:"<SbColumn alignItems=\"stretch\">\n    <Stepper steps={steps} size=\"large\" activeStep={1} />\n    <Stepper steps={steps} size=\"medium\" activeStep={1} />\n  </SbColumn>"},{name:"StepClickHandler",description:"To make passed steps hoverable and clickable, use the `onStepClick` prop",code:"<Stepper steps={steps} onStepClick={onClickLogger} activeStep={1} />"},{name:"NonReturnableSteps",description:"To disable user's return to some steps, use the `noReturn` property of `Step`",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({ ...step, noReturn: true }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"},{name:"DisabledState",description:"To disable some steps, set the `state` property of `Step` to `'disabled'`.\n\nYou can disable only future steps",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({ ...step, state: 'disabled' }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"},{name:"ErrorState",description:"To add error state to some steps, set the `state` property of `Step` to `'error'`.",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({ ...step, state: 'error' }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"},{name:"StepTooltips",description:"You can add your own tooltip to a step by providing the `tooltip` property of `Step`",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({\n    ...step,\n    tooltip: `Some tooltip for ${step.title}`,\n  }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Stepper/Stepper.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=70173-98741",keywords:["stepper","wizard","steps","progress","flow"]},{name:"Switch",modulePath:"componentsV2/Switch",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Switch",specifier:"@corva/ui/componentsV2",exportName:"Switch"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"onLabel",type:"ReactNode",required:false,description:""},{name:"offLabel",type:"ReactNode",required:false,description:""},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"disabled",type:"boolean",required:false,description:""},{name:"onChange",type:"(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"disableOffState",type:"boolean",required:false,description:"If set to `true`, Switch will have the colors/styles as  if it's checked. Labels will change color depending on checked status"},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [checked, setChecked] = useState(false);\n  return (\n    <Switch\n      {...props}\n      checked={checked}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setChecked(value);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Switch onLabel=\"On\" offLabel=\"Off\" checked size=\"medium\" />\n    <Switch onLabel=\"On\" offLabel=\"Off\" checked size=\"small\" />\n  </SbColumn>"},{name:"Disabled",description:"Use the `disabled` prop to make component disabled",code:"<SbColumn>\n    <Switch onLabel=\"On\" offLabel=\"Off\" checked disabled />\n    <Switch onLabel=\"On\" offLabel=\"Off\" disabled />\n  </SbColumn>"},{name:"AOrB",description:"For the use case when user is making a choice between two values (as opposed to on/off state), use the `disableOffState` prop.\n\nIn this case, component will be always displayed coloured, as if it is in the \"checked\" state, and label will change their color depending on what is selected",code:"{\n  const [checked, setChecked] = useState(false);\n  return (\n    <SbColumn>\n      <Switch\n        offLabel=\"Apples\"\n        onLabel=\"Oranges\"\n        checked={checked}\n        onChange={setChecked}\n        disableOffState\n      />\n      <Switch\n        offLabel=\"Apples\"\n        onLabel=\"Oranges\"\n        checked={checked}\n        onChange={setChecked}\n        disableOffState\n        disabled\n      />\n    </SbColumn>\n  );\n}"},{name:"UsageWithoutLabels",description:"You can freely use only one of the labels, or none at all",code:"{\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <SbColumn>\n      <SbPlaceholder style={{ width: 'auto' }}>\n        <Switch offLabel=\"Off label only\" checked={checked} onChange={setChecked} />\n      </SbPlaceholder>\n\n      <SbPlaceholder style={{ width: 'auto' }}>\n        <Switch onLabel=\"On label only\" checked={checked} onChange={setChecked} />\n      </SbPlaceholder>\n\n      <SbPlaceholder style={{ width: 'auto' }}>\n        <Switch checked={checked} onChange={setChecked} />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Switch/Switch.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699-2848",keywords:["switch","toggle","on","off","boolean","switchcontrol","control","switch control"]},{name:"Tabs",modulePath:"componentsV2/Tabs",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Tabs",specifier:"@corva/ui/componentsV2",exportName:"Tabs"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"TabsItem<Value>[]",required:true,description:""},{name:"onChange",type:"((value: Value) => void) | Dispatch<SetStateAction<Value>>",required:false,description:""},{name:"value",type:"Value",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"type",type:"'primary' | 'secondary' | 'tertiary'",required:false,description:"",enumValues:["primary","secondary","tertiary"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(items[1].value);\n  return (\n    <Tabs\n      {...props}\n      items={items}\n      value={value}\n      onChange={(newValue: string) => {\n        props.onChange?.(newValue);\n        setValue(newValue);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn alignItems=\"stretch\">\n    <Tabs size=\"medium\" value={items[1].value} items={shortItems} type=\"primary\" />\n    <Tabs size=\"small\" value={items[1].value} items={shortItems} type=\"primary\" />\n  </SbColumn>"},{name:"WithPrefixAndSuffix",description:"You can add prefixes and/or suffixes to tabs by providing the `prefix` and/or `suffix` properties in `items`' item",code:"{\n  const itemsPrefixed = shortItems.map(item => ({ ...item, prefix: <ChartLineIcon /> }));\n  const itemsSuffixed = shortItems.map(item => ({ ...item, suffix: <ChartLineIcon /> }));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Tabs value={itemsPrefixed[1].value} items={itemsPrefixed} type=\"secondary\" size=\"medium\" />\n      <Tabs value={itemsPrefixed[1].value} items={itemsPrefixed} type=\"secondary\" size=\"small\" />\n\n      <Tabs value={itemsSuffixed[1].value} items={itemsSuffixed} type=\"secondary\" size=\"medium\" />\n      <Tabs value={itemsSuffixed[1].value} items={itemsSuffixed} type=\"secondary\" size=\"small\" />\n    </SbColumn>\n  );\n}"},{name:"Types",description:"Component supports different types through its `type` prop\n\n- `primary` (default)\n- `secondary`\n- `tertiary`\n",code:"<SbColumn alignItems=\"stretch\">\n    <Tabs value={items[1].value} items={shortItems} type=\"primary\" />\n    <Tabs value={items[1].value} items={shortItems} type=\"secondary\" />\n    <Tabs value={items[1].value} items={shortItems} type=\"tertiary\" />\n  </SbColumn>"},{name:"DisabledTabs",description:"You can disable tabs by setting the `disabled` property to `true` in `items`' item",code:"{\n  const itemsDisabled = shortItems.map(item => ({ ...item, disabled: true }));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Tabs value={items[1].value} items={itemsDisabled} type=\"primary\" />\n      <Tabs value={items[1].value} items={itemsDisabled} type=\"secondary\" />\n      <Tabs value={items[1].value} items={itemsDisabled} type=\"tertiary\" />\n    </SbColumn>\n  );\n}"},{name:"WithTooltips",description:"You can add tooltips to tabs by providing the `tooltip` property in `items`' item",code:"{\n  const itemsWithTooltip = shortItems.map(item => ({\n    ...item,\n    tooltip: `Tooltip for ${item.label}`,\n  }));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Tabs value={items[1].value} items={itemsWithTooltip} type=\"primary\" />\n      <Tabs value={items[1].value} items={itemsWithTooltip} type=\"secondary\" />\n      <Tabs value={items[1].value} items={itemsWithTooltip} type=\"tertiary\" />\n    </SbColumn>\n  );\n}"},{name:"VerticalTabs",description:"Use the `direction` prop to display tabs vertically",code:"<Grid>\n    <Grid.Cell span={6}>\n      <Tabs value={items[1].value} items={items} type=\"primary\" direction=\"vertical\" />\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Tabs value={items[1].value} items={items} type=\"secondary\" direction=\"vertical\" />\n    </Grid.Cell>\n  </Grid>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Tabs/Tabs.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=92653-36403",keywords:["tabs","navigation","sections","panels","switch"]},{name:"Tag",modulePath:"componentsV2/Tag",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Tag",specifier:"@corva/ui/componentsV2",exportName:"Tag"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"state",type:"'light' | 'dark'",required:false,description:"",enumValues:["light","dark"]},{name:"size",type:"'large' | 'medium' | 'small'",required:false,description:"",enumValues:["large","medium","small"]},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Tag {...props} />"},{name:"Sizes",description:"Component supports several sizing options controlled through the `size` prop:\n\n- `\"small\"`\n- `\"medium\" (default)`\n- `\"large\"`",code:"<SbColumn>\n    <Tag size=\"small\">Small</Tag>\n    <Tag size=\"medium\">Medium</Tag>\n    <Tag size=\"large\">Large</Tag>\n  </SbColumn>"},{name:"Colors",description:"Component supports several color options controlled through the `state` prop:\n\n- `\"dark\" (default)`\n- `\"light\"`\n",code:"<SbColumn>\n    <Tag state=\"dark\">Dark</Tag>\n    <Tag state=\"light\">Light</Tag>\n  </SbColumn>"},{name:"PrefixAndSuffix",description:"You can add a prefix and/or suffix by using the `prefix` and `suffix` props respectively",code:"<SbRow>\n    <SbColumn>\n      <Tag size=\"small\" prefix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" prefix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" prefix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n    <SbColumn>\n      <Tag size=\"small\" state=\"light\" prefix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" state=\"light\" prefix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" state=\"light\" prefix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n\n    <SbColumn>\n      <Tag size=\"small\" suffix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" suffix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" suffix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n    <SbColumn>\n      <Tag size=\"small\" state=\"light\" suffix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" state=\"light\" suffix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" state=\"light\" suffix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n  </SbRow>"},{name:"WithTruncatedText",description:"Component works seamlessly with `<TextEndTruncated/>` or `<TextMiddleTruncated/>`.\n\n",code:"<SbColumn>\n    <Tag prefix={<BubbleChartIcon />}>\n      <TextEndTruncated>{longText}</TextEndTruncated>\n    </Tag>\n    <Tag prefix={<BubbleChartIcon />}>\n      <TextMiddleTruncated>{longText}</TextMiddleTruncated>\n    </Tag>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Tag/Tag.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=131053-12637",keywords:["tag","label","badge","chip","pill","indicator"]},{name:"TemplatesControl",modulePath:"componentsV2/TemplatesControl",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TemplatesControl",specifier:"@corva/ui/componentsV2",exportName:"TemplatesControl"},category:"v2",description:"App settings templates control.\n\nExposes several utility types, for convenience:\n\n```tsx\nTemplatesControlChangeHandler<T> // Type of change handler\nTemplate<T> // Template\nTemplatesControlAdditionalControlProps<T> // Props for additional controls\n```\n\nAlso exposes its constituent parts, internal API, and utility functions if you want to integrate with its lifecycle, add custom logic, etc:\n\n```tsx\nTemplatesControl.Provider\nTemplatesControl.Toggle\nTemplatesControl.Popover // Requires anchor node, use `TemplatesControl.GetHeaderElement` to get header element (default behaviour)\nTemplatesControl.ToggleDisplayDefault // Default display component for toggle. Exposed to easily implement \"New!\" tag\nTemplatesControl.GetPopoverAnchorNode\ngetTemplatesControlStoreApi // Function that returns properly typed object of hooks to get data and perform actions from TemplatesControl's store\n```",agentSummary:"App settings templates control: header popover to pick, save, publish and organize per-app templates stored via the Corva API. Needs App Commons and Permissions contexts.",isExperimental:true,isDeprecated:false,props:[{name:"currentTemplateId",type:"number",required:false,description:"Id of the currently selected template"},{name:"templateSettings",type:"T",required:false,description:"Full data of the current template"},{name:"presetTemplates",type:"Template<T>[]",required:false,description:"Aka \"default templates\", preset by app itself"},{name:"foldersEnabled",type:"boolean",required:false,description:""},{name:"reloadListOnOpen",type:"boolean",required:false,description:"If `true` - will reload templates list when opening popover"},{name:"publishEnabled",type:"boolean",required:false,description:""},{name:"templateIconColors",type:"string[]",required:false,description:""},{name:"defaultTemplateIconColor",type:"string",required:false,description:""},{name:"templateIconMap",type:"Record<string, ComponentType<{ color?: string; className?: string; size?: number; }>>",required:false,description:""},{name:"defaultTemplateIcon",type:"string",required:false,description:""},{name:"onChange",type:"(template: Template<T> | undefined, reason: 'initialLoad' | 'reloadList' | 'deleteTemplate' | 'selectTemplate') => void",required:false,description:"Called when current template is changed\n\n⚠️⚠️⚠️ This callback is called asynchronously, which may make several state setters produce several state updates,\nleading to incorrect data fed into TemplatesControl when template data \"lags behind\" template id.\nGenerally, template id and template data should be processed together as an atomic object."},{name:"getDefaultTemplate",type:"(templates: Template<T>[], state: { currentTemplateId?: number; templateSettings?: T | undefined; event: 'loadList' | 'reloadList' | 'deleteTemplate'; }) => Template<T> | undefined",required:false,description:"Used to determine template id selected on initial load or when current template is deleted.\n\nCan be used to enforce \"App always has a template\" workflow"},{name:"filterInitialTemplates",type:"(allTemplates: Template<T>[]) => Template<T>[] | Promise<Template<T>[]>",required:false,description:"Filters/replaces templates on initial load. Receives a list of templates already filtered according user's access rights"},{name:"templateControls",type:"ComponentType<TemplatesControlAdditionalControlProps<T>>",required:false,description:"Additional controls to render in template menu. `TemplatesControlAdditionalControlProps` type is exported for convenience."},{name:"toggleContent",type:"ReactNode",required:false,description:"Content to show inside of toggle"},{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"toggleLayout",type:"ToggleProps['layout']",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Please note, the following props are not meant to be changed in runtime:\n\n```tsx\npresetTemplates,\nfoldersEnabled,\ntemplateIconColors,\ntemplateIconMap,\ndefaultTemplateIcon,\npublishEnabled,\ndefaultTemplateIconColor,\n```",code:"{\n  const { onChange } = props;\n\n  const iniitalTemplate = presetTemplates[0];\n  const [templateSettings, setTemplateData] = useState<Data & { templateId?: number }>({\n    templateId: iniitalTemplate.id,\n    stringValue: iniitalTemplate.settings.stringValue,\n    numberValue: iniitalTemplate.settings.numberValue,\n  });\n\n  const actualOnChange = useCallback<TemplatesControlChangeHandler<Data>>(\n    (...args) => {\n      onChange?.(...args);\n\n      if (args[0]) {\n        const { id, settings } = args[0];\n        const { stringValue, numberValue } = settings || {};\n        setTemplateData({ templateId: id, numberValue, stringValue });\n      }\n    },\n    [onChange]\n  );\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          {...props}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          onChange={actualOnChange}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <TextInput\n            label=\"String value\"\n            onChange={stringValue => setTemplateData(prev => ({ ...prev, stringValue }))}\n            value={templateSettings.stringValue}\n          />\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <TextInput\n            label=\"Number value\"\n            onChange={numberValue =>\n              setTemplateData(prev => ({ ...prev, numberValue: Number(numberValue) }))\n            }\n            value={templateSettings.numberValue}\n          />\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <SbColumn>\n            Current template id: {templateSettings.templateId}\n            <Button onClick={() => setTemplateData({})}>Clear template</Button>\n          </SbColumn>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"WithNoPublishRights",description:"Template trees are different for users with and without the ability to publish templates.",code:"<ContextWrapper\n    canPublish={false}\n    templatesControl={<TemplatesControl presetTemplates={presetTemplates} />}\n  />"},{name:"WithOutdatedData",description:"If the selected template has outdated/different data from user's own template, the data from template is immediately applied.",code:"{\n  const initial: Data & { templateId?: number } = {\n    templateId: 46386,\n    stringValue: 'Outdated data',\n    numberValue: 0,\n  };\n  const [templateSettings, setTemplateData] = useState(initial);\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          onChange={template => {\n            if (template) {\n              const {\n                id,\n                settings: { stringValue, numberValue },\n              } = template;\n              setTemplateData({ templateId: id, stringValue, numberValue });\n            }\n          }}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Initial</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {initial.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {initial.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {initial.numberValue}\n          </Text>\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Current</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {templateSettings.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {templateSettings.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {templateSettings.numberValue}\n          </Text>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"WithOutdatedDataAndPresetTemplate",description:"If the selected template has outdated/different data from Preset/Published/Shared template, the data from template is immediately applied.",code:"{\n  const initial: Data & { templateId?: number } = {\n    templateId: 1,\n    stringValue: 'Outdated data',\n    numberValue: 0,\n  };\n  const [templateSettings, setTemplateData] = useState(initial);\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          onChange={template => {\n            if (template) {\n              const {\n                id,\n                settings: { stringValue, numberValue },\n              } = template;\n              setTemplateData({ templateId: id, stringValue, numberValue });\n            }\n          }}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Initial</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {initial.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {initial.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {initial.numberValue}\n          </Text>\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Current</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {templateSettings.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {templateSettings.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {templateSettings.numberValue}\n          </Text>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"WithCustomColorsAndIcons",description:"You can override the icons and their colours for templates by using the `templateIconMap`, `defaultTemplateIcon`, `templateIconColors`, and `defaultTemplateIconColor` props",code:"{\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          templateIconColors={['#FF0000', '#00FF00', '#0000FF']}\n          defaultTemplateIconColor=\"#0000FF\"\n          templateIconMap={{\n            icon_1: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <FiveIcon size={size} />\n              </div>\n            ),\n            icon_2: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <ShareSysIcon size={size} />\n              </div>\n            ),\n            icon_3: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <OffScreenOneIcon size={size} />\n              </div>\n            ),\n            icon_4: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <AddIcon size={size} />\n              </div>\n            ),\n          }}\n          defaultTemplateIcon=\"icon_3\"\n          presetTemplates={presetTemplates}\n          onChange={noop}\n        />\n      }\n    />\n  );\n}"},{name:"WithFoldersDisabled",description:"You can disable the folders functionality by using the `foldersEnabled` prop",code:"<ContextWrapper templatesControl={<TemplatesControl onChange={noop} foldersEnabled={false} />} />"},{name:"WithPublishDisabled",description:"You can disable the publish functionality by using the `publishEnabled` prop",code:"<ContextWrapper templatesControl={<TemplatesControl onChange={noop} publishEnabled={false} />} />"},{name:"WithTemplateSelectionLogic",description:"You can \"hook into\" template selection logic by providing the `getDefaultTemplate` prop. This function is called on initial load, when templates list is reloaded, and when deleting/unfollowing selected template.The actual action is passed down as a part of the `state` argument.\n\nYou can use this prop to force the app to always have a selected template.",code:"{\n  const initial: Data & { templateId?: number } = {};\n  const [templateSettings, setTemplateData] = useState(initial);\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          onChange={template => {\n            if (template) {\n              const {\n                id,\n                settings: { stringValue, numberValue },\n              } = template;\n              setTemplateData({ templateId: id, stringValue, numberValue });\n            }\n          }}\n          getDefaultTemplate={(templates, { event }) => {\n            // When list is reloaded, we don't change selected template\n            return event !== 'reloadList' ? templates.find(({ id }) => id === 2) : undefined;\n          }}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Initial</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {initial.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {initial.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {initial.numberValue}\n          </Text>\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Current</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {templateSettings.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {templateSettings.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {templateSettings.numberValue}\n          </Text>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"PreprocessingTemplates",description:"You can apply your own filtering logic to loaded templates by providing the `filterInitialTemplates` prop.",code:"<ContextWrapper\n    templatesControl={\n      <TemplatesControl\n        presetTemplates={presetTemplates}\n        filterInitialTemplates={() => [\n          {\n            id: 1000,\n            name: 'Server Template 1',\n            settings: { stringValue: 'Value for Server Template 1', numberValue: 123 },\n          },\n        ]}\n      />\n    }\n  />"},{name:"WithCustomTemplateControls",description:"You can add custom component to template menu by providing the `templateControls` prop",code:"{\n  const TemplateControls = useMemo<ComponentType<TemplatesControlAdditionalControlProps<Data>>>(\n    () =>\n      ({ template }) => {\n        return (\n          <SbPlaceholder style={{ padding: '8px 0' }}>\n            Additional controls.\n            <br />\n            Value: {template.settings.numberValue}\n          </SbPlaceholder>\n        );\n      },\n    []\n  );\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          presetTemplates={presetTemplates}\n          filterInitialTemplates={() => [\n            {\n              id: 1000,\n              name: 'Server Template 1',\n              settings: { stringValue: 'Value for Server Template 1', numberValue: 123 },\n            },\n          ]}\n          templateControls={TemplateControls}\n        />\n      }\n    />\n  );\n}"},{name:"AdvancedUsage",description:"You can use `<TemplateControls/>`'s constituent parts to hook into its lifecycle, get data, and perform actions.\n\nComponents:\n```\nTemplatesControl.Provider\nTemplatesControl.Toggle\nTemplatesControl.Popover\nTemplatesControl.ToggleDisplayDefault\n```\nUtilities:\n```\nTemplatesControl.GetHeaderElement\ngetTemplatesControlStoreApi<T>\n```",code:"{\n  const [anchorElement, setAnchorElement] = useState<HTMLElement>();\n\n  const setHeaderNode = useCallback((buttonRef: HTMLButtonElement) => {\n    setAnchorElement(TemplatesControl.GetHeaderElement(buttonRef));\n  }, []);\n\n  // Creating API with correct Templates' data type\n  const API = useMemo(() => getTemplatesControlStoreApi<Data>(), []);\n\n  // All magic happens here\n  const InnerComponent = useMemo(\n    () => () => {\n      const { useIsInitialized, useSelectTemplate, useSelectedTemplate, useAllTemplates } = API;\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const isInitialized = useIsInitialized();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const selectTemplate = useSelectTemplate();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const selectedTemplate = useSelectedTemplate();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const allTemplates = useAllTemplates();\n\n      if (!isInitialized) {\n        return <LoaderLogo />;\n      }\n\n      const someTemplateId = allTemplates.find(({ isPreset }) => !isPreset)?.id;\n\n      return (\n        <SbColumn>\n          <Text>Current template id: {selectedTemplate?.id || 'N/A'}</Text>\n          {selectedTemplate ? (\n            <Button type=\"primary\" onClick={() => selectTemplate(undefined)}>\n              Clear template\n            </Button>\n          ) : (\n            <Button type=\"primary\" onClick={() => selectTemplate(someTemplateId)}>\n              Select template #{someTemplateId}\n            </Button>\n          )}\n        </SbColumn>\n      );\n    },\n    [API]\n  );\n\n  return (\n    <Providers canPublish>\n      <TemplatesControl.Provider>\n        <AppContainer\n          header={\n            <AppHeader\n              titleControls={<TemplatesControl.Toggle ref={setHeaderNode} />}\n              titleControlsPosition=\"left\"\n              showAssetChips={false}\n            />\n          }\n        >\n          <TemplatesControl.Popover anchorEl={anchorElement} />\n          <InnerComponent />\n        </AppContainer>\n      </TemplatesControl.Provider>\n    </Providers>\n  );\n}"},{name:"WithListReloadOnPopoverOpenDisabled",description:"You can disable the reloading of the templates list on popover open by using the `reloadListOnOpen` prop",code:"<ContextWrapper\n    templatesControl={<TemplatesControl onChange={noop} reloadListOnOpen={false} />}\n  />"},{name:"ToggleLayout",description:"You can change toggle layout by providing the `toggleLayout` prop",code:"{\n  const commonProps = useMemo(\n    () => ({\n      onChange: noop,\n      presetTemplates,\n      currentTemplateId: presetTemplates[2].id,\n      templateSettings: presetTemplates[2].settings,\n    }),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper height={100} templatesControl={<TemplatesControl {...commonProps} />} />\n      <ContextWrapper\n        height={100}\n        templatesControl={<TemplatesControl {...commonProps} toggleLayout=\"ultraCompact\" />}\n      />\n    </SbColumn>\n  );\n}"},{name:"NewTagAndCustomButtonContent",description:"You can provide custom content for toggle by using the `toggleContent` prop. You can use it to make the content smaller or responsive, add additional info, etc. \n\nTo implement \"New!\" tag easily, you can use the `showNewTag` prop of the default content component, exposed as `TemplatesControl.ToggleDisplayDefault`",code:"{\n  const commonProps = useMemo(\n    () => ({\n      onChange: noop,\n      presetTemplates,\n      currentTemplateId: presetTemplates[2].id,\n      templateSettings: presetTemplates[2].settings,\n    }),\n    []\n  );\n\n  // Creating API with correct Templates' data type\n  const API = useMemo(() => getTemplatesControlStoreApi<Data>(), []);\n\n  // All magic happens here\n  const Display = useMemo(\n    () => () => {\n      const { useIsInitialized, useSelectedTemplate } = API;\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const isInitialized = useIsInitialized();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const selectedTemplate = useSelectedTemplate();\n\n      return (\n        <div\n          style={{\n            width: '70px',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {isInitialized ? selectedTemplate?.name : '...'}\n        </div>\n      );\n    },\n    [API]\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper height={100} templatesControl={<TemplatesControl {...commonProps} />} />\n\n      <ContextWrapper\n        height={100}\n        templatesControl={\n          <TemplatesControl\n            {...commonProps}\n            toggleContent={<TemplatesControl.ToggleDisplayDefault showNewTag />}\n          />\n        }\n      />\n\n      <ContextWrapper\n        height={100}\n        templatesControl={<TemplatesControl {...commonProps} toggleContent={<Display />} />}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TemplatesControl/TemplatesControl.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142803-71618&",keywords:["templatescontrol","template","settings","templates","control","exposes","several","utility","types","convenience","templatescontrolchangehandler","type"]},{name:"Text",modulePath:"componentsV2/Text",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Text",specifier:"@corva/ui/componentsV2",exportName:"Text"},category:"v2",description:"A component that should be used every time a text should be displayed",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"size",type:"36 | 32 | 24 | 20 | 18 | 16 | 14 | 12 | 10 | 'inherit'",required:false,description:"",enumValues:["inherit"]},{name:"weight",type:"'regular' | 'medium' | 'bold'",required:false,description:"",enumValues:["regular","medium","bold"]},{name:"italic",type:"boolean",required:false,description:""},{name:"color",type:"'T1' | 'T6' | 'T7' | 'T8' | 'T9' | 'inherit'",required:false,description:"",enumValues:["T1","T6","T7","T8","T9","inherit"]},{name:"tagName",type:"keyof JSX.IntrinsicElements",required:false,description:"Tag that will be rendered"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Text {...props} />"},{name:"Sizing",description:"Component supports several text sizes/line heights, controlled through `size` prop",code:"<SbRow>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={36}>Size: 36</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={32}>Size: 32</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={24}>Size: 24</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={20}>Size: 20</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={18}>Size: 18</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={16}>Size: 16</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={14}>Size: 14</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={12}>Size: 12</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={10}>Size: 10</Text>\n    </div>\n    <div style={{ border: '1px dashed', fontSize: '11px' }}>\n      <Text size=\"inherit\">Size: inherit</Text>\n    </div>\n  </SbRow>"},{name:"Colors",description:"Component supports several colors, controlled through `color` prop",code:"<SbColumn>\n    <Text color=\"T1\">Color: T1</Text>\n    <Text color=\"T6\">Color: T6</Text>\n    <Text color=\"T7\">Color: T7</Text>\n    <Text color=\"T8\">Color: T8</Text>\n    <Text color=\"T9\">Color: T9</Text>\n    <div style={{ color: 'tomato' }}>\n      <Text color=\"inherit\">Color: inherit</Text>\n    </div>\n  </SbColumn>"},{name:"CustomTags",description:"You can control which HTML tag will be rendered by passing a tag name to `tagName` prop",code:"<>\n    <Text>I'm a span</Text>\n    <Text tagName=\"div\">I'm a div</Text>\n    <Text tagName=\"section\">I'm a section</Text>\n    <Text tagName=\"h1\">I'm a H1, but you should use Header component</Text>\n  </>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Text/Text.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=88924-113475&node-type=frame",keywords:["text","component","should","used","every","time","displayed"]},{name:"TextArea",modulePath:"componentsV2/TextArea",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextArea",specifier:"@corva/ui/componentsV2",exportName:"TextArea"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"value",type:"string | number",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"message",type:"ReactNode",required:false,description:""},{name:"inputRef",type:"RefCallback<HTMLTextAreaElement | null> | MutableRefObject<HTMLTextAreaElement | null> | null",required:false,description:"Ref to an underlying input element"},{name:"readOnly",type:"boolean",required:false,description:""},{name:"onFocus",type:"FocusEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"onKeyDown",type:"KeyboardEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"onKeyUp",type:"KeyboardEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"inputContainerRef",type:"RefCallback<HTMLDivElement | null> | MutableRefObject<HTMLDivElement | null> | null",required:false,description:"Ref to a container that contains input and its affixes\nUseful for positioning of popovers"},{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:"onChange",type:"(value: string, changeReason: 'change', event?: ChangeEvent<HTMLTextAreaElement>) => void",required:false,description:""},{name:"elementsClassNames",type:"Omit<Required<BaseProps>['elementsClassNames'], 'suffix' | 'prefix'>",required:false,description:""},{name:"resizeable",type:"boolean",required:false,description:""},{name:"maxLength",type:"number",required:false,description:""},{name:"showLetterCounter",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      {...props}\n      value={value}\n      onChange={(newValue, ...rest) => {\n        setValue(newValue);\n        props.onChange?.(newValue, ...rest);\n      }}\n    />\n  );\n}"},{name:"Resizeable",description:"You can use `resizeable` prop to disable resizing",code:"{\n  const [value, setValue] = useState('');\n\n  return (\n    <SbColumn alignItems={'stretch'}>\n      <TextArea label=\"Default\" value={value} onChange={setValue} />\n      <TextArea label=\"Fixed size\" value={value} onChange={setValue} resizeable={false} />\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 `<TextArea.MessageWithIcon>` to create a message with icon easily",code:"<SbColumn alignItems=\"stretch\">\n    <TextArea\n      label=\"With icon\"\n      message={\n        <TextArea.MessageWithIcon>\n          You can put some things here that could be very long but never fret, we've got you!\n        </TextArea.MessageWithIcon>\n      }\n    />\n    <TextArea\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 `<TextArea.Label />` components to easily add required field notification, unit, and/or info hint icon",code:"<TextArea\n    label={\n      <TextArea.Label required infoTooltip=\"Why are you doing this?\">\n        Reason\n      </TextArea.Label>\n    }\n  />"},{name:"WithLimitedLength",description:"You can use the `maxLength` prop to limit text size. \n\nUse `showLetterCounter` prop to disable letter counter shown by default",code:"{\n  const [value, setValue] = useState(longText);\n  const maxLength = longText.length + 10;\n  const status = value.length >= maxLength ? 'error' : undefined;\n\n  return (\n    <SbColumn alignItems={'stretch'}>\n      <TextArea\n        label=\"Default\"\n        value={value}\n        onChange={setValue}\n        maxLength={maxLength}\n        status={status}\n      />\n      <TextArea\n        label=\"Without counter\"\n        value={value}\n        onChange={setValue}\n        maxLength={maxLength}\n        showLetterCounter={false}\n        status={status}\n      />\n      <TextArea\n        label=\"With counter, not Resizeable\"\n        value={value}\n        onChange={setValue}\n        maxLength={maxLength}\n        resizeable={false}\n        status={status}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextArea/TextArea.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142462-54020&m=dev",keywords:["textarea"]},{name:"TextEndTruncated",modulePath:"componentsV2/TextEndTruncated",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextEndTruncated",specifier:"@corva/ui/componentsV2",exportName:"TextEndTruncated"},category:"v2",description:"A component that truncates arbitrary text, and displays it in a tooltip if it is truncated. Does not have own styling",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"React.ReactNode",required:false,description:"Content"},{name:"disableTooltip",type:"boolean",required:false,description:"Forces the component not to show its tooltip"},{name:"maxLines",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextEndTruncated {...props} />"},{name:"DynamicTooltips",description:"Component uses `resizeObserver` to determine if is dimensions have changed, to show a tooltip only if the containing text is being truncated. Content changes are being monitored through `mutationObserver`.",code:"{\n  const [percent, setPercent] = useState(30);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own slider */}\n      <Slider\n        value={percent}\n        onChange={(_, value) => setPercent(value instanceof Array ? value[0] : value)}\n        min={0}\n        max={100}\n      />\n      <SbPlaceholder style={{ width: `${percent}%`, justifyContent: 'start', textAlign: 'left' }}>\n        <div style={{ width: '100%' }}>\n          <TextEndTruncated>I'm a text that fits in 100% but does not in 30%</TextEndTruncated>\n        </div>\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"},{name:"ComplexChildren",description:"Component's `children` may be an arbitrary `ReactNode`. Text for tooltip is calculated as a `textContent` of the root node, so care should be taken so the spacing characters are displayed properly",code:"<TextEndTruncated>\n    I'm a <b>complex</b> child with <u>bells</u> and <s>whistles</s>, lots of additional nodes, a{' '}\n    <>fragment</>, etc.\n  </TextEndTruncated>"},{name:"MultilineText",description:"You can truncate multiline text with an ellipsis on the last row by using the `maxLines`. Please note, this may not work in all browsers. See [Caniuse page](https://caniuse.com/css-line-clamp) for details.",code:"{\n  const min = 1;\n  const max = 5;\n  const [lines, setLines] = useState(2);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own slider */}\n      <Slider\n        value={lines}\n        onChange={(_, value) => setLines(value instanceof Array ? value[0] : value)}\n        min={min}\n        max={max}\n      />\n      <TextEndTruncated maxLines={lines}>{text}</TextEndTruncated>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextEndTruncated/TextEndTruncated.tsx",keywords:["textendtruncated","truncatedtext","truncated","text","truncated text","component","truncates","arbitrary","displays","tooltip","does","have","styling"]},{name:"TextInput",modulePath:"componentsV2/TextInput",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextInput",specifier:"@corva/ui/componentsV2",exportName:"TextInput"},category:"v2",description:"This component is deprecated and will be eventually replaced with `TextInputNext`",agentSummary:"MUI v4 field with floating label; no MUI prop passthrough, unlike V1 TextField.",isExperimental:false,isDeprecated:true,props:[{name:"label",type:"ReactNode",required:false,description:""},{name:"value",type:"string | number",required:false,description:""},{name:"onChange",type:"(value: string, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"type",type:"'default' | 'search' | 'text' | 'email' | 'password' | 'number' | 'phone' | 'url'",required:false,description:"Controls component's visual style.\n⚠️ ⚠️ ⚠️ Use `inputType` prop for underlying `input`'s element `type` attribute. Old values added for backwards compatibility and will be removed in the future",enumValues:["default","search","text","email","password","number","phone","url"]},{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:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"spacing",type:"'normal' | 'dense'",required:false,description:"",enumValues:["normal","dense"]},{name:"message",type:"ReactNode",required:false,description:""},{name:"onFocus",type:"FocusEventHandler",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:"onClear",type:"() => void",required:false,description:"If present - will render a \"clear\" button"},{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>",required:false,description:""},{name:"readOnly",type:"boolean",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"forceLabelShrink",type:"boolean",required:false,description:""},{name:"htmlAttributes",type:"Omit<Partial<InputHTMLAttributes<HTMLInputElement>>, 'type' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'readOnly' | 'disabled' | 'value' | 'onChange'>",required:false,description:"Escape hatch for when you need to override/add attributes to the `<input/>` tag"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextInput {...props} />"},{name:"Types",description:"Component supports 2 visual styles, controlled with the `type` prop.\n\nPlease note, that `label` prop is ignored for `search` type",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TextInput label=\"Label\" type=\"default\" value=\"Default\" />\n      <TextInput placeholder=\"Search\" value=\"Search\" prefix={<SearchOne />} type=\"search\" />\n    </SbColumn>\n  );\n}"},{name:"Spacing",description:"Component supports 2 spacing options, controlled through `spacing` prop:\n\n- `normal` (default)\n- `dense`",code:"<Grid cols={2}>\n    <Grid.Cell span={1}>\n      <TextInput label=\"Normal\" spacing=\"normal\" value=\"value\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <TextInput label=\"Dense\" spacing=\"dense\" value=\"value\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <TextInput\n        placeholder=\"Normal\"\n        spacing=\"normal\"\n        value=\"value\"\n        prefix={<SearchOne />}\n        type=\"search\"\n      />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <TextInput\n        placeholder=\"Dense\"\n        spacing=\"dense\"\n        value=\"value\"\n        prefix={<SearchOne />}\n        type=\"search\"\n      />\n    </Grid.Cell>\n  </Grid>"},{name:"LabelAndPlaceholder",description:"Although label may look like a placeholder for an empty field, those are 2 different things, controlled through `label` and `placeholder` props respectively",code:"<TextInput label=\"Label\" placeholder=\"Placeholder\" />"},{name:"ErrorState",description:"To display the component in an error state, use the `state` prop. You can add a message with a `message` prop",code:"<TextInput\n    label=\"Error\"\n    status=\"error\"\n    message=\"This field should contain a valid value, dummy!\"\n    value=\"invalid value\"\n  />"},{name:"PrefixAndSuffix",description:"You can display arbitrary content as prefix and/or suffix by using `prefix` and `suffix` props. Note that if those are [valid React elements](https://react.dev/reference/react/isValidElement), the `size` prop will be injected\n\nFor complex affixes that look like text, use the `<TextInput.Affix/>` component, that can accept CSS classes\n\nN.B: Please use `<SearchOne/>` icon for prefix as it respects current text color",code:"<SbColumn alignItems=\"stretch\">\n    <TextInput label=\"Label\" prefix={<BubbleChartIcon />} />\n    <TextInput label=\"Label\" suffix={<BubbleChartIcon />} />\n    <TextInput label=\"Label\" suffix={<BubbleChartIcon />} status=\"error\" />\n    <TextInput label=\"Profits\" prefix=\"$\" suffix=\"gaziillion\" />\n    <TextInput\n      label=\"Label\"\n      prefix={\n        <TextInput.Affix className=\"customClassName\">\n          <em>\n            <u>very</u>\n          </em>{' '}\n          custom prefix\n        </TextInput.Affix>\n      }\n    />\n    <TextInput label=\"Label\" prefix={<SearchOne />} type=\"search\" value=\"Search\" />\n    <TextInput\n      label=\"Label\"\n      prefix={<SearchOne />}\n      suffix={<BubbleChartIcon />}\n      type=\"search\"\n      value=\"Search\"\n    />\n  </SbColumn>"},{name:"LoadingState",description:"To display the component in a \"loading\" state to indicate that some process related to the field is running, use the `state` prop.",code:"<SbColumn alignItems=\"stretch\">\n    <TextInput\n      label=\"Loading\"\n      status=\"loading\"\n      message=\"There's some loading process associated with this field\"\n    />\n    <TextInput\n      label=\"Loading\"\n      status=\"loading\"\n      message=\"Works with suffixes too!\"\n      suffix={<BubbleChartIcon />}\n    />\n  </SbColumn>"},{name:"InputSearch",description:"For `inputType=\"search\"` we hide the browser's \"clear\" button. Other shadow-dom elements remain unchanged\n\nUse `htmlAttributes` to fine-tune it with HTML attributes",code:"{\n  const [stringValue, setStringValue] = useState('value');\n  const [numberValue, setNumberValue] = useState('1234');\n  const [positiveValue, setPositiveValue] = useState('0');\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TextInput label=\"Search\" value={stringValue} onChange={setStringValue} inputType=\"search\" />\n      <TextInput\n        label=\"Depth (m)\"\n        value={numberValue}\n        onChange={setNumberValue}\n        inputType=\"number\"\n      />\n      <TextInput\n        label=\"Positive number\"\n        value={positiveValue}\n        onChange={setPositiveValue}\n        inputType=\"number\"\n        htmlAttributes={{ min: 0 }}\n      />\n    </SbColumn>\n  );\n}"},{name:"LabelTooltip",description:"Field label has a tooltip that is shown if label is longer than the container and is truncated. `<TruncateText/>` is used internally.\n\nWorks with `prefix` and `suffix` too",code:"<SbColumn alignItems=\"stretch\">\n    <TextInput label=\"Some very long label that won't fit, but it fits when shrunk\" />\n    <TextInput\n      label=\"Some very long label that won't fit, but it fits when shrunk\"\n      prefix={<BubbleChartIcon />}\n    />\n    <TextInput\n      label=\"Some very long label that won't fit, but it fits when shrunk\"\n      suffix={<BubbleChartIcon />}\n    />\n    <TextInput\n      label=\"Some very long label that won't fit, but it fits when shrunk\"\n      suffix={<BubbleChartIcon />}\n      prefix={<BubbleChartIcon />}\n    />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextInput/TextInput.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573-7777",keywords:["textinput","form","input","text","field","entry","component","deprecated","will","eventually","replaced","textinputnext"]},{name:"TextInputBase",modulePath:"componentsV2/TextInputBase",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"TextInputBase",specifier:"@corva/ui/componentsV2/TextInputBase/TextInputBase",form:"named",exportName:"TextInputBase"},category:"v2",description:"",isExperimental:false,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:"rootTagName",type:"'label' | 'div'",required:false,description:"HTML tag of the root element. Use `div` when `prefix`/`suffix` contain interactive\ncontrols — nested interactive elements inside a `label` are invalid for assistive tech",enumValues:["label","div"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"message",type:"ReactNode",required:false,description:""},{name:"onFocus",type:"FocusEventHandler<FieldElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<FieldElement>",required:false,description:""},{name:"onKeyDown",type:"KeyboardEventHandler<FieldElement>",required:false,description:""},{name:"onKeyUp",type:"KeyboardEventHandler<FieldElement>",required:false,description:""},{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<FieldElement | null> | MutableRefObject<FieldElement | 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 a 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:"elementsClassNames",type:"Partial<{\n    label: string;\n    input: string;\n    inputContainer: string;\n    prefix: string;\n    suffix: string;\n    message: string;\n  }>",required:false,description:""},{name:"onChange",type:"(value: string, changeReason: 'change' | 'clear', event?: ChangeEvent<FieldElement> | undefined) => void",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:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"component",type:"ForwardRefExoticComponent<PropsWithoutRef<TextInputBaseComponentProps<FieldElement, ComponentProps>> & RefAttributes<FieldElement>>",required:true,description:"⚠️⚠️⚠️ PRIVATE API. If you see it in docs you're doing something wrong"},{name:"componentProps",type:"ComponentProps",required:false,description:"⚠️⚠️⚠️ PRIVATE API. If you see it in docs you're doing something wrong"},{name:"testIds",type:"Partial<{\n    input: string;\n    label: string;\n    prefix: string;\n    suffix: string;\n    clearButton: string;\n    message: string;\n  }>",required:false,description:"⚠️⚠️⚠️ PRIVATE API. If you see it in docs you're doing something wrong"},{name:"rootRef",type:"Ref<HTMLElement>",required:true,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextInputBase/TextInputBase.tsx",keywords:["textinputbase"]},{name:"TextInputNext",modulePath:"componentsV2/TextInputNext",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextInputNext",specifier:"@corva/ui/componentsV2",exportName:"TextInputNext"},category:"v2",description:"This is the latest iteration of `TextInput` component and will eventually replace it",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",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:"value",type:"string | number",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"prefix",type:"ReactNode",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:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"message",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:"suffix",type:"ReactNode",required:false,description:""},{name:"readOnly",type:"boolean",required:false,description:""},{name:"rootTagName",type:"'label' | 'div'",required:false,description:"HTML tag of the root element. Use `div` when `prefix`/`suffix` contain interactive\ncontrols — nested interactive elements inside a `label` are invalid for assistive tech",enumValues:["label","div"]},{name:"onFocus",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"onKeyDown",type:"KeyboardEventHandler<HTMLInputElement>",required:false,description:""},{name:"onKeyUp",type:"KeyboardEventHandler<HTMLInputElement>",required:false,description:""},{name:"inputContainerRef",type:"RefCallback<HTMLDivElement | null> | MutableRefObject<HTMLDivElement | null> | null",required:false,description:"Ref to a container that contains input and its affixes\nUseful for positioning of popovers"},{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:"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:"htmlAttributes",type:"Omit<Partial<InputHTMLAttributes<HTMLInputElement>>, ComponentProvidedPropNames | 'type' | 'inputMode'>",required:false,description:"Escape hatch to provide arbitrary html attributes to `input`"},{name:"elementsClassNames",type:"BaseProps['elementsClassNames'] & {\n    numberStepButtons?: string;\n  }",required:false,description:"An escape hatch to tweak styling of internal elements"},{name:"onChange",type:"(value: string, changeReason: TextInputChangeReason, event?: ChangeEvent<HTMLInputElement>) => void",required:false,description:"Change handler. `TextInputChangeReason` utility type is provided"}],propsList:{kind:"complete"},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=162399-8404",keywords:["textinputnext","textfield","text","field","text field","latest","iteration","textinput","component","will","eventually","replace"]},{name:"TextLink",modulePath:"componentsV2/TextLink",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextLink",specifier:"@corva/ui/componentsV2",exportName:"TextLink"},category:"v2",description:"A link component. Can be integrated with routing solutions (like `react-router`) by using the `component` prop. `ref` points to root element",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component content"},{name:"to",type:"string",required:false,description:"URI to navigate to"},{name:"target",type:"HTMLAttributeAnchorTarget",required:false,description:"Target frame to open a link in. You'll most likely need `_self` for same tab or `_blank` for new tab"},{name:"onClick",type:"MouseEventHandler<HTMLElement>",required:false,description:""},{name:"type",type:"'primary' | 'secondary'",required:false,description:"",enumValues:["primary","secondary"]},{name:"underline",type:"'onHover' | 'always' | 'never'",required:false,description:"",enumValues:["onHover","always","never"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"disableTooltip",type:"boolean",required:false,description:""},{name:"component",type:"ComponentType<Omit<\n      TextLinkProps,\n      'component' | 'disabled' | 'testId' | 'type' | 'underline' | 'disableTooltip'\n    > & {\n      'data-testid'?: string;\n    }>",required:false,description:"Component that will be rendered in place of an `<a/>` tag"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextLink {...props} />"},{name:"FontInheritance",description:"Link inherits the font parameters of its container.",code:"<SbColumn alignItems=\"stretch\">\n    <Text size={20}>\n      Text with size 20 and a <TextLink to=\"https://google.com\">link</TextLink> inside\n    </Text>\n    <Text size={16}>\n      Text with size 16 and a <TextLink to=\"https://google.com\">link</TextLink> inside\n    </Text>\n    <Text size={12}>\n      Text with size 12 and a <TextLink to=\"https://google.com\">link</TextLink> inside\n    </Text>\n    <em>\n      <Text>\n        Italic text and a <TextLink to=\"https://google.com\">link</TextLink> inside\n      </Text>\n    </em>\n  </SbColumn>"},{name:"Types",description:"Component supports several colour options via the `type` prop:\n\n- `primary` (default)\n- `secondary`\n",code:"<Text>\n    <SbColumn>\n      <TextLink type=\"primary\" to=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\">\n        Primary\n      </TextLink>\n      <TextLink type=\"secondary\" to=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\">\n        Secondary\n      </TextLink>\n    </SbColumn>\n  </Text>"},{name:"Component",description:"You can integrate `<TextLink/>` with you favourite flavor of routing solution by providing a `component` prop.",code:"{\n  // This is an example of custom link component. You'll probably want to do something like this:\n  // import { Link } from 'react-router-dom';\n  const Link = (props: ComponentProps<Required<TextLinkProps>['component']>) => {\n    const { to, ...rest } = props;\n\n    const clickHandler = () => {\n      if (to) {\n        window.open(to, '_blank');\n      }\n    };\n\n    return (\n      <button\n        {...rest}\n        onClick={clickHandler}\n        style={{ background: 'none', border: 'none', padding: 0, userSelect: 'none' }}\n      />\n    );\n  };\n\n  return (\n    <SbColumn>\n      <TextLink to=\"https://google.com\" component={Link}>\n        Link with custom render component\n      </TextLink>\n      <TextLink to=\"https://google.com\" component={Link} disabled>\n        Link with custom render component\n      </TextLink>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextLink/TextLink.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=36517-144850",keywords:["textlink","link","anchor","hyperlink","navigate","url","component","integrated","routing","solutions","like","react-router","using","prop","points"]},{name:"TextMiddleTruncated",modulePath:"componentsV2/TextMiddleTruncated",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextMiddleTruncated",specifier:"@corva/ui/componentsV2",exportName:"TextMiddleTruncated"},category:"v2",description:"A component that truncates arbitrary text with an ellipsis in the middle, and displays it in a tooltip if it is actually truncated. Does not have own styling.\n\nDue to how the truncation works, this component may not play nice in `flex`-parents: there may be some \"free space\" to the right, which will cause the component to shrink, which will trigger recalculation, which may produce \"free space\", and so on.\n\nIn this case try setting `flex-shrink` to 0 and/or setting `flex-basis`.\n\nYou can use the underlying logic as a standalone utility function like so:\n\n```ts\n\nimport { formatting } from '@corva/ui/utils';\n/* snip */\nconst truncated = formatting.truncateInTheMiddle(\n  'unformatted',\n  containerRef.current.clientWidth,\n  containerRef.current.scrollWidth\n);\n```",agentSummary:"Middle-ellipsis text truncation: start and end stay visible, full text in a tooltip on overflow. String or number children only; TextEndTruncated clips the end and takes any ReactNode.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"string | number",required:false,description:"Content"},{name:"disableTooltip",type:"boolean",required:false,description:""},{name:"maxLines",type:"number",required:false,description:"Maximum number of lines to display.\nWhen maxLines > 1, the second-to-last line ends with \"...\" and the last line shows the end of text.\n\ne.g. with maxLines=4:\n\nline1\n\nline2\n\nline3...\n\nline4"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Grid>\n    <Grid.Cell span={2}>\n      <TextMiddleTruncated {...props} />\n    </Grid.Cell>\n  </Grid>"},{name:"DynamicTooltips",description:"Component uses `resizeObserver` to determine if is dimensions have changed, to show a tooltip only if the containing text is being truncated. Content changes are being monitored through `mutationObserver`.\n\nThe truncation algorithm relies on \"average character width\" instead of actual widths, so it can produce incorrect results in some cases",code:"{\n  const [percent, setPercent] = useState(30);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Slider\n        value={percent}\n        onChange={(_, value) => setPercent(value instanceof Array ? value[0] : value)}\n        min={0}\n        max={100}\n      />\n      <SbPlaceholder style={{ width: `${percent}%`, justifyContent: 'start', textAlign: 'left' }}>\n        <div style={{ width: '100%' }}>\n          <TextMiddleTruncated>\n            I'm a text that fits in 100% but does not in 30%\n          </TextMiddleTruncated>\n        </div>\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"},{name:"MaxLinesMode",description:"Use `maxLines` prop to display text on multiple lines with middle truncation. The second-to-last line ends with \"...\", the last line shows the end of the text. e.g., maxLines=4: line1, line2, line3..., line4",code:"{\n  const [width, setWidth] = useState(200);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div>\n        <div>Container width: {width}px</div>\n        <Slider\n          value={width}\n          onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n          min={100}\n          max={400}\n        />\n      </div>\n      <div>\n        <strong>maxLines=1 (default):</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n      <div>\n        <strong>maxLines=2:</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated maxLines={2}>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n      <div>\n        <strong>maxLines=3:</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated maxLines={3}>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n      <div>\n        <strong>maxLines=4:</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated maxLines={4}>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx",keywords:["textmiddletruncated","middletruncate","middle","truncate","middle truncate","middletruncatedtext","truncated","text","middle truncated text","component","truncates","arbitrary","ellipsis","displays","tooltip","actually"]},{name:"ToggleButtons",modulePath:"componentsV2/ToggleButtons",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ToggleButtons",specifier:"@corva/ui/componentsV2",exportName:"ToggleButtons"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"options",type:"{\n    label: ReactNode;\n    value: string;\n    disabled?: boolean;\n    tooltip?: ReactNode;\n\n    className?: string;\n    testId?: string;\n  }[]",required:true,description:""},{name:"value",type:"string",required:false,description:""},{name:"onChange",type:"(value: string, event: MouseEvent<HTMLElement>) => void",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"type",type:"'primary' | 'secondary'",required:false,description:"",enumValues:["primary","secondary"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(options[0].value);\n  return (\n    <ToggleButtons\n      {...props}\n      options={options}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"Types",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary` (default)\n- `secondary",code:"{\n  const [value, setValue] = useState<string>();\n\n  return (\n    <SbColumn>\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} type=\"primary\" />\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} type=\"secondary\" />\n    </SbColumn>\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `large`\n- `medium` (default)\n- `small`",code:"{\n  const [value, setValue] = useState<string>();\n  return (\n    <SbColumn>\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} size=\"large\" />\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} size=\"medium\" />\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} size=\"small\" />\n    </SbColumn>\n  );\n}"},{name:"DisabledButtons",description:"Use `disabled` property on an `options` item to make the corresponding button disabled",code:"{\n  const [value, setValue] = useState<string>();\n\n  const disabledOptions = useMemo(() => {\n    const newOptions: Props['options'] = [...shortOptions];\n    newOptions[1] = {\n      ...newOptions[1],\n      disabled: true,\n    };\n    return newOptions;\n  }, []);\n\n  return <ToggleButtons options={disabledOptions} value={value} onChange={setValue} />;\n}"},{name:"WithTooltips",description:"Use `tooltip` property on an `options` item to add a tooltip to the corresponding button",code:"{\n  const [value, setValue] = useState<string>();\n\n  const tooltipOptions: Props['options'] = shortOptions.map(option => ({\n    ...option,\n    tooltip: `All hail ${option.label}!`,\n  }));\n\n  return <ToggleButtons options={tooltipOptions} value={value} onChange={setValue} />;\n}"},{name:"WithIcons",description:"Component can accept icons as `option` items' `label`s. Icon size is adjusted automatically",code:"{\n  const [value, setValue] = useState<string>();\n\n  const iconOptions = [\n    { value: '1', label: <ChartLineAreaIcon /> },\n    { value: '2', label: <ChartLineIcon /> },\n    { value: '3', label: <ChartProportionIcon /> },\n    { value: '4', label: <ChartStockIcon /> },\n    { value: '5', label: <BarChartIcon /> },\n  ];\n\n  return (\n    <SbColumn>\n      <ToggleButtons options={iconOptions} value={value} onChange={setValue} size=\"large\" />\n      <ToggleButtons options={iconOptions} value={value} onChange={setValue} size=\"medium\" />\n      <ToggleButtons options={iconOptions} value={value} onChange={setValue} size=\"small\" />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ToggleButtons/ToggleButtons.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19162-59815",keywords:["togglebuttons","segment","pill","button group","segmented control","toggle"]},{name:"Tooltip",modulePath:"componentsV2/Tooltip",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Tooltip",specifier:"@corva/ui/componentsV2",exportName:"Tooltip"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:false,description:"Tooltip title. If there's no title or description, the tooltip is not shown"},{name:"description",type:"ReactNode",required:false,description:"Tooltip description: used to provide additional information to the title. If there's no title or description, the tooltip is not shown"},{name:"children",type:"ReactElement",required:true,description:"Element to position a tooltip to.\n\n⚠️ Has to be a *single* reffable child (use `forwardRef` for custom components)"},{name:"placement",type:"MuiTooltipProps['placement']",required:false,description:"Tooltip placement. Positions a tooltip dynamically if undefined"},{name:"disabled",type:"boolean",required:false,description:"Disables the tooltip"},{name:"open",type:"boolean",required:false,description:"If `true`, the tooltip is shown. Used to programmatically control the tooltip"},{name:"onOpen",type:"(event: ChangeEvent<object>) => void",required:false,description:"Callback fired when the component requests to be open."},{name:"onClose",type:"(event: ChangeEvent<object>) => void",required:false,description:"Callback fired when the component requests to be closed."},{name:"enterDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip.\nThis prop won't impact the enter touch delay (`enterTouchDelay`)."},{name:"enterTouchDelay",type:"number",required:false,description:"The number of milliseconds a user must touch the element before showing the tooltip."},{name:"enterNextDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip when one was already recently opened."},{name:"interactive",type:"boolean",required:false,description:"Makes a tooltip interactive, i.e. will not close when the user\nhovers over the tooltip before the `leaveDelay` is expired."},{name:"leaveDelay",type:"number",required:false,description:"The number of milliseconds to wait before hiding the tooltip.\nThis prop won't impact the leave touch delay (`leaveTouchDelay`)."},{name:"leaveTouchDelay",type:"number",required:false,description:"The number of milliseconds after the user stops touching an element before hiding the tooltip."},{name:"anchorEl",type:"PopperProps['anchorEl']",required:false,description:""},{name:"className",type:"string",required:false,description:"Will be applied to tooltip container"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Tooltip {...props}>\n    <Text>Hover me</Text>\n  </Tooltip>"},{name:"WithDescription",description:"Use `description` prop to add a description to the action. Note, that the paddings of the tooltip change if `description` is present.",code:"<SbRow>\n    <Tooltip\n      title={\"Tooltip's title\"}\n      description={\"Tooltip's description that provides more context to the action\"}\n    >\n      <Text>With description</Text>\n    </Tooltip>\n    <Tooltip title={\"Tooltip's title\"}>\n      <Text>Without description</Text>\n    </Tooltip>\n  </SbRow>"},{name:"BigContent",description:"`<Tooltip />` automatically adjusts itself to accommodate very big content. It's recommended to use `interactive` prop to allow user to scroll the contents",code:"<Tooltip\n    title={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(200)}\n    placement=\"left\"\n    interactive\n  >\n    <Text>Hover me</Text>\n  </Tooltip>"},{name:"ControlledTooltip",description:"You can use `<Tooltip />` in controlled mode by using the `open` prop",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <SbRow alignItems=\"center\">\n      <Button onClick={() => setIsOpen(value => !value)}>Toggle</Button>\n\n      <Tooltip title=\"Tooltip\" open={isOpen} interactive>\n        <Text>Anchor</Text>\n      </Tooltip>\n    </SbRow>\n  );\n}"},{name:"Compatibility",description:"`<Tooltip />` clones its children, injecting the following props:\n\n- `ref` for positioning\n- `onFocus`, `onBlur`, `onMouseLeave`, `onMouseOver`, `onTouchStart`, `onTouchEnd` to control itself \n- `title`\n- `aria-describedby`\n\nWhen developing \"basic\" components that are likely to be a child of `<Tooltip />`, use the following pattern:\n```\n// Type of rest is {}\nconst {definedProp, otherDefinedProp, ...rest} = props;\nreturn <div /* ... */ ref={ref} {...rest}>\n```",code:"<SbColumn>\n    <Tooltip title=\"Tooltip\">\n      <span>span</span>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Text>Text</Text>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Button>Button</Button>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ButtonIcon>\n        <SettingTwoIcon />\n      </ButtonIcon>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Radio label=\"Radio\" />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Checkbox label=\"Checkbox\" />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <TextLink disableTooltip>Link</TextLink>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Chip>Chip</Chip>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ChipAlert state=\"info\">ChipAlert (deprecated)</ChipAlert>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ChipIndicator>ChipIndicator</ChipIndicator>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Avatar size={40} name=\"Ian Moone\" />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Counter count={25} />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Switch onLabel=\"On\" offLabel=\"Off\" checked />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ButtonText>ButtonText</ButtonText>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Tag>Tag</Tag>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Menu.Item>Menu Item</Menu.Item>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <FileIcon name=\"test.png\" />\n    </Tooltip>\n\n    <div style={{ position: 'relative', height: '16px', width: '100%' }}>\n      <Tooltip title=\"Tooltip\">\n        <Label>Label</Label>\n      </Tooltip>\n    </div>\n\n    <Tooltip title=\"Tooltip\">\n      <SbPlaceholder>Custom Component won't work, no rest props passthrough</SbPlaceholder>\n    </Tooltip>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Tooltip/Tooltip.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597-19173",keywords:["tooltip","hover","hint","help","info","popup"]},{name:"UniversalLink",modulePath:"componentsV2/UniversalLink",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"UniversalLink",specifier:"@corva/ui/componentsV2",exportName:"UniversalLink"},category:"v2",description:"A link component that connects to either DC router or the usual router. Provides no styling on its own. Requires a router context to function.",isExperimental:true,isDeprecated:false,props:[{name:"href",type:"string",required:true,description:""},{name:"children",type:"ReactNode",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<UniversalLink {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/UniversalLink/UniversalLink.tsx",keywords:["universallink","link","component","connects","either","router","usual","provides","styling","requires","context"]},{name:"WellArchivedMessage",modulePath:"componentsV2/WellArchivedMessage",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"WellArchivedMessage",specifier:"@corva/ui/componentsV2",exportName:"WellArchivedMessage"},category:"v2",description:"Component that displays a message about a well being archioved\n\n⚠️ Can not be used outside of an app",isExperimental:true,isDeprecated:false,props:[{name:"displayComponent",type:"ComponentType<WellArchivedMessageDisplayComponentProps>",required:false,description:"Display component to use"},{name:"onClose",type:"() => void",required:false,description:"Will be called when message is closed"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<YourApp>\n    <WellArchivedMessage {...props} />\n  </YourApp>"},{name:"CustomDisplayComponents",description:"You can create your own display components to suit your design needs. Pass them as `displayComponent`. The utility type `WellArchivedMessageDisplayComponentProps` is provided to simplify props handling.",code:"{\n  const MyCustomDisplayComponent = useMemo(\n    () =>\n      ({ onClose }: WellArchivedMessageDisplayComponentProps) =>\n        (\n          <div\n            style={{\n              position: 'absolute',\n              inset: '0 0 auto 0',\n              background: 'var(--palette-warning-main)',\n              display: 'flex',\n              padding: '0 10px',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n            }}\n          >\n            <Text color=\"T9\">Some custom text here</Text>\n            <Button onClick={onClose}>Close message</Button>\n          </div>\n        ),\n    []\n  );\n\n  return (\n    <YourApp>\n      <WellArchivedMessage displayComponent={MyCustomDisplayComponent} />\n    </YourApp>\n  );\n}"},{name:"WithCustomMessage",description:"You can configure default display components by creating your own, and providing it as the `displayComponent` prop.\n\nDisplay components are exposed as `WellArchivedMessage.DisplayComponents.*`",code:"{\n  const DisplayComponent = useMemo(\n    () => (props: WellArchivedMessageDisplayComponentProps) =>\n      (\n        <WellArchivedMessage.DisplayComponents.Modal {...props}>\n          Some\n          <br />\n          Custom\n          <br />\n          Message\n        </WellArchivedMessage.DisplayComponents.Modal>\n      ),\n    []\n  );\n\n  return (\n    <YourApp>\n      <WellArchivedMessage displayComponent={DisplayComponent} />\n    </YourApp>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/WellArchivedMessage/WellArchivedMessage.tsx",keywords:["wellarchivedmessage","component","displays","message","about","well","being","archioved","used","outside"]},{name:"AutocompleteNext",modulePath:"componentsV2/Autocomplete/Autocomplete",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AutocompleteNext",specifier:"@corva/ui/componentsV2",exportName:"AutocompleteNext"},category:"v2",description:"A select/autocomplete/search with options component.\n\nProvides generic `AutocompleteProps<OptionType, Multiple>` and `AutocompleteChangeHandler<OptionType, Multiple>` types to simplify typing:\n\n```ts\nconst handler = useCallback<AutocompleteChangeHandler<Option>>(/* snip */); // For single select (default)\nconst handler = useCallback<AutocompleteChangeHandler<Option, true>>(/* snip */); // For multi select\n\n```\n\nYou can see usage examples in stories below.\n\nUse `label` for a visible accessible name. If a visible label is not appropriate, pass `aria-label` or `aria-labelledby` through `htmlAttributes`.",agentSummary:"Type-to-filter select over id/title options, single or multi, with onCreate and onInputChange for search and creatable flows. Use Select for a plain dropdown with no typing.",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"TextInputNextProps['size']",required:false,description:""},{name:"labelPlacement",type:"TextInputNextProps['labelPlacement']",required:false,description:""},{name:"elementsClassNames",type:"TextInputNextProps['elementsClassNames']",required:false,description:"Escape hatch to fine-tune the styling of underlying elements"},{name:"htmlAttributes",type:"TextInputNextProps['htmlAttributes']",required:false,description:"HTML attributes forwarded to the underlying input."},{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 false | undefined ? 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:"TextInputNextProps['status']",required:false,description:""},{name:"message",type:"TextInputNextProps['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:"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:"useOnlyOptionButton",type:"boolean",required:false,description:"If `multiple === true` shows a \"Select Only\" button on option that selects only the corresponding option"},{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:"popperProps",type:"Partial<AutocompletePopperProps>",required:false,description:"Escape hatch to customize dropdown popper behavior.\n`open`, `anchorEl`, and `children` are controlled internally."},{name:"onOpen",type:"() => void",required:false,description:"Called when the dropdown is opened"},{name:"onClose",type:"(reason: MuiAutocompleteCloseReason) => void",required:false,description:"Called when the dropdown is closed"},{name:"listboxComponent",type:"ComponentType<HTMLAttributes<HTMLElement>>",required:false,description:"Custom listbox component for rendering options (e.g., virtualized list)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<number[]>([]);\n\n  return (\n    <AutocompleteNext\n      {...props}\n      options={options}\n      value={value}\n      onChange={(newValue, reason, event) => {\n        props.onChange?.(newValue as never, reason, event);\n        // These type castings is generally not needed, Autocomplete will determine its type based on `multiple` prop\n        // Which generally should be statically analyzable\n        if (newValue instanceof Array) {\n          setValue((newValue as Option[]).map(({ id }) => id));\n        } else if (newValue) {\n          setValue([(newValue as Option)?.id]);\n        } else {\n          setValue([]);\n        }\n      }}\n      filterOptions={undefined}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop, inherited from `<TextInput/>`:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext {...commonProps} label=\"Small\" size=\"small\" />\n      <AutocompleteNext {...commonProps} label=\"Medium\" size=\"medium\" />\n      <AutocompleteNext {...commonProps} label=\"Large\" size=\"large\" />\n    </SbColumn>\n  );\n}"},{name:"LabelPlacement",description:"Component supports 3 label placement options through a `labelPlacement` prop, inherited from `<TextInput/>`:\n\n- `top` (default)\n- `start`\n- `end`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext {...commonProps} label=\"Label at the top\" labelPlacement=\"top\" />\n      <AutocompleteNext {...commonProps} label=\"Label at the start\" labelPlacement=\"start\" />\n      <AutocompleteNext {...commonProps} label=\"Label at the end\" labelPlacement=\"end\" />\n    </SbColumn>\n  );\n}"},{name:"OptionsSize",description:"Component supports several option sizes, controlled through `optionSize` prop:\n\n- `medium` (default)\n- `large`",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Medium options\"\n        optionSize=\"medium\"\n      />\n      <AutocompleteNext\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Large options\"\n        optionSize=\"large\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Single",description:"Single-option is the default behaviour.",code:"{\n  const [value, setValue] = useState<number>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return <AutocompleteNext options={options} value={value} onChange={onChange} label=\"Single\" />;\n}"},{name:"WithObjectsAsValue",description:"You can use objects in `value` prop.\n\n⚠️ Be wary of mixing `T`s and `T['id']`s in `value`: due to [TS bug](https://github.com/microsoft/TypeScript/issues/47599) you may need to provide additional typing to `onChange`",code:"{\n  const [valueSingle, setValueSingle] = useState<Option | undefined>(options[2]);\n  const [valueMultiple, setValueMultiple] = useState<(Option | number)[]>([\n    options[0],\n    options[2],\n    9,\n  ]);\n  const [valueMultiple2, setValueMultiple2] = useState<Option[]>([options[0], options[2]]);\n\n  // There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\n  // to have incorrect typing if we mix T and T['id'] in `value`.\n  const onMultipleChange = useCallback<AutocompleteChangeHandler<Option, true>>(\n    v => setValueMultiple(v),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        value={valueSingle}\n        onChange={setValueSingle}\n        label=\"With objects as value (single)\"\n      />\n\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={valueMultiple}\n        onChange={onMultipleChange}\n        label=\"With objects as value (multiple, mixed objects and ids)\"\n      />\n\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={valueMultiple2}\n        onChange={setValueMultiple2}\n        label=\"With objects as value (multiple, pure)\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Multiple",description:"Pass `multiple` prop to make component be able to select multiple values.\n\nUse `useAllOption` prop to add a special \"All\" option that allows user to quickly select all options.\n\nUse `useOnlyOptionButton` prop to enable \"Select only\" button on options.",code:"{\n  const [value, setValue] = useState<number[]>([1]);\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" option'}\n        useAllOption\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with prefix\"\n        useAllOption\n        prefix={<PeoplesIcon />}\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'With \"Select Only\" option'}\n        useOnlyOptionButton\n      />\n    </SbColumn>\n  );\n}"},{name:"MultipleWithCustomSelectedRender",description:"Use `renderSelected` prop to customize how the selected values are rendered.\n\nBy default the component displays the selected item's title, \"X Selected\", or \"All\", depending on its value. It is provided as `AutocompleteNext.selectedValueRenderers.default`.\n\nYou can use the \"Multiline Chips\" renderer, provided as `AutocompleteNext.selectedValueRenderers.chipsMultiline`",code:"{\n  const [value, setValue] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={options}\n        onChange={() => {}}\n        label=\"Default multiple - all selected\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={[1, 2, 3]}\n        onChange={() => {}}\n        label=\"Default multiple - some selected\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={[1]}\n        onChange={() => {}}\n        label=\"Default multiple - one selected\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with chips\"\n        renderSelected={AutocompleteNext.selectedValueRenderers.chipsMultiline}\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with custom value render\"\n        renderSelected={data => {\n          if (data.length === 0) {\n            return null;\n          }\n\n          return (\n            <>\n              <Chip\n                onDelete={data[0].onDelete}\n                size=\"small\"\n                shape=\"square\"\n                className={styles.customChip}\n              >\n                {data[0].option.title}\n              </Chip>\n              {data.length > 1 && ` +${data.length - 1}`}\n            </>\n          );\n        }}\n      />\n    </SbColumn>\n  );\n}"},{name:"Empty",description:"Use `noOptionsMessage` option to customize the message that is shown when there are no options to select",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext label=\"Empty\" onChange={() => {}} />\n      <AutocompleteNext\n        label=\"Empty with custom empty message\"\n        noOptionsMessage={<u>Nobody here but us chickens</u>}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Loading",description:"Use `loading` prop to indicate that some data is being loaded. Note that if there are no options, a custom message will be shown",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Loading State\"\n        loading\n      />\n\n      <AutocompleteNext\n        options={options.slice(0, 0)}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Empty Loading State\"\n        loading\n      />\n    </SbColumn>\n  );\n}"},{name:"OptionPrefix",description:"To display an icon/prefix to the left of the option, pass it as a `prefix` property of the option",code:"{\n  const icons = [SearchOne, BroadcastIcon, LineChartIcon, AdjustmentIcon];\n  const optionsWithPrefix = options.slice(0, 4).map((option, index) => {\n    const Icon = icons[index];\n    return { ...option, prefix: <Icon /> };\n  });\n  const [valueArr, setValueArr] = useState<number[]>();\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={optionsWithPrefix}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Single\"\n      />\n      <AutocompleteNext\n        multiple\n        options={optionsWithPrefix}\n        value={valueArr}\n        onChange={value => setValueArr(value?.map(({ id }) => id))}\n        label=\"Multiple\"\n      />\n    </SbColumn>\n  );\n}"},{name:"CustomOptionRender",description:"You can control how the option renders by providing the `renderOption` prop.\n\nNote that in this case, you will need to wrap the texts in `<TextMiddleTruncated/>` or `<TextEndTruncated/>`",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"Custom Option Render\"\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"CustomOptionFilter",description:"You can control how the option is filtered by providing the `filterOptions` prop. Useful when you want to add some additional data to the filtering condition.\n\nIn this example, you can also filter by group.",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"Custom Option Filter\"\n      filterOptions={(options, inputValue) =>\n        options.filter(\n          ({ title, group }) =>\n            title.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase()) ||\n            group.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase())\n        )\n      }\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"Disabled",description:"You can control which options are disabled by providing the `getOptionDisabled` prop",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <AutocompleteNext\n      label=\"With disabled options\"\n      options={options}\n      value={value}\n      onChange={option => setValue(option?.id)}\n      getOptionDisabled={option => option.group === 'Great Old Ones'}\n    />\n  );\n}"},{name:"Prefix",description:"You can add a prefix to the component through `prefix` prop.",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"With Prefix\"\n      prefix={<SearchOne />}\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"PopupIconAndClearButton",description:"You can control the existence of \"Clear\" button and \"Popup Icon\" by using `clearable` and `showPopupIcon` props respectively",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        label=\"Default: Clearable, Popup Icon\"\n        value={1}\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label=\"Not Clearable\"\n        value={1}\n        clearable={false}\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label=\"No Popup Icon\"\n        value={1}\n        showPopupIcon={false}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Error",description:"To display the component in an error state, use the `status` prop. You can add a message with a `message` prop",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"With Error\"\n      status=\"error\"\n      message=\"Some error message\"\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"OnInputChange",description:"You can access what user is typing by providing the `onInputChange` prop. Useful for implementing search-like behaviour",code:"{\n  const [value, setValue] = useState<number>();\n  const [valueArray, setValueArray] = useState<number[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [loadedOptions, setLoadedOptions] = useState<typeof options>([]);\n  const currentSearchRef = useRef<string>();\n\n  const onInputChange = useCallback(async (value: string) => {\n    if (!value.trim()) {\n      return;\n    }\n\n    currentSearchRef.current = value;\n    setLoading(true);\n    await new Promise(r => setTimeout(r, 2_000));\n    if (currentSearchRef.current === value) {\n      setLoading(false);\n      const newOptions = options.map(option => ({\n        ...option,\n        title: `${value}: ${option.title}`,\n      }));\n      setLoadedOptions(newOptions);\n    }\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        value={value}\n        onChange={option => setValue(option?.id)}\n        options={loadedOptions}\n        label=\"Searchable\"\n        prefix={<SearchOne />}\n        onInputChange={onInputChange}\n        loading={loading}\n      />\n      <AutocompleteNext\n        value={valueArray}\n        onChange={option => setValueArray((option || []).map(({ id }) => id))}\n        options={loadedOptions}\n        label=\"Searchable\"\n        prefix={<SearchOne />}\n        onInputChange={onInputChange}\n        loading={loading}\n        multiple\n      />\n    </SbColumn>\n  );\n}"},{name:"WithGroups",description:"You can group options by providing the `groupBy` prop.\n\nYou can control the render of groups by providing the `renderGroup` prop.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        label=\"With Groups\"\n        value={1}\n        groupBy={option => option.group}\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label={'With Groups, multiselect with \"All\" option'}\n        value={[1]}\n        groupBy={option => option.group}\n        multiple\n        useAllOption\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label=\"With Custom Groups\"\n        value={1}\n        groupBy={option => option.group}\n        renderGroup={({ children, group }) => {\n          return (\n            <div>\n              <div style={{ textAlign: 'center' }}>\n                <Text size={12}>{group}</Text>\n              </div>\n              <ul style={{ padding: 0 }}>{children}</ul>\n            </div>\n          );\n        }}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"DisableFiltering",description:"You can disable option filtering by providing the `disableFilter` prop. In this case, the component will behave as regular `<select/>`",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"No Autocomplete\"\n      value={1}\n      onChange={() => {}}\n      disableFiltering\n    />\n  );\n}"},{name:"Createable",description:"By providing the `onCreate` prop you can add the ability to add user-defined options to the select",code:"{\n  const [ownOptions, setOwnOptions] = useState(options);\n  const [value, setValue] = useState<number[]>([]);\n\n  const createOption = useCallback((title: string) => {\n    const newOption: typeof options[number] = {\n      id: Math.ceil(Math.random() * 1000),\n      title,\n      group: 'User-Created',\n    };\n\n    setValue(oldValue => [newOption.id, ...oldValue]);\n    setOwnOptions(oldValue => [newOption, ...oldValue]);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={ownOptions}\n        label=\"Createable\"\n        value={value[0]}\n        onChange={option => setValue(option ? [option.id] : [])}\n        onCreate={createOption}\n      />\n      <AutocompleteNext\n        label=\"Createable Multiple\"\n        options={ownOptions}\n        value={value}\n        onChange={options => setValue(options.map(({ id }) => id))}\n        onCreate={createOption}\n        multiple\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"DropdownClassName",description:"You can add a custom class name to a dropdown by using the `dropdownClassName` prop",code:"<AutocompleteNext\n    options={options}\n    label=\"With custom dropdown styles\"\n    dropdownClassName={styles.customDropdown}\n    onChange={() => {}}\n  />"},{name:"WithInfiniteScroll",description:"Infinite scroll with search example",code:"{\n  const [value, setValue] = useState<AutocompleteOption>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [data, setData] = useState<AutocompleteOption[]>([]);\n\n  const searchChangeTimerRef = useRef<NodeJS.Timeout>();\n  const searchRef = useRef('');\n  const pageRef = useRef(1);\n  const hasMoreRef = useRef(true);\n  const isLoadingRef = useRef(false);\n\n  // These should be in constants.ts\n  const perPage = 20;\n  const ScrollThreshold = 50;\n\n  const fetchNext = useCallback(async () => {\n    if (!hasMoreRef.current) {\n      return;\n    }\n\n    setIsLoading(true);\n    isLoadingRef.current = true;\n\n    const page = pageRef.current;\n    const search = searchRef.current.trim();\n\n    const loaded = await loadOptions({\n      search,\n      page,\n      perPage,\n    });\n\n    // Search changed while we were loading stuff\n    if (search !== searchRef.current.trim()) {\n      return;\n    }\n\n    hasMoreRef.current = loaded.length >= perPage;\n    setData(prev => (page > 1 ? [...prev, ...loaded] : loaded));\n    setIsLoading(false);\n    pageRef.current = page + 1;\n    isLoadingRef.current = false;\n  }, []);\n\n  const onInputChange = useCallback(\n    (inputValue: string) => {\n      if (searchRef.current !== inputValue) {\n        clearTimeout(searchChangeTimerRef.current);\n        searchChangeTimerRef.current = setTimeout(() => {\n          pageRef.current = 1;\n          hasMoreRef.current = true;\n          fetchNext();\n        }, 200);\n      }\n\n      searchRef.current = inputValue;\n    },\n    [fetchNext]\n  );\n\n  useEffect(() => {\n    searchRef.current = '';\n    pageRef.current = 1;\n    hasMoreRef.current = true;\n    fetchNext();\n  }, [fetchNext]);\n\n  const onScroll = useCallback<UIEventHandler<HTMLUListElement>>(\n    e => {\n      const element = e.currentTarget;\n      const isNearBottom =\n        element.scrollTop + element.clientHeight >= element.scrollHeight - ScrollThreshold;\n\n      if (isNearBottom && !isLoadingRef.current) {\n        fetchNext();\n      }\n    },\n    [fetchNext]\n  );\n\n  const ListBoxWithScroll = useCallback<Required<AutocompleteNextProps>['listboxComponent']>(\n    ({ children, ...rest }) => {\n      return (\n        <ul {...rest} onScroll={onScroll}>\n          {children}\n        </ul>\n      );\n    },\n    [onScroll]\n  );\n\n  const onCloseDropdown = useCallback(() => {\n    onInputChange('');\n  }, [onInputChange]);\n\n  return (\n    <AutocompleteNext\n      value={value}\n      onChange={setValue}\n      label=\"With Infinite scroll and search\"\n      options={data}\n      status={isLoading ? 'loading' : undefined}\n      onInputChange={onInputChange}\n      // Needed to reset innser state on dropdown close\n      onClose={onCloseDropdown}\n      // ListBox with scroll detection\n      listboxComponent={ListBoxWithScroll}\n      // Id function needed to disable filtering, assuming all filtering is done server-side\n      // for instance - when searching users by email\n      filterOptions={id}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Autocomplete/Autocomplete.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142449-52520",keywords:["autocompletenext","select","autocomplete","search","options","component","provides","generic","autocompleteprops","optiontype","multiple"]},{name:"Cell",modulePath:"componentsV2/Grid/Cell",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Cell",specifier:"@corva/ui/componentsV2",exportName:"Cell"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"span",type:"number",required:false,description:""},{name:"rows",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Grid/Cell.tsx",keywords:["cell"]},{name:"DatePickerNext",modulePath:"componentsV2/DatePicker/DatePicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"DatePickerNext",specifier:"@corva/ui/componentsV2",exportName:"DatePickerNext"},category:"v2",description:"A date/date-tme/month picker with range support.\n\nProvides generic `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>` types to simplify typing:\n\n```ts\nconst handler = useCallback<DatePickerChangeHandler>(/* snip */); // For single select (default)\nconst handler = useCallback<DatePickerChangeHandler<true>>(/* snip */); // For range select\n\n```\n\nYou can see usage examples in stories below",agentSummary:"Date, date-time, or month picker with range support over native Date values. Replaces the deprecated V2 DatePicker and the moment-based V1 DatePicker.",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"TextInputNextProps['size']",required:false,description:""},{name:"labelPlacement",type:"TextInputNextProps['labelPlacement']",required:false,description:""},{name:"elementsClassNames",type:"TextInputNextProps['elementsClassNames']",required:false,description:""},{name:"value",type:"DatePickerValue<IsRange>",required:false,description:""},{name:"onChange",type:"DatePickerChangeHandler<IsRange>",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",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:"type",type:"DatePickerType",required:false,description:"Type: dates only / date + time / month"},{name:"minDate",type:"Date",required:false,description:"Minimum selectable date"},{name:"maxDate",type:"Date",required:false,description:"maximum selectable date"},{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"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<DatePickerValue>();\n\n  return (\n    <DatePickerNext\n      {...props}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n      range={false}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop, inherited from `<TextInput/>`:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Small\" size=\"small\" value={value} onChange={setValue} />\n      <DatePickerNext label=\"Medium\" size=\"medium\" value={value} onChange={setValue} />\n      <DatePickerNext label=\"Large\" size=\"large\" value={value} onChange={setValue} />\n    </SbColumn>\n  );\n}"},{name:"LabelPlacement",description:"Component supports 3 label placement options through a `labelPlacement` prop, inherited from `<TextInput/>`:\n\n- `top` (default)\n- `start`\n- `end`\n",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext\n        label=\"Label at the top\"\n        labelPlacement=\"top\"\n        value={value}\n        onChange={setValue}\n      />\n      <DatePickerNext\n        label=\"Label at the start\"\n        labelPlacement=\"start\"\n        value={value}\n        onChange={setValue}\n      />\n      <DatePickerNext\n        label=\"Label at the end\"\n        labelPlacement=\"end\"\n        value={value}\n        onChange={setValue}\n      />\n    </SbColumn>\n  );\n}"},{name:"Formatting",description:"You can configure the format in which values will be displayed by using the `format` prop.\n\nIf not set, the component uses different default formats for different `type`s and for different `range` values:\n\n`range={false}`\n  * `date`: `MMM DD YYYY`\n  * `dateTime`: `MMM DD YYYY HH:mm`\n  * `month`: `MMMM YYYY`\n\n`range={true}`\n  * `date`: `MM/DD/YYYY`\n  * `dateTime`: `MM/DD/YYYY HH:mm`\n  * `month`: `MMM YYYY`\n\nFull list of accepted tokens can be found [here](https://momentjs.com/docs/#/displaying/format/)",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 5, 16, 17));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Default format\" value={value} onChange={setValue} />\n      <DatePickerNext\n        label=\"ISO format\"\n        value={value}\n        onChange={setValue}\n        format=\"YYYY-MM-DDTHH:mm:ss.SSSZ\"\n      />\n    </SbColumn>\n  );\n}"},{name:"MinMax",description:"You can limit minimum and maximum selectable dates by providing `minDate` and `maxDate` props respectively.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Date - no constraints\" value={value} onChange={setValue} />\n      <DatePickerNext\n        label=\"Date - constrained\"\n        value={value}\n        onChange={setValue}\n        minDate={new Date(2024, 11, 31)}\n        maxDate={new Date(2026, 0, 1)}\n      />\n      <DatePickerNext\n        label=\"DateTime - constrained\"\n        value={value}\n        onChange={setValue}\n        minDate={new Date(2024, 11, 31)}\n        maxDate={new Date(2026, 0, 1)}\n        type=\"dateTime\"\n      />\n    </SbColumn>\n  );\n}"},{name:"DisabledDates",description:"You can disable any date by using the `getTileDisabled` prop.\n\nPlease note, this is ***not*** meant to be used as an alternative method of setting `minDate` or `maxDate`",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 11));\n  return (\n    <DatePickerNext\n      label=\"Date with disabled dates\"\n      value={value}\n      onChange={setValue}\n      getTileDisabled={({ date }) =>\n        date.getTime() === new Date(2025, 8, 10).getTime() ||\n        date.getTime() === new Date(2025, 8, 11).getTime() ||\n        date.getTime() === new Date(2025, 8, 12).getTime()\n      }\n    />\n  );\n}"},{name:"DateAndTimeMode",description:"You can select time in addition to date by using the `type` prop: `type=\"dateTime\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 3, 51, 0));\n\n  return <DatePickerNext label=\"Date + Time\" value={value} onChange={setValue} type=\"dateTime\" />;\n}"},{name:"MonthsSelection",description:"You can select months instead of days by using the `type` prop: `type=\"month\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return <DatePickerNext label=\"Month\" value={value} onChange={setValue} type=\"month\" />;\n}"},{name:"RangeSelection",description:"You can select a time range by using the `range` prop. Notice, that it changes types of DatePickerNext's `value` and `onChange` props.\n\nTo simplify working with those, 2 helper types are exported: `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>`",code:"{\n  const [value, setValue] = useState<DatePickerValue<true>>([\n    new Date(2023, 8, 8, 3, 51, 0),\n    new Date(2025, 8, 14, 18, 6, 0),\n  ]);\n\n  const onChange = useCallback<DatePickerChangeHandler<true>>(value => {\n    // Do something with value here\n    setValue(value);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Date\" value={value} onChange={onChange} type=\"date\" range />\n      <DatePickerNext label=\"Month\" value={value} onChange={onChange} type=\"month\" range />\n      <DatePickerNext label=\"Date & Time\" value={value} onChange={onChange} type=\"dateTime\" range />\n    </SbColumn>\n  );\n}"},{name:"UsingPartsOfDatePicker",description:"You can use parts of `<DatePickerNext/>` exported as `DatePickerNext.Controls` and `DatePickerNext.Grid`.\n\nThese components are pretty simple, so you will need to write accompanying logic yourself.",code:"{\n  const [activeStartDate, setActiveStartDate] = useState<Date>(new Date(2025, 8, 8, 5, 16, 17));\n  const [selected, setSelected] = useState<Date>();\n\n  return (\n    <SbColumn>\n      <SbPlaceholder>\n        <DatePickerNext.Controls date={activeStartDate} setDate={setActiveStartDate} />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <DatePickerNext.Grid\n          onChange={setSelected}\n          activeStartDate={activeStartDate}\n          selected={selected}\n        />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/DatePicker/DatePicker.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=162296-12406",keywords:["datepickernext","date","date-tme","month","picker","range","support","provides","generic","datepickervalue","isrange"]}];
+var componentsV2Data = [{name:"Accordion",modulePath:"componentsV2/Accordion",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Accordion",specifier:"@corva/ui/componentsV2",exportName:"Accordion"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:"Title to show"},{name:"children",type:"ReactNode",required:true,description:"Content to hide under accordion"},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"iconPosition",type:"'start' | 'end'",required:false,description:"",enumValues:["start","end"]},{name:"titleHover",type:"boolean",required:false,description:"Controls title's color change on hover"},{name:"open",type:"boolean",required:false,description:""},{name:"onChange",type:"(isOpen: boolean, event: ChangeEvent) => void",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"unmountWhenClosed",type:"boolean",required:false,description:"Controls whether content should persist in DOM tree if closed"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Accordion {...props} />"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`\n\nNote that it does not affect content of the `<Accordion/>`",code:"<SbColumn>\n    <Accordion title=\"Medium\" size=\"medium\">\n      {text}\n    </Accordion>\n    <Accordion title=\"small\" size=\"small\">\n      {text}\n    </Accordion>\n  </SbColumn>"},{name:"IconPosition",description:"Component can render its icon either before or after title. This is controlled with `iconPosition` prop:\n\n- `start` (default)\n- `end`",code:"<SbColumn>\n    <Accordion title=\"Start\" iconPosition=\"start\">\n      {text}\n    </Accordion>\n    <Accordion title=\"End\" iconPosition=\"end\">\n      {text}\n    </Accordion>\n  </SbColumn>"},{name:"ControlledAccordion",description:"You can open/close `<Accordion/>` programmatically by using the `open` and `onChange` props.\n\n`onChange` is called regardless of the mode, allowing you to keep track of `<Accordion/>`'s state",code:"{\n  const [isOpen, setIsOpen] = useState(true);\n\n  return (\n    <Accordion\n      title={`Controlled: ${isOpen ? 'open' : 'closed'}`}\n      open={isOpen}\n      onChange={setIsOpen}\n    >\n      {text}\n    </Accordion>\n  );\n}"},{name:"TitleWithStaticColor",description:"Use the `titleHover` prop to control if title changes color on hover",code:"<Accordion title=\"Static color\" titleHover={false} size=\"medium\">\n    {text}\n  </Accordion>"},{name:"KeepContentMountedWhenClosed",description:"By default, Accordion unmounts its content when closed due to performance reasons. You can change it by providing the `unmountWhenClosed` prop.",code:"<SbColumn alignItems=\"stretch\">\n    <Accordion title=\"Unmounts content on close\">{text}</Accordion>\n    <Accordion title=\"Keeps content mounted\" unmountWhenClosed={false}>\n      {text}\n    </Accordion>\n  </SbColumn>"},{name:"WithAdditionalContentInTitle",description:"You can add arbitrary content to title. The container is a flex element with preset positioning and gaps.\n\nDo not forget to disable event propagation for interactive elements",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Accordion\n        title={\n          <>\n            With Button\n            <ButtonIcon size=\"xs\" onClick={e => e.stopPropagation()}>\n              <BubbleChartIcon />\n            </ButtonIcon>\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n\n      <Accordion\n        title={\n          <>\n            With Chip on the right\n            {/* Use classes for this IRL */}\n            <div style={{ marginLeft: 'auto' }}>\n              <Chip size=\"small\">Chip</Chip>\n            </div>\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n\n      <Accordion\n        title={\n          <>\n            With Info Icon\n            <Tooltip title=\"Information goes here\">\n              <span>\n                <InfoIcon size={16} />\n              </span>\n            </Tooltip>\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n\n      <Accordion\n        title={\n          <>\n            With Counter\n            <Counter count={100} max={99} size=\"small\" />\n          </>\n        }\n      >\n        {text}\n      </Accordion>\n    </SbColumn>\n  );\n}"},{name:"FocusStateAndOverflow",description:"Care must be taken while using Accordion in scrollable containers, so its focus state is not \"cut off\".",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div\n        style={{\n          overflowX: 'auto',\n          height: '100px',\n        }}\n      >\n        <Accordion title=\"Title\">{text}</Accordion>\n      </div>\n      <div\n        style={{\n          overflowX: 'auto',\n          height: '100px',\n          // Add paddings to blocks with overflow\n          padding: '8px',\n        }}\n      >\n        <Accordion title=\"Title\">{text}</Accordion>\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Accordion/Accordion.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=60299-60817",keywords:["accordion","expand","collapse","panel","faq"]},{name:"AppCommonsProvider",modulePath:"componentsV2/AppCommonsProvider",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"AppCommonsProvider",specifier:"@corva/ui/componentsV2/AppCommonsProvider/AppCommonsProvider",form:"named",exportName:"AppCommonsProvider"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"isBrowserFullscreen",type:"boolean",required:false,description:""},{name:"enterBrowserFullscreen",type:"() => void",required:false,description:""},{name:"exitBrowserFullscreen",type:"() => void",required:false,description:""},{name:"isSeparateWindow",type:"boolean",required:false,description:""},{name:"openSeparateWindow",type:"() => void",required:false,description:""},{name:"closeSeparateWindow",type:"() => void",required:false,description:""},{name:"setSeparateWindowTitle",type:"(title: string) => void",required:false,description:""},{name:"maximized",type:"boolean",required:true,description:""},{name:"appId",type:"number",required:true,description:""},{name:"app",type:"App",required:true,description:""},{name:"appSettings",type:"AppSettings",required:false,description:""},{name:"onSettingChange",type:"(key: string, value: unknown) => void",required:true,description:""},{name:"onSettingsChange",type:"(value: unknown) => void",required:true,description:""},{name:"well",type:"Well",required:false,description:""},{name:"rig",type:"Asset",required:false,description:""},{name:"fracFleet",type:"FracFleet",required:false,description:""},{name:"interventionUnit",type:"InterventionUnit",required:false,description:""},{name:"wells",type:"Well[]",required:false,description:""},{name:"dashboardMeta",type:"AppDashboardMeta",required:false,description:""},{name:"appHeadersV3Enabled",type:"boolean",required:false,description:""},{name:"isNonIsolatedApp",type:"boolean",required:false,description:""},{name:"disableAppAssetSelection",type:"boolean",required:false,description:""},{name:"isMultiRig",type:"boolean",required:false,description:""},{name:"currentUser",type:"User",required:false,description:""},{name:"globalOffsetWells",type:"GlobalOffsetWell[]",required:false,description:""},{name:"globalOffsetWellsVersion",type:"number",required:false,description:""},{name:"globalOffsetWellsToken",type:"number",required:false,description:""},{name:"isExpanded",type:"boolean",required:false,description:"True in any of the three modes: dashboard maximize, browser fullscreen, separate window"},{name:"setMaximized",type:"(maximized: boolean) => void",required:true,description:""},{name:"appData",type:"unknown",required:false,description:""},{name:"layoutEnvironment",type:"({ type?: string } & Record<string, unknown>) | null",required:false,description:""},{name:"appSettingsComponent",type:"ComponentType<any>",required:false,description:""},{name:"toggleAnnotationsList",type:"() => void",required:false,description:""},{name:"onHelpCenterClick",type:"() => void",required:false,description:""},{name:"secondaryMenuItems",type:"{ title: ReactNode; onClick?: () => void; icon?: ReactNode }[]",required:false,description:""},{name:"isInsideNewMobileApp",type:"boolean",required:false,description:""},{name:"reloadApp",type:"() => void",required:false,description:""},{name:"onAppRemove",type:"AppCommonsContextTypeInternal['removeApp']",required:false,description:""},{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppCommonsProvider/AppCommonsProvider.tsx",keywords:["appcommonsprovider"]},{name:"AppContainer",modulePath:"componentsV2/AppContainer",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppContainer",specifier:"@corva/ui/componentsV2",exportName:"AppContainer"},category:"v2",description:"A container component for an app. Provides needed CSS containment for header/footer responsivity and styling. Needs a container with set height to work properly.\n\n`ref` points to root element",agentSummary:"App shell with header, content and footer slots plus the containment AppHeader relies on. Needs App Commons context and a set-height parent.",isExperimental:true,isDeprecated:false,props:[{name:"header",type:"ReactNode",required:false,description:"App header, usually `AppHeader`"},{name:"children",type:"ReactNode",required:false,description:"App content"},{name:"footer",type:"ReactNode",required:false,description:"App footer, usually `AppFooter`"},{name:"elementsClassNames",type:"Partial<{\n    header: string;\n    footer: string;\n    content?: string;\n  }>",required:false,description:"An escape hatch to tweak styling of internal elements"},{name:"panels",type:"Record<string, PanelConfig>",required:false,description:"Config object for standard app panels"},{name:"settingsInitiallyPinned",type:"boolean",required:false,description:""},{name:"settingsPinningEnabled",type:"boolean",required:false,description:""},{name:"settingsHeaderControls",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Context>\n    <AppContainer {...props} />\n  </Context>"},{name:"FullExample",description:"",code:"// Mimicking DevCenterAppContainer's context\n  <Context>\n    <AppContainer\n      header={<AppHeader />}\n      footer={\n        <AppFooter\n          asset={{\n            asset_id: 59241352,\n            name: 'Some asset',\n          }}\n          lastUpdate={Math.floor(new Date().getTime() / 1000)}\n        />\n      }\n    >\n      Some content\n    </AppContainer>\n  </Context>"},{name:"MaximizedApp",description:"Component automatically adjusts its header container to accommodate close button when app is maximized",code:"{\n  const app = (\n    <AppContainer\n      header={\n        <SbPlaceholder style={{ padding: 0 }}>\n          <AppHeader />\n        </SbPlaceholder>\n      }\n      footer={\n        <SbPlaceholder style={{ padding: 0, display: 'block' }}>\n          <AppFooter\n            asset={{\n              asset_id: 59241352,\n              name: 'Some asset',\n            }}\n            lastUpdate={Math.floor(new Date().getTime() / 1000)}\n          />\n        </SbPlaceholder>\n      }\n    >\n      <SbPlaceholder style={{ padding: 0, textAlign: 'left' }}>Some content</SbPlaceholder>\n    </AppContainer>\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Context appName=\"Regular\" crossLines={false}>\n        {app}\n      </Context>\n      <Context appName=\"Maximized\" crossLines={false} maximized>\n        {app}\n      </Context>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppContainer/AppContainer.tsx",keywords:["appcontainer","container","component","provides","needed","containment","header","footer","responsivity","styling","needs"]},{name:"AppDqPopover",modulePath:"componentsV2/AppDqPopover",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"AppDqPopover",specifier:"@corva/ui/componentsV2/AppDqPopover/AppDqPopover",form:"named",exportName:"AppDqPopover"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"HTMLElement | null",required:false,description:""},{name:"placement",type:"ComponentProps<typeof Popover>['placement']",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""},{name:"alertsData",type:"ReturnType<typeof useWellnessAlerts>['wellnessAlerts']['alertsData']",required:false,description:""},{name:"contentRef",type:"Ref<HTMLDivElement>",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppDqPopover/AppDqPopover.tsx",keywords:["appdqpopover"]},{name:"AppFooter",modulePath:"componentsV2/AppFooter",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppFooter",specifier:"@corva/ui/componentsV2",exportName:"AppFooter"},category:"v2",description:"Application footer. DataQuality Popover is described [here](https://www.figma.com/design/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=83011-88407)",agentSummary:"Data quality, Last Update and warning footer. Needs App Commons context; AppContainer hides its footer slot when App Headers V3 is enabled.",isExperimental:true,isDeprecated:false,props:[{name:"lastUpdate",type:"number | string | Date",required:false,description:"Unix timestamp (no milliseconds), JS timestamp (with milliseconds), a string in ISO-8601 format, or a Date object of the last update"},{name:"asset",type:"Asset",required:false,description:"Needed for data quality"},{name:"multiRigAssets",type:"Asset[]",required:false,description:"Needed for data quality"},{name:"loadDqData",type:"boolean",required:false,description:"Controls initial load of alerts: otherwise the alerts will be loaded only if App ID is in the whitelist"},{name:"showWarning",type:"boolean",required:false,description:"Shows \"Recommendations may be incorect...\" warning"},{name:"warningMessage",type:"ReactNode",required:false,description:"Warning message to be shown"},{name:"dqData",type:"ReturnType<typeof useWellnessAlerts>",required:false,description:"An escape hatch for when you want to use DQ data in your app, and don't want to load it twice"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"// Mimicking DevCenterAppContainer's context\n  <AppCommonsProvider\n    maximized={false}\n    appId={238}\n    app={{}}\n    appSettings={{}}\n    onSettingChange={() => {}}\n    onSettingsChange={() => {}}\n    setMaximized={() => {}}\n  >\n    <AppFooter {...props} />\n  </AppCommonsProvider>"},{name:"WithWarningMessage",description:"You can display a waring message by using the `showWarning` and `warningMessage` props. `AppFooter` automatically detects if message overflows and hides it in an icon's tooltip if needed.\n\nUse `AppFooter.defaultWarningMessage` property to construct your own message, based on the default one",code:"<AppCommonsProvider\n    maximized={false}\n    appId={238}\n    app={{}}\n    appSettings={{}}\n    onSettingChange={() => {}}\n    onSettingsChange={() => {}}\n    setMaximized={() => {}}\n  >\n    <Grid>\n      <Grid.Cell>\n        <AppFooter showWarning />\n      </Grid.Cell>\n      <Grid.Cell>\n        <AppFooter showWarning warningMessage=\"With custom message\" />\n      </Grid.Cell>\n      <Grid.Cell>\n        <AppFooter\n          showWarning\n          warningMessage={`${AppFooter.defaultWarningMessage}. With custom message added`}\n        />\n      </Grid.Cell>\n      <Grid.Cell />\n    </Grid>\n  </AppCommonsProvider>"},{name:"LastUpdateFormats",description:"You can pass `lastUpdate` as a number, string, or a `Date` object",code:"{\n  const date = new Date();\n\n  return (\n    <AppCommonsProvider\n      maximized={false}\n      appId={238}\n      app={{}}\n      appSettings={{}}\n      onSettingChange={() => {}}\n      onSettingsChange={() => {}}\n      setMaximized={() => {}}\n    >\n      <SbColumn alignItems=\"stretch\">\n        {/* Unix timestamp */}\n        <AppFooter lastUpdate={Math.ceil(date.getTime() / 1000)} />\n        {/* JS timestamp (with milliseconds) */}\n        <AppFooter lastUpdate={date.getTime()} />\n        {/* ISO string */}\n        <AppFooter lastUpdate={date.toISOString()} />\n        {/* Date object */}\n        <AppFooter lastUpdate={date} />\n      </SbColumn>\n    </AppCommonsProvider>\n  );\n}"},{name:"WithExternalData",description:"If you use data quality data in your app and don't want to load it twice, you can pass it as a `dqData` prop",code:"{\n  return (\n    <AppCommonsProvider\n      maximized={false}\n      appId={238}\n      app={{}}\n      appSettings={{}}\n      onSettingChange={() => {}}\n      onSettingsChange={() => {}}\n      setMaximized={() => {}}\n    >\n      <SbColumn alignItems=\"stretch\">\n        <AppFooter dqData={okData} />\n        <AppFooter dqData={errorData} />\n      </SbColumn>\n    </AppCommonsProvider>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppFooter/AppFooter.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=97872-7741",keywords:["appfooter","application","footer","dataquality","popover","described","here"]},{name:"AppHeader",modulePath:"componentsV2/AppHeader",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppHeader",specifier:"@corva/ui/componentsV2",exportName:"AppHeader"},category:"v2",description:"App header component. Must be used inside `<AppContainer/>` to have proper responsiveness.\n\nReceives most of its data from `<DevCenterAppContainer/>`'s context.",agentSummary:"App top bar: app name, version controls, asset chips, Pad Mode select. Needs App Commons context and AppContainer; the V1 AppHeader takes data as props.",isExperimental:true,isDeprecated:false,props:[{name:"logo",type:"string | ReactElement",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"Used for offset wells, etc",deprecated:"use `additionalControls`"},{name:"padModeDisabled",type:"boolean",required:false,description:"Disables Pad Mode select for completions"},{name:"padModeWells",type:"ReturnType<typeof useAppCommons>['wells']",required:false,description:"Override wells for Pad Mode Selector"},{name:"onPadModeChange",type:"(value?: any) => void",required:false,description:"Override change handler for Pad Mode Selector. Useful when pad mode change should also change something else in settings or app's internal store\n\n`onSettingChange` from `useAppCommons` hook is used by default"},{name:"elementsClassNames",type:"{\n    title?: string;\n    additional?: string;\n    additionalControls?: string;\n    chips?: string;\n    buttons?: string;\n    versionSelect?: string;\n    titleControls?: string;\n    actions?: string;\n  }",required:false,description:"An escape hatch to tweak the styling of internal elements\n\n`actions`, `buttons`, `titleControls` and `versionSelect` are for *V3 only*"},{name:"title",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"rightSideContent",type:"ReactNode",required:false,description:"",deprecated:"not used in V3"},{name:"additionalControls",type:"ReactNode",required:false,description:"**(V3 only)** Place for Offset Wells, etc"},{name:"asset",type:"Asset | Asset[]",required:false,description:"**(V3 only)** Asset for data quality alerts"},{name:"dqData",type:"UseWellnessAlertsReturnType",required:false,description:"**(V3 only)** An escape hatch for when you want to use DQ data in your app, and don't want to load it twice"},{name:"lastUpdate",type:"number | string | Date",required:false,description:"**(V3 only)** Unix timestamp (no milliseconds), JS timestamp (with milliseconds), a string in ISO-8601 format, or a Date object of the last update"},{name:"showComments",type:"boolean",required:false,description:"**(V3 only)** Shows \"Add Comment\" button"},{name:"additionalActions",type:"AdditionalAction[]",required:false,description:"**(V3 only)** List of additional actions to show as buttons on the right side"},{name:"titleControls",type:"ReactNode",required:false,description:"**(V3 only)** Used to put some controls alongside title"},{name:"titleControlsPosition",type:"'right' | 'left'",required:false,description:"**(V3 only)** Title controls position",enumValues:["right","left"]},{name:"disableSettings",type:"boolean",required:false,description:"**(V3 only)** Disables settings button"},{name:"showAssetChips",type:"boolean",required:false,description:"**(V3 only)** Shows asset chips if true"},{name:"disableAssetSelector",type:"boolean",required:false,description:"**(V3 only)** Disables asset selector"},{name:"titleMenuActions",type:"TitleMenuAction[]",required:false,description:"**(V3 only)** Additional actions to be shown in title dropdown menu"},{name:"responsivenessConfig",type:"AppHeaderV3Props['responsivenessConfig']",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ContextWrapper app={app} {...entities}>\n    <AppHeader {...props} />\n  </ContextWrapper>"},{name:"VersionBadges",description:"Component displays an appropriate badge next to app's name depending on `app.package.label`",code:"{\n  const prodApp = structuredClone(app);\n  if (prodApp.package) {\n    prodApp.package.label = PACKAGE_LABELS.PROD;\n  }\n  const betaApp = structuredClone(app);\n  if (betaApp.package) {\n    betaApp.package.label = PACKAGE_LABELS.BETA;\n  }\n  const devApp = structuredClone(app);\n  if (devApp.package) {\n    devApp.package.label = PACKAGE_LABELS.DEV;\n  }\n  const versionedApp = structuredClone(app);\n  if (versionedApp.package) {\n    versionedApp.package.label = undefined;\n  }\n  const longVersionApp = structuredClone(app);\n  if (longVersionApp.package) {\n    longVersionApp.package.label = undefined;\n    longVersionApp.package.version = 'Some-long-version-name-probably-an-app-from-a-PR';\n  }\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper app={prodApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={betaApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={devApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={versionedApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper app={longVersionApp} {...entities}>\n        <AppHeader />\n      </ContextWrapper>\n    </SbColumn>\n  );\n}"},{name:"WithLogo",description:"Use `logo` prop to add a branding logo to component",code:"<ContextWrapper app={app} {...entities}>\n    <AppHeader logo=\"https://www.corva.ai/assets/Delta-Corva_White.png\" />\n  </ContextWrapper>"},{name:"Completions",description:"Component automatically detects app's segment to display asset chips & Pad Mode select if needed",code:"{\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'App with a fairly long name that will be truncated at some point';\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        appSettings={{\n          settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n        }}\n      >\n        <AppHeader>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        well={undefined}\n        appSettings={{\n          settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n        }}\n      >\n        <AppHeader>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        well={undefined}\n        appSettings={{ settingsByAsset: { 'pad--1230': { mode: 'pad' } } }}\n      >\n        <AppHeader>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n\n      <ContextWrapper\n        app={completionsApp}\n        {...entities}\n        well={undefined}\n        appSettings={{\n          settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n        }}\n      >\n        <AppHeader rightSideContent={<div>Right Content</div>}>\n          <OffsetWellButton wells={[]} onClick={() => {}} />\n        </AppHeader>\n      </ContextWrapper>\n    </SbColumn>\n  );\n}"},{name:"WithCustomPadWells",description:"Use `padModeWells` prop to provide a pad mode selector options, different from the default ones",code:"{\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'Completions App';\n\n  const padModeWells = entities?.wells?.map((well, index) => ({\n    ...well,\n    name: `Custom well ${index}`,\n  }));\n\n  return (\n    <ContextWrapper app={completionsApp} {...entities} well={undefined}>\n      <SbColumn alignItems=\"stretch\">\n        <AppHeader />\n        <AppHeader padModeWells={padModeWells} />\n      </SbColumn>\n    </ContextWrapper>\n  );\n}"},{name:"WithCustomPadModeChangeHandler",description:"Use `onPadModeChange` prop to provide a custom pad mode change handler. Note that it is called *instead of* original `onSettingChange`",code:"{\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'Completions App';\n\n  return (\n    <ContextWrapper app={completionsApp} {...entities} well={undefined}>\n      <AppHeader\n        onPadModeChange={value =>\n          // eslint-disable-next-line no-alert\n          alert(`Custom Pad Mode Change Handler\\n\\n${JSON.stringify(value)}`)\n        }\n      />\n    </ContextWrapper>\n  );\n}"},{name:"HiddenChips",description:"Component hides its asset chips depending on dashboard meteadata: no chips on single-asset dashboard, only well chips if there are several wells selected, all chips are shown otherwise.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper\n        app={{ ...app, name: 'App on single-asset dashboard' }}\n        {...entities}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: false }}\n      >\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper\n        app={{ ...app, name: 'App on single-asset dashboard with multiple wells' }}\n        {...entities}\n        dashboardMeta={{ isMultiAsset: false, isMultiWell: true }}\n      >\n        <AppHeader />\n      </ContextWrapper>\n      <ContextWrapper\n        app={{ ...app, name: 'App on multi-asset dashboard' }}\n        {...entities}\n        dashboardMeta={{ isMultiAsset: true, isMultiWell: false }}\n      >\n        <AppHeader />\n      </ContextWrapper>\n    </SbColumn>\n  );\n}"},{name:"WithCustomTitle",description:"You can use the `title` prop to provide a custom title",code:"<ContextWrapper app={app} {...entities}>\n    <AppHeader\n      title={\n        <>\n          Custom <u>title</u> goes here\n        </>\n      }\n    />\n  </ContextWrapper>"},{name:"Responsiveness",description:"Component needs to be a child of `<AppContainer/>` to be properly responsive: `<AppContainer/>` provides CSS containment on which this component relies for its own responsiveness.\n\nSee [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) for more info.",code:"{\n  const min = 375;\n  const max = 980;\n  const [width, setWidth] = useState(max);\n  const completionsApp = structuredClone(app);\n  completionsApp.settings = {\n    segment: SEGMENTS.COMPLETION,\n    padId: 123,\n  };\n  completionsApp.name = 'Completions App with a long name that will be truncated';\n  completionsApp.package = {\n    ...completionsApp.package,\n    label: PACKAGE_LABELS.DEV,\n  };\n  const completionsAppWithLongVersion = structuredClone(completionsApp);\n  completionsAppWithLongVersion.package = {\n    ...completionsApp.package,\n    label: undefined,\n    version: 'Some-long-and-probably-in-development-version',\n  };\n  const appWithBadge = structuredClone(app);\n  appWithBadge.package = {\n    ...completionsApp.package,\n    label: PACKAGE_LABELS.DEV,\n  };\n\n  return (\n    <div style={{ margin: '0 -30px' }}>\n      <SbColumn>\n        {/* TODO use own slider */}\n        <div style={{ width: `${max - min}px` }}>\n          <Slider\n            value={width}\n            onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n            min={min}\n            max={max}\n          />\n        </div>\n\n        <div>Size: {width}px</div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsApp}\n            {...entities}\n            appSettings={{\n              settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n            }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsApp}\n            {...entities}\n            well={undefined}\n            appSettings={{\n              settingsByAsset: { 'pad--1230': { mode: 'custom', selectedAssets: [30] } },\n            }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsApp}\n            {...entities}\n            well={undefined}\n            appSettings={{ settingsByAsset: { 'pad--1230': { mode: 'pad' } } }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper\n            app={completionsAppWithLongVersion}\n            {...entities}\n            well={undefined}\n            appSettings={{ settingsByAsset: { 'pad--1230': { mode: 'pad' } } }}\n          >\n            <AppContainer\n              header={\n                <AppHeader>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper app={appWithBadge} {...entities}>\n            <AppContainer\n              header={\n                <AppHeader logo={logo}>\n                  <OffsetWellButton wells={[]} onClick={() => {}} />\n                </AppHeader>\n              }\n            />\n          </ContextWrapper>\n        </div>\n\n        <div style={{ width: `${width}px`, height: '80px' }}>\n          <ContextWrapper app={appWithBadge} {...entities}>\n            <AppContainer header={<AppHeader logo={logo} />} />\n          </ContextWrapper>\n        </div>\n      </SbColumn>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppHeader/AppHeader.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=97792-2751",keywords:["appheader","header","component","must","used","inside","appcontainer","have","proper","responsiveness","receives"]},{name:"AppPanel",modulePath:"componentsV2/AppPanel",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppPanel",specifier:"@corva/ui/componentsV2",exportName:"AppPanel"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppPanel/AppPanel.tsx",keywords:["apppanel"]},{name:"AppSettings",modulePath:"componentsV2/AppSettings",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"AppSettings",specifier:"@corva/ui/componentsV2/AppSettings/AppSettings",form:"named",exportName:"AppSettings"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppSettings/AppSettings.tsx",keywords:["appsettings"]},{name:"AppSettingsDivider",modulePath:"componentsV2/AppSettingsDivider",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AppSettingsDivider",specifier:"@corva/ui/componentsV2",exportName:"AppSettingsDivider"},category:"v2",description:"Common divider for settings blocks in `<AppHeader/>` component",isExperimental:true,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<AppSettingsDivider {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AppSettingsDivider/AppSettingsDivider.tsx",keywords:["appsettingsdivider","common","divider","settings","blocks","appheader","component"]},{name:"Autocomplete",modulePath:"componentsV2/Autocomplete",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Autocomplete",specifier:"@corva/ui/componentsV2",exportName:"Autocomplete"},category:"v2",description:"This component is deprecated, use `AutocompleteNext` instead.\n\nA select/autocomplete/search with options component.\n\nProvides generic `AutocompleteProps<OptionType, Multiple>` and `AutocompleteChangeHandler<OptionType, Multiple>` types to simplify typing:\n\n```ts\nconst handler = useCallback<AutocompleteChangeHandler<Option>>(/* snip */); // For single select (default)\nconst handler = useCallback<AutocompleteChangeHandler<Option, true>>(/* snip */); // For multi select\n\n```\n\nYou can see usage examples in stories below",agentSummary:"Searchable single or multi select over id/title options. Same base as AutocompleteNext but keeps the legacy type and spacing props instead of size and labelPlacement.",isExperimental:false,isDeprecated:true,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{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 false | undefined ? 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:"TextInputNextProps['status']",required:false,description:""},{name:"message",type:"TextInputNextProps['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:"TextInputProps['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:"useOnlyOptionButton",type:"boolean",required:false,description:"If `multiple === true` shows a \"Select Only\" button on option that selects only the corresponding option"},{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:"popperProps",type:"Partial<AutocompletePopperProps>",required:false,description:"Escape hatch to customize dropdown popper behavior.\n`open`, `anchorEl`, and `children` are controlled internally."},{name:"type",type:"'default' | 'search'",required:false,description:"",enumValues:["default","search"]},{name:"onOpen",type:"() => void",required:false,description:"Called when the dropdown is opened"},{name:"onClose",type:"(reason: MuiAutocompleteCloseReason) => void",required:false,description:"Called when the dropdown is closed"},{name:"listboxComponent",type:"ComponentType<HTMLAttributes<HTMLElement>>",required:false,description:"Custom listbox component for rendering options (e.g., virtualized list)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<number[]>([]);\n\n  return (\n    <Autocomplete\n      {...props}\n      options={options}\n      value={value}\n      onChange={(newValue, reason, event) => {\n        props.onChange?.(newValue as never, reason, event);\n        // These type castings is generally not needed, Autocomplete will determine its type based on `multiple` prop\n        // Which generally should be statically analyzable\n        if (newValue instanceof Array) {\n          setValue((newValue as Option[]).map(({ id }) => id));\n        } else if (newValue) {\n          setValue([(newValue as Option)?.id]);\n        } else {\n          setValue([]);\n        }\n      }}\n      filterOptions={undefined}\n    />\n  );\n}"},{name:"Types",description:"Component supports 2 visual styles, controlled with the `type` prop.\n\nPlease note, that `label` prop is ignored for `search` type",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Default\"\n        type=\"default\"\n      />\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Search\"\n        placeholder=\"Search\"\n        prefix={<SearchOne />}\n        showPopupIcon={false}\n        type=\"search\"\n      />\n    </SbColumn>\n  );\n}"},{name:"OptionsSize",description:"Component supports several option sizes, controlled through `optionSize` prop:\n\n- `medium` (default)\n- `large`",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Medium\"\n        optionSize=\"medium\"\n      />\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Large\"\n        optionSize=\"large\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Single",description:"Single-option is the default behaviour.",code:"{\n  const [value, setValue] = useState<number>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return <Autocomplete options={options} value={value} onChange={onChange} label=\"Single\" />;\n}"},{name:"WithObjectsAsValue",description:"You can use objects in `value` prop.\n\n⚠️ Be wary of mixing `T`s and `T['id']`s in `value`: due to [TS bug](https://github.com/microsoft/TypeScript/issues/47599) you may need to provide additional typing to `onChange`",code:"{\n  const [valueSingle, setValueSingle] = useState<Option | undefined>(options[2]);\n  const [valueMultiple, setValueMultiple] = useState<(Option | number)[]>([\n    options[0],\n    options[2],\n    9,\n  ]);\n  const [valueMultiple2, setValueMultiple2] = useState<Option[]>([options[0], options[2]]);\n\n  // There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\n  // to have incorrect typing if we mix T and T['id'] in `value`.\n  const onMultipleChange = useCallback<AutocompleteChangeHandler<Option, true>>(\n    v => setValueMultiple(v),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={valueSingle}\n        onChange={setValueSingle}\n        label=\"With objects as value (single)\"\n      />\n\n      <Autocomplete\n        multiple\n        options={options}\n        value={valueMultiple}\n        onChange={onMultipleChange}\n        label=\"With objects as value (multiple, mixed objects and ids)\"\n      />\n\n      <Autocomplete\n        multiple\n        options={options}\n        value={valueMultiple2}\n        onChange={setValueMultiple2}\n        label=\"With objects as value (multiple, pure)\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Multiple",description:"Pass `multiple` prop to make component be able to select multiple values.\n\nUse `useAllOption` prop to add a special \"All\" option that allows user to quickly select all options. This option will be visible only if there are several options to choose from",code:"{\n  const [value, setValue] = useState<number[]>([1]);\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete multiple options={options} value={value} onChange={onChange} label=\"Multiple\" />\n      <Autocomplete\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" option'}\n        useAllOption\n      />\n      <Autocomplete\n        multiple\n        options={options.slice(0, 1)}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" and only 1 option'}\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"MultipleWithCustomSelectedRender",description:"Use `renderSelected` prop to customize how the selected values are rendered.\n\nBy default the component displays the selected item's title, \"X Selected\", or \"All\", depending on its value",code:"<SbColumn alignItems=\"stretch\">\n    <Autocomplete\n      multiple\n      options={options}\n      value={options}\n      onChange={() => {}}\n      label=\"Default multiple - all selected\"\n    />\n    <Autocomplete\n      multiple\n      options={options}\n      value={[1, 2, 3]}\n      onChange={() => {}}\n      label=\"Default multiple - some selected\"\n    />\n    <Autocomplete\n      multiple\n      options={options}\n      value={[1]}\n      onChange={() => {}}\n      label=\"Default multiple - one selected\"\n    />\n    <Autocomplete\n      multiple\n      options={options}\n      value={[1]}\n      onChange={() => {}}\n      label=\"Multiple with custom value render\"\n      renderSelected={data => {\n        if (data.length === 0) {\n          return null;\n        }\n\n        return (\n          <>\n            <Chip onDelete={data[0].onDelete} size=\"small\" type=\"outlined\">\n              {data[0].option.title}\n            </Chip>\n            {data.length > 1 && ` +${data.length - 1}`}\n          </>\n        );\n      }}\n    />\n  </SbColumn>"},{name:"Empty",description:"Use `noOptionsMessage` option to customize the message that is shown when there are no options to select",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete label=\"Empty\" onChange={() => {}} />\n      <Autocomplete\n        label=\"Empty with custom empty message\"\n        noOptionsMessage={<u>Nobody here but us chickens</u>}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Loading",description:"Use `loading` prop to indicate that some data is being loaded. Note that if there are no options, a custom message will be shown",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Loading State\"\n        loading\n      />\n\n      <Autocomplete\n        options={options.slice(0, 0)}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Empty Loading State\"\n        loading\n      />\n    </SbColumn>\n  );\n}"},{name:"Spacing",description:"As with `TextInput`, the component supports several spacing options:\n\n- `normal` (default)\n- `dense`",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Grid>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Normal\"\n          spacing=\"normal\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Dense\"\n          spacing=\"dense\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Normal\"\n          spacing=\"normal\"\n          placeholder=\"Search\"\n          prefix={<SearchOne />}\n          showPopupIcon={false}\n          type=\"search\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={6}>\n        <Autocomplete\n          options={options}\n          value={value}\n          onChange={value => setValue(value?.id)}\n          label=\"Dense\"\n          spacing=\"dense\"\n          placeholder=\"Search\"\n          prefix={<SearchOne />}\n          showPopupIcon={false}\n          type=\"search\"\n        />\n      </Grid.Cell>\n    </Grid>\n  );\n}"},{name:"OptionPrefix",description:"To display an icon/prefix to the left of the option, pass it as a `prefix` property of the option",code:"{\n  const icons = [ActivitySourceIcon, BroadcastIcon, LineChartIcon, AdjustmentIcon];\n  const optionsWithPrefix = options.slice(0, 4).map((option, index) => {\n    const Icon = icons[index];\n    return { ...option, prefix: <Icon /> };\n  });\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Autocomplete\n      options={optionsWithPrefix}\n      value={value}\n      onChange={value => setValue(value?.id)}\n      label=\"With Prefix\"\n    />\n  );\n}"},{name:"CustomOptionRender",description:"You can control how the option renders by providing the `renderOption` prop.\n\nNote that in this case, you will need to wrap the texts in `<TextMiddleTruncated/>` or `<TextEndTruncated/>`",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"Custom Option Render\"\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"CustomOptionFilter",description:"You can control how the option is filtered by providing the `filterOptions` prop. Useful when you want to add some additional data to the filtering condition.\n\nIn this example, you can also filter by group.",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"Custom Option Filter\"\n      filterOptions={(options, inputValue) =>\n        options.filter(\n          ({ title, group }) =>\n            title.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase()) ||\n            group.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase())\n        )\n      }\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"Disabled",description:"You can control which options are disabled by providing the `getOptionDisabled` prop",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Autocomplete\n      label=\"With disabled options\"\n      options={options}\n      value={value}\n      onChange={option => setValue(option?.id)}\n      getOptionDisabled={option => option.group === 'Great Old Ones'}\n    />\n  );\n}"},{name:"Prefix",description:"You can add a prefix to the component through `prefix` prop.",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"With Prefix\"\n      prefix={<SearchOne />}\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"PopupIconAndClearButton",description:"You can control the existence of \"Clear\" button and \"Popup Icon\" by using `clearable` and `showPopupIcon` props respectively",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        label=\"Default: Clearable, Popup Icon\"\n        value={1}\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label=\"Not Clearable\"\n        value={1}\n        clearable={false}\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label=\"No Popup Icon\"\n        value={1}\n        showPopupIcon={false}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Error",description:"To display the component in an error state, use the `state` prop. You can add a message with a `message` prop",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"With Error\"\n      status=\"error\"\n      message=\"Some error message\"\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"OnInputChange",description:"You can access what user is typing by providing the `onInputChange` prop. Useful for implementing search-like behaviour",code:"{\n  const [value, setValue] = useState<number>();\n  const [loading, setLoading] = useState(false);\n  const [loadedOptions, setLoadedOptions] = useState<typeof options>([]);\n  const currentSearchRef = useRef<string>();\n\n  const onInputChange = useCallback(async (value: string) => {\n    if (!value.trim()) {\n      return;\n    }\n\n    currentSearchRef.current = value;\n    setLoading(true);\n    await new Promise(r => setTimeout(r, 2_000));\n    if (currentSearchRef.current === value) {\n      setLoading(false);\n      const newOptions = options.map(option => ({\n        ...option,\n        title: `${value}: ${option.title}`,\n      }));\n      setLoadedOptions(newOptions);\n    }\n  }, []);\n\n  return (\n    <Autocomplete\n      value={value}\n      onChange={option => setValue(option?.id)}\n      options={loadedOptions}\n      label=\"Searchable\"\n      prefix={<SearchOne />}\n      onInputChange={onInputChange}\n      loading={loading}\n    />\n  );\n}"},{name:"WithGroups",description:"You can group options by providing the `groupBy` prop.\n\nYou can control the render of groups by providing the `renderGroup` prop.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={options}\n        label=\"With Groups\"\n        value={1}\n        groupBy={option => option.group}\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label={'With Groups, multiselect with \"All\" option'}\n        value={[1]}\n        groupBy={option => option.group}\n        multiple\n        useAllOption\n        onChange={() => {}}\n      />\n      <Autocomplete\n        options={options}\n        label=\"With Custom Groups\"\n        value={1}\n        groupBy={option => option.group}\n        renderGroup={({ children, group }) => {\n          return (\n            <div>\n              <div style={{ textAlign: 'center' }}>\n                <Text size={12}>{group}</Text>\n              </div>\n              <ul style={{ padding: 0 }}>{children}</ul>\n            </div>\n          );\n        }}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"DisableFiltering",description:"You can disable option filtering by providing the `disableFilter` prop. In this case, the component will behave as regular `<select/>`",code:"{\n  return (\n    <Autocomplete\n      options={options}\n      label=\"No Autocomplete\"\n      value={1}\n      onChange={() => {}}\n      disableFiltering\n    />\n  );\n}"},{name:"Createable",description:"By providing the `onCreate` prop you can add the ability to add user-defined options to the select",code:"{\n  const [ownOptions, setOwnOptions] = useState(options);\n  const [value, setValue] = useState<number[]>([]);\n\n  const createOption = useCallback((title: string) => {\n    const newOption: typeof options[number] = {\n      id: Math.ceil(Math.random() * 1000),\n      title,\n      group: 'User-Created',\n    };\n\n    setValue(oldValue => [newOption.id, ...oldValue]);\n    setOwnOptions(oldValue => [newOption, ...oldValue]);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Autocomplete\n        options={ownOptions}\n        label=\"Createable\"\n        value={value[0]}\n        onChange={option => setValue(option ? [option.id] : [])}\n        onCreate={createOption}\n      />\n      <Autocomplete\n        label=\"Createable Multiple\"\n        options={ownOptions}\n        value={value}\n        onChange={options => setValue(options.map(({ id }) => id))}\n        onCreate={createOption}\n        multiple\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"DropdownClassName",description:"You can add a custom class name to a dropdown by using the `dropdownClassName` prop",code:"<Autocomplete\n    options={options}\n    label=\"With custom dropdown styles\"\n    dropdownClassName={styles.customDropdown}\n    onChange={() => {}}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Autocomplete/Autocomplete.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=30021-123203",keywords:["autocomplete","search","typeahead","suggest","filter","component","deprecated","autocompletenext","instead","select","options","provides","generic"]},{name:"Avatar",modulePath:"componentsV2/Avatar",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Avatar",specifier:"@corva/ui/componentsV2",exportName:"Avatar"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"number",required:false,description:""},{name:"name",type:"string",required:false,description:""},{name:"imageSrc",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Avatar {...props} />"},{name:"Sizes",description:"You can controls Avatar's size with `size` prop. Font-size is calculated dynamically based on `size` and the following \"breakpoints\":\n\n```tsx\nconst SizeToFontSizeMap = {\n  0: 0,\n  24: 12,\n  32: 14,\n  40: 16,\n  48: 20,\n  128: 64,\n  200: 80,\n}\n```",code:"{\n  const [size, setSize] = useState(40);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own slider */}\n      <Slider\n        value={size}\n        onChange={(_, value) => setSize(value instanceof Array ? value[0] : value)}\n        min={16}\n        max={300}\n      />\n\n      <div>Size: {size}px</div>\n      <div>Font size: {getFontSize(size)}px</div>\n\n      <Avatar size={size} name=\"Enoch Bowen\" />\n    </SbColumn>\n  );\n}"},{name:"Colors",description:"Avatar displays initials by default, with a background color determined by name",code:"<SbColumn>\n    <SbRow>\n      <Avatar name=\"András Arató\" />\n      <Avatar name=\"Ian Moone\" />\n      <Avatar name=\"Richard C. Mongler\" />\n      <Avatar name=\"Raquel Cantú\" />\n    </SbRow>\n    Available colors:\n    <SbRow>\n      {ColorsArray.map(color => (\n        <div\n          key={color}\n          style={{ background: color, width: '40px', height: '40px', borderRadius: '50%' }}\n        />\n      ))}\n    </SbRow>\n  </SbColumn>"},{name:"WithImage",description:"You can provide `imageSrc` prop to display an image",code:"<Avatar\n    size={40}\n    name=\"András Arató\"\n    imageSrc=\"https://i.kym-cdn.com/entries/icons/facebook/000/016/546/hidethepainharold.jpg\"\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Avatar/Avatar.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=68263-106336",keywords:["avatar","user","profile","image","icon"]},{name:"AvatarGroup",modulePath:"componentsV2/AvatarGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AvatarGroup",specifier:"@corva/ui/componentsV2",exportName:"AvatarGroup"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"Omit<AvatarProps, 'size'>[]",required:false,description:"Array of `<Avatar/>` component props to render"},{name:"size",type:"number",required:false,description:""},{name:"max",type:"number",required:false,description:""},{name:"disableTooltips",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<AvatarGroup {...props} items={items} />"},{name:"Items",description:"`items` prop accepts an array of `<Avatar/>` component's props",code:"<AvatarGroup\n    items={[\n      {\n        name: 'Terry Pratchett',\n        imageSrc:\n          'https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Terry_Pratchett_in_Milan_2007.jpg/800px-Terry_Pratchett_in_Milan_2007.jpg',\n        testId: 'user-123',\n      },\n      {\n        name: 'András Arató',\n        imageSrc: 'https://i.kym-cdn.com/entries/icons/facebook/000/016/546/hidethepainharold.jpg',\n        testId: 'user-321',\n      },\n    ]}\n  />"},{name:"WithoutTooltips",description:"Component automatically provides tooltips for its children. You can disable this by using the `disableTooltips` prop",code:"<AvatarGroup items={items} disableTooltips />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/AvatarGroup/AvatarGroup.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=68263-106336",keywords:["avatargroup"]},{name:"BadgeBase",modulePath:"componentsV2/BadgeBase",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"BadgeBase",specifier:"@corva/ui/componentsV2/BadgeBase/BadgeBase",form:"named",exportName:"BadgeBase"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content over which position the badge"},{name:"badge",type:"ReactNode",required:true,description:""},{name:"offsetX",type:"number",required:true,description:""},{name:"offsetY",type:"number",required:true,description:""},{name:"badgeHeight",type:"number",required:true,description:""},{name:"className",type:"string",required:false,description:"Container className"},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeBase/BadgeBase.tsx",keywords:["badgebase","statusbadge","status","badge","status badge"]},{name:"BadgeComment",modulePath:"componentsV2/BadgeComment",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"BadgeComment",specifier:"@corva/ui/componentsV2",exportName:"BadgeComment"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<BadgeComment {...props}>\n    <Avatar name=\"Ian Moone\" size={24} />\n  </BadgeComment>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeComment/BadgeComment.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=98744-14653",keywords:["badgecomment","comment","annotation","note"]},{name:"BadgeCounter",modulePath:"componentsV2/BadgeCounter",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"BadgeCounter",specifier:"@corva/ui/componentsV2",exportName:"BadgeCounter"},category:"v2",description:"A component for displaying a badge over icons/buttons/etc",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content over which position the badge"},{name:"count",type:"number",required:true,description:""},{name:"max",type:"number",required:false,description:"Maximum value after which the plus sign will be shown"},{name:"type",type:"CounterProps['type']",required:false,description:""},{name:"badgeClassName",type:"string",required:false,description:"Badge className"},{name:"offsetX",type:"number",required:false,description:"X offset of badge center from top right corner in pixels"},{name:"offsetY",type:"number",required:false,description:"Y offset of badge center from top right corner in pixels"},{name:"className",type:"string",required:false,description:"Container className"},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<BadgeCounter {...props}>\n    <RemindIcon />\n  </BadgeCounter>"},{name:"UsageWithComplexComponents",description:"Component can be used with complex components like `<ButtonIcon/>` or `<Menu.Item/>`",code:"<SbColumn>\n    <ButtonIcon>\n      <BadgeCounter count={10} type=\"error\">\n        <RemindIcon />\n      </BadgeCounter>\n    </ButtonIcon>\n\n    <Menu.Item\n      prefix={\n        <BadgeCounter count={10} type=\"error\">\n          <RemindIcon />\n        </BadgeCounter>\n      }\n      size=\"large\"\n    >\n      Menu Item\n    </Menu.Item>\n  </SbColumn>"},{name:"OffsetControl",description:"You can fine-tune badge's position with `ofsetX` and `offsetY` props",code:"{\n  const [offsetX, setOffsetX] = useState(0);\n  const [offsetY, setOffsetY] = useState(-1);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own sliders  */}\n      <div>\n        offsetX: {offsetX}\n        <Slider\n          value={offsetX}\n          onChange={(_, value) => setOffsetX(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n      <div>\n        offsetY: {offsetY}\n        <Slider\n          value={offsetY}\n          onChange={(_, value) => setOffsetY(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n\n      <BadgeCounter count={100} max={99} type=\"error\" offsetX={offsetX} offsetY={offsetY}>\n        <SbPlaceholder style={{ height: '200px', width: '100%' }} />\n      </BadgeCounter>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeCounter/BadgeCounter.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59511",keywords:["badgecounter","counter","count","number","indicator","badge","statusbadge","status","status badge","component","displaying","over","icons","buttons"]},{name:"BadgeDot",modulePath:"componentsV2/BadgeDot",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"BadgeDot",specifier:"@corva/ui/componentsV2",exportName:"BadgeDot"},category:"v2",description:"A component for displaying a badge over icons/buttons/etc",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content over which position the badge"},{name:"badgeClassName",type:"string",required:false,description:"Badge className"},{name:"offsetX",type:"number",required:false,description:"X offset of badge center from top right corner in pixels"},{name:"offsetY",type:"number",required:false,description:"Y offset of badge center from top right corner in pixels"},{name:"className",type:"string",required:false,description:"Container className"},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<BadgeDot {...props}>\n    <RemindIcon />\n  </BadgeDot>"},{name:"UsageWithComplexComponents",description:"Component can be used with complex components like `<ButtonIcon/>` or `<Menu.Item/>`",code:"<SbColumn>\n    <ButtonIcon>\n      <BadgeDot>\n        <RemindIcon />\n      </BadgeDot>\n    </ButtonIcon>\n\n    <Menu.Item\n      prefix={\n        <BadgeDot>\n          <RemindIcon />\n        </BadgeDot>\n      }\n      size=\"large\"\n    >\n      Menu Item\n    </Menu.Item>\n  </SbColumn>"},{name:"OffsetControl",description:"You can fine-tune badge's position with `ofsetX` and `offsetY` props",code:"{\n  const [offsetX, setOffsetX] = useState(-3);\n  const [offsetY, setOffsetY] = useState(-2);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own sliders  */}\n      <div>\n        offsetX: {offsetX}\n        <Slider\n          value={offsetX}\n          onChange={(_, value) => setOffsetX(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n      <div>\n        offsetY: {offsetY}\n        <Slider\n          value={offsetY}\n          onChange={(_, value) => setOffsetY(value instanceof Array ? value[0] : value)}\n          min={-20}\n          max={20}\n        />\n      </div>\n\n      <BadgeDot offsetX={offsetX} offsetY={offsetY}>\n        <SbPlaceholder style={{ height: '200px', width: '100%' }} />\n      </BadgeDot>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/BadgeDot/BadgeDot.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59511",keywords:["badgedot","dot","status","notification","indicator","statusbadge","badge","status badge","component","displaying","over","icons","buttons"]},{name:"Breadcrumbs",modulePath:"componentsV2/Breadcrumbs",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Breadcrumbs",specifier:"@corva/ui/componentsV2",exportName:"Breadcrumbs"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"{\n    title: ReactNode;\n    to?: string;\n\n    className?: string;\n    testId?: string;\n  }[]",required:true,description:""},{name:"onItemClick",type:"(to?: string) => void",required:false,description:""},{name:"activeIndex",type:"number",required:false,description:""},{name:"showBackIcon",type:"boolean",required:false,description:"Renders a back button before items. Clicking on it will call `onItemClick` with the arguments for the first item"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Breadcrumbs {...props} items={items} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Breadcrumbs/Breadcrumbs.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=30300-122821",keywords:["breadcrumbs","navigation","path","trail","breadcrumb"]},{name:"Button",modulePath:"componentsV2/Button",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Button",specifier:"@corva/ui/componentsV2",exportName:"Button"},category:"v2",description:"Allows users to perform actions. The `ref` is forwarded to the root element.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:"Content"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"type",type:"'primary' | 'secondary' | 'primaryDestructive' | 'secondaryDestructive' | 'tertiary' | 'chart' | 'chartColored'",required:false,description:"Button visual style",enumValues:["primary","secondary","primaryDestructive","secondaryDestructive","tertiary","chart","chartColored"]},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseEnter",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"htmlAttributes",type:"Omit<Partial<ButtonHTMLAttributes<HTMLButtonElement>>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'disabled' | 'children' | 'color'>",required:false,description:"Escape hatch for when you need to override/add attributes to the `<button/>` tag"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Button {...props} />"},{name:"Type",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary`: use for primary/main actions\n- `secondary` (default): use for secondary actions\n- `tertiary`: use for tertiary/additional actions\n- `primaryDestructive`: use for primary/main actions that have a destructive effect (for instance - entity deletion)\n- `secondaryDestructive`: use for secondary destructive actions\n- `chart`: use as chart controls, etc.",code:"<SbColumn>\n    <Button type=\"primary\">Button</Button>\n    <Button type=\"secondary\">Button</Button>\n    <Button type=\"tertiary\">Button</Button>\n    <Button type=\"primaryDestructive\">Button</Button>\n    <Button type=\"secondaryDestructive\">Button</Button>\n    <Button type=\"chart\">Button</Button>\n  </SbColumn>"},{name:"Sizes",description:"Adjust the component size using the `size` prop. It supports 3 sizes:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium",code:"<SbColumn>\n    <Button size=\"large\" type=\"primary\">\n      Button\n    </Button>\n    <Button size=\"medium\" type=\"primary\">\n      Button\n    </Button>\n    <Button size=\"small\" type=\"primary\">\n      Button\n    </Button>\n  </SbColumn>"},{name:"WithPrefixSuffix",description:"Use `prefix` and/or `suffix` props to display additional content, usually - an icon, but you can put there anything",code:"<SbColumn>\n    <Button prefix={<ArrowLeftIcon />} size=\"large\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"large\">\n      Button\n    </Button>\n    <Button prefix={<ArrowLeftIcon />} size=\"medium\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"medium\">\n      Button\n    </Button>\n    <Button prefix={<ArrowLeftIcon />} size=\"small\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"small\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"small\" type=\"chart\">\n      Button\n    </Button>\n    <Button suffix={<ArrowRightIcon />} size=\"small\" type=\"chartColored\">\n      Button\n    </Button>\n  </SbColumn>"},{name:"WithHTMLAttributes",description:"In some cases there is a need to pass raw HTML attributes to a button, as an escape hatch. Use `htmlAttributes` prop to provide them",code:"<Button\n    htmlAttributes={{\n      type: 'submit',\n      form: 'someBogusFormIdAsAnExample',\n      value: 'value',\n      name: 'name',\n    }}\n  >\n    type=\"submit\"\n  </Button>"},{name:"ChartButtonMenu",description:"You can use `chartColored` and `chart` types to implement a menu/popover with opened state",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button\n        ref={anchorRef}\n        onClick={() => setIsOpen(true)}\n        type={isOpen ? 'chartColored' : 'chart'}\n        size=\"small\"\n      >\n        Click me!\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        Menu content here\n      </Menu>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Button/Button.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59490&node-type=frame",keywords:["button","action","click","submit","trigger","cta","allows","users","perform","actions","forwarded","root","element"]},{name:"ButtonIcon",modulePath:"componentsV2/ButtonIcon",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ButtonIcon",specifier:"@corva/ui/componentsV2",exportName:"ButtonIcon"},category:"v2",description:"Allows users to perform actions. The `ref` is forwarded to the root element.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"ariaLabel",type:"AriaAttributes['aria-label']",required:false,description:"Accessible name for the icon-only button."},{name:"ariaLabelledBy",type:"AriaAttributes['aria-labelledby']",required:false,description:""},{name:"ariaDescribedBy",type:"AriaAttributes['aria-describedby']",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseDown",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseUp",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"size",type:"'xs' | 'small' | 'medium' | 'large'",required:false,description:"",enumValues:["xs","small","medium","large"]},{name:"type",type:"'primary' | 'secondary' | 'tertiary' | 'secondaryBg' | 'tertiaryBg'",required:false,description:"Button visual style",enumValues:["primary","secondary","tertiary","secondaryBg","tertiaryBg"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"isActive",type:"boolean",required:false,description:"Holds the hover treatment while the menu or popover this opens is on screen."},{name:"disableFocusState",type:"boolean",required:false,description:""},{name:"onMouseEnter",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Icon-only buttons must have an accessible name. Use `ariaLabel` when there is no visible element that can be referenced by `ariaLabelledBy`.",code:"<ButtonIcon {...props}>\n    <SettingTwoIcon />\n  </ButtonIcon>"},{name:"Sizes",description:"Component supports 3 sizes through `size` prop:\n\n- `large`: use for large, very important buttons\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium\n- `xs`: even smaller",code:"<SbColumn>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"large\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"medium\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"small\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" size=\"xs\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"},{name:"Type",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary`: use primarily as a FAB\n- `secondary`: use for important actions\n- `tertiary` (default): use for regular actions\n- `secondaryBg`: secondary, with a background\n- `tertiaryBg`: tertiary, with a background",code:"<SbColumn>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"primary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"secondary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"tertiary\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"secondaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"Settings\" type=\"tertiaryBg\">\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"},{name:"Active",description:"A button that opens a menu keeps the hover treatment while that menu is on screen: pass `isActive`, since the pointer has moved on to the menu and `:hover` no longer holds.",code:"<SbColumn>\n    <ButtonIcon ariaLabel=\"More actions\" type=\"tertiary\" isActive>\n      <SettingTwoIcon />\n    </ButtonIcon>\n    <ButtonIcon ariaLabel=\"More actions\" type=\"tertiaryBg\" isActive>\n      <SettingTwoIcon />\n    </ButtonIcon>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonIcon/ButtonIcon.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=11980-17002",keywords:["buttonicon","iconbutton","icon","button","icon button","allows","users","perform","actions","forwarded","root","element"]},{name:"ButtonLive",modulePath:"componentsV2/ButtonLive",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ButtonLive",specifier:"@corva/ui/componentsV2",exportName:"ButtonLive"},category:"v2",description:"Used in apps in which we can enable real-time mode. This button indicates that real-time mode is not enabled, to indicate real-time data updates, use the `<IndicatorLive/>` component",agentSummary:"Go-to-Live button shown while real-time mode is off, with preset Live label and tooltip. Once live is on, render IndicatorLive instead.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"tooltip",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ButtonLive {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`\n",code:"<SbColumn>\n    <ButtonLive size=\"large\" />\n    <ButtonLive size=\"medium\" />\n    <ButtonLive size=\"small\" />\n  </SbColumn>"},{name:"Tooltip",description:"Component has an integrated tooltip, the default text can be changed through `tooltip` prop",code:"<SbColumn>\n    <ButtonLive />\n    <ButtonLive tooltip=\"Some custom tooltip\" />\n  </SbColumn>"},{name:"WithIndicator",description:"Use `<IndicatorLive/>` when switching to \"real-time\" mode",code:"{\n  const [isLive, setIsLive] = useState(false);\n\n  return (\n    <SbColumn>\n      <Button type=\"tertiary\" onClick={() => setIsLive(false)}>\n        Reset\n      </Button>\n\n      {isLive ? (\n        <IndicatorLive state=\"live\" type=\"buttonLike\" />\n      ) : (\n        <ButtonLive onClick={() => setIsLive(true)} />\n      )}\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonLive/ButtonLive.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=37968-137488",keywords:["buttonlive","used","apps","which","enable","real-time","mode","button","indicates","enabled","indicate"]},{name:"ButtonText",modulePath:"componentsV2/ButtonText",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ButtonText",specifier:"@corva/ui/componentsV2",exportName:"ButtonText"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"onClick",type:"MouseEventHandler<HTMLButtonElement>",required:false,description:""},{name:"type",type:"'primary' | 'secondary'",required:false,description:"",enumValues:["primary","secondary"]},{name:"size",type:"'xs' | 'small' | 'medium' | 'large'",required:false,description:"",enumValues:["xs","small","medium","large"]},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ButtonText {...props} />"},{name:"Type",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary`: use for primary/main actions\n- `secondary` (default): use for secondary actions",code:"<SbColumn>\n    <ButtonText type=\"primary\">Primary</ButtonText>\n    <ButtonText type=\"secondary\">Secondary</ButtonText>\n  </SbColumn>"},{name:"Sizes",description:"Adjust the component size using the `size` prop. It supports 4 sizes:\n\n- `large`\n- `medium` (default)\n- `small`\n- `xs`",code:"<SbColumn>\n    <ButtonText size=\"large\">Large</ButtonText>\n    <ButtonText size=\"medium\">Medium</ButtonText>\n    <ButtonText size=\"small\">Small</ButtonText>\n    <ButtonText size=\"xs\">XS (Extra Small)</ButtonText>\n  </SbColumn>"},{name:"WithPrefixSuffix",description:"Use `prefix` and/or `suffix` props to display additional content, usually - an icon, but you can put there anything",code:"<Grid cols={2}>\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"large\">\n        Large\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"large\">\n        Large\n      </ButtonText>\n    </Cell>\n\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"medium\">\n        Medium\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"medium\">\n        Medium\n      </ButtonText>\n    </Cell>\n\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"small\">\n        Small\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"small\">\n        Small\n      </ButtonText>\n    </Cell>\n\n    <Cell>\n      <ButtonText prefix={<ArrowLeftIcon />} size=\"xs\">\n        XS (Extra Small)\n      </ButtonText>\n    </Cell>\n    <Cell>\n      <ButtonText suffix={<ArrowRightIcon />} size=\"xs\">\n        XS (Extra Small)\n      </ButtonText>\n    </Cell>\n  </Grid>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ButtonText/ButtonText.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=36517-144850",keywords:["buttontext"]},{name:"ChartAxisExtreme",modulePath:"componentsV2/ChartAxisExtreme",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChartAxisExtreme",specifier:"@corva/ui/componentsV2",exportName:"ChartAxisExtreme"},category:"v2",description:"Control for editing axis' extremes in Highcharts charts.\n\nProvides `ChartAxisExtremeValidator` and `ChartAxisExtremeChangeHandler` utility types to simplify typing",agentSummary:"Overlay to edit one Highcharts axis min or max by typing or dragging; needs a live Axis object.",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"number",required:true,description:""},{name:"onChange",type:"ChartAxisExtremeChangeHandler",required:false,description:""},{name:"formatValue",type:"(value: number) => string | number",required:false,description:""},{name:"axis",type:"Axis",required:true,description:""},{name:"extremeType",type:"AxisExtremeType",required:true,description:""},{name:"validate",type:"ChartAxisExtremeValidator",required:false,description:"Validates possible value on both manual input & drag actions"},{name:"dragDeltaValue",type:"number | ((deltaPixels: number) => number)",required:false,description:"Governs \"sensitivity\" of drag.\nA number indicates how many pixels should a user drag to change axis extreme by 1.\nA function accepts dragged distance in pixels and returns *how much value should change*.\nGenerally, positive input should generate positive output. Can be used in conjunction with `validate` prop to force min/max value when dragging"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Highcharts usually treats axis's extremes as a *suggestion*, and sets actual extremes depending on ticks.\n\nTo override this use `axis.tickPositioner` to force tick positions, or `axis.tickInterval = 0` to disable them altogether. You may need to use custom tick formatter (`axis.labels.formatter`) to account for fractions.\n\nExample of tick positioner:\n\n```tsx\ntickPositioner() {\n  const { min, max } = this.getExtremes();\n  const step = (max - min) / 4; // 5 ticks, 4 intervals\n\n  if (step === 0) {\n    return [];\n  }\n\n  return [min + step, min + 2 * step, min + 3 * step]; // Omitting first and last ticks\n}\n```",code:"{\n  const chartRef = useRef<HighchartsReact | null>(null);\n\n  const [axisExtremes, setAxisExtremes] = useState<{ min: number; max: number }>();\n\n  const chartOptions = useMemo(() => {\n    return {\n      ...rawChartOptionsSingleAxis,\n      chart: {\n        ...rawChartOptionsSingleAxis.chart,\n        events: {\n          redraw() {\n            setAxisExtremes({ min: this.yAxis[0].min || 0, max: this.yAxis[0].max || 0 });\n          },\n        } as Highcharts.ChartEventsOptions,\n      },\n    };\n  }, []);\n\n  const onActualChange = useCallback<ChartAxisExtremeChangeHandler>(\n    (...args) => {\n      onChange?.(...args);\n      const [value, { axis, extremeType }] = args;\n      const { min, max } = axis.getExtremes();\n\n      const newMin = extremeType === 'min' ? value : min;\n      const newMax = extremeType === 'max' ? value : max;\n\n      axis.setExtremes(newMin, newMax, true);\n    },\n    [onChange]\n  );\n\n  return (\n    <div style={{ height: '300px', position: 'relative', width: '100%' }}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              {...rest}\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onActualChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              {...rest}\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onActualChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"AutomaticPositioning",description:"Component positions itself automatically based on which axis object is passed through its `axis` prop.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const options = useMemo(\n    () => ({\n      ...chartOptions,\n      yAxis: {\n        ...chartOptions.yAxis,\n        ...getChartVerticalAxis({ title: 'Y axis 1', opposite: true }),\n      },\n    }),\n    [chartOptions]\n  );\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={options}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"XAxis",description:"Component supports horizontal axes too.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig(true);\n\n  const options = useMemo(\n    () => ({\n      ...chartOptions,\n      xAxis: {\n        ...chartOptions.xAxis,\n        ...getChartHorizontalAxis({ title: 'X axis 1' }),\n      },\n    }),\n    [chartOptions]\n  );\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={options}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.xAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.xAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"WithValidation",description:"You can use `validate` prop to provide constraints for user input & drag actions.\n\nUse `ChartAxisExtremeValidator` utility type to simplify advanced usage.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const validateMin = useCallback<ChartAxisExtremeValidator>(\n    value => value >= -10 && value <= 30,\n    []\n  );\n\n  const validateMax = useCallback<ChartAxisExtremeValidator>(\n    value => value >= 80 && value <= 120,\n    []\n  );\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n              validate={validateMax}\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n              validate={validateMin}\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"SensitivityAndStepControls",description:"You can control drag sensitivity and/or control the value by how much the value changes on drag by using the `dragDeltaValue` prop.\n\nIn this example, value is changed by 10 for each 10 pixels dragged, in increments of 10.",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const dragDeltaValue = useCallback((deltaDrag: number) => Math.round(deltaDrag / 10) * 10, []);\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={chartOptions}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n              dragDeltaValue={dragDeltaValue}\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n              dragDeltaValue={dragDeltaValue}\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"},{name:"Animations",description:"Component automatically uses chart's animation options. If there's a discrepancy, try setting chart's animation options explicitly",code:"{\n  const [animation, setAnimation] = useState(false);\n\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const chartOptionsWithAnimation = useMemo<typeof chartOptions>(\n    () => ({\n      ...chartOptions,\n      chart: {\n        ...chartOptions.chart,\n        animation: animation\n          ? {\n              duration: 1000,\n            }\n          : false,\n      },\n    }),\n    [animation, chartOptions]\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch\n        size=\"small\"\n        offLabel=\"No animation\"\n        onLabel=\"Long animation\"\n        disableOffState\n        checked={animation}\n        onChange={setAnimation}\n      />\n      <div style={containerStyle}>\n        <ChartWrapper chartRef={chartRef}>\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={chartOptionsWithAnimation}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n          {axisExtremes && chartRef.current && (\n            <>\n              <ChartAxisExtreme\n                axis={chartRef.current.chart.yAxis[0]}\n                value={axisExtremes.max}\n                onChange={onChange}\n                extremeType=\"max\"\n              />\n              <ChartAxisExtreme\n                axis={chartRef.current.chart.yAxis[0]}\n                value={axisExtremes.min}\n                onChange={onChange}\n                extremeType=\"min\"\n              />\n            </>\n          )}\n        </ChartWrapper>\n      </div>\n    </SbColumn>\n  );\n}"},{name:"NoTickPositioner",description:"If you want to use auto-set extremes, you can use `axis.showFirstLabel=false` and `axis.showLastLabel=false` to hide extra labels",code:"{\n  const { chartRef, chartOptions, onChange, axisExtremes } = useDefaultChartConfig();\n\n  const options = useMemo(() => {\n    const yAxis = {\n      ...(Array.isArray(chartOptions.yAxis) ? chartOptions.yAxis[0] : chartOptions.yAxis),\n      tickPositioner: undefined,\n      showFirstLabel: false,\n      showLastLabel: false,\n    };\n\n    return { ...chartOptions, yAxis };\n  }, [chartOptions]);\n\n  return (\n    <div style={containerStyle}>\n      <ChartWrapper chartRef={chartRef}>\n        <HighchartsReact\n          highcharts={Highcharts}\n          options={options}\n          containerProps={containerProps}\n          ref={chartRef}\n        />\n        {axisExtremes && chartRef.current && (\n          <>\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.max}\n              onChange={onChange}\n              extremeType=\"max\"\n            />\n            <ChartAxisExtreme\n              axis={chartRef.current.chart.yAxis[0]}\n              value={axisExtremes.min}\n              onChange={onChange}\n              extremeType=\"min\"\n            />\n          </>\n        )}\n      </ChartWrapper>\n    </div>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChartAxisExtreme/ChartAxisExtreme.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=121233-260984&m=dev",keywords:["chartaxisextreme","control","editing","axis","extremes","highcharts","charts","provides","chartaxisextremevalidator","chartaxisextremechangehandler","utility"]},{name:"ChartHelper",modulePath:"componentsV2/ChartHelper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChartHelper",specifier:"@corva/ui/componentsV2",exportName:"ChartHelper"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"placement",type:"'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'",required:false,description:"",enumValues:["top","top-start","top-end","bottom","bottom-start","bottom-end"]},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ChartHelper {...props} />"},{name:"UsageWithChartWrapper",description:"",code:"{\n  const chartRef = useRef<HighchartsReact>(null);\n\n  return (\n    <ChartWrapper chartRef={chartRef}>\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={baseOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n      <ChartHelper>\n        Press <Hotkey keys=\"Cmd+Shift+X\" /> to do cool stuff\n      </ChartHelper>\n    </ChartWrapper>\n  );\n}"},{name:"Placement",description:"Component supports several placements through its `placement` prop",code:"{\n  const chartRef = useRef<HighchartsReact>(null);\n  const [placement, setPlacement] = useState<Props['placement']>();\n\n  return (\n    <Grid cols={3}>\n      <Grid.Cell span={1}>\n        <Select\n          options={placementOptions}\n          value={placement}\n          onChange={value => setPlacement(value?.id)}\n          placeholder=\"Default Placement\"\n        />\n      </Grid.Cell>\n      <Grid.Cell>\n        <ChartWrapper chartRef={chartRef}>\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={baseOptions}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n          <ChartHelper placement={placement}>\n            Press <Hotkey keys=\"Cmd+Shift+X\" /> to do stuff\n          </ChartHelper>\n        </ChartWrapper>\n      </Grid.Cell>\n    </Grid>\n  );\n}"},{name:"WithPrefixAndSuffix",description:"You can pass prefix and suffix as `prefix` and `suffix` props respectively.",code:"{\n  const chartRef = useRef<HighchartsReact>(null);\n  return (\n    <ChartWrapper chartRef={chartRef}>\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={baseOptions}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n      <ChartHelper\n        prefix={<InfoIcon />}\n        suffix={\n          <>\n            <Tooltip title=\"Configure something\">\n              <ButtonIcon size=\"xs\">\n                <SettingIcon />\n              </ButtonIcon>\n            </Tooltip>\n\n            <Tooltip title=\"Close helper\">\n              <ButtonIcon size=\"xs\">\n                <CloseSmallIcon />\n              </ButtonIcon>\n            </Tooltip>\n          </>\n        }\n      >\n        Press <Hotkey keys=\"Cmd+A\" /> to do a thing\n      </ChartHelper>\n    </ChartWrapper>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChartHelper/ChartHelper.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=159413-22927&m=dev",keywords:["charthelper"]},{name:"Checkbox",modulePath:"componentsV2/Checkbox",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Checkbox",specifier:"@corva/ui/componentsV2",exportName:"Checkbox"},category:"v2",description:"Checkboxes allow the user to select one or more items from a set. In 90% of cases you'll want to use `<CheckboxGroup />`",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"labelPlacement",type:"'top' | 'bottom' | 'start' | 'end'",required:false,description:"Controls whee the label will be placed",enumValues:["top","bottom","start","end"]},{name:"label",type:"ReactNode",required:false,description:"Label"},{name:"disabled",type:"boolean",required:false,description:""},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"onChange",type:"(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:"Called when a checkbox is checked/unchecked"},{name:"indeterminate",type:"boolean",required:false,description:"Forces checkbox to an indeterminate state. This state is purely visual, `onChange` callback is still called with correct `checked` argument"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [checked, setChecked] = useState(false);\n  return (\n    <Checkbox\n      {...props}\n      checked={checked}\n      onChange={(...args) => {\n        props.onChange?.(...args);\n        setChecked(args[0]);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Checkbox size=\"medium\" label=\"Label\" />\n    <Checkbox size=\"small\" label=\"Label\" />\n  </SbColumn>"},{name:"LabelPlacementAndMargins",description:"Component supports different label positions relative to the checkbox. This is controlled through the `labelPlacement` prop\n\n- `end` (default): to the right\n- `start`: to the left. Use `text-align: right;` on the container for best results\n- `top`\n- `bottom`\n\nNote that the checkbox's active area is slightly shifted from the container",code:"<SbColumn alignItems=\"start\">\n    <SbPlaceholder style={{ ...styleProp, textAlign: 'right' }}>\n      <Checkbox label=\"start\" labelPlacement=\"start\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Checkbox label=\"end\" labelPlacement=\"end\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Checkbox label=\"top\" labelPlacement=\"top\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Checkbox label=\"bottom\" labelPlacement=\"bottom\" />\n    </SbPlaceholder>\n  </SbColumn>"},{name:"Indeterminate",description:"You can make a checkbox \"partially selected\" or \"indeterminate\" by using the `indeterminate` prop. Note that this state is purely visual: the checkbox retains its internal state and the callbacks are still fired with correct values",code:"{\n  const [checked, setChecked] = useState(true);\n  return (\n    <SbColumn>\n      <Checkbox label=\"Label\" indeterminate checked={checked} onChange={setChecked} />\n      <Checkbox label=\"Label\" indeterminate checked={checked} onChange={setChecked} size=\"small\" />\n      <Text>Actual checked state: {String(checked)}</Text>\n    </SbColumn>\n  );\n}"},{name:"InteractiveExample",description:"An interactive example of several checkboxes that control the same value",code:"{\n  const [value, setValue] = useState<('one' | 'other')[]>([]);\n  const toggleValue = (checked: boolean, value: 'one' | 'other') =>\n    setValue(current => (checked ? [...current, value] : current.filter(item => item !== value)));\n\n  return (\n    <SbRow>\n      <Checkbox\n        label=\"One\"\n        checked={value.includes('one')}\n        onChange={checked => toggleValue(checked, 'one')}\n      />\n      <Checkbox\n        label=\"Other\"\n        checked={value.includes('other')}\n        onChange={checked => toggleValue(checked, 'other')}\n      />\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Checkbox/Checkbox.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=71387-72060",keywords:["checkbox","toggle","check","boolean","option","checkboxes","allow","user","select","more","items","cases","want","checkboxgroup"]},{name:"CheckboxGroup",modulePath:"componentsV2/CheckboxGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"CheckboxGroup",specifier:"@corva/ui/componentsV2",exportName:"CheckboxGroup"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"T[]",required:false,description:"Selected value"},{name:"onChange",type:"(value: T[], event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"options",type:"{ value: T; label: ReactNode; }[]",required:false,description:"Array of values and their labels"},{name:"label",type:"ReactNode",required:false,description:"Group label"},{name:"status",type:"'error'",required:false,description:""},{name:"message",type:"ReactNode",required:false,description:""},{name:"spacing",type:"'dense' | 'normal'",required:false,description:"controls spacing between options",enumValues:["dense","normal"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState([options[0].value, options[2].value]);\n  return (\n    <CheckboxGroup\n      {...props}\n      options={options}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <CheckboxGroup\n      label=\"Size: medium\"\n      options={options}\n      value={[options[0].value]}\n      size=\"medium\"\n    />\n    <CheckboxGroup label=\"Size: small\" options={options} value={[options[0].value]} size=\"small\" />\n  </SbRow>"},{name:"Spacing",description:"Component supports 2 spacing options, controlled through `spacing` prop:\n\n- `normal` (default)\n- `dense`",code:"<SbRow>\n    <CheckboxGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"normal\"\n    />\n    <CheckboxGroup\n      label=\"Spacing: dense\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"dense\"\n    />\n  </SbRow>"},{name:"Horisontal",description:"Radios can be displayed in a row by using the `direction` prop which can receive the following options:\n\n- `vertical` (default)\n- `horizontal`",code:"<SbRow>\n    <CheckboxGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"normal\"\n      direction=\"horizontal\"\n    />\n    <CheckboxGroup\n      label=\"Spacing: dense\"\n      options={options}\n      value={[options[0].value]}\n      spacing=\"dense\"\n      direction=\"horizontal\"\n    />\n  </SbRow>"},{name:"NonScalarValues",description:"`<CheckboxGroup />` can work with any type of options `value`, which is represented in component types. You can either define the type explicitly or rely on inferred typings\n\nOption comparison is done with strict equality (`===`)",code:"{\n  // Option's `value` is an object\n  const complexOptions = useMemo(\n    () =>\n      options.map(({ label }) => ({\n        label,\n        value: { randomId: Math.round(Math.random() * 1000), name: label },\n      })),\n    []\n  );\n  const [value, setValue] = useState([complexOptions[0].value]);\n\n  return (\n    <SbColumn>\n      <CheckboxGroup\n        options={complexOptions}\n        value={value}\n        onChange={value => setValue(value)}\n        message={`Value: ${JSON.stringify(value)}`}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/CheckboxGroup/CheckboxGroup.tsx",keywords:["checkboxgroup"]},{name:"Chip",modulePath:"componentsV2/Chip",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Chip",specifier:"@corva/ui/componentsV2",exportName:"Chip"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"onClick",type:"MouseEventHandler",required:false,description:""},{name:"onDelete",type:"MouseEventHandler",required:false,description:""},{name:"deleteButtonTooltip",type:"ReactNode",required:false,description:""},{name:"size",type:"'xs' | 'small' | 'medium'",required:false,description:"",enumValues:["xs","small","medium"]},{name:"type",type:"'default' | 'outlined'",required:false,description:"",enumValues:["default","outlined"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"state",type:"'neutral' | 'info' | 'caution' | 'warning' | 'error' | 'success' | 'pending'",required:false,description:"",enumValues:["neutral","info","caution","warning","error","success","pending"]},{name:"shape",type:"'round' | 'square'",required:false,description:"",enumValues:["round","square"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Chip {...props} />"},{name:"Sizes",description:"Component supports several sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Chip size=\"medium\">Medium</Chip>\n    <Chip size=\"small\">Small</Chip>\n  </SbColumn>"},{name:"Types",description:"Component supports several types through its `type` prop\n\n- `default` (default)\n- `outlined`",code:"<SbColumn>\n    <Chip type=\"default\">Default</Chip>\n    <Chip type=\"outlined\">Outlined</Chip>\n  </SbColumn>"},{name:"Shapes",description:"Component supports several shapes through its `shape` prop\n\n- `round` (default)\n- `square`",code:"<Grid>\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\">Round</Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\">Square</Chip>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\" type=\"outlined\">\n        Round\n      </Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\" type=\"outlined\">\n        Square\n      </Chip>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\" size=\"small\">\n        Round\n      </Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\" size=\"small\">\n        Square\n      </Chip>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <Chip shape=\"round\" type=\"outlined\" size=\"small\">\n        Round\n      </Chip>\n    </Grid.Cell>\n    <Grid.Cell span={9}>\n      <Chip shape=\"square\" type=\"outlined\" size=\"small\">\n        Square\n      </Chip>\n    </Grid.Cell>\n  </Grid>"},{name:"PrefixAndSuffix",description:"You can add an icon (or any arbitrary node) to Chip as a prefix or suffix by using the `prefix` and `suffix` props.\n\nNote that if those are [valid React elements](https://react.dev/reference/react/isValidElement), the `size` prop will be injected",code:"<Grid gap={1}>\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} size=\"small\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<BubbleChartIcon />} suffix={<BubbleChartIcon />} size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} size=\"small\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<BubbleChartIcon />} suffix={<BubbleChartIcon />} state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" state=\"info\" size=\"small\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} state=\"info\" size=\"small\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip\n          prefix={<BubbleChartIcon />}\n          suffix={<BubbleChartIcon />}\n          size=\"small\"\n          type=\"outlined\"\n        >\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} size=\"small\" type=\"outlined\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n    <Grid.Cell span={3}>\n      <SbColumn>\n        <Chip prefix={<BubbleChartIcon />} state=\"info\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip suffix={<BubbleChartIcon />} state=\"info\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip\n          prefix={<BubbleChartIcon />}\n          suffix={<BubbleChartIcon />}\n          state=\"info\"\n          size=\"small\"\n          type=\"outlined\"\n        >\n          Label\n        </Chip>\n        <Chip prefix=\"prefix\" state=\"info\" size=\"small\" type=\"outlined\">\n          Label\n        </Chip>\n        <Chip prefix={<Avatar name=\"András Arató\" />} state=\"info\" size=\"small\" type=\"outlined\">\n          An. Ar.\n        </Chip>\n      </SbColumn>\n    </Grid.Cell>\n  </Grid>"},{name:"CommonAffixes",description:"There are several common affixes provided along with Chip:\n\n- `Chip.Chip.Affix.Check`: checkbox mark. Use `className` prop to customize\n- `Chip.Affix.Indicator`: a `<ChipIndicator/>` which automatically adjusts own size. Use `className` prop to customize\n- `Chip.Affix.Dot`: status/legend dot. Use `className` or `color` props to change color to your custom one",code:"<SbColumn>\n    <Chip prefix={<Chip.Affix.Check />}>With Chip.Affix.Check</Chip>\n\n    <Chip prefix={<Chip.Affix.Indicator>Indicator</Chip.Affix.Indicator>} size=\"medium\">\n      With Chip.Affix.Indicator\n    </Chip>\n\n    <Chip prefix={<Chip.Affix.Indicator>Indicator</Chip.Affix.Indicator>} size=\"small\">\n      With Chip.Affix.Indicator, small\n    </Chip>\n\n    <Chip prefix={<Chip.Affix.Dot />}>With Chip.Affix.Dot</Chip>\n\n    <Chip prefix={<Chip.Affix.Dot color=\"#FF0000\" />}>With Chip.Affix.Dot and custom color</Chip>\n  </SbColumn>"},{name:"DeleteButton",description:"You can display a delete button by providing the `onDelete` prop. Note that if both `onDelete` and `onClick` props are provided, and the delete icon is clicked, `onClick` callback is not called.\n\nYou can use the `deleteButtonTooltip` prop to add a tooltip to the delete button",code:"<SbColumn>\n    <Chip onDelete={handlers.onDelete}>Deletable</Chip>\n    <Chip onDelete={handlers.onDelete} deleteButtonTooltip=\"Delete\">\n      Deletable with tooltip\n    </Chip>\n  </SbColumn>"},{name:"States",description:"Component's color is determined by the `state` prop. Available states:\n\n- `neutral`\n- `info`\n- `error`\n- `pending`\n- `success`\n- `warning`\n- `caution`",code:"{\n  return (\n    <Grid gap={1}>\n      {StatesArray.map(state => (\n        <Fragment key={state}>\n          <Grid.Cell span={3}>\n            <Chip state={state} {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <Chip state={state} type=\"outlined\" {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <Chip state={state} disabled {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <Chip state={state} type=\"outlined\" disabled {...handlers}>\n              {capitalize(state)}\n            </Chip>\n          </Grid.Cell>\n        </Fragment>\n      ))}\n    </Grid>\n  );\n}"},{name:"WithTruncatedText",description:"Component works seamlessly with `<TextEndTruncated/>` or `<TextMiddleTruncated/>`.",code:"<SbColumn>\n    <Chip prefix={<BubbleChartIcon />}>\n      <TextEndTruncated>{longText}</TextEndTruncated>\n    </Chip>\n    <Chip prefix={<BubbleChartIcon />}>\n      <TextMiddleTruncated>{longText}</TextMiddleTruncated>\n    </Chip>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Chip/Chip.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=131635-139275",keywords:["chip","tag","label","badge","pill"]},{name:"ChipAlert",modulePath:"componentsV2/ChipAlert",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChipAlert",specifier:"@corva/ui/componentsV2",exportName:"ChipAlert"},category:"v2",description:"A restyle of `<Chip/>` used for alerts. Accepts most of `<Chip/>`'s props\n\n⚠️⚠️⚠️ This component is deprecated, use `<Chip state=\"yourFavouriteColour\" size=\"small\"/>` instead.",agentSummary:"Alert-state restyle of the V2 Chip: a thin wrapper rendering Chip at size small, colored by a required state prop.",isExperimental:false,isDeprecated:true,props:[{name:"children",type:"ChipProps['children']",required:false,description:"Component contents"},{name:"state",type:"'info' | 'caution' | 'warning' | 'error' | 'success' | 'pending'",required:true,description:"Defines colour variant",enumValues:["info","caution","warning","error","success","pending"]},{name:"prefix",type:"ChipProps['prefix']",required:false,description:""},{name:"suffix",type:"ChipProps['suffix']",required:false,description:""},{name:"onClick",type:"ChipProps['onClick']",required:false,description:""},{name:"onDelete",type:"ChipProps['onDelete']",required:false,description:""},{name:"type",type:"ChipProps['type']",required:false,description:""},{name:"disabled",type:"ChipProps['disabled']",required:false,description:""},{name:"className",type:"ChipProps['className']",required:false,description:""},{name:"testId",type:"ChipProps['testId']",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ChipAlert {...props} />"},{name:"States",description:"Component's color is determined by the `state` prop. Available states:\n\n- `info`\n- `error`\n- `pending`\n- `success`\n- `warning`\n- `caution`",code:"{\n  const handlers = { onClick: () => {}, onDelete: () => {} };\n  return (\n    <Grid gap={1}>\n      {StatesArray.map(state => (\n        <Fragment key={state}>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} type=\"outlined\" {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} disabled {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n          <Grid.Cell span={3}>\n            <ChipAlert state={state} type=\"outlined\" disabled {...handlers}>\n              {state}\n            </ChipAlert>\n          </Grid.Cell>\n        </Fragment>\n      ))}\n    </Grid>\n  );\n}"},{name:"PrefixAndSuffix",description:"You can add an icon (or any arbitrary node) to ChipAlert as a prefix or suffix by using the `prefix` and `suffix` props.\n\nNote that if those are [valid React elements](https://react.dev/reference/react/isValidElement), the `size` prop will be injected",code:"<SbRow>\n    <SbColumn>\n      <ChipAlert prefix={<BubbleChartIcon />} state=\"info\" onClick={() => {}} onDelete={() => {}}>\n        Label\n      </ChipAlert>\n      <ChipAlert suffix={<BubbleChartIcon />} state=\"info\" onClick={() => {}} onDelete={() => {}}>\n        Label\n      </ChipAlert>\n      <ChipAlert\n        prefix={<BubbleChartIcon />}\n        suffix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert prefix=\"string prefix\" state=\"info\" onClick={() => {}} onDelete={() => {}}>\n        Label\n      </ChipAlert>\n    </SbColumn>\n    <SbColumn>\n      <ChipAlert\n        prefix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert\n        suffix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert\n        prefix={<BubbleChartIcon />}\n        suffix={<BubbleChartIcon />}\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n      <ChipAlert\n        prefix=\"string prefix\"\n        state=\"info\"\n        onClick={() => {}}\n        onDelete={() => {}}\n        type=\"outlined\"\n      >\n        Label\n      </ChipAlert>\n    </SbColumn>\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChipAlert/ChipAlert.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=12317-58",keywords:["chipalert","restyle","chip","used","alerts","accepts","most","props","component","deprecated","state"]},{name:"ChipIndicator",modulePath:"componentsV2/ChipIndicator",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ChipIndicator",specifier:"@corva/ui/componentsV2",exportName:"ChipIndicator"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"state",type:"'primary' | 'neutral' | 'error' | 'info' | 'warning' | 'success'",required:false,description:"",enumValues:["primary","neutral","error","info","warning","success"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ChipIndicator {...props} />"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <ChipIndicator size=\"medium\">Medium</ChipIndicator>\n    <ChipIndicator size=\"small\">Small</ChipIndicator>\n  </SbRow>"},{name:"States",description:"Component's color is determined by the `state` prop. Available states:\n\n- `primary`\n- `neutral`\n- `info`\n- `error`\n- `success`\n- `warning`",code:"<SbColumn>\n    {StatesArray.map(state => (\n      <ChipIndicator state={state} key={state}>\n        {state}\n      </ChipIndicator>\n    ))}\n  </SbColumn>"},{name:"WithCustomBackground",description:"You can set your own background by overriding the `background-color` or `background` CSS properties. You can also override the `color` CSS property.",code:"<ChipIndicator className={styles.custom}>Oooh, SHINY!!!</ChipIndicator>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ChipIndicator/ChipIndicator.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=131054-63682",keywords:["chipindicator"]},{name:"ColorPicker",modulePath:"componentsV2/ColorPicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ColorPicker",specifier:"@corva/ui/componentsV2",exportName:"ColorPicker"},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:"elementsClassNames",type:"Partial<Omit<\n      Required<TextInputNextProps>['elementsClassNames'],\n      'message' | 'numberStepButtons' | 'prefix' | 'suffix'\n    > &\n      Record<'indicator' | 'popover', string>>",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:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Keyboard: Enter, Space, or Arrow Down opens the picker. Arrow keys move through palette colors. In the custom picker, Left/Right adjust saturation, Up/Down adjust brightness, and the hue and opacity sliders support arrow keys, Page Up/Down, Home, and End. Hold Shift with an arrow key for a coarse adjustment.",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        <ColorPicker\n          label=\"RGBA\"\n          enableAlpha\n          value={valueRgba}\n          onChange={setValueRgba}\n          format=\"rgb\"\n        />\n      </Grid.Cell>\n      <Grid.Cell span={1}>{valueRgba}</Grid.Cell>\n    </Grid>\n  );\n}"},{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",keywords:["colorpicker","color","palette","pick","swatch"]},{name:"CompletionsOffsetWellPicker",modulePath:"componentsV2/CompletionsOffsetWellPicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"CompletionsOffsetWellPicker",specifier:"@corva/ui/componentsV2",exportName:"CompletionsOffsetWellPicker"},category:"v2",description:"Completions Offset Well Picker component allows users to select offset wells for completions operations with visual map and filtering capabilities, component requires `@tanstack/react-query` provider for data fetching and state management.",agentSummary:"Fullscreen completions offset well picker: map, pad filters and pads table. Fetches pads itself by companyId; needs QueryClientProvider.",isExperimental:true,isDeprecated:false,props:[{name:"companyId",type:"string",required:true,description:"The company ID to fetch pads and wells data for"},{name:"selectedPadId",type:"number",required:false,description:"The ID of the currently selected pad from app wrapper"},{name:"selectedOffsetWellIds",type:"number[]",required:true,description:"Array of well IDs selected as offset wells"},{name:"onOffsetWellsSelect",type:"(offsetWells: MappedPad['wells']) => void",required:true,description:"Callback when user selects/deselects offset wells"},{name:"wells",type:"Well[]",required:false,description:"Optional array of well objects with metadata from app wrapper"},{name:"well",type:"Well",required:false,description:"Optional single well object for current well from app wrapper"},{name:"maxRadiusInMiles",type:"number",required:false,description:"Maximum radius in miles a user can select (optional).\nThe picker starts at 10 miles, capped by this value when provided."},{name:"isGlobalSelector",type:"boolean",required:false,description:"Show global selector icon instead of well icon"},{name:"testId",type:"string",required:false,description:"Optional test ID for testing purposes"},{name:"buttonLabel",type:"ReactNode",required:false,description:"Label for <OffsetWellsButton/>"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        {...props}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n      />\n    </QueryClientProvider>\n  );\n}"},{name:"WithSelectedWells",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        companyId=\"1\"\n        selectedPadId={111}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n      />\n    </QueryClientProvider>\n  );\n}"},{name:"GlobalSelector",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        companyId=\"1\"\n        selectedPadId={111}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n        isGlobalSelector\n      />\n    </QueryClientProvider>\n  );\n}"},{name:"CustomToggleText",description:"",code:"{\n  const [selectedOffsetWellIds] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <CompletionsOffsetWellPicker\n        companyId=\"1\"\n        selectedPadId={111}\n        selectedOffsetWellIds={selectedOffsetWellIds}\n        onOffsetWellsSelect={value => value}\n        buttonLabel=\"\"\n      />\n    </QueryClientProvider>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/CompletionsOffsetWellPicker/CompletionsOffsetWellPicker.tsx",keywords:["completionsoffsetwellpicker","completions","offset","well","picker","component","allows","users","select","wells","operations"]},{name:"CopyToClipboard",modulePath:"componentsV2/CopyToClipboard",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"CopyToClipboard",specifier:"@corva/ui/componentsV2",exportName:"CopyToClipboard"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"text",type:"string",required:true,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"tooltipDisabled",type:"boolean",required:false,description:""},{name:"tooltipTitle",type:"ReactNode",required:false,description:""},{name:"tooltipPlacement",type:"TooltipProps['placement']",required:false,description:""},{name:"tooltipDuration",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<CopyToClipboard {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <CopyToClipboard text=\"Some text to copy\" size=\"large\" />\n    <CopyToClipboard text=\"Some text to copy\" size=\"medium\" />\n    <CopyToClipboard text=\"Some text to copy\" size=\"small\" />\n  </SbColumn>"},{name:"Positioning",description:"Component is displayed as an `inline-flex` by default to seamlessly work in text blocks",code:"<SbColumn>\n    <Text size={16}>\n      This is some copyable stuff: 12345678 <CopyToClipboard text=\"12345678\" />\n    </Text>\n\n    <Text size={14}>\n      This is some copyable stuff: 12345678 <CopyToClipboard text=\"12345678\" size=\"small\" />\n    </Text>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/CopyToClipboard/CopyToClipboard.tsx",keywords:["copytoclipboard","copy","clipboard","duplicate"]},{name:"Counter",modulePath:"componentsV2/Counter",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Counter",specifier:"@corva/ui/componentsV2",exportName:"Counter"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"count",type:"number",required:true,description:""},{name:"max",type:"number",required:false,description:"Maximum value after which the plus sign will be shown"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"type",type:"'default' | 'primary' | 'error'",required:false,description:"",enumValues:["default","primary","error"]},{name:"onClick",type:"MouseEventHandler",required:false,description:""},{name:"onDelete",type:"MouseEventHandler",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Counter {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <Counter count={25} size=\"large\" />\n    <Counter count={25} size=\"medium\" />\n    <Counter count={25} size=\"small\" />\n  </SbRow>"},{name:"WithMaximum",description:"Pass a `max` prop to limit the number shown in the component",code:"<Counter count={250} max={99} />"},{name:"Clickable",description:"Pass a `onClick` prop to make component clickable",code:"<Counter count={25} onClick={console.log} />"},{name:"Deleteable",description:"Pass a `onDelete` prop to display the delete icon",code:"<Counter count={25} onDelete={console.log} />"},{name:"Types",description:"Component supports several colour options via the `type` prop:\n\n- `default` (default)\n- `primary`\n- `error`\n",code:"<SbRow>\n    <Counter count={25} type=\"default\" />\n    <Counter count={25} type=\"primary\" />\n    <Counter count={25} type=\"error\" />\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Counter/Counter.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105-59511",keywords:["counter","count","number","badge","indicator"]},{name:"DatePicker",modulePath:"componentsV2/DatePicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"DatePicker",specifier:"@corva/ui/componentsV2",exportName:"DatePicker"},category:"v2",description:"This component is deprecated, use `DatePickerNext` instead.\n\n\n\nA date/date-tme/month picker with range support.\n\nProvides generic `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>` types to simplify typing:\n\n```ts\nconst handler = useCallback<DatePickerChangeHandler>(/* snip */); // For single select (default)\nconst handler = useCallback<DatePickerChangeHandler<true>>(/* snip */); // For range select\n\n```\n\nYou can see usage examples in stories below",agentSummary:"Date, date-time, or month picker with range support over native Date values. Same base as DatePickerNext but with the legacy TextInput field.",isExperimental:true,isDeprecated:true,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"value",type:"DatePickerValue<IsRange>",required:false,description:""},{name:"onChange",type:"DatePickerChangeHandler<IsRange>",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",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:"type",type:"DatePickerType",required:false,description:"Type: dates only / date + time / month"},{name:"minDate",type:"Date",required:false,description:"Minimum selectable date"},{name:"maxDate",type:"Date",required:false,description:"maximum selectable date"},{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"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<DatePickerValue>();\n\n  return (\n    <DatePicker\n      {...props}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n      range={false}\n    />\n  );\n}"},{name:"Formatting",description:"You can configure the format in which values will be displayed by using the `format` prop.\n\nIf not set, the component uses different default formats for different `type`s and for different `range` values:\n\n`range={false}`\n  * `date`: `MMM DD YYYY`\n  * `dateTime`: `MMM DD YYYY HH:mm`\n  * `month`: `MMMM YYYY`\n\n`range={true}`\n  * `date`: `MM/DD/YYYY`\n  * `dateTime`: `MM/DD/YYYY HH:mm`\n  * `month`: `MMM YYYY`\n\nFull list of accepted tokens can be found [here](https://momentjs.com/docs/#/displaying/format/)",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 5, 16, 17));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePicker label=\"Default format\" value={value} onChange={setValue} />\n      <DatePicker\n        label=\"ISO format\"\n        value={value}\n        onChange={setValue}\n        format=\"YYYY-MM-DDTHH:mm:ss.SSSZ\"\n      />\n    </SbColumn>\n  );\n}"},{name:"MinMax",description:"You can limit minimum and maximum selectable dates by providing `minDate` and `maxDate` props respectively.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePicker label=\"Date - no constraints\" value={value} onChange={setValue} />\n      <DatePicker\n        label=\"Date - constrained\"\n        value={value}\n        onChange={setValue}\n        minDate={new Date(2024, 11, 31)}\n        maxDate={new Date(2026, 0, 1)}\n      />\n    </SbColumn>\n  );\n}"},{name:"DisabledDates",description:"You can disable any date by using the `getTileDisabled` prop.\n\nPlease note, this is ***not*** meant to be used as an alternative method of setting `minDate` or `maxDate`",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 11));\n  return (\n    <DatePicker\n      label=\"Date with disabled dates\"\n      value={value}\n      onChange={setValue}\n      getTileDisabled={({ date }) =>\n        date.getTime() === new Date(2025, 8, 10).getTime() ||\n        date.getTime() === new Date(2025, 8, 11).getTime() ||\n        date.getTime() === new Date(2025, 8, 12).getTime()\n      }\n    />\n  );\n}"},{name:"DateAndTimeMode",description:"You can select time in addition to date by using the `type` prop: `type=\"dateTime\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 3, 51, 0));\n\n  return <DatePicker label=\"Date + Time\" value={value} onChange={setValue} type=\"dateTime\" />;\n}"},{name:"MonthsSelection",description:"You can select months instead of days by using the `type` prop: `type=\"month\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return <DatePicker label=\"Month\" value={value} onChange={setValue} type=\"month\" />;\n}"},{name:"RangeSelection",description:"You can select a time range by using the `range` prop. Notice, that it changes types of DatePicker's `value` and `onChange` props.\n\nTo simplify working with those, 2 helper types are exported: `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>`",code:"{\n  const [value, setValue] = useState<DatePickerValue<true>>([\n    new Date(2025, 8, 8, 3, 51, 0),\n    new Date(2025, 8, 14, 5, 51, 0),\n  ]);\n\n  const onChange = useCallback<DatePickerChangeHandler<true>>(value => {\n    // Do something with value here\n    setValue(value);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePicker label=\"Date\" value={value} onChange={onChange} type=\"date\" range />\n      <DatePicker label=\"Month\" value={value} onChange={onChange} type=\"month\" range />\n      <DatePicker label=\"Date & Time\" value={value} onChange={onChange} type=\"dateTime\" range />\n    </SbColumn>\n  );\n}"},{name:"UsingPartsOfDatePicker",description:"You can use parts of `<DatePicker/>` exported as `DatePicker.Controls` and `DatePicker.Grid`.\n\nThese components are pretty simple, so you will need to write accompanying logic yourself.",code:"{\n  const [activeStartDate, setActiveStartDate] = useState<Date>(new Date(2025, 8, 8, 5, 16, 17));\n  const [selected, setSelected] = useState<Date>();\n\n  return (\n    <SbColumn>\n      <SbPlaceholder>\n        <DatePicker.Controls date={activeStartDate} setDate={setActiveStartDate} />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <DatePicker.Grid\n          onChange={setSelected}\n          activeStartDate={activeStartDate}\n          selected={selected}\n        />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/DatePicker/DatePicker.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=103431-4455",keywords:["datepicker","date","calendar","time","schedule","component","deprecated","datepickernext","instead","date-tme","month","picker","range","support"]},{name:"DragHandle",modulePath:"componentsV2/DragHandle",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"DragHandle",specifier:"@corva/ui/componentsV2",exportName:"DragHandle"},category:"v2",description:"A common drag handle for all drag-and-drop applications",isExperimental:true,isDeprecated:false,props:[{name:"onClick",type:"ButtonIconProps['onClick']",required:false,description:""},{name:"onMouseDown",type:"ButtonIconProps['onMouseDown']",required:false,description:""},{name:"onMouseUp",type:"ButtonIconProps['onMouseUp']",required:false,description:""},{name:"size",type:"ButtonIconProps['size']",required:false,description:""},{name:"disabled",type:"ButtonIconProps['disabled']",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<DragHandle {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through `size` prop:\n\n- `large`: use for large, handles\n- `medium` (default): should be used in most cases\n- `small`: use when space is at a premium\n- `xs`: even smaller",code:"<SbColumn>\n    <DragHandle size=\"large\" />\n    <DragHandle size=\"medium\" />\n    <DragHandle size=\"small\" />\n    <DragHandle size=\"xs\" />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/DragHandle/DragHandle.tsx",keywords:["draghandle","drag","reorder","sort","move","handle","common","drag-and-drop","applications"]},{name:"EmptyState",modulePath:"componentsV2/EmptyState",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"EmptyState",specifier:"@corva/ui/componentsV2",exportName:"EmptyState"},category:"v2",description:"⚠️⚠️⚠️ To properly display its image, this component expects one of the following:\n\n- to have its own height set through `className` prop\n- its parent to have a definite height\n- to be positioned absolutely (will take 100% of width and height by default)",agentSummary:"Empty/error placeholder: title, subtitle and an illustration picked by image key. Needs a definite height; V2 replacement for V1 EmptyState.",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:true,description:""},{name:"subTitle",type:"ReactNode",required:false,description:""},{name:"image",type:"keyof typeof Images",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<div style={{ height: '450px' }}>\n    <EmptyState {...props} />\n  </div>"},{name:"Illustrations",description:"Component supports several \"standard\" illustrations, controlled through the `image` prop",code:"<SbRow>\n    {images.map(key => (\n      <div key={key} style={{ width: '290px', height: '340px' }}>\n        <EmptyState title={key} image={key} />\n      </div>\n    ))}\n  </SbRow>"},{name:"Responsiveness",description:"Component automatically adjusts its illustration size depending on its own size.\n\nVertical breakpoints: `400px` (small) and `300px` (hidden). Horizontal breakpoint: `482px`.",code:"{\n  const [width, setWidth] = useState(502);\n  const [height, setHeight] = useState(502);\n\n  // TODO use own sliders\n  return (\n    <Grid>\n      <Grid.Cell span={3}>\n        Width: {width - 2}px\n        <Slider\n          value={width}\n          onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n          min={200}\n          max={502}\n        />\n      </Grid.Cell>\n      <Grid.Cell span={3}>\n        Height: {height - 2}px\n        <Slider\n          value={height}\n          onChange={(_, value) => setHeight(value instanceof Array ? value[0] : value)}\n          min={200}\n          max={502}\n        />\n      </Grid.Cell>\n      <Grid.Cell>\n        <SbPlaceholder\n          style={{\n            width: `${width}px`,\n            height: `${height}px`,\n          }}\n        >\n          <EmptyState title=\"Title\" subTitle=\"Subtitle\" />\n        </SbPlaceholder>\n      </Grid.Cell>\n    </Grid>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/EmptyState/EmptyState.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9662-18",keywords:["emptystate","empty","no data","placeholder","blank","no results","properly","display","image","component","expects","following","have","height","through","classname"]},{name:"FileIcon",modulePath:"componentsV2/FileIcon",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FileIcon",specifier:"@corva/ui/componentsV2",exportName:"FileIcon"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"name",type:"string",required:false,description:""},{name:"size",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FileIcon {...props} />"},{name:"FileTypes",description:"Icon is determined by a filename's extension passed into `name` prop",code:"{\n  return (\n    <SbRow>\n      {ExtensionsToIconArray.map(([ext], index) => (\n        <div key={index} style={{ textAlign: 'center', width: '50px', fontSize: '12px' }}>\n          <FileIcon name={`file${ext}`} />\n          <br />\n          {ext}\n        </div>\n      ))}\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FileIcon/FileIcon.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=76260-54718",keywords:["fileicon"]},{name:"FilesDropzone",modulePath:"componentsV2/FilesDropzone",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FilesDropzone",specifier:"@corva/ui/componentsV2",exportName:"FilesDropzone"},category:"v2",description:"A dropzone for file uploads. Most likely you will need `<FilesProcessor/>`",isExperimental:true,isDeprecated:false,props:[{name:"onDrop",type:"DropzoneOptions['onDrop']",required:false,description:"Handles file drop"},{name:"children",type:"ReactNode",required:false,description:"Component content"},{name:"multiple",type:"boolean",required:false,description:"Controls if dropzone accepts multiple files"},{name:"accept",type:"string[] | string",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nNB: file extensions <b>must</b> start with `.`<br/>, otherwise they will be treated as MIME types\nfile extensions will be shown below the dropzone in the description\n\nExample:<br/>\n`.xsl,image/*,.csv`<br/>\nWill accept any file with `xsl` or `csv` extensions, and also - any file with `image/...` MIME type"},{name:"maxFiles",type:"number",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"number",required:false,description:"Maximum file size to accept"},{name:"disabled",type:"boolean",required:false,description:""},{name:"error",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesDropzone {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FilesDropzone/FilesDropzone.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=92818-11759",keywords:["filesdropzone","upload","drag","drop","file","attachment","dropzone","uploads","most","likely","will","need","filesprocessor"]},{name:"FilesLoader",modulePath:"componentsV2/FilesLoader",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FilesLoader",specifier:"@corva/ui/componentsV2",exportName:"FilesLoader"},category:"v2",description:"A component to indicate and control file upload. Most likely you will need `<FilesProcessor/>`",isExperimental:true,isDeprecated:false,props:[{name:"name",type:"string",required:false,description:""},{name:"preview",type:"File | string",required:false,description:""},{name:"indeterminate",type:"boolean",required:false,description:""},{name:"complete",type:"boolean",required:false,description:""},{name:"total",type:"number",required:false,description:"Total progress value (bytes by default)"},{name:"current",type:"number",required:false,description:"Current progress value (bytes by default)"},{name:"error",type:"ReactNode",required:false,description:"Error to show"},{name:"onDelete",type:"() => void",required:false,description:"If exists - displays the \"Delete\" button"},{name:"onReload",type:"() => void",required:false,description:"If exists - displays the \"Reload\" button on error state"},{name:"onCancel",type:"() => void",required:false,description:"If exists - displays the \"Cancel\" button when loading"},{name:"formatProgress",type:"(total?: number, current?: number) => ReactNode",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<FilesLoader {...props} />"},{name:"LoadingStates",description:"Use `indeterminate` prop to force the progress bar to be indeterminate. \"Cancel\" button is shown if its handler is provided",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} />\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} indeterminate />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      indeterminate\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n  </SbColumn>"},{name:"CompletedState",description:"Use `complete` prop to indicate that upload succeeded. \"Delete\" button is shown if its handler is provided",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} complete />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      complete\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n  </SbColumn>"},{name:"ErrorState",description:"Use `error` prop to display an error. This is treated as if upload was complete. \"Delete\" and \"Reload\" buttons are shown if their handlers are provided",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader name=\"cat.png\" current={10_000} total={20_000} error=\"Upload failed\" />\n    <FilesLoader\n      name=\"cat.png\"\n      current={10_000}\n      total={20_000}\n      error=\"Upload failed\"\n      onDelete={() => {}}\n      onReload={() => {}}\n      onCancel={() => {}}\n    />\n  </SbColumn>"},{name:"CustomProgressFormatting",description:"You can provide your own progress formatting function through `formatProgress` prop",code:"<FilesLoader\n    name=\"cat.png\"\n    current={10_000}\n    total={20_000}\n    formatProgress={(total, current) => (\n      <>\n        Goats teleported: <em>{current}</em> of <em>{total}</em>\n      </>\n    )}\n  />"},{name:"WithPreviewImage",description:"You can pass `preview` prop to display a preview. Note that `name` takes precedence over `preview`",code:"<SbColumn alignItems=\"stretch\">\n    <FilesLoader\n      name=\"cat.png\"\n      preview=\"https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg\"\n      current={10_000}\n      total={20_000}\n    />\n    <FilesLoader\n      preview=\"https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg?dummyparam=dummyvalue\"\n      current={10_000}\n      total={20_000}\n    />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FilesLoader/FilesLoader.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=74164-77295",keywords:["filesloader","component","indicate","control","file","upload","most","likely","will","need","filesprocessor"]},{name:"FilesProcessor",modulePath:"componentsV2/FilesProcessor",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"FilesProcessor",specifier:"@corva/ui/componentsV2",exportName:"FilesProcessor"},category:"v2",description:"File upload/parsing/processing flow. Comes with `FilesProcessorFunction` utility type",isExperimental:true,isDeprecated:false,props:[{name:"processFile",type:"FilesProcessorFunction<T>",required:true,description:"Function that processes file (uploads, parses, etc.)"},{name:"onDone",type:"(results: T[]) => void",required:true,description:"Called when files are uploaded/reuploaded"},{name:"value",type:"ValueItem[]",required:false,description:"Files list to display\n\n`type ValueItem = {id: string | number; name: string; preview?: File | string};`"},{name:"preview",type:"boolean",required:false,description:"Shows preview for images being processed and from `value` prop. Pass `preview` property to an item of `value`."},{name:"onDelete",type:"(item: ValueItem) => void",required:false,description:"Used in conjunction with `value`. Called when user presses \"delete\" button. If undefined - no button is shown"},{name:"onStartProcessing",type:"(files: File[]) => void",required:false,description:"Fired when file(s) selected for processing"},{name:"onProcessingFailure",type:"(file: File, isCancelled?: boolean, error?: Error) => void",required:false,description:"Fired when file processing failed or cancelled"},{name:"multiple",type:"FilesDropzoneProps['multiple']",required:false,description:"Controls if multiple files can be processed"},{name:"accept",type:"FilesDropzoneProps['accept']",required:false,description:"Array of or comma-separated MIME types/File Extensions to accept\n\nSee `FilesDropzone`'s props"},{name:"maxFiles",type:"FilesDropzoneProps['maxFiles']",required:false,description:"Maximum files to accept"},{name:"maxSize",type:"FilesDropzoneProps['maxSize']",required:false,description:"Maximum file size to accept"},{name:"formatProgress",type:"ProcessorProps<object>['formatProgress']",required:false,description:"Allows custom progress units"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState([\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    { id: 3, name: 'My Cat.jpeg' },\n  ]);\n\n  const processFile: FilesProcessorFunction<{\n    id: number;\n    fileName: string;\n  }> = useCallback(async (file, onProgress, registerOnCancel) => {\n    // eslint-disable-next-line no-console\n    registerOnCancel(() => console.log('CANCELLED', file));\n\n    for (let i = 0, c = 5; i < c; i += 1) {\n      onProgress(100 * c, 100 * (i + 1));\n      // eslint-disable-next-line no-await-in-loop\n      await new Promise(r => setTimeout(r, 500));\n    }\n\n    return {\n      id: Math.random() * 1000,\n      fileName: file.name,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      {...props}\n      processFile={processFile}\n      value={value}\n      onDone={(results, ...rest) => {\n        props.onDone?.(results, ...rest);\n\n        const mapResults = (result: typeof results[number]) => ({\n          id: result.id,\n          name: result.fileName,\n        });\n\n        setValue(items => [...results.map(mapResults), ...items]);\n      }}\n      onDelete={(item, ...rest) => {\n        props.onDelete?.(item, ...rest);\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"},{name:"SingleFileProcessing",description:"If `multiple` prop is `false` or `undefined`, the component will accept only a single file and will not display a dropzone if `value` is not empty",code:"{\n  const [value, setValue] = useState<\n    {\n      id: number;\n      name: string;\n    }[]\n  >([]);\n\n  const processFile: FilesProcessorFunction<{\n    id: number;\n    name: string;\n  }> = useCallback(async (file, onProgress) => {\n    for (let i = 0, c = 5; i < c; i += 1) {\n      onProgress(100 * c, 100 * (i + 1));\n      // eslint-disable-next-line no-await-in-loop\n      await new Promise(r => setTimeout(r, 100));\n    }\n\n    return {\n      id: Math.random() * 1000,\n      name: file.name,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      processFile={processFile}\n      value={value}\n      onDone={setValue}\n      onDelete={item => {\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"},{name:"Indeterminate",description:"If you don't call `onProgress` (second argument of `processFile`), processing will be \"indetermiante\"",code:"{\n  const [value, setValue] = useState(() => [\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    { id: 3, name: 'My Cat.jpeg' },\n  ]);\n\n  const processFile: FilesProcessorFunction<{\n    id: number;\n    fileName: string;\n  }> = useCallback(async file => {\n    await new Promise(r => setTimeout(r, 5000));\n\n    return {\n      id: Math.random() * 1000,\n      fileName: file.name,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      multiple\n      processFile={processFile}\n      value={value}\n      onDone={results => {\n        const mapResults = (result: typeof results[number]) => ({\n          id: result.id,\n          name: result.fileName,\n        });\n\n        setValue(items => [...results.map(mapResults), ...items]);\n      }}\n      onDelete={item => {\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"},{name:"WithPreviewImages",description:"Use `preview` prop to show file previews while processing if available. To show previews for pre-existing files/or already processed ones, use the `preview` property of the `value prop's item`",code:"{\n  const [value, setValue] = useState<{ id: number; name: string; preview?: string | File }[]>([\n    { id: 1, name: 'data.csv' },\n    { id: 2, name: 'more data.xlsx' },\n    {\n      id: 3,\n      name: 'My Cat.jpeg',\n      preview:\n        'https://upload.wikimedia.org/wikipedia/commons/d/dc/Grumpy_Cat_%2814556024763%29_%28cropped%29.jpg',\n    },\n  ]);\n\n  const processFile = useCallback<\n    FilesProcessorFunction<{\n      id: number;\n      fileName: string;\n      preview: File | string;\n    }>\n  >(async (file, onProgress) => {\n    for (let i = 0, c = 15; i < c; i += 1) {\n      onProgress(100 * c, 100 * (i + 1));\n      // eslint-disable-next-line no-await-in-loop\n      await new Promise(r => setTimeout(r, 500));\n    }\n\n    return {\n      id: Math.random() * 1000,\n      fileName: file.name,\n      // In real life this should be an URL to uploaded file\n      preview: file,\n    };\n  }, []);\n\n  return (\n    <FilesProcessor\n      preview\n      multiple\n      processFile={processFile}\n      value={value}\n      onDone={results => {\n        setValue(items => [\n          ...results.map(result => ({\n            id: result.id,\n            name: result.fileName,\n            preview: result.preview,\n          })),\n          ...items,\n        ]);\n      }}\n      onDelete={item => {\n        setValue(items => items.filter(({ id }) => id !== item.id));\n      }}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/FilesProcessor/FilesProcessor.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=73896-71907",keywords:["filesprocessor","file","upload","parsing","processing","flow","comes","filesprocessorfunction","utility","type"]},{name:"Grid",modulePath:"componentsV2/Grid",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Grid",specifier:"@corva/ui/componentsV2",exportName:"Grid"},category:"v2",description:"Grid is a wrapper component that allows users to arrange children items in a grid of columns and rows. It's based on the CSS grid.\n\nUse `<Grid.Cell/>` as children for the best experience",agentSummary:"CSS grid layout wrapper arranging Grid.Cell children by span and rows. Defaults to 12 columns and a theme spacing gap; no provider needed.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"cols",type:"number",required:false,description:"Amount of columns"},{name:"gap",type:"number",required:false,description:"Number of theme `spacing`-s between cells"},{name:"alignItems",type:"CSSProperties['alignItems']",required:false,description:""},{name:"justifyItems",type:"CSSProperties['justifyItems']",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Grid {...props}>\n    {new Array(12).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={1}>\n        <Content />\n      </Grid.Cell>\n    ))}\n  </Grid>"},{name:"CellSpan",description:"You can use the `span` prop of `<Grid.Cell/>` to control how many columns it occupies. A cell occupies all columns by default",code:"<Grid>\n    <Grid.Cell>\n      <Content>Span: undefined</Content>\n    </Grid.Cell>\n\n    <Grid.Cell span={12}>\n      <Content>Span: 12</Content>\n    </Grid.Cell>\n\n    {new Array(2).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={6}>\n        <Content>Span: 6</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(3).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={4}>\n        <Content>Span: 4</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(4).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={3}>\n        <Content>Span: 3</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(6).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={2}>\n        <Content>Span: 2</Content>\n      </Grid.Cell>\n    ))}\n\n    {new Array(12).fill(0).map((_, index) => (\n      <Grid.Cell key={index} span={1}>\n        <Content>Span: 1</Content>\n      </Grid.Cell>\n    ))}\n  </Grid>"},{name:"AlignItems",description:"By default all cells stretch vertically to the height of the highest cell in row. You can override this behaviour by using the `alignItems` prop. Accepts all CSS values for `align-items`",code:"<SbColumn alignItems=\"stretch\">\n    <Grid>\n      <Grid.Cell span={4}>\n        <Content>Default</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>Default</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>\n          Really\n          <br />\n          Tall\n          <br />\n          Content\n        </Content>\n      </Grid.Cell>\n    </Grid>\n    <Grid alignItems=\"flex-end\">\n      <Grid.Cell span={4}>\n        <Content>flex-end</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>flex-end</Content>\n      </Grid.Cell>\n      <Grid.Cell span={4}>\n        <Content>\n          Really\n          <br />\n          Tall\n          <br />\n          Content\n        </Content>\n      </Grid.Cell>\n    </Grid>\n  </SbColumn>"},{name:"JustifyItems",description:"By default all cells stretch horizontally to their target width in columns. You can override this behaviour by using the `justifyItems` prop. Accepts all CSS values for `justify-items`",code:"<Grid justifyItems=\"center\">\n    <Grid.Cell span={6}>\n      <Content>\n        Very wide content goes here because we need something really long and wide to showcase our\n        awesome features\n      </Content>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Content>Not wide</Content>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Content>Short</Content>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Content>Slightly wider</Content>\n    </Grid.Cell>\n  </Grid>"},{name:"Multirow",description:"You can use the `rows` prop of `<Grid.Cell/>` to control how many rows it occupies. A cell occupies 1 row by default",code:"<Grid>\n    <Grid.Cell span={4} rows={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4} rows={2}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={4}>\n      <Content />\n    </Grid.Cell>\n  </Grid>"},{name:"ColumnsCount",description:"If you want to have a number of columns other than the default value, use the `cols` prop",code:"<Grid cols={2}>\n    <Grid.Cell span={1}>\n      <Content />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <Content />\n    </Grid.Cell>\n  </Grid>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Grid/Grid.tsx",keywords:["grid","layout","columns","rows","responsive","wrapper","component","allows","users","arrange","children","items"]},{name:"Header",modulePath:"componentsV2/Header",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Header",specifier:"@corva/ui/componentsV2",exportName:"Header"},category:"v2",description:"A component for headers: a thin wrapper over `<Text/>` with preset display variants",isExperimental:true,isDeprecated:false,props:[{name:"appearance",type:"'H1' | 'H2' | 'H3' | 'appName'",required:true,description:"",enumValues:["H1","H2","H3","appName"]},{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Header {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Header/Header.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=88924-113475&node-type=frame",keywords:["header","headerlayout","layout","header layout","component","headers","thin","wrapper","over","text","preset","display","variants"]},{name:"HideInNativeApp",modulePath:"componentsV2/HideInNativeApp",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"HideInNativeApp",specifier:"@corva/ui/componentsV2",exportName:"HideInNativeApp"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/HideInNativeApp/index.tsx",keywords:["hideinnativeapp"]},{name:"Hint",modulePath:"componentsV2/Hint",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Hint",specifier:"@corva/ui/componentsV2",exportName:"Hint"},category:"v2",description:"Used for attracting user's attention to new features, providing usage hints, etc",isExperimental:false,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"children",type:"ReactElement",required:false,description:"⚠️ Has to be a <i>single</i> reffable child (use `forwardRef` for custom components)"},{name:"title",type:"ReactNode",required:false,description:""},{name:"description",type:"ReactNode",required:false,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"anchorEl",type:"HTMLElement | null",required:false,description:"Allows anchoring to arbitrary element"},{name:"onClose",type:"() => void",required:false,description:"Close button is shown only when this prop is present"},{name:"primaryActionText",type:"ReactNode",required:false,description:"Contents of the primary button"},{name:"primaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for primary button"},{name:"secondaryActionText",type:"ReactNode",required:false,description:"Contents of the secondary button"},{name:"secondaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for secondary button"},{name:"stepCurrent",type:"number",required:false,description:""},{name:"stepsTotal",type:"number",required:false,description:""},{name:"flip",type:"boolean",required:false,description:"Controls if hint should flip to other side of an element to fit into the viewport"},{name:"popperProps",type:"Partial<PopperProps>",required:false,description:"Escape hatch for popper props. `modifiers` property will be merged with `<Hint/>`'s own modifiers."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Hint {...props}>\n    <SbPlaceholder style={{ width: '100px', height: '100px' }}>Element</SbPlaceholder>\n  </Hint>"},{name:"CustomComponents",description:"To position `Hint` to a custom component, or to a specific node inside the custom component, use `forwardRef`",code:"{\n  const CustomComponent = useMemo(\n    () =>\n      forwardRef<HTMLButtonElement>((_, ref) => {\n        return (\n          <SbPlaceholder style={{ padding: '20px 0' }}>\n            <div>\n              I'm a child component\n              <br />\n              <Button ref={ref}>I have a ref</Button>\n            </div>\n          </SbPlaceholder>\n        );\n      }),\n    []\n  );\n\n  return (\n    <Hint description=\"I'm positioned to a forwarded ref\" open>\n      <CustomComponent />\n    </Hint>\n  );\n}"},{name:"AnchorEl",description:"`Hint` can be positioned relative to an arbitrary element by passing `anchorEl` prop. In this case, positioning relative to children is disabled",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  return (\n    <div style={{ padding: '80px 0' }}>\n      <Button ref={setAnchorEl}>This is not a child</Button>\n\n      <Hint\n        description=\"I have children but am positioned to a button\"\n        open={!!anchorEl}\n        anchorEl={anchorEl}\n        placement=\"top\"\n      >\n        <span>This is a child</span>\n      </Hint>\n\n      <Hint open={!!anchorEl} anchorEl={anchorEl} description=\"I have no children at all!\" />\n    </div>\n  );\n}"},{name:"Flip",description:"Make the component flip to the other side of anchor element to fit into the viewport by providing the `flip` prop.\n\n⚠️⚠️⚠️ Be careful with this prop when using `Hint` in apps: since tooltips, modals, popovers, etc change app's viewport when open, `Hint` may flip itself unintentionally if its anchor element is not a child of `<AppContainer/>`'s root element in DOM.",code:"<Hint description=\"This hint is flipping!\" open flip>\n    <SbPlaceholder>Child</SbPlaceholder>\n  </Hint>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Hint/Hint.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597-20397",keywords:["hint","help","info","question","tooltip","information","used","attracting","user","attention","features","providing","usage","hints"]},{name:"Hotkey",modulePath:"componentsV2/Hotkey",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Hotkey",specifier:"@corva/ui/componentsV2",exportName:"Hotkey"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"keys",type:"ReactNode[] | ReactNode",required:true,description:"Key or key combination. In case of `string`, can be separated by `,` or `+` signs."},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Hotkey {...props} />"},{name:"UsageInText",description:"Integrates seamlessly into plain text",code:"<Text>\n    Some text that can be pretty long, and have a hotkey <Hotkey keys=\"Ctrl+Shift+X\" /> inside.\n  </Text>"},{name:"PredefinedIcons",description:"You can use the predefined icons for commonly-used keys",code:"{\n  const keys = Object.keys(ReplacementIcons);\n\n  return (\n    <Grid cols={3}>\n      {keys.map(key => (\n        <Fragment key={key}>\n          <Grid.Cell span={1}>{key}</Grid.Cell>\n          <Grid.Cell span={2}>\n            <Hotkey keys={key} />\n          </Grid.Cell>\n        </Fragment>\n      ))}\n    </Grid>\n  );\n}"},{name:"InputVariants",description:"Can receive a wide variety of inputs as `keys` prop",code:"<SbColumn>\n    <Hotkey keys=\"Ctrl+Shift+A\" />\n    <Hotkey keys=\"Ctrl,Shift,A\" />\n    <Hotkey keys={['Ctrl', 'Shift', 'A']} />\n    {/* eslint-disable-next-line react/jsx-key */}\n    <Hotkey keys={['Esc', <PowerIcon />]} />\n    <Hotkey keys={<PowerIcon />} />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Hotkey/Hotkey.tsx",keywords:["hotkey"]},{name:"ImageViewer",modulePath:"componentsV2/ImageViewer",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"ImageViewer",specifier:"@corva/ui/componentsV2/ImageViewer/ImageViewer",form:"named",exportName:"ImageViewer"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"src",type:"string",required:false,description:""},{name:"width",type:"number",required:false,description:""},{name:"height",type:"number",required:false,description:""},{name:"onClose",type:"() => void",required:false,description:""},{name:"onOpen",type:"() => void",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ImageViewer/ImageViewer.tsx",keywords:["imageviewer"]},{name:"IndicatorLive",modulePath:"componentsV2/IndicatorLive",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"IndicatorLive",specifier:"@corva/ui/componentsV2",exportName:"IndicatorLive"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"state",type:"'live' | 'offline'",required:true,description:"",enumValues:["live","offline"]},{name:"type",type:"'buttonLike' | 'indicator'",required:false,description:"",enumValues:["buttonLike","indicator"]},{name:"children",type:"React.ReactNode",required:false,description:"Content"},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"lastActive",type:"string",required:false,description:""},{name:"disableTooltip",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<IndicatorLive {...props} />"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop:\n\n- `large`\n- `medium` (default)\n- `small`\n",code:"<SbColumn>\n    <IndicatorLive state=\"live\" size=\"large\" />\n    <IndicatorLive state=\"live\" size=\"medium\" />\n    <IndicatorLive state=\"live\" size=\"small\" />\n  </SbColumn>"},{name:"States",description:"Online status is controlled through the `state` prop that accepts the following values:\n\n- `live`\n- `offline`",code:"<SbColumn>\n    <IndicatorLive state=\"live\" />\n    <IndicatorLive state=\"offline\" />\n  </SbColumn>"},{name:"Types",description:"Component supports 2 visual styles controlled through the `type` prop:\n\n- `buttonLike` (default), often used in plase of `<ButtonLive/>`\n- `indicator`, used as a static indicator",code:"<SbColumn>\n    <IndicatorLive state=\"live\" type=\"buttonLike\" />\n    <IndicatorLive state=\"live\" type=\"indicator\" />\n  </SbColumn>"},{name:"IntegratedTooltip",description:"Component has an integrated tooltip, its content depends on `state` and `lastActive` props",code:"{\n  const lastActive = new Intl.DateTimeFormat('en-US', {\n    month: 'short',\n    day: '2-digit',\n    year: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true,\n  }).format(new Date());\n\n  return (\n    <SbColumn>\n      <IndicatorLive state=\"live\" />\n      <IndicatorLive state=\"offline\" />\n      <IndicatorLive state=\"offline\" lastActive={lastActive} />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/IndicatorLive/IndicatorLive.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=69896-51646",keywords:["indicatorlive"]},{name:"InterventionEventSelector",modulePath:"componentsV2/InterventionEventSelector",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"InterventionEventSelector",specifier:"@corva/ui/componentsV2",exportName:"InterventionEventSelector"},category:"v2",description:"A chip that opens a menu of intervention unit events for a well, letting the user scope app data to a single event or view all events. Fetches events by `wellId` (a well id, not a well asset id) and renders nothing when the well has no events. Self-contained: it ships its own `@tanstack/react-query` client, so host apps need no provider; stories are populated by seeding that client’s cache. A selection that does not belong to the current well is automatically reset to \"All events\" once the events load.",isExperimental:true,isDeprecated:false,props:[{name:"wellId",type:"number | null | undefined",required:true,description:""},{name:"selectedEventId",type:"number | string | null",required:true,description:"`null` means \"All events\""},{name:"onChange",type:"(eventId: number | null, event: InterventionUnitEvent | null) => void",required:true,description:""},{name:"className",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [selectedEventId, setSelectedEventId] = useState<number | string | null>(null);\n\n  return (\n    <InterventionEventSelector\n      {...props}\n      wellId={WELL_ID}\n      selectedEventId={selectedEventId}\n      onChange={setSelectedEventId}\n    />\n  );\n}"},{name:"WithSelectedEvent",description:"When an event is selected, the chip is labeled with the event operation and its start date. Selecting \"All events\" resets the selection (`onChange` is called with `null`).",code:"{\n  const [selectedEventId, setSelectedEventId] = useState<number | string | null>(5);\n\n  return (\n    <InterventionEventSelector\n      wellId={WELL_ID}\n      selectedEventId={selectedEventId}\n      onChange={setSelectedEventId}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/InterventionEventSelector/InterventionEventSelector.tsx",figmaUrl:"https://www.figma.com/file/DymK26x1RgI6IQKJBR8xDU/Navigation-Chips?node-id=37-19221",keywords:["interventioneventselector","chip","opens","menu","intervention","unit","events","well","letting","user","scope"]},{name:"Label",modulePath:"componentsV2/Label",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Label",specifier:"@corva/ui/componentsV2",exportName:"Label"},category:"v2",description:"Component for labelling blocks. Positioned absolutely by default, and takes up to 100% of container width.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"position",type:"'left' | 'right'",required:false,description:"",enumValues:["left","right"]},{name:"state",type:"'primary' | 'error' | 'info' | 'success' | 'neutral' | 'warning'",required:false,description:"",enumValues:["primary","error","info","success","neutral","warning"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Label {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `small`\n- `medium` (default)\n",code:"<SbColumn alignItems=\"stretch\">\n    <div className={styles.demoBlock}>\n      <Label size=\"small\">small</Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\">medium</Label>\n    </div>\n  </SbColumn>"},{name:"States",description:"Component's color is determined by the state prop. Available states:\n\n- `primary`\n- `neutral`\n- `info`\n- `error`\n- `warning`\n- `success`\n",code:"<SbColumn alignItems=\"stretch\">\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"primary\">\n        primary\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"neutral\">\n        neutral\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"info\">\n        info\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"error\">\n        error\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"warning\">\n        warning\n      </Label>\n    </div>\n    <div className={styles.demoBlock}>\n      <Label size=\"medium\" state=\"success\">\n        success\n      </Label>\n    </div>\n  </SbColumn>"},{name:"PrefixAndSuffix",description:"You can add prefix/suffix by using the `prefix` and `suffix` props respectively.",code:"<Label prefix={<BubbleChartIcon />} suffix={<BubbleChartIcon />}>\n    With prefix and suffix\n  </Label>"},{name:"RealLifeExample",description:"You can adjust side paddings through CSS as needed.",code:"<Paper className={styles.demoPaper}>\n    <Label className={styles.paperLabel}>label with correct side padding</Label>\n    <SbPlaceholder className={styles.dummyContent}>Content</SbPlaceholder>\n  </Paper>"},{name:"WithTruncatedText",description:"Component works seamlessly with `<TextEndTruncated/>` or `<TextMiddleTruncated/>`.",code:"<Paper className={styles.demoPaper}>\n    <Label className={styles.paperLabel}>\n      <TextMiddleTruncated>\n        Extremely long label with correct side padding that will be truncated because we need to\n        provide an example\n      </TextMiddleTruncated>\n    </Label>\n    <SbPlaceholder className={styles.dummyContent}>Content</SbPlaceholder>\n  </Paper>"},{name:"CustomBackground",description:"You can set your own background by overriding the `background-color` or `background` CSS properties. You can also override the `color` CSS property.",code:"<Label size=\"medium\" className={styles.aaaaaaayPrettyLabel}>\n    A-a-a-a-a-ay! Pretty Label!\n  </Label>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Label/Label.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=128629-7086",keywords:["label","labelscounter","labels","counter","labels counter","assetnamelabel","asset","name","asset name label","component","labelling","blocks","positioned","absolutely","default","takes","container","width"]},{name:"LiveDotIndicator",modulePath:"componentsV2/LiveDotIndicator",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"LiveDotIndicator",specifier:"@corva/ui/componentsV2/LiveDotIndicator/LiveDotIndicator",form:"named",exportName:"LiveDotIndicator"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"state",type:"'live' | 'offline'",required:true,description:"",enumValues:["live","offline"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LiveDotIndicator/LiveDotIndicator.tsx",keywords:["livedotindicator"]},{name:"LoaderCircular",modulePath:"componentsV2/LoaderCircular",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"LoaderCircular",specifier:"@corva/ui/componentsV2",exportName:"LoaderCircular"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"'xs' | 'small' | 'medium' | 'large'",required:false,description:"",enumValues:["xs","small","medium","large"]},{name:"value",type:"number",required:false,description:"Value in range of 0-100. If omitted, the loader becomes indeterminate"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LoaderCircular {...props} />"},{name:"Sizes",description:"Component supports several sizing options:\n\n- `\"xs\"`\n- `\"small\" (default)`\n- `\"medium\"`\n- `\"large\"`",code:"<SbRow>\n    <LoaderCircular size=\"xs\" />\n    <LoaderCircular size=\"small\" />\n    <LoaderCircular size=\"medium\" />\n    <LoaderCircular size=\"large\" />\n  </SbRow>"},{name:"DeterminateVsIndeterminate",description:"The component is displayed in an \"indeterminate\" state by default. It's useful when we don't have the exact percentage of progress completion or we want to indicate that something is being loaded.\n\nProvide a `value` prop with values in a `[0, 100]` range to switch to \"determinate\" mode which allows to display the exact percentage",code:"<SbRow>\n    <LoaderCircular size=\"large\" />\n    <LoaderCircular value={33} size=\"large\" />\n    <LoaderCircular value={66} size=\"large\" />\n    <LoaderCircular value={100} size=\"large\" />\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LoaderCircular/LoaderCircular.tsx",keywords:["loadercircular","loading","spinner","progress","loadingindicator","indicator","loading indicator"]},{name:"LoaderLinear",modulePath:"componentsV2/LoaderLinear",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"LoaderLinear",specifier:"@corva/ui/componentsV2",exportName:"LoaderLinear"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"number",required:false,description:"Value in range of 0-100. If omitted, the loader becomes indeterminate"},{name:"type",type:"'primary' | 'fancy'",required:false,description:"",enumValues:["primary","fancy"]},{name:"size",type:"'medium' | 'small'",required:false,description:"",enumValues:["medium","small"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LoaderLinear {...props} />"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn alignItems=\"stretch\">\n    <LoaderLinear value={50} size=\"medium\" />\n    <LoaderLinear value={50} size=\"small\" />\n  </SbColumn>"},{name:"Types",description:"Component supports several types through its `type` prop\n\n- `primary` (default)\n- `fancy`",code:"<SbColumn alignItems=\"stretch\">\n    <Text>Primary</Text>\n    <LoaderLinear type=\"primary\" value={100} />\n    <LoaderLinear type=\"primary\" value={70} />\n    <LoaderLinear type=\"primary\" />\n    <Text>Fancy</Text>\n    <LoaderLinear type=\"fancy\" value={100} />\n    <LoaderLinear type=\"fancy\" value={70} />\n    <LoaderLinear type=\"fancy\" />\n  </SbColumn>"},{name:"DeterminateVsIndeterminate",description:"The component is displayed in an \"indeterminate\" state by default. It's useful when we don't have the exact percentage of progress completion or we want to indicate that something is being loaded.\n\nProvide a `value` prop with values in a `[0, 100]` range to switch to \"determinate\" mode which allows to display the exact percentage",code:"<SbColumn alignItems=\"stretch\">\n    <Text>Determinate</Text>\n    <LoaderLinear value={33} />\n    <LoaderLinear value={66} />\n    <LoaderLinear value={100} />\n    <Text>Indeterminate</Text>\n    <LoaderLinear />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LoaderLinear/LoaderLinear.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=114392-19904",keywords:["loaderlinear","loading","progress","bar","loadingindicator","indicator","loading indicator"]},{name:"LoaderLogo",modulePath:"componentsV2/LoaderLogo",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"LoaderLogo",specifier:"@corva/ui/componentsV2",exportName:"LoaderLogo"},category:"v2",description:"Used to provide a visual clue that the page/app/large UI block is in loading state",isExperimental:true,isDeprecated:false,props:[{name:"size",type:"number",required:false,description:""},{name:"inverted",type:"boolean",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<LoaderLogo {...props} />"},{name:"Inverted",description:"Use `inverted` prop to display loader on white/light backgrounds",code:"<div style={{ background: '#fff' }}>\n    <LoaderLogo inverted />\n  </div>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/LoaderLogo/LoaderLogo.tsx",keywords:["loaderlogo","loading","splash","brand","startup","loadingindicator","indicator","loading indicator","used","provide","visual","clue","page","large","block","state"]},{name:"Menu",modulePath:"componentsV2/Menu",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Menu",specifier:"@corva/ui/componentsV2",exportName:"Menu"},category:"v2",description:"A `<Popover/>` with additional bells and whistles to simplify menu creation.\n\nAccepts most of the props of the `<Popover/>` component\n\nProvides `<Menu.Item/>`, `<Menu.Group/>`, and `<Menu.Divider/>` subcomponents as its properties",agentSummary:"Item-list popover built on V2 Popover: Menu.Item with prefix/suffix content, selected and destructive states, plus Group and Divider. PopoverPanel covers freeform panel content.",isExperimental:true,isDeprecated:false,props:[{name:"anchorEl",type:"Required<PopoverProps>['anchorEl']",required:true,description:"A HTML element, or a function that returns it. It's used to set the position of the menu."},{name:"containerRef",type:"Ref<HTMLDivElement>",required:false,description:"Ref to content container"},{name:"className",type:"string",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey') => void",required:false,description:""},{name:"open",type:"boolean",required:true,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""},{name:"backdrop",type:"boolean",required:false,description:"Determines if backdrop should be rendered"},{name:"preventScroll",type:"boolean",required:false,description:"Prevents scroll when open"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"preventOverflow",type:"boolean",required:false,description:"Controls if Popover should stay inside its constraining element"},{name:"flip",type:"boolean",required:false,description:"Controls if Popover should flip to opposite side if there's no space to fit it"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`."},{name:"animate",type:"boolean",required:false,description:"Controls whether popover should animate itself"},{name:"style",type:"CSSProperties",required:false,description:"Escape hatch for when you need to pass dimensions/additional styles from JS"},{name:"popperClassName",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu\n        {...props}\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      >\n        {options.map(item => (\n          <Menu.Item\n            key={item}\n            onClick={(...args) => {\n              // eslint-disable-next-line no-console\n              console.log(`Menu item \"${item}\" onClick called with args:`, ...args);\n              setIsOpen(false);\n            }}\n          >\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Positioning",description:"You can control component's position by using `placement` prop. Refer to `<Popover/>`'s documentation page for details.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        placement=\"left-start\"\n      >\n        {options.map(item => (\n          <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Sizes",description:"Item size is controlled through the `size` prop of `<Menu.Item/>` component:\n\n- `medium` (default)\n- `large`",code:"{\n  const [open, setOpen] = useState(false);\n  const [size, setSize] = useState<ComponentProps<typeof Menu['Item']>['size']>();\n  const [anchor, setAnchor] = useState<HTMLElement>();\n\n  const getButtonClickHandler =\n    (newSize: typeof size): MouseEventHandler<HTMLButtonElement> =>\n    e => {\n      setAnchor(e.currentTarget);\n      setSize(newSize);\n      setOpen(true);\n    };\n\n  return (\n    <SbColumn>\n      <Button onClick={getButtonClickHandler('medium')}>Medium</Button>\n      <Button onClick={getButtonClickHandler('large')}>Large</Button>\n\n      <Menu open={open} anchorEl={anchor as HTMLElement} onClose={() => setOpen(false)}>\n        {options.map(item => (\n          <Menu.Item key={item} onClick={() => setOpen(false)} size={size}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </SbColumn>\n  );\n}"},{name:"SelectedItems",description:"You can display a menu item as selected by passing the `selected` prop",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        {options.map((item, index) => (\n          <Menu.Item key={item} onClick={() => setIsOpen(false)} selected={index === 2}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Types",description:"Component supports the following visual styles, controlled with a `type` prop:\n- `normal` (default)\n- `destructive`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        <Menu.Item type=\"normal\">Normal</Menu.Item>\n        <Menu.Item type=\"destructive\">Destructive</Menu.Item>\n      </Menu>\n    </>\n  );\n}"},{name:"PrefixAndSuffix",description:"You can display arbitrary content as prefix and/or suffix by using `prefix` and `suffix` props. Note that if those are [valid React elements](https://react.dev/reference/react/isValidElement), `size` and `className` props will be injected",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  const affixes = [SettingTwoIcon, BubbleChartIcon, AlarmClockIcon, ApplicationIcon];\n\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} prefix={<Icon />} size=\"large\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n        <Menu.Divider />\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} suffix={<Icon />} size=\"large\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n        <Menu.Divider />\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} prefix={<Icon />} size=\"medium\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n        <Menu.Divider />\n        {affixes.map((Icon, index) => (\n          <Menu.Item key={index} suffix={<Icon />} size=\"medium\">\n            {options[index]}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"Checkboxes",description:"Component has a special integration with `<Checkbox/>` component to allow \"multi-select\" menus. Use `<Menu.Divider/>` to separate the \"Select All\" option from the rest",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [value, setValue] = useState<string[]>([]);\n\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        <Menu.Item\n          size=\"large\"\n          prefix={\n            <Checkbox\n              checked={value.length === options.length}\n              indeterminate={value.length > 0 && value.length !== options.length}\n            />\n          }\n          onClick={() => {\n            if (value.length === options.length) {\n              setValue([]);\n            } else {\n              setValue([...options]);\n            }\n          }}\n        >\n          All\n        </Menu.Item>\n\n        <Menu.Divider />\n\n        {options.map(option => {\n          const checked = value.includes(option);\n          return (\n            <Menu.Item\n              key={option}\n              size=\"large\"\n              prefix={<Checkbox checked={checked} />}\n              onClick={() =>\n                setValue(prev => {\n                  if (checked) {\n                    return prev.filter(item => item !== option);\n                  }\n\n                  return [...prev, option];\n                })\n              }\n            >\n              {option}\n            </Menu.Item>\n          );\n        })}\n\n        <Menu.Divider />\n\n        {options.map(option => {\n          const checked = value.includes(option);\n          return (\n            <Menu.Item\n              key={option}\n              size=\"medium\"\n              prefix={<Checkbox checked={checked} />}\n              onClick={() =>\n                setValue(prev => {\n                  if (checked) {\n                    return prev.filter(item => item !== option);\n                  }\n\n                  return [...prev, option];\n                })\n              }\n            >\n              {option}\n            </Menu.Item>\n          );\n        })}\n      </Menu>\n    </>\n  );\n}"},{name:"Groups",description:"You can separate menu items into groups by using the `<Menu.Group/>` component",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        <Menu.Group label=\"Some Group\">\n          {options.map(item => (\n            <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n              {item}\n            </Menu.Item>\n          ))}\n        </Menu.Group>\n        <Menu.Group label=\"Other Group\">\n          {options.map(item => (\n            <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n              {item}\n            </Menu.Item>\n          ))}\n        </Menu.Group>\n      </Menu>\n    </>\n  );\n}"},{name:"Dividers",description:"You can separate menu items with a line by using the `<Menu.Divider/>` component",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={() => setIsOpen(false)}>\n        {options.map((item, i) => (\n          <Fragment key={item}>\n            {i === 3 && <Menu.Divider />}\n            <Menu.Item onClick={() => setIsOpen(false)}>{item}</Menu.Item>\n          </Fragment>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"ConstrainedMenu",description:"This example demonstrates a very common usecase: when menu has a fixed width and may have a scroll. In this case, menu size is controlled with `className` prop. It is recommended to use `<TextMiddleTruncated/>` to truncate menu items' text content",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n      <Menu\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={styles.constrainedMenu}\n      >\n        {options.concat(options).map((item, index) => (\n          <Menu.Item key={index} onClick={() => setIsOpen(false)}>\n            <TextMiddleTruncated>{`${item} `.repeat(5)}</TextMiddleTruncated>\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"OpenOnHover",description:"This example illustrates Menu operation on hover. Note that `backdrop` prop is used to omit backdrop rendering.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const closeTimerRef = useRef<NodeJS.Timeout>();\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  const onMouseEnter = () => {\n    clearTimeout(closeTimerRef.current);\n    setIsOpen(true);\n  };\n\n  const onMouseLeave = () => {\n    clearTimeout(closeTimerRef.current);\n    closeTimerRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 500);\n  };\n\n  return (\n    <>\n      <Button ref={toggleRef} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n        Hover me!\n      </Button>\n\n      <Menu\n        open={isOpen}\n        anchorEl={toggleRef.current}\n        backdrop={false}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        {options.map(item => (\n          <Menu.Item key={item} onClick={() => setIsOpen(false)}>\n            {item}\n          </Menu.Item>\n        ))}\n      </Menu>\n    </>\n  );\n}"},{name:"SubMenus",description:"This example illustrates a basic case of \"nested\" Menus",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const subMenuAnchorRef = useRef<HTMLLIElement>(null);\n  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);\n  const closeTimerRef = useRef<NodeJS.Timeout>();\n\n  const close = useCallback(() => {\n    setIsOpen(false);\n    setIsSubMenuOpen(false);\n  }, []);\n\n  const onMouseEnter = useCallback(() => {\n    clearTimeout(closeTimerRef.current);\n    setIsSubMenuOpen(true);\n  }, []);\n\n  const onMouseLeave = useCallback(() => {\n    clearTimeout(closeTimerRef.current);\n    closeTimerRef.current = setTimeout(() => {\n      setIsSubMenuOpen(false);\n    }, 500);\n  }, []);\n\n  return (\n    <>\n      <Button ref={anchorRef} onClick={() => setIsOpen(true)}>\n        Open Menu\n      </Button>\n\n      <Menu open={isOpen} anchorEl={anchorRef.current} onClose={close}>\n        <Menu.Item>Menu Item</Menu.Item>\n        <Menu.Item\n          onClick={() => setIsSubMenuOpen(true)}\n          ref={subMenuAnchorRef}\n          suffix={<RightIcon />}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          Click to open submenu\n        </Menu.Item>\n      </Menu>\n\n      <Menu\n        open={isSubMenuOpen}\n        anchorEl={subMenuAnchorRef.current}\n        onClose={close}\n        placement=\"right-start\"\n        backdrop={false}\n        preventScroll={false}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        <Menu.Item onClick={close}>Sub-Menu Item</Menu.Item>\n        <Menu.Item onClick={close}>Sub-Menu Item</Menu.Item>\n        <Menu.Item onClick={close}>Sub-Menu Item</Menu.Item>\n      </Menu>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Menu/Menu.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597-17471",keywords:["menu","dropdown","options","select","popover","menuitem","item","menu item","contextmenuitem","context","context menu item","iconmenu","icon","icon menu","additional","bells","whistles","simplify","creation","accepts","most","props"]},{name:"Modal",modulePath:"componentsV2/Modal",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Modal",specifier:"@corva/ui/componentsV2",exportName:"Modal"},category:"v2",description:"Modal component. Uses `<ModalWindow/>` under the hood to display the actual window",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"size",type:"'small' | 'medium' | 'large' | 'fullscreen'",required:false,description:"",enumValues:["small","medium","large","fullscreen"]},{name:"title",type:"ReactNode",required:false,description:""},{name:"showCloseButton",type:"boolean",required:false,description:""},{name:"primaryActionText",type:"ReactNode",required:false,description:"Contents of the primary button"},{name:"primaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for primary button"},{name:"primaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for primary button"},{name:"secondaryActionText",type:"ReactNode",required:false,description:"Contents of the secondary button"},{name:"secondaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for secondary button"},{name:"secondaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for secondary button"},{name:"actions",type:"ReactNode",required:false,description:"Additional actions to render in Modal's footer"},{name:"open",type:"boolean",required:true,description:""},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey' | 'closeButtonClick') => void",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        {...props}\n        open={isOpen}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      />\n    </>\n  );\n}"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `small`: 416px\n- `medium`: 552px\n- `large`: 768px\n- `fullscreen`: has its own height, takes 80% of viewport width, or 1152px, whichever is smaller",code:"{\n  const [size, setSize] = useState<Props['size']>();\n\n  return (\n    <SbColumn>\n      <Button onClick={() => setSize('small')}>Small</Button>\n      <Button onClick={() => setSize('medium')}>Medium</Button>\n      <Button onClick={() => setSize('large')}>Large</Button>\n      <Button onClick={() => setSize('fullscreen')}>Fullscreen</Button>\n      <Modal open={!!size} size={size} title={`Size: ${size}`} onClose={() => setSize(undefined)}>\n        Some content goes here\n      </Modal>\n    </SbColumn>\n  );\n}"},{name:"Actions",description:"Component supports 2 \"default\" actions, primary and secondary, which are controlled through `primaryAction*` and `secondaryAction*` props",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Modal with actions\"\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n        primaryActionText=\"Primary action\"\n        primaryActionHandler={() => {\n          // eslint-disable-next-line no-alert\n          alert('Primary action clicked');\n          setIsOpen(false);\n        }}\n        secondaryActionText=\"Secondary action\"\n        secondaryActionHandler={() => {\n          // eslint-disable-next-line no-alert\n          alert('Secondary action clicked');\n          setIsOpen(false);\n        }}\n      >\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"CustomActions",description:"You can add additional actions to modal by using `actions` prop. Additional actions are rendered alongside \"default\" ones",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Modal with custom actions\"\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n        actions={\n          <SbPlaceholder className={storyStyles.additionalAction}>\n            Put your additional actions here\n          </SbPlaceholder>\n        }\n      >\n        Content\n      </Modal>\n    </>\n  );\n}"},{name:"CloseVectors",description:"You can control the vectors through which user can close modal by using the following props:\n\n- `closeOnBackdropClick`: controls if modal should close when user clicks on backdrop\n- `closeOnEscape`: controls if modal should close when user presses the `Escape` key\n- `showCloseButton`: controls if close button should be shown",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Modal without close button\"\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n        primaryActionText=\"Close\"\n        primaryActionHandler={() => setIsOpen(false)}\n        closeOnBackdropClick={false}\n        closeOnEscape={false}\n        showCloseButton={false}\n      >\n        This modal has no close button, and can not be closed by pressing <Hotkey keys=\"Esc\" /> key\n        or clicking on the backdrop\n      </Modal>\n    </>\n  );\n}"},{name:"FullscreenModal",description:"Fullscreen modal has slightly differnt styles for its inner components: they allow usage of `height: 100%` to simplify usage with charts, etc.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const [height, setHeight] = useState('auto');\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title=\"Fullscreen Modal\"\n        onClose={() => setIsOpen(false)}\n        size=\"fullscreen\"\n      >\n        <div className={storyStyles.fullscreenContent} style={{ height }}>\n          <div className={storyStyles.fullscreenContentText}>\n            <SbColumn>\n              <Text>Height:</Text>\n              <RadioGroup\n                direction=\"vertical\"\n                value={height}\n                onChange={setHeight}\n                options={[\n                  { value: 'auto', label: 'Too small: (auto)' },\n                  { value: '200vh', label: 'Too big (200vh)' },\n                  { value: '100%', label: 'Just right (100%)' },\n                ]}\n              />\n            </SbColumn>\n          </div>\n        </div>\n      </Modal>\n    </>\n  );\n}"},{name:"WithAdditionalControlsInTitle",description:"You can pass `ReactNode` as `title`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n      <Modal\n        open={isOpen}\n        title={\n          <div className={storyStyles.customTitle}>\n            Modal\n            <div className={storyStyles.actions}>\n              <Tooltip title=\"Upload\">\n                <ButtonIcon size=\"medium\" type=\"tertiaryBg\">\n                  <UploadIcon />\n                </ButtonIcon>\n              </Tooltip>\n\n              <Tooltip title=\"Download\">\n                <ButtonIcon size=\"medium\" type=\"tertiaryBg\">\n                  <DownloadIcon />\n                </ButtonIcon>\n              </Tooltip>\n            </div>\n          </div>\n        }\n        onClose={() => setIsOpen(false)}\n        size=\"medium\"\n      >\n        Modal contents\n      </Modal>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Modal/Modal.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382-40936",keywords:["modal","dialog","popup","overlay","confirmation","component","uses","modalwindow","under","hood","display","actual","window"]},{name:"ModalWindow",modulePath:"componentsV2/ModalWindow",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ModalWindow",specifier:"@corva/ui/componentsV2",exportName:"ModalWindow"},category:"v2",description:"Modal window for `<Modal/>` component. Can be used for custom implementations of modals.\n\nRefer to `<Modal/>` for more examples.",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:false,description:""},{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"onClose",type:"() => void",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large' | 'fullscreen'",required:false,description:"",enumValues:["small","medium","large","fullscreen"]},{name:"showCloseButton",type:"boolean",required:false,description:""},{name:"primaryActionText",type:"ReactNode",required:false,description:"Contents of the primary button"},{name:"primaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for primary button"},{name:"primaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for primary button"},{name:"secondaryActionText",type:"ReactNode",required:false,description:"Contents of the secondary button"},{name:"secondaryActionHandler",type:"ButtonProps['onClick']",required:false,description:"Click handler for secondary button"},{name:"secondaryActionProps",type:"Omit<ButtonProps, 'children' | 'onClick' | 'type' | 'size'>",required:false,description:"Additional props for secondary button"},{name:"actions",type:"ReactNode",required:false,description:"Additional actions to render in Modal's footer"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<ModalWindow {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ModalWindow/ModalWindow.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=16382-40936",keywords:["modalwindow","modal","window","component","used","custom","implementations","modals","refer","more","examples"]},{name:"OffsetWellsButton",modulePath:"componentsV2/OffsetWellsButton",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"OffsetWellsButton",specifier:"@corva/ui/componentsV2",exportName:"OffsetWellsButton"},category:"v2",description:"\nA modern button component for managing offset wells in drilling applications. \nDisplays well count, provides edit functionality, and supports expand/collapse behavior for well lists.\n\n**Key Features:**\n- Well count display with customizable label\n- Edit button with tooltip\n- Expandable/collapsible behavior for well lists\n- Limitations warning indicator\n- Disabled state support\n- Tooltip management options\n  ",agentSummary:"Offset wells count button with edit tooltip, expand chevron and limitations warning. Button only, renders no list or modal; CompletionsOffsetWellPicker embeds it as its trigger.",isExperimental:true,isDeprecated:false,props:[{name:"wells",type:"OffsetWell[] | number",required:false,description:""},{name:"onClick",type:"MouseEventHandler",required:false,description:""},{name:"expanded",type:"boolean",required:false,description:"Whether the wells list is currently expanded"},{name:"onExpand",type:"(expanded: boolean, event: MouseEvent<HTMLButtonElement>) => void",required:false,description:"Callback fired when expand/collapse button is clicked"},{name:"showLimitationsMessage",type:"boolean",required:false,description:"Shows info icon with limitations warning tooltip"},{name:"label",type:"ReactNode",required:false,description:"Custom label for the button (defaults to \"Offset Wells\")"},{name:"disabled",type:"boolean",required:false,description:"Disables all interactions with the component"},{name:"isExpandTooltipDisabled",type:"boolean",required:false,description:"Disables tooltips on expand/collapse button"},{name:"tooltipTitle",type:"string",required:false,description:"Custom text for the edit tooltip (defaults to 'Edit Offset Wells')"},{name:"forceExpandButton",type:"boolean",required:false,description:"Force showing expand icon even when wells === 0"},{name:"icon",type:"ReactElement | null",required:false,description:"Icon to display in the button (defaults to Well icon)"},{name:"className",type:"string",required:false,description:"Additional CSS class name"},{name:"testId",type:"string",required:false,description:"Test ID for the main button"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [expanded, setExpanded] = useState(props.expanded || false);\n\n  return (\n    <OffsetWellsButton\n      {...props}\n      expanded={expanded}\n      onExpand={(newExpanded, ...rest) => {\n        setExpanded(newExpanded);\n        props.onExpand?.(newExpanded, ...rest);\n      }}\n      onClick={props.onClick}\n    />\n  );\n}"},{name:"ExpandCollapse",description:"Expand chevron/clickable area is controlled by the `onExpand` prop.",code:"{\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <SbColumn>\n      <Text size={12} tagName=\"div\" color=\"T8\">\n        Currently: {expanded ? 'Expanded' : 'Collapsed'}\n      </Text>\n      <OffsetWellsButton\n        wells={[]}\n        forceExpandButton\n        expanded={expanded}\n        onClick={noop}\n        onExpand={setExpanded}\n      />\n      <OffsetWellsButton wells={mockWells(6)} onClick={noop} expanded={expanded} />\n    </SbColumn>\n  );\n}"},{name:"WellCounts",description:"Component shows its expand button if `wells` prop has a \"non-empty\" value",code:"<SbColumn>\n    <OffsetWellsButton wells={mockWells(3)} onClick={noop} onExpand={noop} />\n    <OffsetWellsButton wells={[]} onClick={noop} />\n  </SbColumn>"},{name:"CustomLabels",description:"You can pass custom label as a string or a `ReactNode` (useful for responsivity). \n\nComponent will add colon to label automatically if a string is passed",code:"<SbColumn>\n    <OffsetWellsButton wells={mockWells(5)} onClick={noop} onExpand={noop} />\n    <OffsetWellsButton wells={mockWells(3)} label=\"Parent Wells\" onClick={noop} onExpand={noop} />\n    <OffsetWellsButton wells={mockWells(2)} label=\"\" onClick={noop} onExpand={noop} />\n    <OffsetWellsButton\n      wells={mockWells(2)}\n      label={\n        <SbPlaceholder style={{ display: 'inline-block', width: 'auto', padding: '0 8px' }}>\n          Label:\n        </SbPlaceholder>\n      }\n      onClick={noop}\n      onExpand={noop}\n    />\n  </SbColumn>"},{name:"Icons",description:"You can pass a custom icon using the `icon` prop",code:"<OffsetWellsButton\n    wells={mockWells(4)}\n    icon={<Global size={20} />}\n    onClick={noop}\n    onExpand={noop}\n  />"},{name:"LimitationsMessage",description:"You can show the limitations warning indicator by providing the `showLimitationsMessage` prop.",code:"<OffsetWellsButton wells={mockWells(8)} onClick={noop} onExpand={noop} showLimitationsMessage />"},{name:"Tooltips",description:"You can disable expand/collapse tooltips by using the `isExpandTooltipDisabled` prop",code:"<OffsetWellsButton wells={mockWells(5)} onClick={noop} onExpand={noop} isExpandTooltipDisabled />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/OffsetWellsButton/OffsetWellsButton.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=133682-1140",keywords:["offsetwellsbutton","modern","button","component","managing","offset","wells","drilling","applications","displays","well"]},{name:"PadModeSelect",modulePath:"componentsV2/PadModeSelect",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"PadModeSelect",specifier:"@corva/ui/componentsV2",exportName:"PadModeSelect"},category:"v2",description:"Pad mode selection component. Needs App Commons context to work",isExperimental:true,isDeprecated:false,props:[{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Wrapper>\n    <PadModeSelect {...props} />\n  </Wrapper>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/PadModeSelect/PadModeSelect.tsx",keywords:["padmodeselect","mode","selection","component","needs","commons","context","work"]},{name:"Paper",modulePath:"componentsV2/Paper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Paper",specifier:"@corva/ui/componentsV2",exportName:"Paper"},category:"v2",description:"A low-level component that serves as a container for cards, popovers, modals, etc",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component contents"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"type",type:"'popover' | 'menu'",required:false,description:"Controls paper's background depending on application",enumValues:["popover","menu"]},{name:"style",type:"CSSProperties",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Paper {...props} />"},{name:"Types",description:"Depending on the application (popover with arbitrary content or a dropdown menu with selectable items) you may need different backgrounds. You can control that by using the `type` prop:\n\n- `popover` (default) used for popovers with arbitrary content (info panels, blocks with settings, etc)\n- `menu` used for dropdown menus (actions, autocompletes, etc)",code:"<SbColumn alignItems=\"stretch\">\n    <Paper type=\"popover\">\n      <SbPlaceholder style={{ height: '200px' }}>Popover</SbPlaceholder>\n    </Paper>\n    <Paper type=\"menu\">\n      <SbPlaceholder style={{ height: '200px' }}>Menu</SbPlaceholder>\n    </Paper>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Paper/Paper.tsx",keywords:["paper","card","container","panel","surface","low-level","component","serves","cards","popovers","modals"]},{name:"Popover",modulePath:"componentsV2/Popover",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Popover",specifier:"@corva/ui/componentsV2",exportName:"Popover"},category:"v2",description:"A low-level component for creating popovers with a backdrop. Provides very little own styling by default",isExperimental:true,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"anchorEl",type:"PopperProps['anchorEl']",required:false,description:"A HTML element, a function that returns it, or a virtual element exposing\n`getBoundingClientRect` (to anchor at a point). Sets the position of the popover."},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey') => void",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""},{name:"backdrop",type:"boolean",required:false,description:"Determines if backdrop should be rendered"},{name:"preventScroll",type:"boolean",required:false,description:"Prevents scroll when open"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"preventOverflow",type:"boolean",required:false,description:"Controls if Popover should stay inside its constraining element"},{name:"flip",type:"boolean",required:false,description:"Controls if Popover should flip to opposite side if there's no space to fit it"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`."},{name:"animate",type:"boolean",required:false,description:"Controls whether popover should animate itself"},{name:"style",type:"CSSProperties",required:false,description:"Escape hatch for when you need to pass dimensions/additional styles from JS"},{name:"type",type:"PaperProps['type']",required:false,description:"Controls paper's background depending on application: `menu` should be used for dropdown menus (with selectable options as opposed to arbitrary content)"},{name:"className",type:"string",required:false,description:""},{name:"popperClassName",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <SbPlaceholder style={{ display: 'inline-block', width: 'auto' }}>\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open Popover\n        </Button>\n      </SbPlaceholder>\n      <Popover\n        {...props}\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      />\n    </>\n  );\n}"},{name:"Types",description:"Depending on the application (popover with arbitrary content or a dropdown menu with selectable items) you may need different backgrounds. You can control that by using the `type` prop:\n\n- `popover` (default) used for popovers with arbitrary content (info panels, blocks with settings, etc)\n- `menu` used for dropdown menus (actions, autocompletes, etc)",code:"{\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n\n  const popoverAnchorRef = useRef<HTMLButtonElement>(null);\n  const menuAnchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <SbColumn>\n      <Button size=\"small\" onClick={() => setIsPopoverOpen(true)} ref={popoverAnchorRef}>\n        Popover\n      </Button>\n\n      <Button size=\"small\" onClick={() => setIsMenuOpen(true)} ref={menuAnchorRef}>\n        Menu\n      </Button>\n\n      <Popover\n        onClose={() => setIsPopoverOpen(false)}\n        anchorEl={popoverAnchorRef.current}\n        open={isPopoverOpen}\n        type=\"popover\"\n      >\n        <SbPlaceholder style={{ width: '200px', height: '200px' }}>Popover</SbPlaceholder>\n      </Popover>\n\n      <Popover\n        onClose={() => setIsMenuOpen(false)}\n        anchorEl={menuAnchorRef.current}\n        open={isMenuOpen}\n        type=\"menu\"\n      >\n        <SbPlaceholder style={{ width: '200px', height: '200px' }}>Menu</SbPlaceholder>\n      </Popover>\n    </SbColumn>\n  );\n}"},{name:"Placement",description:"Component supports different placements. Opening animation varies slightly for each of them",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const [placement, setPlacement] = useState<Required<Props>['placement']>(placements[0]);\n\n  const options = placements.map(id => ({\n    id,\n    title: id,\n  }));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div style={{ width: '200px' }}>\n        <Autocomplete\n          label=\"Placement\"\n          value={placement}\n          onChange={value => value?.id && setPlacement(value?.id)}\n          options={options}\n          clearable={false}\n        />\n      </div>\n\n      <div\n        style={{ height: '300px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}\n      >\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open Popover\n        </Button>\n      </div>\n\n      <Popover\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        placement={placement}\n      >\n        <div style={{ padding: '40px 20px' }}>Popover content goes here</div>\n      </Popover>\n    </SbColumn>\n  );\n}"},{name:"CloseVectors",description:"You can control the vectors through which user can close popover by using the following props:\n\n- `closeOnBackdropClick`: controls if popover should close when user clicks on backdrop\n- `closeOnEscape`: controls if popover should close when user presses the `Escape` key",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <SbPlaceholder style={{ display: 'inline-block', width: 'auto' }}>\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open Popover\n        </Button>\n      </SbPlaceholder>\n\n      <Popover\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        // This will never be called\n        onClose={() => setIsOpen(false)}\n        closeOnBackdropClick={false}\n        closeOnEscape={false}\n      >\n        <SbColumn>\n          This popover can not be closed by pressing <Hotkey keys=\"Esc\" /> key or clicking on the\n          backdrop.\n          <Button onClick={() => setIsOpen(false)}>Close</Button>\n        </SbColumn>\n      </Popover>\n    </>\n  );\n}"},{name:"OpenOnHover",description:"This example illustrates Popover operation on hover. Note that `backdrop` prop is used to omit backdrop rendering.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const closeTimerRef = useRef<NodeJS.Timeout>();\n  const toggleRef = useRef<HTMLButtonElement>(null);\n\n  const onMouseEnter = () => {\n    clearTimeout(closeTimerRef.current);\n    setIsOpen(true);\n  };\n\n  const onMouseLeave = () => {\n    clearTimeout(closeTimerRef.current);\n    closeTimerRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 500);\n  };\n\n  return (\n    <>\n      <Button ref={toggleRef} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n        Hover me!\n      </Button>\n\n      <Popover\n        open={isOpen}\n        anchorEl={toggleRef.current}\n        backdrop={false}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        Content\n      </Popover>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Popover/Popover.tsx",keywords:["popover","popup","overlay","floating","hover","low-level","component","creating","popovers","backdrop","provides","very","little","styling","default"]},{name:"PopoverPanel",modulePath:"componentsV2/PopoverPanel",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"PopoverPanel",specifier:"@corva/ui/componentsV2",exportName:"PopoverPanel"},category:"v2",description:"A component for creating general-purpose popovers. Provides necessary styling & structural components:\n\n`PopoverPanel.Header`, `PopoverPanel.Content`, `PopoverPanel.Footer`, and `PopoverPanel.Divider`\n\nAccepts same props as `Popover`",agentSummary:"Popover with panel structure: Header with close button and actions, scrollable Content, sticky Footer, Divider. Same props as V2 Popover; use Menu for item lists.",isExperimental:true,isDeprecated:false,props:[{name:"open",type:"boolean",required:true,description:""},{name:"placement",type:"PopperProps['placement']",required:false,description:""},{name:"anchorEl",type:"PopperProps['anchorEl']",required:false,description:"A HTML element, a function that returns it, or a virtual element exposing\n`getBoundingClientRect` (to anchor at a point). Sets the position of the popover."},{name:"children",type:"ReactNode",required:false,description:"The content of the component."},{name:"onClose",type:"(reason: 'backdropClick' | 'escapeKey') => void",required:false,description:""},{name:"closeOnBackdropClick",type:"boolean",required:false,description:""},{name:"closeOnEscape",type:"boolean",required:false,description:""},{name:"backdrop",type:"boolean",required:false,description:"Determines if backdrop should be rendered"},{name:"preventScroll",type:"boolean",required:false,description:"Prevents scroll when open"},{name:"onMouseEnter",type:"MouseEventHandler",required:false,description:""},{name:"onMouseLeave",type:"MouseEventHandler",required:false,description:""},{name:"preventOverflow",type:"boolean",required:false,description:"Controls if Popover should stay inside its constraining element"},{name:"flip",type:"boolean",required:false,description:"Controls if Popover should flip to opposite side if there's no space to fit it"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`."},{name:"animate",type:"boolean",required:false,description:"Controls whether popover should animate itself"},{name:"style",type:"CSSProperties",required:false,description:"Escape hatch for when you need to pass dimensions/additional styles from JS"},{name:"type",type:"PaperProps['type']",required:false,description:"Controls paper's background depending on application: `menu` should be used for dropdown menus (with selectable options as opposed to arbitrary content)"},{name:"className",type:"string",required:false,description:""},{name:"popperClassName",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  return (\n    <>\n      <SbPlaceholder style={{ display: 'inline-block', width: 'auto' }}>\n        <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n          Open PopoverPanel\n        </Button>\n      </SbPlaceholder>\n      <PopoverPanel\n        {...props}\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={(...args) => {\n          props.onClose?.(...args);\n          setIsOpen(false);\n        }}\n      >\n        <PopoverPanel.Content>Content</PopoverPanel.Content>\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"Subcomponents",description:"PopoverPanel ships with a set of subcomponents that cover most layout needs:\n\n- `PopoverPanel.Header` renders a header.\n- `PopoverPanel.Content` renders a scrollable content area.\n- `PopoverPanel.Footer` renders a sticky footer.\n- `PopoverPanel.Divider` renders a separator that can be used both inside and between content blocks. Please note, the divider has own margins when used inside `PopoverPanel.Content`",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const [tallContent, setTallContent] = useState(false);\n  const [fixedHeight, setFixedHeight] = useState(false);\n  const [headerLongText, setHeaderLongText] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={classNames(styles.withWidth, fixedHeight && styles.withHeight)}\n      >\n        <PopoverPanel.Header onClose={() => setIsOpen(false)}>\n          {headerLongText ? longHeaderText : headerShortText}\n        </PopoverPanel.Header>\n        <PopoverPanel.Content>\n          <Switch\n            size=\"small\"\n            onLabel=\"Long header content\"\n            checked={headerLongText}\n            onChange={setHeaderLongText}\n          />\n          <PopoverPanel.Divider margin=\"medium\" />\n          <Switch\n            size=\"small\"\n            onLabel=\"Fixed popover height\"\n            checked={fixedHeight}\n            onChange={setFixedHeight}\n          />\n          <PopoverPanel.Divider margin=\"medium\" />\n          <Switch\n            size=\"small\"\n            onLabel=\"Tall content\"\n            checked={tallContent}\n            onChange={setTallContent}\n          />\n\n          {tallContent && (\n            <>\n              <PopoverPanel.Divider margin=\"medium\" />\n              <SbPlaceholder className={styles.tallContent}>Tall content</SbPlaceholder>\n            </>\n          )}\n        </PopoverPanel.Content>\n\n        <PopoverPanel.Footer>\n          <SbPlaceholder style={{ height: '50px' }}>Footer</SbPlaceholder>\n        </PopoverPanel.Footer>\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"AdditionalControlsInHeader",description:"Use `actions` prop of `PopoverPanel.Header` to render extra controls before the close button.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={styles.withWidth}\n      >\n        <PopoverPanel.Header\n          onClose={() => setIsOpen(false)}\n          actions={\n            <>\n              <ButtonIcon size=\"small\">\n                <LockIcon />\n              </ButtonIcon>\n\n              <ButtonIcon size=\"small\">\n                <LocalPinIcon />\n              </ButtonIcon>\n            </>\n          }\n        >\n          Header{' '}\n          <Chip size=\"small\" state=\"success\">\n            Chip\n          </Chip>\n        </PopoverPanel.Header>\n        <PopoverPanel.Content>Content</PopoverPanel.Content>\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"NoHeaderOrFooter",description:"`PopoverPanel.Content` automatically adjusts its vertical paddings when header and/or footer are absent.",code:"{\n  const [hasHeader, setHasHeader] = useState(false);\n  const [hasFooter, setHasFooter] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={styles.withWidth}\n      >\n        {hasHeader && <PopoverPanel.Header>Header</PopoverPanel.Header>}\n        <PopoverPanel.Content>\n          <SbColumn alignItems=\"stretch\">\n            <Switch size=\"small\" onLabel=\"Header\" checked={hasHeader} onChange={setHasHeader} />\n            <Switch size=\"small\" onLabel=\"Footer\" checked={hasFooter} onChange={setHasFooter} />\n          </SbColumn>\n        </PopoverPanel.Content>\n        {hasFooter && <PopoverPanel.Footer>Footer</PopoverPanel.Footer>}\n      </PopoverPanel>\n    </>\n  );\n}"},{name:"OnlyHeaderAndFooter",description:"`PopoverPanel.Header` and `PopoverPanel.Footer` position themselves automatically, you can use your own implementation of content if you need to.",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n\n  return (\n    <>\n      <Button onClick={() => setIsOpen(true)} ref={anchorRef}>\n        Open PopoverPanel\n      </Button>\n\n      <PopoverPanel\n        open={isOpen}\n        anchorEl={anchorRef.current}\n        onClose={() => setIsOpen(false)}\n        className={classNames(styles.withWidth, styles.withHeight)}\n      >\n        <PopoverPanel.Header onClose={() => setIsOpen(false)}>Header</PopoverPanel.Header>\n\n        <SbPlaceholder style={{ height: '50px' }}>\n          Custom content\n          <br />\n          (not PopoverPanel.Content)\n        </SbPlaceholder>\n\n        <PopoverPanel.Footer>\n          <SbPlaceholder style={{ height: '50px' }}>Footer</SbPlaceholder>\n        </PopoverPanel.Footer>\n      </PopoverPanel>\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/PopoverPanel/PopoverPanel.tsx",keywords:["popoverpanel","component","creating","general-purpose","popovers","provides","necessary","styling","structural","components"]},{name:"Popper",modulePath:"componentsV2/Popper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Popper",specifier:"@corva/ui/componentsV2",exportName:"Popper"},category:"v2",description:"A low-level component for displaying popups, tooltips, etc. You will most likely need `<Popover/>`, `<Menu/>` or `<Tooltip/>`",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode | ((props: {\n        placement: MuiPopperPlacementType;\n        TransitionProps?: TransitionProps;\n      }) => ReactNode)",required:true,description:"Contents of the popover"},{name:"open",type:"boolean",required:true,description:""},{name:"anchorEl",type:"AnchorEl | (() => AnchorEl) | null",required:false,description:"Defines an HTML node to which the content will be positioned"},{name:"placement",type:"'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'",required:false,description:"Defines placement",enumValues:["bottom-end","bottom-start","bottom","left-end","left-start","left","right-end","right-start","right","top-end","top-start","top"]},{name:"modifiers",type:"object",required:false,description:"Popper's modifiers. See [documentation](https://popper.js.org/docs/v1/#modifiers)"},{name:"container",type:"HTMLElement",required:false,description:"Element where Popper will mount.\n\nDefaults to the closest ancestor `Modal` root (if `anchorEl` is inside one), falling back to\n`document.body`. Does not open \"pseudo-fullscreen\" for an isolated app if passed."},{name:"transition",type:"boolean",required:false,description:"Help supporting a react-transition-group/Transition component"},{name:"className",type:"string",required:false,description:""},{name:"popperRef",type:"Ref<PopperJs>",required:false,description:"Ref to popper object. Use `scheduleUpdate` method for performant reposition/recalculation as per [docs](https://popper.js.org/docs/v1/#popperscheduleupdate)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [anchorEl, setAnchorEl] = useState<HTMLElement>();\n  return (\n    <>\n      <Button onClick={e => setAnchorEl(anchorEl ? undefined : e.currentTarget)}>\n        Toggle Open\n      </Button>\n      <Popper {...props} open={!!anchorEl} anchorEl={anchorEl} />\n    </>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Popper/Popper.tsx",keywords:["popper","floating","positioned","overlay","popup","low-level","component","displaying","popups","tooltips","will","most","likely","need","popover"]},{name:"Radio",modulePath:"componentsV2/Radio",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Radio",specifier:"@corva/ui/componentsV2",exportName:"Radio"},category:"v2",description:"Radio buttons allow the user to select one option from a set. In 90% of cases you'll want to use `<RadioGroup />`",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"labelPlacement",type:"'top' | 'bottom' | 'start' | 'end'",required:false,description:"Controls whee the label will be placed",enumValues:["top","bottom","start","end"]},{name:"label",type:"ReactNode",required:false,description:"Label"},{name:"disabled",type:"boolean",required:false,description:""},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"onChange",type:"(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:"Called when a radio is checked. Is _not_ called when radio is unchecked."}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Radio {...props} />"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Radio size=\"medium\" label=\"Label\" />\n    <Radio size=\"small\" label=\"Label\" />\n  </SbColumn>"},{name:"LabelPlacementAndMargins",description:"Component supports different label positions relative to the radio. This is controlled through the `labelPlacement` prop\n\n- `end` (default): to the right\n- `start`: to the left. Use `text-align: right;` on the container for best results\n- `top`\n- `bottom`\n\nNote that the radio's active area is slightly shifted from the container",code:"<SbColumn alignItems=\"start\">\n    <SbPlaceholder style={{ ...styleProp, textAlign: 'right' }}>\n      <Radio label=\"start\" labelPlacement=\"start\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Radio label=\"end\" labelPlacement=\"end\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Radio label=\"top\" labelPlacement=\"top\" />\n    </SbPlaceholder>\n    <SbPlaceholder style={styleProp}>\n      <Radio label=\"bottom\" labelPlacement=\"bottom\" />\n    </SbPlaceholder>\n  </SbColumn>"},{name:"InteractiveExample",description:"An interactive example. Note that the `onChange` _is not_ called when radio becomes unchecked",code:"{\n  const [value, setValue] = useState<'one' | 'other'>();\n\n  return (\n    <SbRow>\n      <Radio label=\"One\" checked={value === 'one'} onChange={() => setValue('one')} />\n      <Radio label=\"Other\" checked={value === 'other'} onChange={() => setValue('other')} />\n    </SbRow>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Radio/Radio.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699-1638",keywords:["radio","choice","option","select","group","buttons","allow","user","cases","want","radiogroup"]},{name:"RadioAndCheckboxGroup",modulePath:"componentsV2/RadioAndCheckboxGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"RadioAndCheckboxGroup",specifier:"@corva/ui/componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup",form:"named",exportName:"RadioAndCheckboxGroup"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"component",type:"ComponentType<InputComponentProps>",required:true,description:""},{name:"getOnChangeHandler",type:"(optionValue: T, value?: V | undefined) => InputComponentProps['onChange']",required:true,description:""},{name:"getOptionChecked",type:"(optionValue: T, value?: V | undefined) => boolean",required:true,description:""},{name:"value",type:"V",required:false,description:""},{name:"options",type:"{ value: T; label: ReactNode; }[]",required:false,description:"Array of values and their labels"},{name:"label",type:"ReactNode",required:false,description:"Group label"},{name:"message",type:"ReactNode",required:false,description:""},{name:"status",type:"'error'",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"spacing",type:"'dense' | 'normal'",required:false,description:"controls spacing between options",enumValues:["dense","normal"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/RadioAndCheckboxGroup/RadioAndCheckboxGroup.tsx",keywords:["radioandcheckboxgroup"]},{name:"RadioAndCheckboxLabel",modulePath:"componentsV2/RadioAndCheckboxLabel",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"RadioAndCheckboxLabel",specifier:"@corva/ui/componentsV2/RadioAndCheckboxLabel/RadioAndCheckboxLabel",form:"named",exportName:"RadioAndCheckboxLabel"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"control",type:"ReactElement",required:true,description:"Control to show"},{name:"label",type:"ReactNode",required:false,description:"Label"},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"disabled",type:"boolean",required:false,description:""},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"onChange",type:"(event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"labelPlacement",type:"'top' | 'bottom' | 'start' | 'end'",required:false,description:"Controls whee the label will be placed",enumValues:["top","bottom","start","end"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/RadioAndCheckboxLabel/RadioAndCheckboxLabel.tsx",keywords:["radioandcheckboxlabel"]},{name:"RadioGroup",modulePath:"componentsV2/RadioGroup",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"RadioGroup",specifier:"@corva/ui/componentsV2",exportName:"RadioGroup"},category:"v2",description:"Radio buttons allow the user to select one option from a set. Works with almost any type of `value`",isExperimental:true,isDeprecated:false,props:[{name:"value",type:"T",required:false,description:"Selected value"},{name:"onChange",type:"(value: T, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"options",type:"{ value: T; label: ReactNode; }[]",required:false,description:"Array of values and their labels"},{name:"label",type:"ReactNode",required:false,description:"Group label"},{name:"status",type:"'error'",required:false,description:""},{name:"message",type:"ReactNode",required:false,description:""},{name:"spacing",type:"'dense' | 'normal'",required:false,description:"controls spacing between options",enumValues:["dense","normal"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<string>(options[0].value);\n  return (\n    <RadioGroup\n      {...props}\n      options={options}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 2 sizes, controlled through `size` prop:\n\n- `medium` (default)\n- `small`",code:"<SbRow>\n    <RadioGroup label=\"Size: medium\" options={options} value={options[0].value} size=\"medium\" />\n    <RadioGroup label=\"Size: small\" options={options} value={options[0].value} size=\"small\" />\n  </SbRow>"},{name:"Spacing",description:"Component supports 2 spacing options, controlled through `spacing` prop:\n\n- `normal` (default)\n- `dense`",code:"<SbRow>\n    <RadioGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={options[0].value}\n      spacing=\"normal\"\n    />\n    <RadioGroup label=\"Spacing: dense\" options={options} value={options[0].value} spacing=\"dense\" />\n  </SbRow>"},{name:"Horisontal",description:"Radios can be displayed in a row by using the `direction` prop which can receive the following options:\n\n- `vertical` (default)\n- `horizontal`",code:"<SbRow>\n    <RadioGroup\n      label=\"Spacing: normal\"\n      options={options}\n      value={options[0].value}\n      spacing=\"normal\"\n      direction=\"horizontal\"\n    />\n    <RadioGroup\n      label=\"Spacing: dense\"\n      options={options}\n      value={options[0].value}\n      spacing=\"dense\"\n      direction=\"horizontal\"\n    />\n  </SbRow>"},{name:"NonScalarValues",description:"`<RadioGroup />` can work with any type of options `value`, which is represented in component types. You can either define the type explicitly or rely on inferred typings\n\nOption comparison is done with strict equality (`===`)",code:"{\n  // Option's `value` is an object\n  const complexOptions = useMemo(\n    () =>\n      options.map(({ label }) => ({\n        label,\n        value: { randomId: Math.round(Math.random() * 1000), name: label },\n      })),\n    []\n  );\n  const [value, setValue] = useState(complexOptions[0].value);\n\n  return (\n    <SbColumn>\n      <RadioGroup\n        options={complexOptions}\n        value={value}\n        onChange={value => setValue(value)}\n        message={`Value: ${JSON.stringify(value)}`}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/RadioGroup/RadioGroup.tsx",keywords:["radiogroup","radio","buttons","allow","user","select","option","works","almost","type","value"]},{name:"Select",modulePath:"componentsV2/Select",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Select",specifier:"@corva/ui/componentsV2",exportName:"Select"},category:"v2",description:"A select component.\n\nProvides generic `SelectProps<OptionType, Multiple>` and `SelectChangeHandler<OptionType, Multiple>` types to simplify typing:\n\n```ts\nconst handler = useCallback<SelectChangeHandler<Option>>(/* snip */); // For single select (default)\nconst handler = useCallback<SelectChangeHandler<Option, true>>(/* snip */); // For multi select\n\n```\n\nYou can see usage examples in stories below.\n\nUse `label` for a visible accessible name. If a visible label is not appropriate, pass `aria-label` or `aria-labelledby` through `htmlAttributes`.",agentSummary:"Plain dropdown over id/title options: AutocompleteNext with typing disabled, no search, filtering or onCreate. Takes options and value, unlike the MenuItem-children V1 Select.",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"TextInputNextProps['size']",required:false,description:""},{name:"labelPlacement",type:"TextInputNextProps['labelPlacement']",required:false,description:""},{name:"elementsClassNames",type:"TextInputNextProps['elementsClassNames']",required:false,description:"Escape hatch to fine-tune the styling of underlying elements"},{name:"htmlAttributes",type:"TextInputNextProps['htmlAttributes']",required:false,description:"HTML attributes forwarded to the underlying input."},{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 false | undefined ? 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:"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:"status",type:"TextInputNextProps['status']",required:false,description:""},{name:"message",type:"TextInputNextProps['message']",required:false,description:""},{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:"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:"useOnlyOptionButton",type:"boolean",required:false,description:"If `multiple === true` shows a \"Select Only\" button on option that selects only the corresponding option"},{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:"popperProps",type:"Partial<AutocompletePopperProps>",required:false,description:"Escape hatch to customize dropdown popper behavior.\n`open`, `anchorEl`, and `children` are controlled internally."},{name:"onOpen",type:"() => void",required:false,description:"Called when the dropdown is opened"},{name:"onClose",type:"(reason: MuiAutocompleteCloseReason) => void",required:false,description:"Called when the dropdown is closed"},{name:"listboxComponent",type:"ComponentType<HTMLAttributes<HTMLElement>>",required:false,description:"Custom listbox component for rendering options (e.g., virtualized list)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<number[]>([]);\n\n  return (\n    <Select\n      {...props}\n      options={options}\n      value={value}\n      onChange={(newValue, reason, event) => {\n        props.onChange?.(newValue as never, reason, event);\n        // These type castings is generally not needed, Autocomplete will determine its type based on `multiple` prop\n        // Which generally should be statically analyzable\n        if (newValue instanceof Array) {\n          setValue((newValue as Option[]).map(({ id }) => id));\n        } else if (newValue) {\n          setValue([(newValue as Option)?.id]);\n        }\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop, inherited from `<TextInput/>`:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select {...commonProps} label=\"Small\" size=\"small\" />\n      <Select {...commonProps} label=\"Medium\" size=\"medium\" />\n      <Select {...commonProps} label=\"Large\" size=\"large\" />\n    </SbColumn>\n  );\n}"},{name:"LabelPlacement",description:"Component supports 3 label placement options through a `labelPlacement` prop, inherited from `<TextInput/>`:\n\n- `top` (default)\n- `start`\n- `end`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select {...commonProps} label=\"Label at the top\" labelPlacement=\"top\" />\n      <Select {...commonProps} label=\"Label at the start\" labelPlacement=\"start\" />\n      <Select {...commonProps} label=\"Label at the end\" labelPlacement=\"end\" />\n    </SbColumn>\n  );\n}"},{name:"OptionsSize",description:"Component supports several option sizes, controlled through `optionSize` prop:\n\n- `medium` (default)\n- `large`",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Medium options\"\n        optionSize=\"medium\"\n      />\n      <Select\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Large options\"\n        optionSize=\"large\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Single",description:"Single-option is the default behaviour.",code:"{\n  const [value, setValue] = useState<number>();\n\n  const onChange = useCallback<SelectChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return <Select options={options} value={value} onChange={onChange} label=\"Single\" />;\n}"},{name:"WithObjectsAsValue",description:"You can use objects in `value` prop.\n\n⚠️ Be wary of mixing `T`s and `T['id']`s in `value`: due to [TS bug](https://github.com/microsoft/TypeScript/issues/47599) you may need to provide additional typing to `onChange`",code:"{\n  const [valueSingle, setValueSingle] = useState<Option | undefined>(options[2]);\n  const [valueMultiple, setValueMultiple] = useState<(Option | number)[]>([\n    options[0],\n    options[2],\n    9,\n  ]);\n  const [valueMultiple2, setValueMultiple2] = useState<Option[]>([options[0], options[2]]);\n\n  // There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\n  // to have incorrect typing if we mix T and T['id'] in `value`.\n  const onMultipleChange = useCallback<SelectChangeHandler<Option, true>>(\n    v => setValueMultiple(v),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        value={valueSingle}\n        onChange={setValueSingle}\n        label=\"With objects as value (single)\"\n      />\n\n      <Select\n        multiple\n        options={options}\n        value={valueMultiple}\n        onChange={onMultipleChange}\n        label=\"With objects as value (multiple, mixed objects and ids)\"\n      />\n\n      <Select\n        multiple\n        options={options}\n        value={valueMultiple2}\n        onChange={setValueMultiple2}\n        label=\"With objects as value (multiple, pure)\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Multiple",description:"Pass `multiple` prop to make component be able to select multiple values.\n\nUse `useAllOption` prop to add a special \"All\" option that allows user to quickly select all options.",code:"{\n  const [value, setValue] = useState<number[]>([1]);\n\n  const onChange = useCallback<SelectChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select multiple options={options} value={value} onChange={onChange} label=\"Multiple\" />\n      <Select\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" option'}\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"MultipleWithCustomSelectedRender",description:"Use `renderSelected` prop to customize how the selected values are rendered.\n\nBy default the component displays the selected item's title, \"X Selected\", or \"All\", depending on its value. It is provided as `Select.selectedValueRenderers.default`.\n\nYou can use the \"Multiline Chips\" renderer, provided as `Select.selectedValueRenderers.chipsMultiline`",code:"{\n  const [value, setValue] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  const onChange = useCallback<SelectChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        multiple\n        options={options}\n        value={options}\n        onChange={() => {}}\n        label=\"Default multiple - all selected\"\n      />\n      <Select\n        multiple\n        options={options}\n        value={[1, 2, 3]}\n        onChange={() => {}}\n        label=\"Default multiple - some selected\"\n      />\n      <Select\n        multiple\n        options={options}\n        value={[1]}\n        onChange={() => {}}\n        label=\"Default multiple - one selected\"\n      />\n      <Select\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with chips\"\n        renderSelected={Select.selectedValueRenderers.chipsMultiline}\n      />\n      <Select\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with custom value render\"\n        renderSelected={data => {\n          if (data.length === 0) {\n            return null;\n          }\n\n          return (\n            <>\n              <Chip\n                onDelete={data[0].onDelete}\n                size=\"small\"\n                shape=\"square\"\n                className={styles.customChip}\n              >\n                {data[0].option.title}\n              </Chip>\n              {data.length > 1 && ` +${data.length - 1}`}\n            </>\n          );\n        }}\n      />\n    </SbColumn>\n  );\n}"},{name:"Empty",description:"Use `noOptionsMessage` option to customize the message that is shown when there are no options to select",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select label=\"Empty\" onChange={() => {}} />\n      <Select\n        label=\"Empty with custom empty message\"\n        noOptionsMessage={<u>Nobody here but us chickens</u>}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Loading",description:"Use `loading` prop to indicate that some data is being loaded. Note that if there are no options, a custom message will be shown",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Loading State\"\n        loading\n      />\n\n      <Select\n        options={options.slice(0, 0)}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Empty Loading State\"\n        loading\n      />\n    </SbColumn>\n  );\n}"},{name:"OptionPrefix",description:"To display an icon/prefix to the left of the option, pass it as a `prefix` property of the option",code:"{\n  const icons = [SearchOne, BroadcastIcon, LineChartIcon, AdjustmentIcon];\n  const optionsWithPrefix = options.slice(0, 4).map((option, index) => {\n    const Icon = icons[index];\n    return { ...option, prefix: <Icon /> };\n  });\n  const [valueArr, setValueArr] = useState<number[]>();\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={optionsWithPrefix}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Single\"\n      />\n      <Select\n        multiple\n        options={optionsWithPrefix}\n        value={valueArr}\n        onChange={value => setValueArr(value?.map(({ id }) => id))}\n        label=\"Multiple\"\n      />\n    </SbColumn>\n  );\n}"},{name:"CustomOptionRender",description:"You can control how the option renders by providing the `renderOption` prop.\n\nNote that in this case, you will need to wrap the texts in `<TextMiddleTruncated/>` or `<TextEndTruncated/>`",code:"{\n  return (\n    <Select\n      options={options}\n      label=\"Custom Option Render\"\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"Disabled",description:"You can control which options are disabled by providing the `getOptionDisabled` prop",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <Select\n      label=\"With disabled options\"\n      options={options}\n      value={value}\n      onChange={option => setValue(option?.id)}\n      getOptionDisabled={option => option.group === 'Great Old Ones'}\n    />\n  );\n}"},{name:"Prefix",description:"You can add a prefix to the component through `prefix` prop.",code:"{\n  return (\n    <Select\n      options={options}\n      label=\"With Prefix\"\n      prefix={<SearchOne />}\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"PopupIconAndClearButton",description:"You can control the existence of \"Clear\" button and \"Popup Icon\" by using `clearable` and `showPopupIcon` props respectively",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        label=\"Default: Clearable, Popup Icon\"\n        value={1}\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label=\"Not Clearable\"\n        value={1}\n        clearable={false}\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label=\"No Popup Icon\"\n        value={1}\n        showPopupIcon={false}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Error",description:"To display the component in an error state, use the `status` prop. You can add a message with a `message` prop",code:"{\n  return (\n    <Select\n      options={options}\n      label=\"With Error\"\n      status=\"error\"\n      message=\"Some error message\"\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"WithGroups",description:"You can group options by providing the `groupBy` prop.\n\nYou can control the render of groups by providing the `renderGroup` prop.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Select\n        options={options}\n        label=\"With Groups\"\n        value={1}\n        groupBy={option => option.group}\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label={'With Groups, multiselect with \"All\" option'}\n        value={[1]}\n        groupBy={option => option.group}\n        multiple\n        useAllOption\n        onChange={() => {}}\n      />\n      <Select\n        options={options}\n        label=\"With Custom Groups\"\n        value={1}\n        groupBy={option => option.group}\n        renderGroup={({ children, group }) => {\n          return (\n            <div>\n              <div style={{ textAlign: 'center' }}>\n                <Text size={12}>{group}</Text>\n              </div>\n              <ul style={{ padding: 0 }}>{children}</ul>\n            </div>\n          );\n        }}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"DropdownClassName",description:"You can add a custom class name to a dropdown by using the `dropdownClassName` prop",code:"<Select\n    options={options}\n    label=\"With custom dropdown styles\"\n    dropdownClassName={styles.customDropdown}\n    onChange={() => {}}\n  />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Select/Select.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=162399-10653",keywords:["select","dropdown","choose","pick","options","component","provides","generic","selectprops","optiontype","multiple","selectchangehandler","types","simplify"]},{name:"Skeleton",modulePath:"componentsV2/Skeleton",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Skeleton",specifier:"@corva/ui/componentsV2",exportName:"Skeleton"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"type",type:"'text' | 'circle' | 'block'",required:false,description:"",enumValues:["text","circle","block"]},{name:"width",type:"number | string",required:false,description:"`number` value is treated as pixels, everything else is passed through unchanged"},{name:"height",type:"number | string",required:false,description:"`number` value is treated as pixels, everything else is passed through unchanged"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Skeleton {...props} />"},{name:"SkeletonForText",description:"Use `type=\"text\"` to make component mimic a text line. It automatically adjusts its height depending on font-size and line-height.\n\nWorks both as an only child, and as a part of a paragraph",code:"<Grid>\n    <Grid.Cell span={6}>\n      <Text size={14}>\n        <Skeleton />\n      </Text>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Text size={14}>Some text here</Text>\n    </Grid.Cell>\n\n    <Grid.Cell span={6}>\n      <Text size={24}>\n        <Skeleton />\n      </Text>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Text size={24}>Some text here</Text>\n    </Grid.Cell>\n\n    <Grid.Cell span={6}>\n      <Header appearance=\"H1\">\n        <Skeleton />\n      </Header>\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Header appearance=\"H1\">Some text</Header>\n    </Grid.Cell>\n\n    <Grid.Cell>\n      <Text size={14}>\n        Some text <Skeleton width={60} /> with skeletons\n      </Text>\n    </Grid.Cell>\n\n    <Grid.Cell>\n      <Text size={16}>\n        Some text <Skeleton width={60} /> with skeletons\n      </Text>\n    </Grid.Cell>\n\n    <Grid.Cell>\n      <Text size={20}>\n        Some text <Skeleton width={60} /> with skeletons\n      </Text>\n    </Grid.Cell>\n  </Grid>"},{name:"SkeletonForBlocks",description:"Use `type=\"block\"` to make component mimic a block: an image, a chart, etc. Use `height` or `className` props to give it correct height",code:"<Skeleton height={250} type=\"block\" />"},{name:"SkeletonForAvatars",description:"Use `type=\"block\"` to make component mimic a circular element: an Avatar for example.",code:"<SbRow>\n    <Skeleton type=\"circle\" width={40} height={40} />\n    <Avatar name=\"Enoch Bowen\" size={40} />\n  </SbRow>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Skeleton/Skeleton.tsx",keywords:["skeleton","loading","placeholder","shimmer"]},{name:"Slider",modulePath:"componentsV2/Slider",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Slider",specifier:"@corva/ui/componentsV2",exportName:"Slider"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"min",type:"number",required:true,description:"Minimum value"},{name:"max",type:"number",required:true,description:"Maximum value"},{name:"from",type:"number",required:false,description:"Range start value"},{name:"to",type:"number",required:false,description:"Range end value"},{name:"onChange",type:"(range: SliderOnChangeParam) => void",required:false,description:"Callback function called every time `from` or `to` values are changed. Bound to mousemove event"},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"Determines component's direction.\n\nNote that if `vertical`, component takes 100% of available vertical space",enumValues:["horizontal","vertical"]},{name:"reversed",type:"boolean",required:false,description:"Flips component's direction from left-to-right to right-to-left, and from top-to-bottom to bottom-to-top"},{name:"precision",type:"number",required:false,description:"Digits after decimal point"},{name:"minRange",type:"number",required:false,description:"Minimum allowed difference between `from` and `to` values"},{name:"range",type:"boolean",required:false,description:"If `false` - fixes range's lower border, effectively turning the component into a single-value `Slider`"},{name:"disabled",type:"boolean",required:false,description:""},{name:"showInputs",type:"boolean",required:false,description:"Hides input fields on the edges of the slider"},{name:"step",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 2000,\n    to: 4000,\n  });\n\n  return <Slider {...props} {...value} onChange={setValue} />;\n}"},{name:"InputFields",description:"Input fields on the sides of the slider are editable by default. The `onChange` callback is called on each `change` event.",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({ from: 2000, to: 8000 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...value} min={0} max={10000} onChange={setValue} />\n    </SbColumn>\n  );\n}"},{name:"Direction",description:"Component supports 2 directions, controlled by a `direction` prop:\n\n- `horizontal` (default)\n- `vertical`\n\nUse the `reversed` prop to reverse direction",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 2000,\n    to: 8000,\n  });\n\n  const props = {\n    ...value,\n    onChange: setValue,\n    min: 0,\n    max: 10000,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...props} direction=\"horizontal\" />\n      <Slider {...props} direction=\"horizontal\" reversed />\n      <SbRow style={{ height: '300px' }}>\n        <Slider {...props} direction=\"vertical\" />\n        <Slider {...props} direction=\"vertical\" reversed />\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"MinRange",description:"Use the `minRange` prop to set minimum range size",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0,\n    to: 8000,\n  });\n\n  return <Slider {...value} min={0} max={10000} onChange={setValue} minRange={2000} />;\n}"},{name:"NoInputs",description:"You can hide inputs by using the `showInputs` prop",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0,\n    to: 8000,\n  });\n\n  return <Slider {...value} min={0} max={10000} onChange={setValue} showInputs={false} />;\n}"},{name:"RegularSlider",description:"You can use the `range={false}` prop to enable the \"standard slider\" mode. Note, that `from` property is still passed to the `onChange` handler",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0,\n    to: 8000,\n  });\n\n  const props = {\n    ...value,\n    onChange: setValue,\n    min: 0,\n    max: 10000,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...props} direction=\"horizontal\" range={false} />\n      <Slider {...props} direction=\"horizontal\" reversed range={false} />\n      <SbRow style={{ height: '300px' }}>\n        <Slider {...props} direction=\"vertical\" range={false} />\n        <Slider {...props} direction=\"vertical\" reversed range={false} />\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"Precision",description:"You can add `precision` prop to use decimal values",code:"{\n  const [value, setValue] = useState<SliderOnChangeParam>({\n    from: 0.2,\n    to: 0.5,\n  });\n\n  const props = {\n    ...value,\n    onChange: setValue,\n    min: 0,\n    max: 1,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Value: {JSON.stringify(value)}</Text>\n      <Slider {...props} direction=\"horizontal\" precision={1} />\n      <Slider {...props} direction=\"horizontal\" precision={3} />\n    </SbColumn>\n  );\n}"},{name:"WithStep",description:"You can add `step` prop to control minimum change of slider",code:"{\n  const [valueBasic, setValueBasic] = useState<SliderOnChangeParam>({ from: 2000, to: 8000 });\n  const [valueWrong, setValueWrong] = useState<SliderOnChangeParam>({\n    from: 2000,\n    to: 8000,\n  });\n  const [valueWrongEnd, setValueWrongEnd] = useState<SliderOnChangeParam>({ from: 2500, to: 8500 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Text>Basic. Range: 0 - 10000, step 1000</Text>\n      <Slider {...valueBasic} min={0} max={10000} onChange={setValueBasic} step={1000} />\n\n      <Text>\n        \"Shifted\" values. Range: 500 - 10500, step 1000, values are not multiples of 1000 starting\n        from 500\n      </Text>\n      <Slider {...valueWrong} min={500} max={10500} onChange={setValueWrong} step={1000} />\n\n      <Text>\n        Range: 500 - 11000, step 1000, max is not a multiple of 1000 starting from 500.\n        <br />\n        Max is adjusted to 10500\n      </Text>\n      <Slider {...valueWrongEnd} min={500} max={11000} onChange={setValueWrongEnd} step={1000} />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Slider/Slider.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=61015-109319",keywords:["slider"]},{name:"SliderAdvanced",modulePath:"componentsV2/SliderAdvanced",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"SliderAdvanced",specifier:"@corva/ui/componentsV2",exportName:"SliderAdvanced"},category:"v2",description:"Slider intended to overlay graphs and other axes. Provides `SliderAdvancedOnChangeParam`, `SliderAdvancedDragElement`, and `SliderAdvancedHandleProps` utility types.",agentSummary:"Graph-overlay range slider with editable, read-only or minimal handles. Slider is the standalone one and replaces V1 AdvancedSlider.",isExperimental:true,isDeprecated:false,props:[{name:"min",type:"number",required:true,description:"Minimum value"},{name:"max",type:"number",required:true,description:"Maximum value"},{name:"from",type:"number",required:true,description:"Range start value"},{name:"to",type:"number",required:true,description:"Range end value"},{name:"onChange",type:"(value: SliderAdvancedOnChangeParam) => void",required:false,description:""},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"reversed",type:"boolean",required:false,description:"Reverses axis"},{name:"floatingHandlePosition",type:"'default' | 'reverse' | 'none'",required:false,description:"Positions \"floating\" handle (outside of track)",enumValues:["default","reverse","none"]},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"formatValue",type:"(value: number) => number",required:false,description:"Processes `from` and `to` passed to `onChange`"},{name:"onDragStart",type:"(element: SliderAdvancedDragElement) => void",required:false,description:""},{name:"onDragEnd",type:"(element: SliderAdvancedDragElement) => void",required:false,description:""},{name:"handleComponent",type:"ComponentType<SliderAdvancedHandleProps>",required:false,description:""},{name:"elementsClassNames",type:"Partial<{\n    track: string;\n    startHandle: string;\n    endHandle: string;\n    bar: string;\n  }>",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 1_000, to: 2_000 });\n  return (\n    <div style={props.direction === 'vertical' ? { height: 400 } : undefined}>\n      <SliderAdvanced {...props} {...value} onChange={setValue} />\n    </div>\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 1_000, to: 4_000 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <SliderAdvanced min={0} max={5_000} {...value} onChange={setValue} size=\"small\" />\n      <SliderAdvanced min={0} max={5_000} {...value} onChange={setValue} size=\"medium\" />\n      <SliderAdvanced min={0} max={5_000} {...value} onChange={setValue} size=\"large\" />\n    </SbColumn>\n  );\n}"},{name:"Direction",description:"Component supports 2 directions, controlled by a `direction` prop:\n\n- `horizontal` (default)\n- `vertical`\n\nUse the `reversed` prop to reverse direction",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 1_000, to: 4_000 });\n  const props = { ...value, min: 0, max: 5_000, onChange: setValue };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <SliderAdvanced {...props} direction=\"horizontal\" />\n      <SliderAdvanced {...props} direction=\"horizontal\" reversed />\n      <SbRow style={{ height: '300px' }}>\n        <SliderAdvanced {...props} direction=\"vertical\" />\n        <SliderAdvanced {...props} direction=\"vertical\" reversed />\n      </SbRow>\n    </SbColumn>\n  );\n}"},{name:"HandleVariants",description:"You can provide your custom drag handles by using the `handleComponent` prop.\n\nComponent provides the following \"standard\" handles out of the box, exported as `SliderAdvanced.Handles.*`:\n\n- `Editable` (default)\n- `Readonly`\n\n- `Minimal`",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 0, to: 2_000 });\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <SbPlaceholder>\n        <SliderAdvanced\n          min={0}\n          max={5_000}\n          {...value}\n          onChange={setValue}\n          handleComponent={SliderAdvanced.Handles.Editable}\n        />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <SliderAdvanced\n          min={0}\n          max={5_000}\n          {...value}\n          onChange={setValue}\n          handleComponent={SliderAdvanced.Handles.Readonly}\n        />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <SliderAdvanced\n          min={0}\n          max={5_000}\n          {...value}\n          onChange={setValue}\n          handleComponent={SliderAdvanced.Handles.Minimal}\n        />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"},{name:"CustomHandleFormat",description:"For custom display formats, use `formatValue` and `parseFieldValue` props of the `<SliderAdvanced.Handles.Editable/>` component.\n\nUse `className` and `elementsClassNames` props to tweak paddings if needed",code:"{\n  const [value, setValue] = useState<SliderAdvancedOnChangeParam>({ from: 0, to: 47_226 });\n\n  const numberToTime = useCallback(\n    (value: number) => moment.utc(value * 1000).format('HH:mm:ss'),\n    []\n  );\n\n  const timeToNumber = useCallback((value: string) => {\n    const parts = String(value).trim().split(':');\n\n    if (parts.length < 2 || parts.length > 3 || !parts.every(part => /^\\d+$/.test(part))) {\n      return NaN;\n    }\n\n    const [hours, minutes, seconds = '0'] = parts;\n\n    return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);\n  }, []);\n\n  const MyHandle = useMemo(\n    () => (props: SliderAdvancedHandleProps) =>\n      (\n        <SliderAdvanced.Handles.Editable\n          {...props}\n          formatValue={numberToTime}\n          parseFieldValue={timeToNumber}\n        />\n      ),\n    [numberToTime, timeToNumber]\n  );\n\n  const elementsClassNames = useMemo(\n    () => ({ endHandle: storyStyles.wideHandle, startHandle: storyStyles.wideHandle }),\n    []\n  );\n\n  return (\n    <SliderAdvanced\n      min={0}\n      max={86400}\n      {...value}\n      onChange={setValue}\n      handleComponent={MyHandle}\n      className={storyStyles.rootWithPadding}\n      elementsClassNames={elementsClassNames}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/SliderAdvanced/SliderAdvanced.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=92653-18704&p=f&m=dev",keywords:["slideradvanced","slider","intended","overlay","graphs","other","axes","provides","slideradvancedonchangeparam","slideradvanceddragelement","slideradvancedhandleprops"]},{name:"Stepper",modulePath:"componentsV2/Stepper",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Stepper",specifier:"@corva/ui/componentsV2",exportName:"Stepper"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"steps",type:"Step[]",required:true,description:""},{name:"activeStep",type:"number",required:false,description:""},{name:"size",type:"'medium' | 'large'",required:false,description:"",enumValues:["medium","large"]},{name:"onStepClick",type:"(index: number, clickedStep: Step) => void",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Stepper {...props} />"},{name:"Sizes",description:"Component supports several sizes through the `size` prop:\n\n- `large`\n- `medium` (default)\n",code:"<SbColumn alignItems=\"stretch\">\n    <Stepper steps={steps} size=\"large\" activeStep={1} />\n    <Stepper steps={steps} size=\"medium\" activeStep={1} />\n  </SbColumn>"},{name:"StepClickHandler",description:"To make passed steps hoverable and clickable, use the `onStepClick` prop",code:"<Stepper steps={steps} onStepClick={onClickLogger} activeStep={1} />"},{name:"NonReturnableSteps",description:"To disable user's return to some steps, use the `noReturn` property of `Step`",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({ ...step, noReturn: true }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"},{name:"DisabledState",description:"To disable some steps, set the `state` property of `Step` to `'disabled'`.\n\nYou can disable only future steps",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({ ...step, state: 'disabled' }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"},{name:"ErrorState",description:"To add error state to some steps, set the `state` property of `Step` to `'error'`.",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({ ...step, state: 'error' }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"},{name:"StepTooltips",description:"You can add your own tooltip to a step by providing the `tooltip` property of `Step`",code:"{\n  const ownSteps = steps.map<Props['steps'][number]>(step => ({\n    ...step,\n    tooltip: `Some tooltip for ${step.title}`,\n  }));\n  return <Stepper steps={ownSteps} onStepClick={onClickLogger} activeStep={1} />;\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Stepper/Stepper.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=70173-98741",keywords:["stepper","wizard","steps","progress","flow"]},{name:"Switch",modulePath:"componentsV2/Switch",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Switch",specifier:"@corva/ui/componentsV2",exportName:"Switch"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"onLabel",type:"ReactNode",required:false,description:""},{name:"offLabel",type:"ReactNode",required:false,description:""},{name:"checked",type:"boolean",required:false,description:"Checked state"},{name:"disabled",type:"boolean",required:false,description:""},{name:"onChange",type:"(checked: boolean, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"disableOffState",type:"boolean",required:false,description:"If set to `true`, Switch will have the colors/styles as  if it's checked. Labels will change color depending on checked status"},{name:"inputRef",type:"Ref<HTMLInputElement>",required:false,description:"Ref to underlying input"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [checked, setChecked] = useState(false);\n  return (\n    <Switch\n      {...props}\n      checked={checked}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setChecked(value);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn>\n    <Switch onLabel=\"On\" offLabel=\"Off\" checked size=\"medium\" />\n    <Switch onLabel=\"On\" offLabel=\"Off\" checked size=\"small\" />\n  </SbColumn>"},{name:"Disabled",description:"Use the `disabled` prop to make component disabled",code:"<SbColumn>\n    <Switch onLabel=\"On\" offLabel=\"Off\" checked disabled />\n    <Switch onLabel=\"On\" offLabel=\"Off\" disabled />\n  </SbColumn>"},{name:"AOrB",description:"For the use case when user is making a choice between two values (as opposed to on/off state), use the `disableOffState` prop.\n\nIn this case, component will be always displayed coloured, as if it is in the \"checked\" state, and label will change their color depending on what is selected",code:"{\n  const [checked, setChecked] = useState(false);\n  return (\n    <SbColumn>\n      <Switch\n        offLabel=\"Apples\"\n        onLabel=\"Oranges\"\n        checked={checked}\n        onChange={setChecked}\n        disableOffState\n      />\n      <Switch\n        offLabel=\"Apples\"\n        onLabel=\"Oranges\"\n        checked={checked}\n        onChange={setChecked}\n        disableOffState\n        disabled\n      />\n    </SbColumn>\n  );\n}"},{name:"UsageWithoutLabels",description:"You can freely use only one of the labels, or none at all",code:"{\n  const [checked, setChecked] = useState(false);\n\n  return (\n    <SbColumn>\n      <SbPlaceholder style={{ width: 'auto' }}>\n        <Switch offLabel=\"Off label only\" checked={checked} onChange={setChecked} />\n      </SbPlaceholder>\n\n      <SbPlaceholder style={{ width: 'auto' }}>\n        <Switch onLabel=\"On label only\" checked={checked} onChange={setChecked} />\n      </SbPlaceholder>\n\n      <SbPlaceholder style={{ width: 'auto' }}>\n        <Switch checked={checked} onChange={setChecked} />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Switch/Switch.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9699-2848",keywords:["switch","toggle","on","off","boolean","switchcontrol","control","switch control"]},{name:"Tabs",modulePath:"componentsV2/Tabs",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Tabs",specifier:"@corva/ui/componentsV2",exportName:"Tabs"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"items",type:"TabsItem<Value>[]",required:true,description:""},{name:"onChange",type:"((value: Value) => void) | Dispatch<SetStateAction<Value>>",required:false,description:""},{name:"value",type:"Value",required:false,description:""},{name:"size",type:"'small' | 'medium'",required:false,description:"",enumValues:["small","medium"]},{name:"type",type:"'primary' | 'secondary' | 'tertiary'",required:false,description:"",enumValues:["primary","secondary","tertiary"]},{name:"direction",type:"'horizontal' | 'vertical'",required:false,description:"",enumValues:["horizontal","vertical"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(items[1].value);\n  return (\n    <Tabs\n      {...props}\n      items={items}\n      value={value}\n      onChange={(newValue: string) => {\n        props.onChange?.(newValue);\n        setValue(newValue);\n      }}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `medium` (default)\n- `small`",code:"<SbColumn alignItems=\"stretch\">\n    <Tabs size=\"medium\" value={items[1].value} items={shortItems} type=\"primary\" />\n    <Tabs size=\"small\" value={items[1].value} items={shortItems} type=\"primary\" />\n  </SbColumn>"},{name:"WithPrefixAndSuffix",description:"You can add prefixes and/or suffixes to tabs by providing the `prefix` and/or `suffix` properties in `items`' item",code:"{\n  const itemsPrefixed = shortItems.map(item => ({ ...item, prefix: <ChartLineIcon /> }));\n  const itemsSuffixed = shortItems.map(item => ({ ...item, suffix: <ChartLineIcon /> }));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Tabs value={itemsPrefixed[1].value} items={itemsPrefixed} type=\"secondary\" size=\"medium\" />\n      <Tabs value={itemsPrefixed[1].value} items={itemsPrefixed} type=\"secondary\" size=\"small\" />\n\n      <Tabs value={itemsSuffixed[1].value} items={itemsSuffixed} type=\"secondary\" size=\"medium\" />\n      <Tabs value={itemsSuffixed[1].value} items={itemsSuffixed} type=\"secondary\" size=\"small\" />\n    </SbColumn>\n  );\n}"},{name:"Types",description:"Component supports different types through its `type` prop\n\n- `primary` (default)\n- `secondary`\n- `tertiary`\n",code:"<SbColumn alignItems=\"stretch\">\n    <Tabs value={items[1].value} items={shortItems} type=\"primary\" />\n    <Tabs value={items[1].value} items={shortItems} type=\"secondary\" />\n    <Tabs value={items[1].value} items={shortItems} type=\"tertiary\" />\n  </SbColumn>"},{name:"DisabledTabs",description:"You can disable tabs by setting the `disabled` property to `true` in `items`' item",code:"{\n  const itemsDisabled = shortItems.map(item => ({ ...item, disabled: true }));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Tabs value={items[1].value} items={itemsDisabled} type=\"primary\" />\n      <Tabs value={items[1].value} items={itemsDisabled} type=\"secondary\" />\n      <Tabs value={items[1].value} items={itemsDisabled} type=\"tertiary\" />\n    </SbColumn>\n  );\n}"},{name:"WithTooltips",description:"You can add tooltips to tabs by providing the `tooltip` property in `items`' item",code:"{\n  const itemsWithTooltip = shortItems.map(item => ({\n    ...item,\n    tooltip: `Tooltip for ${item.label}`,\n  }));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Tabs value={items[1].value} items={itemsWithTooltip} type=\"primary\" />\n      <Tabs value={items[1].value} items={itemsWithTooltip} type=\"secondary\" />\n      <Tabs value={items[1].value} items={itemsWithTooltip} type=\"tertiary\" />\n    </SbColumn>\n  );\n}"},{name:"VerticalTabs",description:"Use the `direction` prop to display tabs vertically",code:"<Grid>\n    <Grid.Cell span={6}>\n      <Tabs value={items[1].value} items={items} type=\"primary\" direction=\"vertical\" />\n    </Grid.Cell>\n    <Grid.Cell span={6}>\n      <Tabs value={items[1].value} items={items} type=\"secondary\" direction=\"vertical\" />\n    </Grid.Cell>\n  </Grid>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Tabs/Tabs.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=92653-36403",keywords:["tabs","navigation","sections","panels","switch"]},{name:"Tag",modulePath:"componentsV2/Tag",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Tag",specifier:"@corva/ui/componentsV2",exportName:"Tag"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:true,description:""},{name:"state",type:"'light' | 'dark'",required:false,description:"",enumValues:["light","dark"]},{name:"size",type:"'large' | 'medium' | 'small'",required:false,description:"",enumValues:["large","medium","small"]},{name:"prefix",type:"ReactNode",required:false,description:""},{name:"suffix",type:"ReactNode",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Tag {...props} />"},{name:"Sizes",description:"Component supports several sizing options controlled through the `size` prop:\n\n- `\"small\"`\n- `\"medium\" (default)`\n- `\"large\"`",code:"<SbColumn>\n    <Tag size=\"small\">Small</Tag>\n    <Tag size=\"medium\">Medium</Tag>\n    <Tag size=\"large\">Large</Tag>\n  </SbColumn>"},{name:"Colors",description:"Component supports several color options controlled through the `state` prop:\n\n- `\"dark\" (default)`\n- `\"light\"`\n",code:"<SbColumn>\n    <Tag state=\"dark\">Dark</Tag>\n    <Tag state=\"light\">Light</Tag>\n  </SbColumn>"},{name:"PrefixAndSuffix",description:"You can add a prefix and/or suffix by using the `prefix` and `suffix` props respectively",code:"<SbRow>\n    <SbColumn>\n      <Tag size=\"small\" prefix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" prefix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" prefix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n    <SbColumn>\n      <Tag size=\"small\" state=\"light\" prefix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" state=\"light\" prefix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" state=\"light\" prefix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n\n    <SbColumn>\n      <Tag size=\"small\" suffix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" suffix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" suffix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n    <SbColumn>\n      <Tag size=\"small\" state=\"light\" suffix={<BubbleChartIcon />}>\n        Small\n      </Tag>\n      <Tag size=\"medium\" state=\"light\" suffix={<BubbleChartIcon />}>\n        Medium\n      </Tag>\n      <Tag size=\"large\" state=\"light\" suffix={<BubbleChartIcon />}>\n        Large\n      </Tag>\n    </SbColumn>\n  </SbRow>"},{name:"WithTruncatedText",description:"Component works seamlessly with `<TextEndTruncated/>` or `<TextMiddleTruncated/>`.\n\n",code:"<SbColumn>\n    <Tag prefix={<BubbleChartIcon />}>\n      <TextEndTruncated>{longText}</TextEndTruncated>\n    </Tag>\n    <Tag prefix={<BubbleChartIcon />}>\n      <TextMiddleTruncated>{longText}</TextMiddleTruncated>\n    </Tag>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Tag/Tag.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=131053-12637",keywords:["tag","label","badge","chip","pill","indicator"]},{name:"TemplatesControl",modulePath:"componentsV2/TemplatesControl",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TemplatesControl",specifier:"@corva/ui/componentsV2",exportName:"TemplatesControl"},category:"v2",description:"App settings templates control.\n\nExposes several utility types, for convenience:\n\n```tsx\nTemplatesControlChangeHandler<T> // Type of change handler\nTemplate<T> // Template\nTemplatesControlAdditionalControlProps<T> // Props for additional controls\n```\n\nAlso exposes its constituent parts, internal API, and utility functions if you want to integrate with its lifecycle, add custom logic, etc:\n\n```tsx\nTemplatesControl.Provider\nTemplatesControl.Toggle\nTemplatesControl.Popover // Requires anchor node, use `TemplatesControl.GetHeaderElement` to get header element (default behaviour)\nTemplatesControl.ToggleDisplayDefault // Default display component for toggle. Exposed to easily implement \"New!\" tag\nTemplatesControl.GetPopoverAnchorNode\ngetTemplatesControlStoreApi // Function that returns properly typed object of hooks to get data and perform actions from TemplatesControl's store\n```",agentSummary:"App settings templates control: header popover to pick, save, publish and organize per-app templates stored via the Corva API. Needs App Commons and Permissions contexts.",isExperimental:true,isDeprecated:false,props:[{name:"currentTemplateId",type:"number",required:false,description:"Id of the currently selected template"},{name:"templateSettings",type:"T",required:false,description:"Full data of the current template"},{name:"presetTemplates",type:"Template<T>[]",required:false,description:"Aka \"default templates\", preset by app itself"},{name:"foldersEnabled",type:"boolean",required:false,description:""},{name:"reloadListOnOpen",type:"boolean",required:false,description:"If `true` - will reload templates list when opening popover"},{name:"publishEnabled",type:"boolean",required:false,description:""},{name:"templateIconColors",type:"string[]",required:false,description:""},{name:"defaultTemplateIconColor",type:"string",required:false,description:""},{name:"templateIconMap",type:"Record<string, ComponentType<{ color?: string; className?: string; size?: number; }>>",required:false,description:""},{name:"defaultTemplateIcon",type:"string",required:false,description:""},{name:"onChange",type:"(template: Template<T> | undefined, reason: 'initialLoad' | 'reloadList' | 'deleteTemplate' | 'selectTemplate') => void",required:false,description:"Called when current template is changed\n\n⚠️⚠️⚠️ This callback is called asynchronously, which may make several state setters produce several state updates,\nleading to incorrect data fed into TemplatesControl when template data \"lags behind\" template id.\nGenerally, template id and template data should be processed together as an atomic object."},{name:"getDefaultTemplate",type:"(templates: Template<T>[], state: { currentTemplateId?: number; templateSettings?: T | undefined; event: 'loadList' | 'reloadList' | 'deleteTemplate'; }) => Template<T> | undefined",required:false,description:"Used to determine template id selected on initial load or when current template is deleted.\n\nCan be used to enforce \"App always has a template\" workflow"},{name:"filterInitialTemplates",type:"(allTemplates: Template<T>[]) => Template<T>[] | Promise<Template<T>[]>",required:false,description:"Filters/replaces templates on initial load. Receives a list of templates already filtered according user's access rights"},{name:"templateControls",type:"ComponentType<TemplatesControlAdditionalControlProps<T>>",required:false,description:"Additional controls to render in template menu. `TemplatesControlAdditionalControlProps` type is exported for convenience."},{name:"toggleContent",type:"ReactNode",required:false,description:"Content to show inside of toggle"},{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"toggleLayout",type:"ToggleProps['layout']",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"Please note, the following props are not meant to be changed in runtime:\n\n```tsx\npresetTemplates,\nfoldersEnabled,\ntemplateIconColors,\ntemplateIconMap,\ndefaultTemplateIcon,\npublishEnabled,\ndefaultTemplateIconColor,\n```",code:"{\n  const { onChange } = props;\n\n  const iniitalTemplate = presetTemplates[0];\n  const [templateSettings, setTemplateData] = useState<Data & { templateId?: number }>({\n    templateId: iniitalTemplate.id,\n    stringValue: iniitalTemplate.settings.stringValue,\n    numberValue: iniitalTemplate.settings.numberValue,\n  });\n\n  const actualOnChange = useCallback<TemplatesControlChangeHandler<Data>>(\n    (...args) => {\n      onChange?.(...args);\n\n      if (args[0]) {\n        const { id, settings } = args[0];\n        const { stringValue, numberValue } = settings || {};\n        setTemplateData({ templateId: id, numberValue, stringValue });\n      }\n    },\n    [onChange]\n  );\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          {...props}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          onChange={actualOnChange}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <TextInput\n            label=\"String value\"\n            onChange={stringValue => setTemplateData(prev => ({ ...prev, stringValue }))}\n            value={templateSettings.stringValue}\n          />\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <TextInput\n            label=\"Number value\"\n            onChange={numberValue =>\n              setTemplateData(prev => ({ ...prev, numberValue: Number(numberValue) }))\n            }\n            value={templateSettings.numberValue}\n          />\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <SbColumn>\n            Current template id: {templateSettings.templateId}\n            <Button onClick={() => setTemplateData({})}>Clear template</Button>\n          </SbColumn>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"WithNoPublishRights",description:"Template trees are different for users with and without the ability to publish templates.",code:"<ContextWrapper\n    canPublish={false}\n    templatesControl={<TemplatesControl presetTemplates={presetTemplates} />}\n  />"},{name:"WithOutdatedData",description:"If the selected template has outdated/different data from user's own template, the data from template is immediately applied.",code:"{\n  const initial: Data & { templateId?: number } = {\n    templateId: 46386,\n    stringValue: 'Outdated data',\n    numberValue: 0,\n  };\n  const [templateSettings, setTemplateData] = useState(initial);\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          onChange={template => {\n            if (template) {\n              const {\n                id,\n                settings: { stringValue, numberValue },\n              } = template;\n              setTemplateData({ templateId: id, stringValue, numberValue });\n            }\n          }}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Initial</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {initial.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {initial.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {initial.numberValue}\n          </Text>\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Current</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {templateSettings.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {templateSettings.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {templateSettings.numberValue}\n          </Text>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"WithOutdatedDataAndPresetTemplate",description:"If the selected template has outdated/different data from Preset/Published/Shared template, the data from template is immediately applied.",code:"{\n  const initial: Data & { templateId?: number } = {\n    templateId: 1,\n    stringValue: 'Outdated data',\n    numberValue: 0,\n  };\n  const [templateSettings, setTemplateData] = useState(initial);\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          onChange={template => {\n            if (template) {\n              const {\n                id,\n                settings: { stringValue, numberValue },\n              } = template;\n              setTemplateData({ templateId: id, stringValue, numberValue });\n            }\n          }}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Initial</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {initial.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {initial.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {initial.numberValue}\n          </Text>\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Current</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {templateSettings.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {templateSettings.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {templateSettings.numberValue}\n          </Text>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"WithCustomColorsAndIcons",description:"You can override the icons and their colours for templates by using the `templateIconMap`, `defaultTemplateIcon`, `templateIconColors`, and `defaultTemplateIconColor` props",code:"{\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          templateIconColors={['#FF0000', '#00FF00', '#0000FF']}\n          defaultTemplateIconColor=\"#0000FF\"\n          templateIconMap={{\n            icon_1: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <FiveIcon size={size} />\n              </div>\n            ),\n            icon_2: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <ShareSysIcon size={size} />\n              </div>\n            ),\n            icon_3: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <OffScreenOneIcon size={size} />\n              </div>\n            ),\n            icon_4: ({ className, color, size }) => (\n              <div className={className} style={{ color }} data-size={size}>\n                <AddIcon size={size} />\n              </div>\n            ),\n          }}\n          defaultTemplateIcon=\"icon_3\"\n          presetTemplates={presetTemplates}\n          onChange={noop}\n        />\n      }\n    />\n  );\n}"},{name:"WithFoldersDisabled",description:"You can disable the folders functionality by using the `foldersEnabled` prop",code:"<ContextWrapper templatesControl={<TemplatesControl onChange={noop} foldersEnabled={false} />} />"},{name:"WithPublishDisabled",description:"You can disable the publish functionality by using the `publishEnabled` prop",code:"<ContextWrapper templatesControl={<TemplatesControl onChange={noop} publishEnabled={false} />} />"},{name:"WithTemplateSelectionLogic",description:"You can \"hook into\" template selection logic by providing the `getDefaultTemplate` prop. This function is called on initial load, when templates list is reloaded, and when deleting/unfollowing selected template.The actual action is passed down as a part of the `state` argument.\n\nYou can use this prop to force the app to always have a selected template.",code:"{\n  const initial: Data & { templateId?: number } = {};\n  const [templateSettings, setTemplateData] = useState(initial);\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          onChange={template => {\n            if (template) {\n              const {\n                id,\n                settings: { stringValue, numberValue },\n              } = template;\n              setTemplateData({ templateId: id, stringValue, numberValue });\n            }\n          }}\n          getDefaultTemplate={(templates, { event }) => {\n            // When list is reloaded, we don't change selected template\n            return event !== 'reloadList' ? templates.find(({ id }) => id === 2) : undefined;\n          }}\n          presetTemplates={presetTemplates}\n          currentTemplateId={templateSettings.templateId}\n          templateSettings={{\n            stringValue: templateSettings.stringValue,\n            numberValue: templateSettings.numberValue,\n          }}\n        />\n      }\n    >\n      <Grid>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Initial</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {initial.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {initial.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {initial.numberValue}\n          </Text>\n        </Grid.Cell>\n        <Grid.Cell span={6}>\n          <Header appearance=\"H3\">Current</Header>\n          <Text tagName=\"div\" size={14}>\n            templateId: {templateSettings.templateId}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            stringValue: {templateSettings.stringValue}\n          </Text>\n          <Text tagName=\"div\" size={14}>\n            numberValue: {templateSettings.numberValue}\n          </Text>\n        </Grid.Cell>\n      </Grid>\n    </ContextWrapper>\n  );\n}"},{name:"PreprocessingTemplates",description:"You can apply your own filtering logic to loaded templates by providing the `filterInitialTemplates` prop.",code:"<ContextWrapper\n    templatesControl={\n      <TemplatesControl\n        presetTemplates={presetTemplates}\n        filterInitialTemplates={() => [\n          {\n            id: 1000,\n            name: 'Server Template 1',\n            settings: { stringValue: 'Value for Server Template 1', numberValue: 123 },\n          },\n        ]}\n      />\n    }\n  />"},{name:"WithCustomTemplateControls",description:"You can add custom component to template menu by providing the `templateControls` prop",code:"{\n  const TemplateControls = useMemo<ComponentType<TemplatesControlAdditionalControlProps<Data>>>(\n    () =>\n      ({ template }) => {\n        return (\n          <SbPlaceholder style={{ padding: '8px 0' }}>\n            Additional controls.\n            <br />\n            Value: {template.settings.numberValue}\n          </SbPlaceholder>\n        );\n      },\n    []\n  );\n\n  return (\n    <ContextWrapper\n      templatesControl={\n        <TemplatesControl\n          presetTemplates={presetTemplates}\n          filterInitialTemplates={() => [\n            {\n              id: 1000,\n              name: 'Server Template 1',\n              settings: { stringValue: 'Value for Server Template 1', numberValue: 123 },\n            },\n          ]}\n          templateControls={TemplateControls}\n        />\n      }\n    />\n  );\n}"},{name:"AdvancedUsage",description:"You can use `<TemplateControls/>`'s constituent parts to hook into its lifecycle, get data, and perform actions.\n\nComponents:\n```\nTemplatesControl.Provider\nTemplatesControl.Toggle\nTemplatesControl.Popover\nTemplatesControl.ToggleDisplayDefault\n```\nUtilities:\n```\nTemplatesControl.GetHeaderElement\ngetTemplatesControlStoreApi<T>\n```",code:"{\n  const [anchorElement, setAnchorElement] = useState<HTMLElement>();\n\n  const setHeaderNode = useCallback((buttonRef: HTMLButtonElement) => {\n    setAnchorElement(TemplatesControl.GetHeaderElement(buttonRef));\n  }, []);\n\n  // Creating API with correct Templates' data type\n  const API = useMemo(() => getTemplatesControlStoreApi<Data>(), []);\n\n  // All magic happens here\n  const InnerComponent = useMemo(\n    () => () => {\n      const { useIsInitialized, useSelectTemplate, useSelectedTemplate, useAllTemplates } = API;\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const isInitialized = useIsInitialized();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const selectTemplate = useSelectTemplate();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const selectedTemplate = useSelectedTemplate();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const allTemplates = useAllTemplates();\n\n      if (!isInitialized) {\n        return <LoaderLogo />;\n      }\n\n      const someTemplateId = allTemplates.find(({ isPreset }) => !isPreset)?.id;\n\n      return (\n        <SbColumn>\n          <Text>Current template id: {selectedTemplate?.id || 'N/A'}</Text>\n          {selectedTemplate ? (\n            <Button type=\"primary\" onClick={() => selectTemplate(undefined)}>\n              Clear template\n            </Button>\n          ) : (\n            <Button type=\"primary\" onClick={() => selectTemplate(someTemplateId)}>\n              Select template #{someTemplateId}\n            </Button>\n          )}\n        </SbColumn>\n      );\n    },\n    [API]\n  );\n\n  return (\n    <Providers canPublish>\n      <TemplatesControl.Provider>\n        <AppContainer\n          header={\n            <AppHeader\n              titleControls={<TemplatesControl.Toggle ref={setHeaderNode} />}\n              titleControlsPosition=\"left\"\n              showAssetChips={false}\n            />\n          }\n        >\n          <TemplatesControl.Popover anchorEl={anchorElement} />\n          <InnerComponent />\n        </AppContainer>\n      </TemplatesControl.Provider>\n    </Providers>\n  );\n}"},{name:"WithListReloadOnPopoverOpenDisabled",description:"You can disable the reloading of the templates list on popover open by using the `reloadListOnOpen` prop",code:"<ContextWrapper\n    templatesControl={<TemplatesControl onChange={noop} reloadListOnOpen={false} />}\n  />"},{name:"ToggleLayout",description:"You can change toggle layout by providing the `toggleLayout` prop",code:"{\n  const commonProps = useMemo(\n    () => ({\n      onChange: noop,\n      presetTemplates,\n      currentTemplateId: presetTemplates[2].id,\n      templateSettings: presetTemplates[2].settings,\n    }),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper height={100} templatesControl={<TemplatesControl {...commonProps} />} />\n      <ContextWrapper\n        height={100}\n        templatesControl={<TemplatesControl {...commonProps} toggleLayout=\"ultraCompact\" />}\n      />\n    </SbColumn>\n  );\n}"},{name:"NewTagAndCustomButtonContent",description:"You can provide custom content for toggle by using the `toggleContent` prop. You can use it to make the content smaller or responsive, add additional info, etc. \n\nTo implement \"New!\" tag easily, you can use the `showNewTag` prop of the default content component, exposed as `TemplatesControl.ToggleDisplayDefault`",code:"{\n  const commonProps = useMemo(\n    () => ({\n      onChange: noop,\n      presetTemplates,\n      currentTemplateId: presetTemplates[2].id,\n      templateSettings: presetTemplates[2].settings,\n    }),\n    []\n  );\n\n  // Creating API with correct Templates' data type\n  const API = useMemo(() => getTemplatesControlStoreApi<Data>(), []);\n\n  // All magic happens here\n  const Display = useMemo(\n    () => () => {\n      const { useIsInitialized, useSelectedTemplate } = API;\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const isInitialized = useIsInitialized();\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const selectedTemplate = useSelectedTemplate();\n\n      return (\n        <div\n          style={{\n            width: '70px',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {isInitialized ? selectedTemplate?.name : '...'}\n        </div>\n      );\n    },\n    [API]\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <ContextWrapper height={100} templatesControl={<TemplatesControl {...commonProps} />} />\n\n      <ContextWrapper\n        height={100}\n        templatesControl={\n          <TemplatesControl\n            {...commonProps}\n            toggleContent={<TemplatesControl.ToggleDisplayDefault showNewTag />}\n          />\n        }\n      />\n\n      <ContextWrapper\n        height={100}\n        templatesControl={<TemplatesControl {...commonProps} toggleContent={<Display />} />}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TemplatesControl/TemplatesControl.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142803-71618&",keywords:["templatescontrol","template","settings","templates","control","exposes","several","utility","types","convenience","templatescontrolchangehandler","type"]},{name:"Text",modulePath:"componentsV2/Text",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Text",specifier:"@corva/ui/componentsV2",exportName:"Text"},category:"v2",description:"A component that should be used every time a text should be displayed",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Content"},{name:"size",type:"36 | 32 | 24 | 20 | 18 | 16 | 14 | 12 | 10 | 'inherit'",required:false,description:"",enumValues:["inherit"]},{name:"weight",type:"'regular' | 'medium' | 'bold'",required:false,description:"",enumValues:["regular","medium","bold"]},{name:"italic",type:"boolean",required:false,description:""},{name:"color",type:"'T1' | 'T6' | 'T7' | 'T8' | 'T9' | 'inherit'",required:false,description:"",enumValues:["T1","T6","T7","T8","T9","inherit"]},{name:"tagName",type:"keyof JSX.IntrinsicElements",required:false,description:"Tag that will be rendered"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Text {...props} />"},{name:"Sizing",description:"Component supports several text sizes/line heights, controlled through `size` prop",code:"<SbRow>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={36}>Size: 36</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={32}>Size: 32</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={24}>Size: 24</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={20}>Size: 20</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={18}>Size: 18</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={16}>Size: 16</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={14}>Size: 14</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={12}>Size: 12</Text>\n    </div>\n    <div style={{ border: '1px dashed' }}>\n      <Text size={10}>Size: 10</Text>\n    </div>\n    <div style={{ border: '1px dashed', fontSize: '11px' }}>\n      <Text size=\"inherit\">Size: inherit</Text>\n    </div>\n  </SbRow>"},{name:"Colors",description:"Component supports several colors, controlled through `color` prop",code:"<SbColumn>\n    <Text color=\"T1\">Color: T1</Text>\n    <Text color=\"T6\">Color: T6</Text>\n    <Text color=\"T7\">Color: T7</Text>\n    <Text color=\"T8\">Color: T8</Text>\n    <Text color=\"T9\">Color: T9</Text>\n    <div style={{ color: 'tomato' }}>\n      <Text color=\"inherit\">Color: inherit</Text>\n    </div>\n  </SbColumn>"},{name:"CustomTags",description:"You can control which HTML tag will be rendered by passing a tag name to `tagName` prop",code:"<>\n    <Text>I'm a span</Text>\n    <Text tagName=\"div\">I'm a div</Text>\n    <Text tagName=\"section\">I'm a section</Text>\n    <Text tagName=\"h1\">I'm a H1, but you should use Header component</Text>\n  </>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Text/Text.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=88924-113475&node-type=frame",keywords:["text","component","should","used","every","time","displayed"]},{name:"TextArea",modulePath:"componentsV2/TextArea",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextArea",specifier:"@corva/ui/componentsV2",exportName:"TextArea"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"value",type:"string | number",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"message",type:"ReactNode",required:false,description:""},{name:"inputRef",type:"RefCallback<HTMLTextAreaElement | null> | MutableRefObject<HTMLTextAreaElement | null> | null",required:false,description:"Ref to an underlying input element"},{name:"readOnly",type:"boolean",required:false,description:""},{name:"onFocus",type:"FocusEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"onKeyDown",type:"KeyboardEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"onKeyUp",type:"KeyboardEventHandler<HTMLTextAreaElement>",required:false,description:""},{name:"inputContainerRef",type:"RefCallback<HTMLDivElement | null> | MutableRefObject<HTMLDivElement | null> | null",required:false,description:"Ref to a container that contains input and its affixes\nUseful for positioning of popovers"},{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:"onChange",type:"(value: string, changeReason: 'change', event?: ChangeEvent<HTMLTextAreaElement>) => void",required:false,description:""},{name:"elementsClassNames",type:"Omit<Required<BaseProps>['elementsClassNames'], 'suffix' | 'prefix'>",required:false,description:""},{name:"resizeable",type:"boolean",required:false,description:""},{name:"maxLength",type:"number",required:false,description:""},{name:"showLetterCounter",type:"boolean",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState('');\n  return (\n    <TextArea\n      {...props}\n      value={value}\n      onChange={(newValue, ...rest) => {\n        setValue(newValue);\n        props.onChange?.(newValue, ...rest);\n      }}\n    />\n  );\n}"},{name:"Resizeable",description:"You can use `resizeable` prop to disable resizing",code:"{\n  const [value, setValue] = useState('');\n\n  return (\n    <SbColumn alignItems={'stretch'}>\n      <TextArea label=\"Default\" value={value} onChange={setValue} />\n      <TextArea label=\"Fixed size\" value={value} onChange={setValue} resizeable={false} />\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 `<TextArea.MessageWithIcon>` to create a message with icon easily",code:"<SbColumn alignItems=\"stretch\">\n    <TextArea\n      label=\"With icon\"\n      message={\n        <TextArea.MessageWithIcon>\n          You can put some things here that could be very long but never fret, we've got you!\n        </TextArea.MessageWithIcon>\n      }\n    />\n    <TextArea\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 `<TextArea.Label />` components to easily add required field notification, unit, and/or info hint icon",code:"<TextArea\n    label={\n      <TextArea.Label required infoTooltip=\"Why are you doing this?\">\n        Reason\n      </TextArea.Label>\n    }\n  />"},{name:"WithLimitedLength",description:"You can use the `maxLength` prop to limit text size. \n\nUse `showLetterCounter` prop to disable letter counter shown by default",code:"{\n  const [value, setValue] = useState(longText);\n  const maxLength = longText.length + 10;\n  const status = value.length >= maxLength ? 'error' : undefined;\n\n  return (\n    <SbColumn alignItems={'stretch'}>\n      <TextArea\n        label=\"Default\"\n        value={value}\n        onChange={setValue}\n        maxLength={maxLength}\n        status={status}\n      />\n      <TextArea\n        label=\"Without counter\"\n        value={value}\n        onChange={setValue}\n        maxLength={maxLength}\n        showLetterCounter={false}\n        status={status}\n      />\n      <TextArea\n        label=\"With counter, not Resizeable\"\n        value={value}\n        onChange={setValue}\n        maxLength={maxLength}\n        resizeable={false}\n        status={status}\n      />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextArea/TextArea.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142462-54020&m=dev",keywords:["textarea"]},{name:"TextEndTruncated",modulePath:"componentsV2/TextEndTruncated",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextEndTruncated",specifier:"@corva/ui/componentsV2",exportName:"TextEndTruncated"},category:"v2",description:"A component that truncates arbitrary text, and displays it in a tooltip if it is truncated. Does not have own styling",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"React.ReactNode",required:false,description:"Content"},{name:"disableTooltip",type:"boolean",required:false,description:"Forces the component not to show its tooltip"},{name:"maxLines",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextEndTruncated {...props} />"},{name:"DynamicTooltips",description:"Component uses `resizeObserver` to determine if is dimensions have changed, to show a tooltip only if the containing text is being truncated. Content changes are being monitored through `mutationObserver`.",code:"{\n  const [percent, setPercent] = useState(30);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own slider */}\n      <Slider\n        value={percent}\n        onChange={(_, value) => setPercent(value instanceof Array ? value[0] : value)}\n        min={0}\n        max={100}\n      />\n      <SbPlaceholder style={{ width: `${percent}%`, justifyContent: 'start', textAlign: 'left' }}>\n        <div style={{ width: '100%' }}>\n          <TextEndTruncated>I'm a text that fits in 100% but does not in 30%</TextEndTruncated>\n        </div>\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"},{name:"ComplexChildren",description:"Component's `children` may be an arbitrary `ReactNode`. Text for tooltip is calculated as a `textContent` of the root node, so care should be taken so the spacing characters are displayed properly",code:"<TextEndTruncated>\n    I'm a <b>complex</b> child with <u>bells</u> and <s>whistles</s>, lots of additional nodes, a{' '}\n    <>fragment</>, etc.\n  </TextEndTruncated>"},{name:"MultilineText",description:"You can truncate multiline text with an ellipsis on the last row by using the `maxLines`. Please note, this may not work in all browsers. See [Caniuse page](https://caniuse.com/css-line-clamp) for details.",code:"{\n  const min = 1;\n  const max = 5;\n  const [lines, setLines] = useState(2);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      {/* TODO use own slider */}\n      <Slider\n        value={lines}\n        onChange={(_, value) => setLines(value instanceof Array ? value[0] : value)}\n        min={min}\n        max={max}\n      />\n      <TextEndTruncated maxLines={lines}>{text}</TextEndTruncated>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextEndTruncated/TextEndTruncated.tsx",keywords:["textendtruncated","truncatedtext","truncated","text","truncated text","component","truncates","arbitrary","displays","tooltip","does","have","styling"]},{name:"TextInput",modulePath:"componentsV2/TextInput",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextInput",specifier:"@corva/ui/componentsV2",exportName:"TextInput"},category:"v2",description:"This component is deprecated and will be eventually replaced with `TextInputNext`",agentSummary:"MUI v4 field with floating label; no MUI prop passthrough, unlike V1 TextField.",isExperimental:false,isDeprecated:true,props:[{name:"label",type:"ReactNode",required:false,description:""},{name:"value",type:"string | number",required:false,description:""},{name:"onChange",type:"(value: string, event: ChangeEvent<HTMLInputElement>) => void",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"type",type:"'default' | 'search' | 'text' | 'email' | 'password' | 'number' | 'phone' | 'url'",required:false,description:"Controls component's visual style.\n⚠️ ⚠️ ⚠️ Use `inputType` prop for underlying `input`'s element `type` attribute. Old values added for backwards compatibility and will be removed in the future",enumValues:["default","search","text","email","password","number","phone","url"]},{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:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"spacing",type:"'normal' | 'dense'",required:false,description:"",enumValues:["normal","dense"]},{name:"message",type:"ReactNode",required:false,description:""},{name:"onFocus",type:"FocusEventHandler",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:"onClear",type:"() => void",required:false,description:"If present - will render a \"clear\" button"},{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>",required:false,description:""},{name:"readOnly",type:"boolean",required:false,description:""},{name:"autoFocus",type:"boolean",required:false,description:""},{name:"forceLabelShrink",type:"boolean",required:false,description:""},{name:"htmlAttributes",type:"Omit<Partial<InputHTMLAttributes<HTMLInputElement>>, 'type' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'placeholder' | 'readOnly' | 'disabled' | 'value' | 'onChange'>",required:false,description:"Escape hatch for when you need to override/add attributes to the `<input/>` tag"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextInput {...props} />"},{name:"Types",description:"Component supports 2 visual styles, controlled with the `type` prop.\n\nPlease note, that `label` prop is ignored for `search` type",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TextInput label=\"Label\" type=\"default\" value=\"Default\" />\n      <TextInput placeholder=\"Search\" value=\"Search\" prefix={<SearchOne />} type=\"search\" />\n    </SbColumn>\n  );\n}"},{name:"Spacing",description:"Component supports 2 spacing options, controlled through `spacing` prop:\n\n- `normal` (default)\n- `dense`",code:"<Grid cols={2}>\n    <Grid.Cell span={1}>\n      <TextInput label=\"Normal\" spacing=\"normal\" value=\"value\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <TextInput label=\"Dense\" spacing=\"dense\" value=\"value\" />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <TextInput\n        placeholder=\"Normal\"\n        spacing=\"normal\"\n        value=\"value\"\n        prefix={<SearchOne />}\n        type=\"search\"\n      />\n    </Grid.Cell>\n    <Grid.Cell span={1}>\n      <TextInput\n        placeholder=\"Dense\"\n        spacing=\"dense\"\n        value=\"value\"\n        prefix={<SearchOne />}\n        type=\"search\"\n      />\n    </Grid.Cell>\n  </Grid>"},{name:"LabelAndPlaceholder",description:"Although label may look like a placeholder for an empty field, those are 2 different things, controlled through `label` and `placeholder` props respectively",code:"<TextInput label=\"Label\" placeholder=\"Placeholder\" />"},{name:"ErrorState",description:"To display the component in an error state, use the `state` prop. You can add a message with a `message` prop",code:"<TextInput\n    label=\"Error\"\n    status=\"error\"\n    message=\"This field should contain a valid value, dummy!\"\n    value=\"invalid value\"\n  />"},{name:"PrefixAndSuffix",description:"You can display arbitrary content as prefix and/or suffix by using `prefix` and `suffix` props. Note that if those are [valid React elements](https://react.dev/reference/react/isValidElement), the `size` prop will be injected\n\nFor complex affixes that look like text, use the `<TextInput.Affix/>` component, that can accept CSS classes\n\nN.B: Please use `<SearchOne/>` icon for prefix as it respects current text color",code:"<SbColumn alignItems=\"stretch\">\n    <TextInput label=\"Label\" prefix={<BubbleChartIcon />} />\n    <TextInput label=\"Label\" suffix={<BubbleChartIcon />} />\n    <TextInput label=\"Label\" suffix={<BubbleChartIcon />} status=\"error\" />\n    <TextInput label=\"Profits\" prefix=\"$\" suffix=\"gaziillion\" />\n    <TextInput\n      label=\"Label\"\n      prefix={\n        <TextInput.Affix className=\"customClassName\">\n          <em>\n            <u>very</u>\n          </em>{' '}\n          custom prefix\n        </TextInput.Affix>\n      }\n    />\n    <TextInput label=\"Label\" prefix={<SearchOne />} type=\"search\" value=\"Search\" />\n    <TextInput\n      label=\"Label\"\n      prefix={<SearchOne />}\n      suffix={<BubbleChartIcon />}\n      type=\"search\"\n      value=\"Search\"\n    />\n  </SbColumn>"},{name:"LoadingState",description:"To display the component in a \"loading\" state to indicate that some process related to the field is running, use the `state` prop.",code:"<SbColumn alignItems=\"stretch\">\n    <TextInput\n      label=\"Loading\"\n      status=\"loading\"\n      message=\"There's some loading process associated with this field\"\n    />\n    <TextInput\n      label=\"Loading\"\n      status=\"loading\"\n      message=\"Works with suffixes too!\"\n      suffix={<BubbleChartIcon />}\n    />\n  </SbColumn>"},{name:"InputSearch",description:"For `inputType=\"search\"` we hide the browser's \"clear\" button. Other shadow-dom elements remain unchanged\n\nUse `htmlAttributes` to fine-tune it with HTML attributes",code:"{\n  const [stringValue, setStringValue] = useState('value');\n  const [numberValue, setNumberValue] = useState('1234');\n  const [positiveValue, setPositiveValue] = useState('0');\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <TextInput label=\"Search\" value={stringValue} onChange={setStringValue} inputType=\"search\" />\n      <TextInput\n        label=\"Depth (m)\"\n        value={numberValue}\n        onChange={setNumberValue}\n        inputType=\"number\"\n      />\n      <TextInput\n        label=\"Positive number\"\n        value={positiveValue}\n        onChange={setPositiveValue}\n        inputType=\"number\"\n        htmlAttributes={{ min: 0 }}\n      />\n    </SbColumn>\n  );\n}"},{name:"LabelTooltip",description:"Field label has a tooltip that is shown if label is longer than the container and is truncated. `<TruncateText/>` is used internally.\n\nWorks with `prefix` and `suffix` too",code:"<SbColumn alignItems=\"stretch\">\n    <TextInput label=\"Some very long label that won't fit, but it fits when shrunk\" />\n    <TextInput\n      label=\"Some very long label that won't fit, but it fits when shrunk\"\n      prefix={<BubbleChartIcon />}\n    />\n    <TextInput\n      label=\"Some very long label that won't fit, but it fits when shrunk\"\n      suffix={<BubbleChartIcon />}\n    />\n    <TextInput\n      label=\"Some very long label that won't fit, but it fits when shrunk\"\n      suffix={<BubbleChartIcon />}\n      prefix={<BubbleChartIcon />}\n    />\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextInput/TextInput.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573-7777",keywords:["textinput","form","input","text","field","entry","component","deprecated","will","eventually","replaced","textinputnext"]},{name:"TextInputBase",modulePath:"componentsV2/TextInputBase",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"deep",componentName:"TextInputBase",specifier:"@corva/ui/componentsV2/TextInputBase/TextInputBase",form:"named",exportName:"TextInputBase"},category:"v2",description:"",isExperimental:false,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:"rootTagName",type:"'label' | 'div'",required:false,description:"HTML tag of the root element. Use `div` when `prefix`/`suffix` contain interactive\ncontrols — nested interactive elements inside a `label` are invalid for assistive tech",enumValues:["label","div"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"message",type:"ReactNode",required:false,description:""},{name:"onFocus",type:"FocusEventHandler<FieldElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<FieldElement>",required:false,description:""},{name:"onKeyDown",type:"KeyboardEventHandler<FieldElement>",required:false,description:""},{name:"onKeyUp",type:"KeyboardEventHandler<FieldElement>",required:false,description:""},{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<FieldElement | null> | MutableRefObject<FieldElement | 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 a 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:"elementsClassNames",type:"Partial<{\n    label: string;\n    input: string;\n    inputContainer: string;\n    prefix: string;\n    suffix: string;\n    message: string;\n  }>",required:false,description:""},{name:"onChange",type:"(value: string, changeReason: 'change' | 'clear', event?: ChangeEvent<FieldElement> | undefined) => void",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:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""},{name:"component",type:"ForwardRefExoticComponent<PropsWithoutRef<TextInputBaseComponentProps<FieldElement, ComponentProps>> & RefAttributes<FieldElement>>",required:true,description:"⚠️⚠️⚠️ PRIVATE API. If you see it in docs you're doing something wrong"},{name:"componentProps",type:"ComponentProps",required:false,description:"⚠️⚠️⚠️ PRIVATE API. If you see it in docs you're doing something wrong"},{name:"testIds",type:"Partial<{\n    input: string;\n    label: string;\n    prefix: string;\n    suffix: string;\n    clearButton: string;\n    message: string;\n  }>",required:false,description:"⚠️⚠️⚠️ PRIVATE API. If you see it in docs you're doing something wrong"},{name:"rootRef",type:"Ref<HTMLElement>",required:true,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextInputBase/TextInputBase.tsx",keywords:["textinputbase"]},{name:"TextInputNext",modulePath:"componentsV2/TextInputNext",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextInputNext",specifier:"@corva/ui/componentsV2",exportName:"TextInputNext"},category:"v2",description:"This is the latest iteration of `TextInput` component and will eventually replace it",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",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:"value",type:"string | number",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",required:false,description:""},{name:"disabled",type:"boolean",required:false,description:""},{name:"prefix",type:"ReactNode",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:"status",type:"'error' | 'loading'",required:false,description:"",enumValues:["error","loading"]},{name:"message",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:"suffix",type:"ReactNode",required:false,description:""},{name:"readOnly",type:"boolean",required:false,description:""},{name:"rootTagName",type:"'label' | 'div'",required:false,description:"HTML tag of the root element. Use `div` when `prefix`/`suffix` contain interactive\ncontrols — nested interactive elements inside a `label` are invalid for assistive tech",enumValues:["label","div"]},{name:"onFocus",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"onBlur",type:"FocusEventHandler<HTMLInputElement>",required:false,description:""},{name:"onKeyDown",type:"KeyboardEventHandler<HTMLInputElement>",required:false,description:""},{name:"onKeyUp",type:"KeyboardEventHandler<HTMLInputElement>",required:false,description:""},{name:"inputContainerRef",type:"RefCallback<HTMLDivElement | null> | MutableRefObject<HTMLDivElement | null> | null",required:false,description:"Ref to a container that contains input and its affixes\nUseful for positioning of popovers"},{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:"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:"htmlAttributes",type:"Omit<Partial<InputHTMLAttributes<HTMLInputElement>>, ComponentProvidedPropNames | 'type' | 'inputMode'>",required:false,description:"Escape hatch to provide arbitrary html attributes to `input`"},{name:"elementsClassNames",type:"BaseProps['elementsClassNames'] & {\n    numberStepButtons?: string;\n  }",required:false,description:"An escape hatch to tweak styling of internal elements"},{name:"onChange",type:"(value: string, changeReason: TextInputChangeReason, event?: ChangeEvent<HTMLInputElement>) => void",required:false,description:"Change handler. `TextInputChangeReason` utility type is provided"}],propsList:{kind:"complete"},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=162399-8404",keywords:["textinputnext","textfield","text","field","text field","latest","iteration","textinput","component","will","eventually","replace"]},{name:"TextLink",modulePath:"componentsV2/TextLink",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextLink",specifier:"@corva/ui/componentsV2",exportName:"TextLink"},category:"v2",description:"A link component. Can be integrated with routing solutions (like `react-router`) by using the `component` prop. `ref` points to root element",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:"Component content"},{name:"to",type:"string",required:false,description:"URI to navigate to"},{name:"target",type:"HTMLAttributeAnchorTarget",required:false,description:"Target frame to open a link in. You'll most likely need `_self` for same tab or `_blank` for new tab"},{name:"onClick",type:"MouseEventHandler<HTMLElement>",required:false,description:""},{name:"type",type:"'primary' | 'secondary'",required:false,description:"",enumValues:["primary","secondary"]},{name:"underline",type:"'onHover' | 'always' | 'never'",required:false,description:"",enumValues:["onHover","always","never"]},{name:"disabled",type:"boolean",required:false,description:""},{name:"disableTooltip",type:"boolean",required:false,description:""},{name:"component",type:"ComponentType<Omit<\n      TextLinkProps,\n      'component' | 'disabled' | 'testId' | 'type' | 'underline' | 'disableTooltip'\n    > & {\n      'data-testid'?: string;\n    }>",required:false,description:"Component that will be rendered in place of an `<a/>` tag"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<TextLink {...props} />"},{name:"FontInheritance",description:"Link inherits the font parameters of its container.",code:"<SbColumn alignItems=\"stretch\">\n    <Text size={20}>\n      Text with size 20 and a <TextLink to=\"https://google.com\">link</TextLink> inside\n    </Text>\n    <Text size={16}>\n      Text with size 16 and a <TextLink to=\"https://google.com\">link</TextLink> inside\n    </Text>\n    <Text size={12}>\n      Text with size 12 and a <TextLink to=\"https://google.com\">link</TextLink> inside\n    </Text>\n    <em>\n      <Text>\n        Italic text and a <TextLink to=\"https://google.com\">link</TextLink> inside\n      </Text>\n    </em>\n  </SbColumn>"},{name:"Types",description:"Component supports several colour options via the `type` prop:\n\n- `primary` (default)\n- `secondary`\n",code:"<Text>\n    <SbColumn>\n      <TextLink type=\"primary\" to=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\">\n        Primary\n      </TextLink>\n      <TextLink type=\"secondary\" to=\"https://lovecraft.fandom.com/wiki/Church_of_Starry_Wisdom\">\n        Secondary\n      </TextLink>\n    </SbColumn>\n  </Text>"},{name:"Component",description:"You can integrate `<TextLink/>` with you favourite flavor of routing solution by providing a `component` prop.",code:"{\n  // This is an example of custom link component. You'll probably want to do something like this:\n  // import { Link } from 'react-router-dom';\n  const Link = (props: ComponentProps<Required<TextLinkProps>['component']>) => {\n    const { to, ...rest } = props;\n\n    const clickHandler = () => {\n      if (to) {\n        window.open(to, '_blank');\n      }\n    };\n\n    return (\n      <button\n        {...rest}\n        onClick={clickHandler}\n        style={{ background: 'none', border: 'none', padding: 0, userSelect: 'none' }}\n      />\n    );\n  };\n\n  return (\n    <SbColumn>\n      <TextLink to=\"https://google.com\" component={Link}>\n        Link with custom render component\n      </TextLink>\n      <TextLink to=\"https://google.com\" component={Link} disabled>\n        Link with custom render component\n      </TextLink>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextLink/TextLink.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=36517-144850",keywords:["textlink","link","anchor","hyperlink","navigate","url","component","integrated","routing","solutions","like","react-router","using","prop","points"]},{name:"TextMiddleTruncated",modulePath:"componentsV2/TextMiddleTruncated",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"TextMiddleTruncated",specifier:"@corva/ui/componentsV2",exportName:"TextMiddleTruncated"},category:"v2",description:"A component that truncates arbitrary text with an ellipsis in the middle, and displays it in a tooltip if it is actually truncated. Does not have own styling.\n\nDue to how the truncation works, this component may not play nice in `flex`-parents: there may be some \"free space\" to the right, which will cause the component to shrink, which will trigger recalculation, which may produce \"free space\", and so on.\n\nIn this case try setting `flex-shrink` to 0 and/or setting `flex-basis`.\n\nYou can use the underlying logic as a standalone utility function like so:\n\n```ts\n\nimport { formatting } from '@corva/ui/utils';\n/* snip */\nconst truncated = formatting.truncateInTheMiddle(\n  'unformatted',\n  containerRef.current.clientWidth,\n  containerRef.current.scrollWidth\n);\n```",agentSummary:"Middle-ellipsis text truncation: start and end stay visible, full text in a tooltip on overflow. String or number children only; TextEndTruncated clips the end and takes any ReactNode.",isExperimental:true,isDeprecated:false,props:[{name:"children",type:"string | number",required:false,description:"Content"},{name:"disableTooltip",type:"boolean",required:false,description:""},{name:"maxLines",type:"number",required:false,description:"Maximum number of lines to display.\nWhen maxLines > 1, the second-to-last line ends with \"...\" and the last line shows the end of text.\n\ne.g. with maxLines=4:\n\nline1\n\nline2\n\nline3...\n\nline4"},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Grid>\n    <Grid.Cell span={2}>\n      <TextMiddleTruncated {...props} />\n    </Grid.Cell>\n  </Grid>"},{name:"DynamicTooltips",description:"Component uses `resizeObserver` to determine if is dimensions have changed, to show a tooltip only if the containing text is being truncated. Content changes are being monitored through `mutationObserver`.\n\nThe truncation algorithm relies on \"average character width\" instead of actual widths, so it can produce incorrect results in some cases",code:"{\n  const [percent, setPercent] = useState(30);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Slider\n        value={percent}\n        onChange={(_, value) => setPercent(value instanceof Array ? value[0] : value)}\n        min={0}\n        max={100}\n      />\n      <SbPlaceholder style={{ width: `${percent}%`, justifyContent: 'start', textAlign: 'left' }}>\n        <div style={{ width: '100%' }}>\n          <TextMiddleTruncated>\n            I'm a text that fits in 100% but does not in 30%\n          </TextMiddleTruncated>\n        </div>\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"},{name:"MaxLinesMode",description:"Use `maxLines` prop to display text on multiple lines with middle truncation. The second-to-last line ends with \"...\", the last line shows the end of the text. e.g., maxLines=4: line1, line2, line3..., line4",code:"{\n  const [width, setWidth] = useState(200);\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <div>\n        <div>Container width: {width}px</div>\n        <Slider\n          value={width}\n          onChange={(_, value) => setWidth(value instanceof Array ? value[0] : value)}\n          min={100}\n          max={400}\n        />\n      </div>\n      <div>\n        <strong>maxLines=1 (default):</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n      <div>\n        <strong>maxLines=2:</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated maxLines={2}>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n      <div>\n        <strong>maxLines=3:</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated maxLines={3}>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n      <div>\n        <strong>maxLines=4:</strong>\n        <SbPlaceholder style={{ width, justifyContent: 'start', textAlign: 'left' }}>\n          <div style={{ width: '100%' }}>\n            <TextMiddleTruncated maxLines={4}>{LONG_TEXT}</TextMiddleTruncated>\n          </div>\n        </SbPlaceholder>\n      </div>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/TextMiddleTruncated/TextMiddleTruncated.tsx",keywords:["textmiddletruncated","middletruncate","middle","truncate","middle truncate","middletruncatedtext","truncated","text","middle truncated text","component","truncates","arbitrary","ellipsis","displays","tooltip","actually"]},{name:"ToggleButtons",modulePath:"componentsV2/ToggleButtons",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"ToggleButtons",specifier:"@corva/ui/componentsV2",exportName:"ToggleButtons"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"options",type:"{\n    label: ReactNode;\n    value: string;\n    disabled?: boolean;\n    tooltip?: ReactNode;\n\n    className?: string;\n    testId?: string;\n  }[]",required:true,description:""},{name:"value",type:"string",required:false,description:""},{name:"onChange",type:"(value: string, event: MouseEvent<HTMLElement>) => void",required:false,description:""},{name:"size",type:"'small' | 'medium' | 'large'",required:false,description:"",enumValues:["small","medium","large"]},{name:"type",type:"'primary' | 'secondary'",required:false,description:"",enumValues:["primary","secondary"]},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState(options[0].value);\n  return (\n    <ToggleButtons\n      {...props}\n      options={options}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n    />\n  );\n}"},{name:"Types",description:"Component's appearance is controlled through the `type` prop:\n\n- `primary` (default)\n- `secondary",code:"{\n  const [value, setValue] = useState<string>();\n\n  return (\n    <SbColumn>\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} type=\"primary\" />\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} type=\"secondary\" />\n    </SbColumn>\n  );\n}"},{name:"Sizes",description:"Component supports different sizes through its `size` prop\n\n- `large`\n- `medium` (default)\n- `small`",code:"{\n  const [value, setValue] = useState<string>();\n  return (\n    <SbColumn>\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} size=\"large\" />\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} size=\"medium\" />\n      <ToggleButtons options={shortOptions} value={value} onChange={setValue} size=\"small\" />\n    </SbColumn>\n  );\n}"},{name:"DisabledButtons",description:"Use `disabled` property on an `options` item to make the corresponding button disabled",code:"{\n  const [value, setValue] = useState<string>();\n\n  const disabledOptions = useMemo(() => {\n    const newOptions: Props['options'] = [...shortOptions];\n    newOptions[1] = {\n      ...newOptions[1],\n      disabled: true,\n    };\n    return newOptions;\n  }, []);\n\n  return <ToggleButtons options={disabledOptions} value={value} onChange={setValue} />;\n}"},{name:"WithTooltips",description:"Use `tooltip` property on an `options` item to add a tooltip to the corresponding button",code:"{\n  const [value, setValue] = useState<string>();\n\n  const tooltipOptions: Props['options'] = shortOptions.map(option => ({\n    ...option,\n    tooltip: `All hail ${option.label}!`,\n  }));\n\n  return <ToggleButtons options={tooltipOptions} value={value} onChange={setValue} />;\n}"},{name:"WithIcons",description:"Component can accept icons as `option` items' `label`s. Icon size is adjusted automatically",code:"{\n  const [value, setValue] = useState<string>();\n\n  const iconOptions = [\n    { value: '1', label: <ChartLineAreaIcon /> },\n    { value: '2', label: <ChartLineIcon /> },\n    { value: '3', label: <ChartProportionIcon /> },\n    { value: '4', label: <ChartStockIcon /> },\n    { value: '5', label: <BarChartIcon /> },\n  ];\n\n  return (\n    <SbColumn>\n      <ToggleButtons options={iconOptions} value={value} onChange={setValue} size=\"large\" />\n      <ToggleButtons options={iconOptions} value={value} onChange={setValue} size=\"medium\" />\n      <ToggleButtons options={iconOptions} value={value} onChange={setValue} size=\"small\" />\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/ToggleButtons/ToggleButtons.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19162-59815",keywords:["togglebuttons","segment","pill","button group","segmented control","toggle"]},{name:"Tooltip",modulePath:"componentsV2/Tooltip",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Tooltip",specifier:"@corva/ui/componentsV2",exportName:"Tooltip"},category:"v2",description:"",isExperimental:true,isDeprecated:false,props:[{name:"title",type:"ReactNode",required:false,description:"Tooltip title. If there's no title or description, the tooltip is not shown"},{name:"description",type:"ReactNode",required:false,description:"Tooltip description: used to provide additional information to the title. If there's no title or description, the tooltip is not shown"},{name:"children",type:"ReactElement",required:true,description:"Element to position a tooltip to.\n\n⚠️ Has to be a *single* reffable child (use `forwardRef` for custom components)"},{name:"placement",type:"MuiTooltipProps['placement']",required:false,description:"Tooltip placement. Positions a tooltip dynamically if undefined"},{name:"disabled",type:"boolean",required:false,description:"Disables the tooltip"},{name:"open",type:"boolean",required:false,description:"If `true`, the tooltip is shown. Used to programmatically control the tooltip"},{name:"onOpen",type:"(event: ChangeEvent<object>) => void",required:false,description:"Callback fired when the component requests to be open."},{name:"onClose",type:"(event: ChangeEvent<object>) => void",required:false,description:"Callback fired when the component requests to be closed."},{name:"enterDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip.\nThis prop won't impact the enter touch delay (`enterTouchDelay`)."},{name:"enterTouchDelay",type:"number",required:false,description:"The number of milliseconds a user must touch the element before showing the tooltip."},{name:"enterNextDelay",type:"number",required:false,description:"The number of milliseconds to wait before showing the tooltip when one was already recently opened."},{name:"interactive",type:"boolean",required:false,description:"Makes a tooltip interactive, i.e. will not close when the user\nhovers over the tooltip before the `leaveDelay` is expired."},{name:"leaveDelay",type:"number",required:false,description:"The number of milliseconds to wait before hiding the tooltip.\nThis prop won't impact the leave touch delay (`leaveTouchDelay`)."},{name:"leaveTouchDelay",type:"number",required:false,description:"The number of milliseconds after the user stops touching an element before hiding the tooltip."},{name:"anchorEl",type:"PopperProps['anchorEl']",required:false,description:""},{name:"className",type:"string",required:false,description:"Will be applied to tooltip container"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<Tooltip {...props}>\n    <Text>Hover me</Text>\n  </Tooltip>"},{name:"WithDescription",description:"Use `description` prop to add a description to the action. Note, that the paddings of the tooltip change if `description` is present.",code:"<SbRow>\n    <Tooltip\n      title={\"Tooltip's title\"}\n      description={\"Tooltip's description that provides more context to the action\"}\n    >\n      <Text>With description</Text>\n    </Tooltip>\n    <Tooltip title={\"Tooltip's title\"}>\n      <Text>Without description</Text>\n    </Tooltip>\n  </SbRow>"},{name:"BigContent",description:"`<Tooltip />` automatically adjusts itself to accommodate very big content. It's recommended to use `interactive` prop to allow user to scroll the contents",code:"<Tooltip\n    title={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(200)}\n    placement=\"left\"\n    interactive\n  >\n    <Text>Hover me</Text>\n  </Tooltip>"},{name:"ControlledTooltip",description:"You can use `<Tooltip />` in controlled mode by using the `open` prop",code:"{\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <SbRow alignItems=\"center\">\n      <Button onClick={() => setIsOpen(value => !value)}>Toggle</Button>\n\n      <Tooltip title=\"Tooltip\" open={isOpen} interactive>\n        <Text>Anchor</Text>\n      </Tooltip>\n    </SbRow>\n  );\n}"},{name:"Compatibility",description:"`<Tooltip />` clones its children, injecting the following props:\n\n- `ref` for positioning\n- `onFocus`, `onBlur`, `onMouseLeave`, `onMouseOver`, `onTouchStart`, `onTouchEnd` to control itself \n- `title`\n- `aria-describedby`\n\nWhen developing \"basic\" components that are likely to be a child of `<Tooltip />`, use the following pattern:\n```\n// Type of rest is {}\nconst {definedProp, otherDefinedProp, ...rest} = props;\nreturn <div /* ... */ ref={ref} {...rest}>\n```",code:"<SbColumn>\n    <Tooltip title=\"Tooltip\">\n      <span>span</span>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Text>Text</Text>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Button>Button</Button>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ButtonIcon>\n        <SettingTwoIcon />\n      </ButtonIcon>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Radio label=\"Radio\" />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Checkbox label=\"Checkbox\" />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <TextLink disableTooltip>Link</TextLink>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Chip>Chip</Chip>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ChipAlert state=\"info\">ChipAlert (deprecated)</ChipAlert>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ChipIndicator>ChipIndicator</ChipIndicator>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Avatar size={40} name=\"Ian Moone\" />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Counter count={25} />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Switch onLabel=\"On\" offLabel=\"Off\" checked />\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <ButtonText>ButtonText</ButtonText>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Tag>Tag</Tag>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <Menu.Item>Menu Item</Menu.Item>\n    </Tooltip>\n\n    <Tooltip title=\"Tooltip\">\n      <FileIcon name=\"test.png\" />\n    </Tooltip>\n\n    <div style={{ position: 'relative', height: '16px', width: '100%' }}>\n      <Tooltip title=\"Tooltip\">\n        <Label>Label</Label>\n      </Tooltip>\n    </div>\n\n    <Tooltip title=\"Tooltip\">\n      <SbPlaceholder>Custom Component won't work, no rest props passthrough</SbPlaceholder>\n    </Tooltip>\n  </SbColumn>"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Tooltip/Tooltip.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9597-19173",keywords:["tooltip","hover","hint","help","info","popup"]},{name:"UniversalLink",modulePath:"componentsV2/UniversalLink",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"UniversalLink",specifier:"@corva/ui/componentsV2",exportName:"UniversalLink"},category:"v2",description:"A link component that connects to either DC router or the usual router. Provides no styling on its own. Requires a router context to function.",isExperimental:true,isDeprecated:false,props:[{name:"href",type:"string",required:true,description:""},{name:"children",type:"ReactNode",required:true,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<UniversalLink {...props} />"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/UniversalLink/UniversalLink.tsx",keywords:["universallink","link","component","connects","either","router","usual","provides","styling","requires","context"]},{name:"WellArchivedMessage",modulePath:"componentsV2/WellArchivedMessage",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"WellArchivedMessage",specifier:"@corva/ui/componentsV2",exportName:"WellArchivedMessage"},category:"v2",description:"Component that displays a message about a well being archioved\n\n⚠️ Can not be used outside of an app",isExperimental:true,isDeprecated:false,props:[{name:"displayComponent",type:"ComponentType<WellArchivedMessageDisplayComponentProps>",required:false,description:"Display component to use"},{name:"onClose",type:"() => void",required:false,description:"Will be called when message is closed"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"<YourApp>\n    <WellArchivedMessage {...props} />\n  </YourApp>"},{name:"CustomDisplayComponents",description:"You can create your own display components to suit your design needs. Pass them as `displayComponent`. The utility type `WellArchivedMessageDisplayComponentProps` is provided to simplify props handling.",code:"{\n  const MyCustomDisplayComponent = useMemo(\n    () =>\n      ({ onClose }: WellArchivedMessageDisplayComponentProps) =>\n        (\n          <div\n            style={{\n              position: 'absolute',\n              inset: '0 0 auto 0',\n              background: 'var(--palette-warning-main)',\n              display: 'flex',\n              padding: '0 10px',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n            }}\n          >\n            <Text color=\"T9\">Some custom text here</Text>\n            <Button onClick={onClose}>Close message</Button>\n          </div>\n        ),\n    []\n  );\n\n  return (\n    <YourApp>\n      <WellArchivedMessage displayComponent={MyCustomDisplayComponent} />\n    </YourApp>\n  );\n}"},{name:"WithCustomMessage",description:"You can configure default display components by creating your own, and providing it as the `displayComponent` prop.\n\nDisplay components are exposed as `WellArchivedMessage.DisplayComponents.*`",code:"{\n  const DisplayComponent = useMemo(\n    () => (props: WellArchivedMessageDisplayComponentProps) =>\n      (\n        <WellArchivedMessage.DisplayComponents.Modal {...props}>\n          Some\n          <br />\n          Custom\n          <br />\n          Message\n        </WellArchivedMessage.DisplayComponents.Modal>\n      ),\n    []\n  );\n\n  return (\n    <YourApp>\n      <WellArchivedMessage displayComponent={DisplayComponent} />\n    </YourApp>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/WellArchivedMessage/WellArchivedMessage.tsx",keywords:["wellarchivedmessage","component","displays","message","about","well","being","archioved","used","outside"]},{name:"AutocompleteNext",modulePath:"componentsV2/Autocomplete/Autocomplete",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"AutocompleteNext",specifier:"@corva/ui/componentsV2",exportName:"AutocompleteNext"},category:"v2",description:"A select/autocomplete/search with options component.\n\nProvides generic `AutocompleteProps<OptionType, Multiple>` and `AutocompleteChangeHandler<OptionType, Multiple>` types to simplify typing:\n\n```ts\nconst handler = useCallback<AutocompleteChangeHandler<Option>>(/* snip */); // For single select (default)\nconst handler = useCallback<AutocompleteChangeHandler<Option, true>>(/* snip */); // For multi select\n\n```\n\nYou can see usage examples in stories below.\n\nUse `label` for a visible accessible name. If a visible label is not appropriate, pass `aria-label` or `aria-labelledby` through `htmlAttributes`.",agentSummary:"Type-to-filter select over id/title options, single or multi, with onCreate and onInputChange for search and creatable flows. Use Select for a plain dropdown with no typing.",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"TextInputNextProps['size']",required:false,description:""},{name:"labelPlacement",type:"TextInputNextProps['labelPlacement']",required:false,description:""},{name:"elementsClassNames",type:"TextInputNextProps['elementsClassNames']",required:false,description:"Escape hatch to fine-tune the styling of underlying elements"},{name:"htmlAttributes",type:"TextInputNextProps['htmlAttributes']",required:false,description:"HTML attributes forwarded to the underlying input."},{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 false | undefined ? 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:"TextInputNextProps['status']",required:false,description:""},{name:"message",type:"TextInputNextProps['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:"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:"useOnlyOptionButton",type:"boolean",required:false,description:"If `multiple === true` shows a \"Select Only\" button on option that selects only the corresponding option"},{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:"popperProps",type:"Partial<AutocompletePopperProps>",required:false,description:"Escape hatch to customize dropdown popper behavior.\n`open`, `anchorEl`, and `children` are controlled internally."},{name:"onOpen",type:"() => void",required:false,description:"Called when the dropdown is opened"},{name:"onClose",type:"(reason: MuiAutocompleteCloseReason) => void",required:false,description:"Called when the dropdown is closed"},{name:"listboxComponent",type:"ComponentType<HTMLAttributes<HTMLElement>>",required:false,description:"Custom listbox component for rendering options (e.g., virtualized list)"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<number[]>([]);\n\n  return (\n    <AutocompleteNext\n      {...props}\n      options={options}\n      value={value}\n      onChange={(newValue, reason, event) => {\n        props.onChange?.(newValue as never, reason, event);\n        // These type castings is generally not needed, Autocomplete will determine its type based on `multiple` prop\n        // Which generally should be statically analyzable\n        if (newValue instanceof Array) {\n          setValue((newValue as Option[]).map(({ id }) => id));\n        } else if (newValue) {\n          setValue([(newValue as Option)?.id]);\n        } else {\n          setValue([]);\n        }\n      }}\n      filterOptions={undefined}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop, inherited from `<TextInput/>`:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext {...commonProps} label=\"Small\" size=\"small\" />\n      <AutocompleteNext {...commonProps} label=\"Medium\" size=\"medium\" />\n      <AutocompleteNext {...commonProps} label=\"Large\" size=\"large\" />\n    </SbColumn>\n  );\n}"},{name:"LabelPlacement",description:"Component supports 3 label placement options through a `labelPlacement` prop, inherited from `<TextInput/>`:\n\n- `top` (default)\n- `start`\n- `end`\n",code:"{\n  const [value, setValue] = useState<Option['id']>();\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  const commonProps = {\n    options,\n    value,\n    onChange,\n  };\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext {...commonProps} label=\"Label at the top\" labelPlacement=\"top\" />\n      <AutocompleteNext {...commonProps} label=\"Label at the start\" labelPlacement=\"start\" />\n      <AutocompleteNext {...commonProps} label=\"Label at the end\" labelPlacement=\"end\" />\n    </SbColumn>\n  );\n}"},{name:"OptionsSize",description:"Component supports several option sizes, controlled through `optionSize` prop:\n\n- `medium` (default)\n- `large`",code:"{\n  const [value, setValue] = useState<Option['id']>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Medium options\"\n        optionSize=\"medium\"\n      />\n      <AutocompleteNext\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Large options\"\n        optionSize=\"large\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Single",description:"Single-option is the default behaviour.",code:"{\n  const [value, setValue] = useState<number>();\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option>>(value => {\n    setValue(value?.id);\n  }, []);\n\n  return <AutocompleteNext options={options} value={value} onChange={onChange} label=\"Single\" />;\n}"},{name:"WithObjectsAsValue",description:"You can use objects in `value` prop.\n\n⚠️ Be wary of mixing `T`s and `T['id']`s in `value`: due to [TS bug](https://github.com/microsoft/TypeScript/issues/47599) you may need to provide additional typing to `onChange`",code:"{\n  const [valueSingle, setValueSingle] = useState<Option | undefined>(options[2]);\n  const [valueMultiple, setValueMultiple] = useState<(Option | number)[]>([\n    options[0],\n    options[2],\n    9,\n  ]);\n  const [valueMultiple2, setValueMultiple2] = useState<Option[]>([options[0], options[2]]);\n\n  // There's a [bug in TS](https://github.com/microsoft/TypeScript/issues/47599) which causes `onChange` prop\n  // to have incorrect typing if we mix T and T['id'] in `value`.\n  const onMultipleChange = useCallback<AutocompleteChangeHandler<Option, true>>(\n    v => setValueMultiple(v),\n    []\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        value={valueSingle}\n        onChange={setValueSingle}\n        label=\"With objects as value (single)\"\n      />\n\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={valueMultiple}\n        onChange={onMultipleChange}\n        label=\"With objects as value (multiple, mixed objects and ids)\"\n      />\n\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={valueMultiple2}\n        onChange={setValueMultiple2}\n        label=\"With objects as value (multiple, pure)\"\n      />\n    </SbColumn>\n  );\n}"},{name:"Multiple",description:"Pass `multiple` prop to make component be able to select multiple values.\n\nUse `useAllOption` prop to add a special \"All\" option that allows user to quickly select all options.\n\nUse `useOnlyOptionButton` prop to enable \"Select only\" button on options.",code:"{\n  const [value, setValue] = useState<number[]>([1]);\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'Multiple with \"All\" option'}\n        useAllOption\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with prefix\"\n        useAllOption\n        prefix={<PeoplesIcon />}\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label={'With \"Select Only\" option'}\n        useOnlyOptionButton\n      />\n    </SbColumn>\n  );\n}"},{name:"MultipleWithCustomSelectedRender",description:"Use `renderSelected` prop to customize how the selected values are rendered.\n\nBy default the component displays the selected item's title, \"X Selected\", or \"All\", depending on its value. It is provided as `AutocompleteNext.selectedValueRenderers.default`.\n\nYou can use the \"Multiline Chips\" renderer, provided as `AutocompleteNext.selectedValueRenderers.chipsMultiline`",code:"{\n  const [value, setValue] = useState<number[]>([1, 2, 3, 4, 5]);\n\n  const onChange = useCallback<AutocompleteChangeHandler<Option, true>>(value => {\n    setValue(value.map(({ id }) => id));\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={options}\n        onChange={() => {}}\n        label=\"Default multiple - all selected\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={[1, 2, 3]}\n        onChange={() => {}}\n        label=\"Default multiple - some selected\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={[1]}\n        onChange={() => {}}\n        label=\"Default multiple - one selected\"\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with chips\"\n        renderSelected={AutocompleteNext.selectedValueRenderers.chipsMultiline}\n      />\n      <AutocompleteNext\n        multiple\n        options={options}\n        value={value}\n        onChange={onChange}\n        label=\"Multiple with custom value render\"\n        renderSelected={data => {\n          if (data.length === 0) {\n            return null;\n          }\n\n          return (\n            <>\n              <Chip\n                onDelete={data[0].onDelete}\n                size=\"small\"\n                shape=\"square\"\n                className={styles.customChip}\n              >\n                {data[0].option.title}\n              </Chip>\n              {data.length > 1 && ` +${data.length - 1}`}\n            </>\n          );\n        }}\n      />\n    </SbColumn>\n  );\n}"},{name:"Empty",description:"Use `noOptionsMessage` option to customize the message that is shown when there are no options to select",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext label=\"Empty\" onChange={() => {}} />\n      <AutocompleteNext\n        label=\"Empty with custom empty message\"\n        noOptionsMessage={<u>Nobody here but us chickens</u>}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Loading",description:"Use `loading` prop to indicate that some data is being loaded. Note that if there are no options, a custom message will be shown",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Loading State\"\n        loading\n      />\n\n      <AutocompleteNext\n        options={options.slice(0, 0)}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Empty Loading State\"\n        loading\n      />\n    </SbColumn>\n  );\n}"},{name:"OptionPrefix",description:"To display an icon/prefix to the left of the option, pass it as a `prefix` property of the option",code:"{\n  const icons = [SearchOne, BroadcastIcon, LineChartIcon, AdjustmentIcon];\n  const optionsWithPrefix = options.slice(0, 4).map((option, index) => {\n    const Icon = icons[index];\n    return { ...option, prefix: <Icon /> };\n  });\n  const [valueArr, setValueArr] = useState<number[]>();\n  const [value, setValue] = useState<number>();\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={optionsWithPrefix}\n        value={value}\n        onChange={value => setValue(value?.id)}\n        label=\"Single\"\n      />\n      <AutocompleteNext\n        multiple\n        options={optionsWithPrefix}\n        value={valueArr}\n        onChange={value => setValueArr(value?.map(({ id }) => id))}\n        label=\"Multiple\"\n      />\n    </SbColumn>\n  );\n}"},{name:"CustomOptionRender",description:"You can control how the option renders by providing the `renderOption` prop.\n\nNote that in this case, you will need to wrap the texts in `<TextMiddleTruncated/>` or `<TextEndTruncated/>`",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"Custom Option Render\"\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"CustomOptionFilter",description:"You can control how the option is filtered by providing the `filterOptions` prop. Useful when you want to add some additional data to the filtering condition.\n\nIn this example, you can also filter by group.",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"Custom Option Filter\"\n      filterOptions={(options, inputValue) =>\n        options.filter(\n          ({ title, group }) =>\n            title.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase()) ||\n            group.toLocaleLowerCase().includes(inputValue?.toLocaleLowerCase())\n        )\n      }\n      renderOption={option => (\n        <>\n          <TextMiddleTruncated>{`Name: ${option.title}`}</TextMiddleTruncated>\n          <Text size={12} color=\"T6\">\n            {option.group}\n          </Text>\n        </>\n      )}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"Disabled",description:"You can control which options are disabled by providing the `getOptionDisabled` prop",code:"{\n  const [value, setValue] = useState<number>();\n\n  return (\n    <AutocompleteNext\n      label=\"With disabled options\"\n      options={options}\n      value={value}\n      onChange={option => setValue(option?.id)}\n      getOptionDisabled={option => option.group === 'Great Old Ones'}\n    />\n  );\n}"},{name:"Prefix",description:"You can add a prefix to the component through `prefix` prop.",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"With Prefix\"\n      prefix={<SearchOne />}\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"PopupIconAndClearButton",description:"You can control the existence of \"Clear\" button and \"Popup Icon\" by using `clearable` and `showPopupIcon` props respectively",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        label=\"Default: Clearable, Popup Icon\"\n        value={1}\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label=\"Not Clearable\"\n        value={1}\n        clearable={false}\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label=\"No Popup Icon\"\n        value={1}\n        showPopupIcon={false}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"Error",description:"To display the component in an error state, use the `status` prop. You can add a message with a `message` prop",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"With Error\"\n      status=\"error\"\n      message=\"Some error message\"\n      value={1}\n      onChange={() => {}}\n    />\n  );\n}"},{name:"OnInputChange",description:"You can access what user is typing by providing the `onInputChange` prop. Useful for implementing search-like behaviour",code:"{\n  const [value, setValue] = useState<number>();\n  const [valueArray, setValueArray] = useState<number[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [loadedOptions, setLoadedOptions] = useState<typeof options>([]);\n  const currentSearchRef = useRef<string>();\n\n  const onInputChange = useCallback(async (value: string) => {\n    if (!value.trim()) {\n      return;\n    }\n\n    currentSearchRef.current = value;\n    setLoading(true);\n    await new Promise(r => setTimeout(r, 2_000));\n    if (currentSearchRef.current === value) {\n      setLoading(false);\n      const newOptions = options.map(option => ({\n        ...option,\n        title: `${value}: ${option.title}`,\n      }));\n      setLoadedOptions(newOptions);\n    }\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        value={value}\n        onChange={option => setValue(option?.id)}\n        options={loadedOptions}\n        label=\"Searchable\"\n        prefix={<SearchOne />}\n        onInputChange={onInputChange}\n        loading={loading}\n      />\n      <AutocompleteNext\n        value={valueArray}\n        onChange={option => setValueArray((option || []).map(({ id }) => id))}\n        options={loadedOptions}\n        label=\"Searchable\"\n        prefix={<SearchOne />}\n        onInputChange={onInputChange}\n        loading={loading}\n        multiple\n      />\n    </SbColumn>\n  );\n}"},{name:"WithGroups",description:"You can group options by providing the `groupBy` prop.\n\nYou can control the render of groups by providing the `renderGroup` prop.",code:"{\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={options}\n        label=\"With Groups\"\n        value={1}\n        groupBy={option => option.group}\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label={'With Groups, multiselect with \"All\" option'}\n        value={[1]}\n        groupBy={option => option.group}\n        multiple\n        useAllOption\n        onChange={() => {}}\n      />\n      <AutocompleteNext\n        options={options}\n        label=\"With Custom Groups\"\n        value={1}\n        groupBy={option => option.group}\n        renderGroup={({ children, group }) => {\n          return (\n            <div>\n              <div style={{ textAlign: 'center' }}>\n                <Text size={12}>{group}</Text>\n              </div>\n              <ul style={{ padding: 0 }}>{children}</ul>\n            </div>\n          );\n        }}\n        onChange={() => {}}\n      />\n    </SbColumn>\n  );\n}"},{name:"DisableFiltering",description:"You can disable option filtering by providing the `disableFilter` prop. In this case, the component will behave as regular `<select/>`",code:"{\n  return (\n    <AutocompleteNext\n      options={options}\n      label=\"No Autocomplete\"\n      value={1}\n      onChange={() => {}}\n      disableFiltering\n    />\n  );\n}"},{name:"Createable",description:"By providing the `onCreate` prop you can add the ability to add user-defined options to the select",code:"{\n  const [ownOptions, setOwnOptions] = useState(options);\n  const [value, setValue] = useState<number[]>([]);\n\n  const createOption = useCallback((title: string) => {\n    const newOption: typeof options[number] = {\n      id: Math.ceil(Math.random() * 1000),\n      title,\n      group: 'User-Created',\n    };\n\n    setValue(oldValue => [newOption.id, ...oldValue]);\n    setOwnOptions(oldValue => [newOption, ...oldValue]);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <AutocompleteNext\n        options={ownOptions}\n        label=\"Createable\"\n        value={value[0]}\n        onChange={option => setValue(option ? [option.id] : [])}\n        onCreate={createOption}\n      />\n      <AutocompleteNext\n        label=\"Createable Multiple\"\n        options={ownOptions}\n        value={value}\n        onChange={options => setValue(options.map(({ id }) => id))}\n        onCreate={createOption}\n        multiple\n        useAllOption\n      />\n    </SbColumn>\n  );\n}"},{name:"DropdownClassName",description:"You can add a custom class name to a dropdown by using the `dropdownClassName` prop",code:"<AutocompleteNext\n    options={options}\n    label=\"With custom dropdown styles\"\n    dropdownClassName={styles.customDropdown}\n    onChange={() => {}}\n  />"},{name:"WithInfiniteScroll",description:"Infinite scroll with search example",code:"{\n  const [value, setValue] = useState<AutocompleteOption>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [data, setData] = useState<AutocompleteOption[]>([]);\n\n  const searchChangeTimerRef = useRef<NodeJS.Timeout>();\n  const searchRef = useRef('');\n  const pageRef = useRef(1);\n  const hasMoreRef = useRef(true);\n  const isLoadingRef = useRef(false);\n\n  // These should be in constants.ts\n  const perPage = 20;\n  const ScrollThreshold = 50;\n\n  const fetchNext = useCallback(async () => {\n    if (!hasMoreRef.current) {\n      return;\n    }\n\n    setIsLoading(true);\n    isLoadingRef.current = true;\n\n    const page = pageRef.current;\n    const search = searchRef.current.trim();\n\n    const loaded = await loadOptions({\n      search,\n      page,\n      perPage,\n    });\n\n    // Search changed while we were loading stuff\n    if (search !== searchRef.current.trim()) {\n      return;\n    }\n\n    hasMoreRef.current = loaded.length >= perPage;\n    setData(prev => (page > 1 ? [...prev, ...loaded] : loaded));\n    setIsLoading(false);\n    pageRef.current = page + 1;\n    isLoadingRef.current = false;\n  }, []);\n\n  const onInputChange = useCallback(\n    (inputValue: string) => {\n      if (searchRef.current !== inputValue) {\n        clearTimeout(searchChangeTimerRef.current);\n        searchChangeTimerRef.current = setTimeout(() => {\n          pageRef.current = 1;\n          hasMoreRef.current = true;\n          fetchNext();\n        }, 200);\n      }\n\n      searchRef.current = inputValue;\n    },\n    [fetchNext]\n  );\n\n  useEffect(() => {\n    searchRef.current = '';\n    pageRef.current = 1;\n    hasMoreRef.current = true;\n    fetchNext();\n  }, [fetchNext]);\n\n  const onScroll = useCallback<UIEventHandler<HTMLUListElement>>(\n    e => {\n      const element = e.currentTarget;\n      const isNearBottom =\n        element.scrollTop + element.clientHeight >= element.scrollHeight - ScrollThreshold;\n\n      if (isNearBottom && !isLoadingRef.current) {\n        fetchNext();\n      }\n    },\n    [fetchNext]\n  );\n\n  const ListBoxWithScroll = useCallback<Required<AutocompleteNextProps>['listboxComponent']>(\n    ({ children, ...rest }) => {\n      return (\n        <ul {...rest} onScroll={onScroll}>\n          {children}\n        </ul>\n      );\n    },\n    [onScroll]\n  );\n\n  const onCloseDropdown = useCallback(() => {\n    onInputChange('');\n  }, [onInputChange]);\n\n  return (\n    <AutocompleteNext\n      value={value}\n      onChange={setValue}\n      label=\"With Infinite scroll and search\"\n      options={data}\n      status={isLoading ? 'loading' : undefined}\n      onInputChange={onInputChange}\n      // Needed to reset innser state on dropdown close\n      onClose={onCloseDropdown}\n      // ListBox with scroll detection\n      listboxComponent={ListBoxWithScroll}\n      // Id function needed to disable filtering, assuming all filtering is done server-side\n      // for instance - when searching users by email\n      filterOptions={id}\n    />\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Autocomplete/Autocomplete.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=142449-52520",keywords:["autocompletenext","select","autocomplete","search","options","component","provides","generic","autocompleteprops","optiontype","multiple"]},{name:"Cell",modulePath:"componentsV2/Grid/Cell",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"Cell",specifier:"@corva/ui/componentsV2",exportName:"Cell"},category:"v2",description:"",isExperimental:false,isDeprecated:false,props:[{name:"children",type:"ReactNode",required:false,description:""},{name:"span",type:"number",required:false,description:""},{name:"rows",type:"number",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"testId",type:"string",required:false,description:""}],propsList:{kind:"complete"},examples:[],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/Grid/Cell.tsx",keywords:["cell"]},{name:"DatePickerNext",modulePath:"componentsV2/DatePicker/DatePicker",importPath:"@corva/ui/componentsV2",importRecipe:{kind:"barrel",componentName:"DatePickerNext",specifier:"@corva/ui/componentsV2",exportName:"DatePickerNext"},category:"v2",description:"A date/date-tme/month picker with range support.\n\nProvides generic `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>` types to simplify typing:\n\n```ts\nconst handler = useCallback<DatePickerChangeHandler>(/* snip */); // For single select (default)\nconst handler = useCallback<DatePickerChangeHandler<true>>(/* snip */); // For range select\n\n```\n\nYou can see usage examples in stories below",agentSummary:"Date, date-time, or month picker with range support over native Date values. Replaces the deprecated V2 DatePicker and the moment-based V1 DatePicker.",isExperimental:true,isDeprecated:false,props:[{name:"testId",type:"string",required:false,description:""},{name:"className",type:"string",required:false,description:""},{name:"size",type:"TextInputNextProps['size']",required:false,description:""},{name:"labelPlacement",type:"TextInputNextProps['labelPlacement']",required:false,description:""},{name:"elementsClassNames",type:"TextInputNextProps['elementsClassNames']",required:false,description:""},{name:"value",type:"DatePickerValue<IsRange>",required:false,description:""},{name:"onChange",type:"DatePickerChangeHandler<IsRange>",required:false,description:""},{name:"label",type:"ReactNode",required:false,description:""},{name:"placeholder",type:"string",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:"type",type:"DatePickerType",required:false,description:"Type: dates only / date + time / month"},{name:"minDate",type:"Date",required:false,description:"Minimum selectable date"},{name:"maxDate",type:"Date",required:false,description:"maximum selectable date"},{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"}],propsList:{kind:"complete"},examples:[{name:"Default",description:"",code:"{\n  const [value, setValue] = useState<DatePickerValue>();\n\n  return (\n    <DatePickerNext\n      {...props}\n      value={value}\n      onChange={(value, ...rest) => {\n        props.onChange?.(value, ...rest);\n        setValue(value);\n      }}\n      range={false}\n    />\n  );\n}"},{name:"Sizes",description:"Component supports 3 sizes through a `size` prop, inherited from `<TextInput/>`:\n\n- `small` (default)\n- `medium`\n- `large`\n",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Small\" size=\"small\" value={value} onChange={setValue} />\n      <DatePickerNext label=\"Medium\" size=\"medium\" value={value} onChange={setValue} />\n      <DatePickerNext label=\"Large\" size=\"large\" value={value} onChange={setValue} />\n    </SbColumn>\n  );\n}"},{name:"LabelPlacement",description:"Component supports 3 label placement options through a `labelPlacement` prop, inherited from `<TextInput/>`:\n\n- `top` (default)\n- `start`\n- `end`\n",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext\n        label=\"Label at the top\"\n        labelPlacement=\"top\"\n        value={value}\n        onChange={setValue}\n      />\n      <DatePickerNext\n        label=\"Label at the start\"\n        labelPlacement=\"start\"\n        value={value}\n        onChange={setValue}\n      />\n      <DatePickerNext\n        label=\"Label at the end\"\n        labelPlacement=\"end\"\n        value={value}\n        onChange={setValue}\n      />\n    </SbColumn>\n  );\n}"},{name:"Formatting",description:"You can configure the format in which values will be displayed by using the `format` prop.\n\nIf not set, the component uses different default formats for different `type`s and for different `range` values:\n\n`range={false}`\n  * `date`: `MMM DD YYYY`\n  * `dateTime`: `MMM DD YYYY HH:mm`\n  * `month`: `MMMM YYYY`\n\n`range={true}`\n  * `date`: `MM/DD/YYYY`\n  * `dateTime`: `MM/DD/YYYY HH:mm`\n  * `month`: `MMM YYYY`\n\nFull list of accepted tokens can be found [here](https://momentjs.com/docs/#/displaying/format/)",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 5, 16, 17));\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Default format\" value={value} onChange={setValue} />\n      <DatePickerNext\n        label=\"ISO format\"\n        value={value}\n        onChange={setValue}\n        format=\"YYYY-MM-DDTHH:mm:ss.SSSZ\"\n      />\n    </SbColumn>\n  );\n}"},{name:"MinMax",description:"You can limit minimum and maximum selectable dates by providing `minDate` and `maxDate` props respectively.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Date - no constraints\" value={value} onChange={setValue} />\n      <DatePickerNext\n        label=\"Date - constrained\"\n        value={value}\n        onChange={setValue}\n        minDate={new Date(2024, 11, 31)}\n        maxDate={new Date(2026, 0, 1)}\n      />\n      <DatePickerNext\n        label=\"DateTime - constrained\"\n        value={value}\n        onChange={setValue}\n        minDate={new Date(2024, 11, 31)}\n        maxDate={new Date(2026, 0, 1)}\n        type=\"dateTime\"\n      />\n    </SbColumn>\n  );\n}"},{name:"DisabledDates",description:"You can disable any date by using the `getTileDisabled` prop.\n\nPlease note, this is ***not*** meant to be used as an alternative method of setting `minDate` or `maxDate`",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 11));\n  return (\n    <DatePickerNext\n      label=\"Date with disabled dates\"\n      value={value}\n      onChange={setValue}\n      getTileDisabled={({ date }) =>\n        date.getTime() === new Date(2025, 8, 10).getTime() ||\n        date.getTime() === new Date(2025, 8, 11).getTime() ||\n        date.getTime() === new Date(2025, 8, 12).getTime()\n      }\n    />\n  );\n}"},{name:"DateAndTimeMode",description:"You can select time in addition to date by using the `type` prop: `type=\"dateTime\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8, 3, 51, 0));\n\n  return <DatePickerNext label=\"Date + Time\" value={value} onChange={setValue} type=\"dateTime\" />;\n}"},{name:"MonthsSelection",description:"You can select months instead of days by using the `type` prop: `type=\"month\"`.",code:"{\n  const [value, setValue] = useState<DatePickerValue>(new Date(2025, 8, 8));\n\n  return <DatePickerNext label=\"Month\" value={value} onChange={setValue} type=\"month\" />;\n}"},{name:"RangeSelection",description:"You can select a time range by using the `range` prop. Notice, that it changes types of DatePickerNext's `value` and `onChange` props.\n\nTo simplify working with those, 2 helper types are exported: `DatePickerValue<IsRange>` and `DatePickerChangeHandler<IsRange>`",code:"{\n  const [value, setValue] = useState<DatePickerValue<true>>([\n    new Date(2023, 8, 8, 3, 51, 0),\n    new Date(2025, 8, 14, 18, 6, 0),\n  ]);\n\n  const onChange = useCallback<DatePickerChangeHandler<true>>(value => {\n    // Do something with value here\n    setValue(value);\n  }, []);\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <DatePickerNext label=\"Date\" value={value} onChange={onChange} type=\"date\" range />\n      <DatePickerNext label=\"Month\" value={value} onChange={onChange} type=\"month\" range />\n      <DatePickerNext label=\"Date & Time\" value={value} onChange={onChange} type=\"dateTime\" range />\n    </SbColumn>\n  );\n}"},{name:"UsingPartsOfDatePicker",description:"You can use parts of `<DatePickerNext/>` exported as `DatePickerNext.Controls` and `DatePickerNext.Grid`.\n\nThese components are pretty simple, so you will need to write accompanying logic yourself.",code:"{\n  const [activeStartDate, setActiveStartDate] = useState<Date>(new Date(2025, 8, 8, 5, 16, 17));\n  const [selected, setSelected] = useState<Date>();\n\n  return (\n    <SbColumn>\n      <SbPlaceholder>\n        <DatePickerNext.Controls date={activeStartDate} setDate={setActiveStartDate} />\n      </SbPlaceholder>\n      <SbPlaceholder>\n        <DatePickerNext.Grid\n          onChange={setSelected}\n          activeStartDate={activeStartDate}\n          selected={selected}\n        />\n      </SbPlaceholder>\n    </SbColumn>\n  );\n}"}],sourceUrl:"https://github.com/corva-ai/corva-ui/blob/develop/src/componentsV2/DatePicker/DatePicker.tsx",figmaUrl:"https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=162296-12406",keywords:["datepickernext","date","date-tme","month","picker","range","support","provides","generic","datepickervalue","isrange"]}];
 var componentsV1Data = [{
   name: "AdvancedSlider",
@@ -3074,7 +3074,8 @@ var componentsV1Data = [{
     name: "attachment",
     type: "StoredAttachment | null",
     required: false,
-    description: ""
+    description: "",
+    deprecated: "Use `storedAttachments`."
   }, {
     name: "attachments",
     type: "AttachmentPreviewItem[]",
@@ -3260,12 +3261,14 @@ var componentsV1Data = [{
     name: "attachment",
     type: "UploadedAttachment | null",
     required: false,
-    description: ""
+    description: "",
+    deprecated: "Use `attachments` — kept so single-attachment callers keep working."
   }, {
     name: "onAttachmentChange",
     type: "(attachment: UploadedAttachment | null) => void",
     required: false,
-    description: ""
+    description: "",
+    deprecated: "Use `onAttachmentsChange`."
   }, {
     name: "attachmentError",
     type: "string | null",
@@ -9820,7 +9823,8 @@ var componentsV1Data = [{
     name: "isWorkflowsEditModal",
     type: "boolean",
     required: false,
-    description: ""
+    description: "",
+    deprecated: "Retained for WorkflowEditRow compatibility; has no effect."
   }],
   propsList: {
     kind: "complete"
@@ -21246,6 +21250,19 @@ const ITEM_INDENT = '  ';
 // follows a blank line out of the item and opens a column-0 fence outside it. The markdown is kept.
 const asItemBody = text => text.split('\n').map(line => `${ITEM_INDENT}${line}`).join('\n');
+/**
+ * A deprecated item opens with the marker and the tag's text, so an agent reading the list meets
+ * it before the description; a tag with no description beside it is the whole body.
+ */
+const itemBodyOf = ({
+  description,
+  deprecated
+}) => {
+  if (deprecated === undefined) return description;
+  const marker = deprecated ? `${DEPRECATED_MARKER} — ${deprecated}` : DEPRECATED_MARKER;
+  return description ? `${marker}\n${description}` : marker;
+};
 /**
  * `note` sits directly under the heading rather than after the items: it qualifies every line below
  * it, and a caveat a reader meets only after a 40-prop list has already been read is a caveat that
@@ -21259,7 +21276,7 @@ const formatDocList = (heading, items, note) => {
     const required = p.required ? ' (required)' : '';
     const defaultVal = p.defaultValue ? ` = ${p.defaultValue}` : '';
     const enumVals = p.enumValues ? `\n${ITEM_INDENT}Values: ${p.enumValues.map(v => `'${v}'`).join(' | ')}` : '';
-    return `- ${bold(p.name)}${required}: ${code(p.type)}${defaultVal}\n${asItemBody(p.description)}${enumVals}`;
+    return `- ${bold(p.name)}${required}: ${code(p.type)}${defaultVal}\n${asItemBody(itemBodyOf(p))}${enumVals}`;
   }).join('\n\n')}`;
 };