@corva/ui 3.58.0-1 → 3.58.0-2

package/mcp-server/server.mjs

@@ -196,6 +196,8 @@ const createNoopMetricsClient = () => ({
     recordToolInvocation: () => { },
     recordToolError: () => { },
     recordToolEmptyResult: () => { },
+    recordPromptInvocation: () => { },
+    recordPromptError: () => { },
     recordSession: () => { },
     recordSessionEnd: () => { },
 });
@@ -226,9 +228,9 @@ const validateDsn = (dsn) => {
     return url.href;
 };
 
-const MCP_SERVER_VERSION = '1.1.0';
+const MCP_SERVER_VERSION = '1.2.0';
 
-var version = "3.58.0-1";
+var version = "3.58.0-2";
 
 const CORVA_UI_VERSION = version;
 
@@ -242,8 +244,14 @@ const createMetricsClient = (meter) => {
     const emptyResultCounter = meter.createCounter('mcp.server.tool.empty_results', {
         description: 'Number of tool invocations returning empty results',
     });
+    const promptInvocationCounter = meter.createCounter('mcp.server.prompt.invocations', {
+        description: 'Number of prompt invocations',
+    });
+    const promptErrorCounter = meter.createCounter('mcp.server.prompt.errors', {
+        description: 'Number of prompt invocation errors',
+    });
     const operationDuration = meter.createHistogram('mcp.server.operation.duration', {
-        description: 'Duration of tool operations in milliseconds',
+        description: 'Duration of MCP operations (tool and prompt calls) in milliseconds',
         unit: 'ms',
     });
     const sessionCounter = meter.createCounter('mcp.server.sessions', {
@@ -258,8 +266,9 @@ const createMetricsClient = (meter) => {
     });
     return {
         recordToolInvocation: (toolName, durationMs) => {
+            const attrs = { 'gen_ai.tool.name': toolName, 'mcp.method.name': 'tools/call' };
             invocationCounter.add(1, { 'gen_ai.tool.name': toolName });
-            operationDuration.record(durationMs, { 'gen_ai.tool.name': toolName });
+            operationDuration.record(durationMs, attrs);
             errorCounter.add(0, { 'gen_ai.tool.name': toolName });
             emptyResultCounter.add(0, { 'gen_ai.tool.name': toolName });
         },
@@ -269,6 +278,15 @@ const createMetricsClient = (meter) => {
         recordToolEmptyResult: toolName => {
             emptyResultCounter.add(1, { 'gen_ai.tool.name': toolName });
         },
+        recordPromptInvocation: (promptName, durationMs) => {
+            const attrs = { 'gen_ai.prompt.name': promptName, 'mcp.method.name': 'prompts/get' };
+            promptInvocationCounter.add(1, { 'gen_ai.prompt.name': promptName });
+            operationDuration.record(durationMs, attrs);
+            promptErrorCounter.add(0, { 'gen_ai.prompt.name': promptName });
+        },
+        recordPromptError: (promptName, errorType) => {
+            promptErrorCounter.add(1, { 'gen_ai.prompt.name': promptName, 'error.type': errorType });
+        },
         recordSession: (clientName, clientVersion, projectIdentity) => {
             sessionCounter.add(1, {
                 'mcp.client.name': clientName || UNKNOWN_CLIENT_ATTR,
@@ -314,6 +332,7 @@ const createNoopTelemetryClient = () => ({
     sessionId: '',
     metrics: createNoopMetricsClient(),
     recordToolCall: () => { },
+    recordPromptCall: () => { },
     recordInitialize: () => { },
     shutdown: async () => { },
 });
@@ -360,6 +379,49 @@ const recordToolSpan = (tracer, attrs) => {
     }
 };
 
+const recordPromptSpan = (tracer, attrs) => {
+    if (!tracer) {
+        return;
+    }
+    const span = tracer.startSpan(`prompts/get ${attrs.promptName}`, { kind: SpanKind.SERVER, startTime: attrs.startTime }, attrs.parentContext);
+    try {
+        span.setAttributes({
+            'gen_ai.prompt.name': attrs.promptName,
+            'gen_ai.operation.name': 'execute_prompt',
+            'mcp.method.name': 'prompts/get',
+            'corva.mcp.prompt.arguments': attrs.args,
+            'corva.mcp.prompt.result_size_bytes': attrs.resultSizeBytes,
+            'corva.mcp.prompt.message_count': attrs.messageCount,
+        });
+        span.setAttribute('mcp.client.name', attrs.clientName || UNKNOWN_CLIENT_ATTR);
+        span.setAttribute('mcp.client.version', attrs.clientVersion || UNKNOWN_CLIENT_ATTR);
+        if (attrs.sessionId) {
+            span.setAttribute('mcp.session.id', attrs.sessionId);
+        }
+        if (attrs.protocolVersion) {
+            span.setAttribute('mcp.protocol.version', attrs.protocolVersion);
+        }
+        if (attrs.networkTransport) {
+            span.setAttribute('network.transport', attrs.networkTransport);
+        }
+        if (attrs.requestId !== undefined) {
+            span.setAttribute('jsonrpc.request.id', String(attrs.requestId));
+        }
+        if (attrs.extraAttrs) {
+            span.setAttributes(attrs.extraAttrs);
+        }
+        if (attrs.isError) {
+            if (attrs.errorType) {
+                span.setAttribute('error.type', attrs.errorType);
+            }
+            span.setStatus({ code: SpanStatusCode.ERROR });
+        }
+    }
+    finally {
+        span.end(attrs.endTime);
+    }
+};
+
 const recordInitSpan = (tracer, attrs) => {
     if (!tracer) {
         return;
@@ -423,6 +485,12 @@ const createTelemetryResource = () => new Resource({
 
 const createTracerTelemetryClient = (tracer, sessionId, metrics, providerShutdown, logger) => {
     let hasLoggedSpanFailure = false;
+    const warnOnce = () => {
+        if (!hasLoggedSpanFailure) {
+            logger.warn('Telemetry span recording failed, continuing without telemetry');
+            hasLoggedSpanFailure = true;
+        }
+    };
     return {
         isEnabled: () => true,
         sessionId,
@@ -432,10 +500,15 @@ const createTracerTelemetryClient = (tracer, sessionId, metrics, providerShutdow
                 recordToolSpan(tracer, attrs);
             }
             catch {
-                if (!hasLoggedSpanFailure) {
-                    logger.warn('Telemetry span recording failed, continuing without telemetry');
-                    hasLoggedSpanFailure = true;
-                }
+                warnOnce();
+            }
+        },
+        recordPromptCall: attrs => {
+            try {
+                recordPromptSpan(tracer, attrs);
+            }
+            catch {
+                warnOnce();
             }
         },
         recordInitialize: attrs => {
@@ -443,10 +516,7 @@ const createTracerTelemetryClient = (tracer, sessionId, metrics, providerShutdow
                 recordInitSpan(tracer, attrs);
             }
             catch {
-                if (!hasLoggedSpanFailure) {
-                    logger.warn('Telemetry span recording failed, continuing without telemetry');
-                    hasLoggedSpanFailure = true;
-                }
+                warnOnce();
             }
         },
         shutdown: async () => {
@@ -672,6 +742,19 @@ const serializeToolError = (error) => {
     };
 };
 
+const serializePromptResult = (result) => {
+    let sizeBytes = 0;
+    for (const message of result.messages) {
+        if (message.content.type === 'text') {
+            sizeBytes += Buffer.byteLength(message.content.text, 'utf8');
+        }
+    }
+    return {
+        sizeBytes,
+        messageCount: result.messages.length,
+    };
+};
+
 const metaGetter = {
     keys: carrier => Object.keys(carrier),
     get: (carrier, key) => {
@@ -683,11 +766,7 @@ const extractContextFromMeta = (meta) => {
     if (!meta || typeof meta !== 'object') {
         return undefined;
     }
-    const bag = meta;
-    if (!bag.traceparent || typeof bag.traceparent !== 'string') {
-        return undefined;
-    }
-    return propagation.extract(context.active(), bag, metaGetter);
+    return propagation.extract(context.active(), meta, metaGetter);
 };
 
 const SEARCH_CONFIG = {
@@ -8698,311 +8777,1679 @@ var componentsV1Data = [
 				description: ""
 			},
 			{
-				name: "disableCloseOnSelect",
-				type: "boolean",
-				required: false,
-				description: "If `true` - prevents Autocomplete from closing on select"
+				name: "disableCloseOnSelect",
+				type: "boolean",
+				required: false,
+				description: "If `true` - prevents Autocomplete from closing on select"
+			},
+			{
+				name: "multiple",
+				type: "boolean",
+				required: false,
+				description: ""
+			}
+		],
+		examples: [
+			{
+				name: "Default",
+				description: "",
+				code: "{\n  const [value, setValue] = useState<Option>();\n  return (\n    <Autocomplete\n      {...props}\n      value={value}\n      onChange={(e, newValue, ...rest) => {\n        setValue(newValue as Option);\n        props.onChange?.(e, newValue, ...rest);\n      }}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n    />\n  );\n}"
+			},
+			{
+				name: "InputOptions",
+				description: "Input-related options should be done through `renderInput` prop",
+				code: "{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n      renderInput={params => (\n        <TextField {...params} label=\"Field Label\" placeholder=\"Field placeholder\" />\n      )}\n    />\n  );\n}"
+			},
+			{
+				name: "Sizes",
+				description: "Input size can be controlled through `size` prop.",
+				code: "{\n  return (\n    <SbRow>\n      <Autocomplete\n        value={Options[1]}\n        size=\"small\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={(option) => (option as Option).name}\n        renderOption={(option) => (option as Option).name}\n      />\n      <Autocomplete\n        value={Options[1]}\n        size=\"medium\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={(option) => (option as Option).name}\n        renderOption={(option) => (option as Option).name}\n      />\n    </SbRow>\n  );\n}"
+			},
+			{
+				name: "LoadingState",
+				description: "Use `loading` and `loadingText` props to show a custom message when some data is being loaded in the background",
+				code: "{\n  return (\n    <Autocomplete\n      value={null}\n      options={[]}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n      loading\n      loadingText={\n        <>\n          Can't you see, I'm <u>loading</u>!\n        </>\n      }\n    />\n  );\n}"
+			},
+			{
+				name: "DisabledOptions",
+				description: "Use `getOptionDisabled` prop to tell which options are disabled",
+				code: "{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n      getOptionDisabled={(option) => (option as Option).id === '2'}\n    />\n  );\n}"
+			},
+			{
+				name: "Creatable",
+				description: "Works only with string `options`",
+				code: "{\n  const [options, setOptions] = useState(Options.map((option: Option) => option.name));\n  const [value, setValue] = useState<string>();\n\n  return (\n    <Autocomplete\n      options={options}\n      renderInput={params => <TextField {...params} />}\n      value={value}\n      isCreatable\n      getOptionLabel={i => i as string}\n      onChange={(value: any, wasCreated) => {\n        console.log('onChange', value, wasCreated);\n\n        if (wasCreated) {\n          setOptions(prev => [...prev, value as string]);\n        }\n\n        setValue(value);\n      }}\n    />\n  );\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Autocomplete/Autocomplete.tsx",
+		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7954&mode=dev",
+		keywords: [
+			"autocomplete",
+			"search",
+			"typeahead",
+			"suggest",
+			"filter",
+			"wrapper",
+			"over",
+			"mui's",
+			"`<autocomplete/>`",
+			"component",
+			"selecting",
+			"values",
+			"predefined",
+			"list,",
+			"ability"
+		]
+	},
+	{
+		name: "Avatar",
+		modulePath: "components/Avatar",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "Used to display user's avatar or initials",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Default",
+				description: "",
+				code: "<Avatar {...props} />"
+			},
+			{
+				name: "TextSize",
+				description: "Text size is calculated by the following formula: `Math.floor(avatarSize / 2)`\n\nHowever, there are \"fixed\" avatar sizes: `24`, `32`, `40`, `48`, `128`, and `200`, for which their own font sizes are defined",
+				code: "{\n  const sizes = [12, 24, 28, 32, 36, 40, 48, 100, 128, 180, 200];\n  return (\n    <SbColumn>\n      {sizes.map(size => (\n        <SbRow key={size} alignItems=\"center\">\n          {size}px\n          <Avatar size={size} displayName=\"Ian Moone\" />\n        </SbRow>\n      ))}\n    </SbColumn>\n  );\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Avatar/index.tsx",
+		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59473",
+		keywords: [
+			"avatar",
+			"user",
+			"profile",
+			"image",
+			"icon",
+			"used",
+			"display",
+			"user's",
+			"initials"
+		]
+	},
+	{
+		name: "BICOffsetPickerDialog",
+		modulePath: "components/BICOffsetPickerDialog",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+			{
+				name: "defaultSubjectWell",
+				type: "object",
+				required: false,
+				description: ""
+			},
+			{
+				name: "offsetSetting",
+				type: "object",
+				required: false,
+				description: ""
+			},
+			{
+				name: "subjectWellId",
+				type: "number",
+				required: false,
+				description: ""
+			},
+			{
+				name: "companyId",
+				type: "number",
+				required: false,
+				description: ""
+			},
+			{
+				name: "currentUser",
+				type: "object",
+				required: false,
+				description: ""
+			},
+			{
+				name: "isOpen",
+				type: "boolean",
+				required: true,
+				description: ""
+			},
+			{
+				name: "onClose",
+				type: "function",
+				required: true,
+				description: ""
+			},
+			{
+				name: "onSave",
+				type: "function",
+				required: true,
+				description: ""
+			},
+			{
+				name: "addWellsUsabilityInfo",
+				type: "function",
+				required: false,
+				description: ""
+			},
+			{
+				name: "unusableWellAlarm",
+				type: "string",
+				required: false,
+				description: ""
+			}
+		],
+		examples: [
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/BICOffsetPickerDialog/BICOffsetPickerDialog.tsx",
+		keywords: [
+			"bicoffsetpickerdialog"
+		]
+	},
+	{
+		name: "Breadcrumbs",
+		modulePath: "components/Breadcrumbs",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "Used as a hierarchical navigation element at the tp of the page",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+			{
+				name: "pathItems",
+				type: "{ text: string; href?: string }[]",
+				required: true,
+				description: ""
+			},
+			{
+				name: "classes",
+				type: "Record<string, string>",
+				required: false,
+				description: ""
+			},
+			{
+				name: "withBackIcon",
+				type: "boolean",
+				required: false,
+				description: ""
+			},
+			{
+				name: "separator",
+				type: "ReactNode",
+				required: false,
+				description: ""
+			}
+		],
+		examples: [
+			{
+				name: "Default",
+				description: "",
+				code: "<Breadcrumbs {...props} />"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Breadcrumbs/index.tsx",
+		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=31967%3A122781&mode=dev",
+		keywords: [
+			"breadcrumbs",
+			"navigation",
+			"path",
+			"trail",
+			"breadcrumb",
+			"used",
+			"hierarchical",
+			"element",
+			"page"
+		]
+	},
+	{
+		name: "Button",
+		modulePath: "components/Button",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "A wrapper around Material UI v4 `Button`. Read more information on the [MUI docs page](https://v4.mui.com/components/buttons/#button)",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Playground",
+				description: "Use to highlight the most important actions in any experience.",
+				code: "<Button {...props}>Click me!</Button>"
+			},
+			{
+				name: "Size",
+				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\">Click me!</Button>\n    <Button size=\"medium\">Click me!</Button>\n    <Button size=\"small\">Click me!</Button>\n  </SbColumn>"
+			},
+			{
+				name: "Color",
+				description: "We use 2 color variants, controlled through `color` prop:\n\n- `default`\n- `primary`",
+				code: "<SbColumn>\n    <Button color=\"default\">Click me!</Button>\n    <Button color=\"primary\">Click me!</Button>\n  </SbColumn>"
+			},
+			{
+				name: "Variant",
+				description: "Background is controlled through `variant` prop:\n\n- `contained`\n- `text`\n\nNotice the interaction with `color` prop",
+				code: "<SbRow>\n    <SbColumn>\n      <Button variant=\"contained\">Click me!</Button>\n      <Button variant=\"text\">Click me!</Button>\n    </SbColumn>\n    <SbColumn>\n      <Button variant=\"contained\" color=\"primary\">\n        Click me!\n      </Button>\n      <Button variant=\"text\" color=\"primary\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"
+			},
+			{
+				name: "Icons",
+				description: "Pass leading and/or trailing icons through `startIcon` and `endIcon` props respectively. The icon's size is adjusted automatically.\n\nSome text goes here",
+				code: "<SbRow>\n    <SbColumn>\n      <Button startIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n    <SbColumn>\n      <Button endIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/index.ts",
+		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59490",
+		keywords: [
+			"button",
+			"action",
+			"click",
+			"submit",
+			"trigger",
+			"cta",
+			"wrapper",
+			"around",
+			"material",
+			"`button`.",
+			"read",
+			"more",
+			"information",
+			"[mui",
+			"docs",
+			"page](https://v4.mui.com/components/buttons/#button)"
+		]
+	},
+	{
+		name: "Casing",
+		modulePath: "components/Casing",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/Casing.tsx",
+		keywords: [
+			"casing"
+		]
+	},
+	{
+		name: "ChartButton",
+		modulePath: "components/Chart/components/ChartButton",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ChartButton — chart button for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartButton.js",
+		keywords: [
+			"chartbutton",
+			"chart",
+			"button",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "ChartButtons",
+		modulePath: "components/Chart/components/ChartButtons",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ChartButtons — chart buttons for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartButtons.js",
+		keywords: [
+			"chartbuttons",
+			"chart",
+			"buttons",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "ChartWrapper",
+		modulePath: "components/Chart/components/ChartWrapper",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ChartWrapper — chart wrapper for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartWrapper.js",
+		keywords: [
+			"chartwrapper",
+			"chart",
+			"wrapper",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "AxisDropdown",
+		modulePath: "components/Chart/components/AxisDropdown",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "AxisDropdown — axis dropdown for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/AxisDropdown.js",
+		keywords: [
+			"axisdropdown",
+			"axis",
+			"dropdown",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "ChartSelect",
+		modulePath: "components/Chart/components/ChartSelect",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ChartSelect — chart select for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/ChartSelect.js",
+		keywords: [
+			"chartselect",
+			"chart",
+			"select",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "DragToZoomButton",
+		modulePath: "components/Chart/components/buttons/DragToZoomButton",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "DragToZoomButton — drag to zoom button for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/DragToZoomButton.js",
+		keywords: [
+			"dragtozoombutton",
+			"drag",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "ZoomInButton",
+		modulePath: "components/Chart/components/buttons/ZoomInButton",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ZoomInButton — zoom in button for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ZoomInButton.js",
+		keywords: [
+			"zoominbutton",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		]
+	},
+	{
+		name: "ZoomOutButton",
+		modulePath: "components/Chart/components/buttons/ZoomOutButton",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ZoomOutButton — zoom out button for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ZoomOutButton.js",
+		keywords: [
+			"zoomoutbutton",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage.",
+			"out"
+		]
+	},
+	{
+		name: "PanButton",
+		modulePath: "components/Chart/components/buttons/PanButton",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "PanButton — pan button for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
+			}
+		],
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/PanButton.js",
+		keywords: [
+			"panbutton",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage.",
+			"pan"
+		]
+	},
+	{
+		name: "ResetZoomButton",
+		modulePath: "components/Chart/components/buttons/ResetZoomButton",
+		importPath: "@corva/ui/components",
+		category: "v1",
+		description: "ResetZoomButton — reset zoom button for the Chart family. See the Chart story for canonical usage.",
+		isExperimental: false,
+		isDeprecated: false,
+		props: [
+		],
+		examples: [
+			{
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
+			{
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
+			},
+			{
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
+			},
+			{
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
 			},
 			{
-				name: "multiple",
-				type: "boolean",
-				required: false,
-				description: ""
-			}
-		],
-		examples: [
-			{
-				name: "Default",
+				name: "AxisDropdownChart",
 				description: "",
-				code: "{\n  const [value, setValue] = useState<Option>();\n  return (\n    <Autocomplete\n      {...props}\n      value={value}\n      onChange={(e, newValue, ...rest) => {\n        setValue(newValue as Option);\n        props.onChange?.(e, newValue, ...rest);\n      }}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n    />\n  );\n}"
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
 			},
 			{
-				name: "InputOptions",
-				description: "Input-related options should be done through `renderInput` prop",
-				code: "{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n      renderInput={params => (\n        <TextField {...params} label=\"Field Label\" placeholder=\"Field placeholder\" />\n      )}\n    />\n  );\n}"
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
 			},
 			{
-				name: "Sizes",
-				description: "Input size can be controlled through `size` prop.",
-				code: "{\n  return (\n    <SbRow>\n      <Autocomplete\n        value={Options[1]}\n        size=\"small\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={(option) => (option as Option).name}\n        renderOption={(option) => (option as Option).name}\n      />\n      <Autocomplete\n        value={Options[1]}\n        size=\"medium\"\n        options={Options}\n        renderInput={params => <TextField {...params} />}\n        getOptionLabel={(option) => (option as Option).name}\n        renderOption={(option) => (option as Option).name}\n      />\n    </SbRow>\n  );\n}"
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
 			},
 			{
-				name: "LoadingState",
-				description: "Use `loading` and `loadingText` props to show a custom message when some data is being loaded in the background",
-				code: "{\n  return (\n    <Autocomplete\n      value={null}\n      options={[]}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n      loading\n      loadingText={\n        <>\n          Can't you see, I'm <u>loading</u>!\n        </>\n      }\n    />\n  );\n}"
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
 			},
 			{
-				name: "DisabledOptions",
-				description: "Use `getOptionDisabled` prop to tell which options are disabled",
-				code: "{\n  return (\n    <Autocomplete\n      value={null}\n      options={Options}\n      renderInput={params => <TextField {...params} />}\n      getOptionLabel={(option) => (option as Option).name}\n      renderOption={(option) => (option as Option).name}\n      getOptionDisabled={(option) => (option as Option).id === '2'}\n    />\n  );\n}"
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
 			},
 			{
-				name: "Creatable",
-				description: "Works only with string `options`",
-				code: "{\n  const [options, setOptions] = useState(Options.map((option: Option) => option.name));\n  const [value, setValue] = useState<string>();\n\n  return (\n    <Autocomplete\n      options={options}\n      renderInput={params => <TextField {...params} />}\n      value={value}\n      isCreatable\n      getOptionLabel={i => i as string}\n      onChange={(value: any, wasCreated) => {\n        console.log('onChange', value, wasCreated);\n\n        if (wasCreated) {\n          setOptions(prev => [...prev, value as string]);\n        }\n\n        setValue(value);\n      }}\n    />\n  );\n}"
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
 			}
 		],
-		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Autocomplete/Autocomplete.tsx",
-		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=9573%3A7954&mode=dev",
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ResetZoomButton.js",
 		keywords: [
-			"autocomplete",
-			"search",
-			"typeahead",
-			"suggest",
-			"filter",
-			"wrapper",
-			"over",
-			"mui's",
-			"`<autocomplete/>`",
-			"component",
-			"selecting",
-			"values",
-			"predefined",
-			"list,",
-			"ability"
+			"resetzoombutton",
+			"reset",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
 		]
 	},
 	{
-		name: "Avatar",
-		modulePath: "components/Avatar",
+		name: "HideAxesButton",
+		modulePath: "components/Chart/components/buttons/HideAxesButton",
 		importPath: "@corva/ui/components",
 		category: "v1",
-		description: "Used to display user's avatar or initials",
+		description: "HideAxesButton — hide axes button for the Chart family. See the Chart story for canonical usage.",
 		isExperimental: false,
 		isDeprecated: false,
 		props: [
 		],
 		examples: [
 			{
-				name: "Default",
+				name: "Chart",
 				description: "",
-				code: "<Avatar {...props} />"
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
 			},
 			{
-				name: "TextSize",
-				description: "Text size is calculated by the following formula: `Math.floor(avatarSize / 2)`\n\nHowever, there are \"fixed\" avatar sizes: `24`, `32`, `40`, `48`, `128`, and `200`, for which their own font sizes are defined",
-				code: "{\n  const sizes = [12, 24, 28, 32, 36, 40, 48, 100, 128, 180, 200];\n  return (\n    <SbColumn>\n      {sizes.map(size => (\n        <SbRow key={size} alignItems=\"center\">\n          {size}px\n          <Avatar size={size} displayName=\"Ian Moone\" />\n        </SbRow>\n      ))}\n    </SbColumn>\n  );\n}"
-			}
-		],
-		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Avatar/index.tsx",
-		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59473",
-		keywords: [
-			"avatar",
-			"user",
-			"profile",
-			"image",
-			"icon",
-			"used",
-			"display",
-			"user's",
-			"initials"
-		]
-	},
-	{
-		name: "BICOffsetPickerDialog",
-		modulePath: "components/BICOffsetPickerDialog",
-		importPath: "@corva/ui/components",
-		category: "v1",
-		description: "",
-		isExperimental: false,
-		isDeprecated: false,
-		props: [
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
+			},
 			{
-				name: "defaultSubjectWell",
-				type: "object",
-				required: false,
-				description: ""
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
 			},
 			{
-				name: "offsetSetting",
-				type: "object",
-				required: false,
-				description: ""
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
 			},
 			{
-				name: "subjectWellId",
-				type: "number",
-				required: false,
-				description: ""
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
 			},
 			{
-				name: "companyId",
-				type: "number",
-				required: false,
-				description: ""
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
 			},
 			{
-				name: "currentUser",
-				type: "object",
-				required: false,
-				description: ""
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
 			},
 			{
-				name: "isOpen",
-				type: "boolean",
-				required: true,
-				description: ""
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
 			},
 			{
-				name: "onClose",
-				type: "function",
-				required: true,
-				description: ""
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
 			},
 			{
-				name: "onSave",
-				type: "function",
-				required: true,
-				description: ""
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
 			},
 			{
-				name: "addWellsUsabilityInfo",
-				type: "function",
-				required: false,
-				description: ""
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
 			},
 			{
-				name: "unusableWellAlarm",
-				type: "string",
-				required: false,
-				description: ""
-			}
-		],
-		examples: [
-		],
-		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/BICOffsetPickerDialog/BICOffsetPickerDialog.tsx",
-		keywords: [
-			"bicoffsetpickerdialog"
-		]
-	},
-	{
-		name: "Breadcrumbs",
-		modulePath: "components/Breadcrumbs",
-		importPath: "@corva/ui/components",
-		category: "v1",
-		description: "Used as a hierarchical navigation element at the tp of the page",
-		isExperimental: false,
-		isDeprecated: false,
-		props: [
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
 			{
-				name: "pathItems",
-				type: "{ text: string; href?: string }[]",
-				required: true,
-				description: ""
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
 			},
 			{
-				name: "classes",
-				type: "Record<string, string>",
-				required: false,
-				description: ""
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
 			},
 			{
-				name: "withBackIcon",
-				type: "boolean",
-				required: false,
-				description: ""
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
 			},
 			{
-				name: "separator",
-				type: "ReactNode",
-				required: false,
-				description: ""
-			}
-		],
-		examples: [
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
 			{
-				name: "Default",
+				name: "HighchartStockChart",
 				description: "",
-				code: "<Breadcrumbs {...props} />"
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
 			}
 		],
-		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Breadcrumbs/index.tsx",
-		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=31967%3A122781&mode=dev",
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/HideAxesButton.js",
 		keywords: [
-			"breadcrumbs",
-			"navigation",
-			"path",
-			"trail",
-			"breadcrumb",
-			"used",
-			"hierarchical",
-			"element",
-			"page"
+			"hideaxesbutton",
+			"hide",
+			"axes",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
 		]
 	},
 	{
-		name: "Button",
-		modulePath: "components/Button",
+		name: "ChartTypeButton",
+		modulePath: "components/Chart/components/buttons/ChartTypeButton",
 		importPath: "@corva/ui/components",
 		category: "v1",
-		description: "A wrapper around Material UI v4 `Button`. Read more information on the [MUI docs page](https://v4.mui.com/components/buttons/#button)",
+		description: "ChartTypeButton — chart type button for the Chart family. See the Chart story for canonical usage.",
 		isExperimental: false,
 		isDeprecated: false,
 		props: [
 		],
 		examples: [
 			{
-				name: "Playground",
-				description: "Use to highlight the most important actions in any experience.",
-				code: "<Button {...props}>Click me!</Button>"
+				name: "Chart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton />\n            <DragToZoomButton />\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
 			},
 			{
-				name: "Size",
-				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\">Click me!</Button>\n    <Button size=\"medium\">Click me!</Button>\n    <Button size=\"small\">Click me!</Button>\n  </SbColumn>"
+				name: "AxisConfigRegularSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: getChartHorizontalAxis({\n      title: 'MD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    yAxis: getChartVerticalAxis({\n      title: 'TvD (ft)',\n      spacing: 'normal',\n      opposite,\n    }),\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange={setOpposite} />\n      <div className={classes.root}>\n        <div className={classes.chart}>\n          <ChartWrapper chartRef={chartRef}>{chartElement}</ChartWrapper>\n        </div>\n      </div>\n    </SbColumn>\n  );\n}"
 			},
 			{
-				name: "Color",
-				description: "We use 2 color variants, controlled through `color` prop:\n\n- `default`\n- `primary`",
-				code: "<SbColumn>\n    <Button color=\"default\">Click me!</Button>\n    <Button color=\"primary\">Click me!</Button>\n  </SbColumn>"
+				name: "AxisConfigDenseSpacing",
+				description: "Use `getChartHorizontalAxis` and `getChartVerticalAxis` utility functions from `@corva/ui/utils` to get standartized axis config objects.\n\nUse `spacing: 'dense'` option for charts where the axis has only start and end values, and the title should be in line with them\n\n⚠️ Warning! Do not overwrite the `title.text` property of the resulting config",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [opposite, setOpposite] = useState(false);\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 48,\n      tickAmount: 2,\n      tickPositions: [0, 48],\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        title: 'Mud Weight (ppg)',\n        spacing: 'dense',\n        opposite,\n      }),\n      min: 0,\n      max: 8000,\n      tickAmount: 2,\n      tickPositions: [0, 8000],\n    },\n    legend: {\n      enabled: false,\n    },\n  };\n\n  const chartElement = (\n    <HighchartsReact\n      highcharts={Highcharts}\n      options={options}\n      containerProps={containerProps}\n      ref={chartRef}\n    />\n  );\n\n  return (\n    <SbColumn alignItems=\"stretch\">\n      <Switch onLabel=\"Opposite Axes\" size=\"small\" checked={opposite} onChange=\n// ... (truncated)"
 			},
 			{
-				name: "Variant",
-				description: "Background is controlled through `variant` prop:\n\n- `contained`\n- `text`\n\nNotice the interaction with `color` prop",
-				code: "<SbRow>\n    <SbColumn>\n      <Button variant=\"contained\">Click me!</Button>\n      <Button variant=\"text\">Click me!</Button>\n    </SbColumn>\n    <SbColumn>\n      <Button variant=\"contained\" color=\"primary\">\n        Click me!\n      </Button>\n      <Button variant=\"text\" color=\"primary\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"
+				name: "ChartsWithDropdownAxes",
+				description: "Use `<AxisDropdown/>` component to use a dropdown as a chart title. Remember, you should provide its positioning on your own",
+				code: "{\n  const classes = useStyles();\n  const chartRef = useRef();\n  const [dropdownValue, setDropdownValue] = useState('test1');\n  const [isDense, setIsDense] = useState(false);\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const denseHorizontalAxisOptions = { min: 0, max: 48, tickAmount: 2, tickPositions: [0, 48] };\n\n  const denseVerticalAxisOptions = { min: 0, max: 8000, tickAmount: 2, tickPositions: [0, 8000] };\n\n  const options = {\n    ...getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    xAxis: {\n      ...getChartHorizontalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && denseHorizontalAxisOptions),\n    },\n    yAxis: {\n      ...getChartVerticalAxis({\n        spacing: isDense ? 'dense' : 'normal',\n      }),\n      ...(isDense && d\n// ... (truncated)"
 			},
 			{
-				name: "Icons",
-				description: "Pass leading and/or trailing icons through `startIcon` and `endIcon` props respectively. The icon's size is adjusted automatically.\n\nSome text goes here",
-				code: "<SbRow>\n    <SbColumn>\n      <Button startIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button startIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n    <SbColumn>\n      <Button endIcon={<BubbleChartIcon />} size=\"large\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"medium\">\n        Click me!\n      </Button>\n      <Button endIcon={<BubbleChartIcon />} size=\"small\">\n        Click me!\n      </Button>\n    </SbColumn>\n  </SbRow>"
+				name: "MultipleAxesChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const customOptions = {\n    yAxis: [\n      getChartVerticalAxis({ title: 'Temperature (°C)' }),\n      getChartVerticalAxis({ title: 'Rainfall  (mm)', offset: 44 }),\n    ],\n    xAxis: getChartHorizontalAxis({ title: 'Days' }),\n    series: [\n      {\n        name: 'Rainfall',\n        yAxis: 1,\n        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],\n        tooltip: {\n          valueSuffix: ' mm',\n        },\n      },\n      {\n        name: 'Temperature',\n        type: 'column',\n        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],\n        tooltip: {\n          valueSuffix: ' °C',\n        },\n      },\n    ],\n  };\n\n  const opt\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n// ... (truncated)"
+			},
+			{
+				name: "CustomizeScaleChartInverted",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const onCustomizeScaleClick = event => {\n    // eslint-disable-next-line no-alert\n    alert(\n      JSON.stringify({\n        min: event.min,\n        max: event.max,\n      })\n    );\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={{ ...options, chart: { ...options.chart, inverted: true } }}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} onCustomizeScaleClick={onCustomizeScaleClick} {...props}>\n          {options && chartElement}\n    \n// ... (truncated)"
+			},
+			{
+				name: "ChartWithFormations",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const plotLines = getFormattedFormations(props.formations, props.axis === 'y');\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartRef.current.chart.setSize();\n      renderFormations({ chart: chartRef.current.chart, plotLines, axis: props.axis });\n    }\n    setMounted(true);\n  }, [props.axis]);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} withFormations {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ResetZoomButton />\n            <PanButton /\n// ... (truncated)"
+			},
+			{
+				name: "AdditionalButtonsChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const handleChartTypeChange = chartType => {\n    if (chartType === 'bar') {\n      chartRef.current.chart.update({\n        legend: {\n          symbolHeight: 12,\n        },\n      });\n    }\n  };\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons className={classes.horizontalControls}>\n            <ChartTypeButton onClick={handleChartTypeChange} />\n            <ChartSelect\n   \n// ... (truncated)"
+			},
+			{
+				name: "BarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Metric 1', 'Metric 2', 'Metric 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      series: [\n        {\n          name: 'Metric',\n          borderColor: 'transparent',\n          color: '#6CDBB5',\n          data: [5, 3, 2],\n        },\n      ],\n      tooltip: {\n        crosshairs: null,\n      },\n    }\n  );\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root\n// ... (truncated)"
+			},
+			{
+				name: "StackedBarChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {},\n    getChartOptions({\n      seriesCount: 0,\n      recordsCount: 0,\n    }),\n    {\n      chart: { type: props.inverted ? 'column' : 'bar' },\n      xAxis: {\n        categories: ['Category 1', 'Category 2', 'Category 3'],\n      },\n      legend: {\n        symbolHeight: 8,\n        symbolPadding: 4,\n      },\n      plotOptions: {\n        series: {\n          stacking: 'normal',\n        },\n      },\n      tooltip: {\n        crosshairs: null,\n      },\n      series: [\n        {\n          name: 'Series 1',\n          color: '#A153EC',\n          borderColor: 'transparent',\n          data: [7, 1, 3],\n        },\n        {\n          name: 'Series 2',\n          color: '#5823E1',\n          borderColor: 'transparent',\n          data: [2, 1, 1],\n        },\n        {\n          name: 'Series 3',\n          color: \n// ... (truncated)"
+			},
+			{
+				name: "SmallChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chartRef}\n      />\n    );\n  }, [options]);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.smallChart}>\n        <ChartWrapper chartRef={chartRef} {...props}>\n          {options && chartElement}\n          <ChartButtons>\n            <ZoomInButton />\n            <ZoomOutButton />\n          </ChartButtons>\n        </ChartWrapper>\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "AxisDropdownChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n  const [dropdownValue, setDropdownValue] = useState('test1');\n\n  const chartRef = useRef();\n  const classes = useStyles();\n  const dropdownClasses = useDropdownStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const dropdownOptions = [\n    { label: 'test1', value: 'test1' },\n    { label: 'test2', value: 'test2' },\n    { label: 'test3', value: 'test3' },\n  ];\n\n  const handleDropdownValueChange = ({ target }) => {\n    setDropdownValue(target.value);\n  };\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      chart: {\n        spacingLeft: 60,\n      },\n      yAxis: {\n        title: {\n          margin: 16,\n          text: null,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -1\n// ... (truncated)"
+			},
+			{
+				name: "ChartRightAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        lineWidth: 1,\n        lineColor: '#3B3B3B',\n        opposite: true,\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n        )}\n      </div>\n    </div>\n  );\n}"
+			},
+			{
+				name: "ChartTwoValuesAxis",
+				description: "",
+				code: "{\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    if (chartRef.current) chartRef.current.chart.setSize();\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    {\n      yAxis: {\n        min: 0,\n        max: 8000,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 8000],\n        title: {\n          margin: -14,\n        },\n      },\n      xAxis: {\n        min: 0,\n        max: 48,\n        minorTicks: false,\n        tickAmount: 2,\n        tickPositions: [0, 48],\n        title: {\n          margin: -14,\n        },\n      },\n    },\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    })\n  );\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.chart}>\n        {options && (\n          <HighchartsReact\n            highcharts={Highcharts}\n            options={options}\n            containerProps={containerProps}\n            ref={chartRef}\n          />\n  \n// ... (truncated)"
+			},
+			{
+				name: "MobileResponsiveChart",
+				description: "",
+				code: "props => {\n  const [isMounted, setMounted] = useState(false);\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  const theme = useTheme();\n  const isTabletView = useMediaQuery(theme.breakpoints.down('sm'));\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = merge(\n    getChartOptions({\n      seriesCount,\n      recordsCount,\n    }),\n    {\n      xAxis: {\n        maxPadding: 0,\n      },\n      responsive: null,\n      legend: {\n        enabled: false,\n      },\n    }\n  );\n\n  useEffect(() => {\n    if (isTabletView) {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0,\n        },\n      });\n    } else {\n      chartRef.current?.chart.update({\n        xAxis: {\n          maxPadding: 0.04,\n        },\n      });\n    }\n  }, [isMounted, isTabletView]);\n\n  const chartElement = useMemo(() => {\n    return (\n      <HighchartsReact\n        highcharts={Highcharts}\n        options={options}\n        containerProps={containerProps}\n        ref={chart\n// ... (truncated)"
+			},
+			{
+				name: "HighchartStockChart",
+				description: "",
+				code: "props => {\n  const [, setMounted] = useState(false);\n\n  const chartRef = useRef();\n  const classes = useStyles();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const options = getChartOptions({\n    seriesCount,\n    recordsCount,\n  });\n\n  const stockOptions = {\n    ...options,\n    tooltip: {\n      headerFormat: '',\n      ...options.tooltip,\n    },\n    rangeSelector: {\n      enabled: false,\n    },\n    yAxis: {\n      opposite: false,\n      ...options.yAxis,\n      title: null,\n      crosshair: {\n        ...options.yAxis.crosshair,\n        label: {\n          enabled: true,\n          format: '{value:.2f}',\n          shape: 'box',\n          borderRadius: '4px',\n          backgroundColor: 'rgba(82, 80, 80, 0.5)',\n          padding: 2,\n          style: {\n            color: '#ffffff',\n            backgroundColor: 'rgba(82, 80, 80, 0.8)',\n          },\n        },\n      },\n    },\n    xAxis: {\n      ...options.xAxis,\n      crosshair: {\n        ...options.xAxis.crosshair,\n        label: {\n \n// ... (truncated)"
+			},
+			{
+				name: "DonutChart",
+				description: "",
+				code: "{\n  const options = getAppUsageOptions({\n    data,\n    isFullChartLegendVisible: false,\n    appNumber: 10,\n  });\n\n  return <HighchartsReact highcharts={Highcharts} options={options} immutable />;\n}"
 			}
 		],
-		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Button/index.ts",
-		figmaUrl: "https://www.figma.com/file/PUgBxjNswqqG1yyU6OQERZ/Corva-Design-System?node-id=19105%3A59490",
+		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Chart/components/buttons/ChartTypeButton.js",
 		keywords: [
+			"charttypebutton",
+			"chart",
+			"type",
 			"button",
-			"action",
-			"click",
-			"submit",
-			"trigger",
-			"cta",
-			"wrapper",
-			"around",
-			"material",
-			"`button`.",
-			"read",
-			"more",
-			"information",
-			"[mui",
-			"docs",
-			"page](https://v4.mui.com/components/buttons/#button)"
-		]
-	},
-	{
-		name: "Casing",
-		modulePath: "components/Casing",
-		importPath: "@corva/ui/components",
-		category: "v1",
-		description: "",
-		isExperimental: false,
-		isDeprecated: false,
-		props: [
-		],
-		examples: [
-		],
-		sourceUrl: "https://github.com/corva-ai/corva-ui/blob/develop/src/components/Casing/Casing.tsx",
-		keywords: [
-			"casing"
+			"family.",
+			"story",
+			"canonical",
+			"usage."
 		]
 	},
 	{
@@ -83569,6 +85016,270 @@ var entries = [
 		importPath: "@corva/ui/components",
 		searchText: "casing  casing"
 	},
+	{
+		id: "component-v1-ChartButton",
+		type: "component",
+		name: "ChartButton",
+		description: "ChartButton — chart button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"chartbutton",
+			"chart",
+			"button",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "chartbutton chartbutton — chart button for the chart family. see the chart story for canonical usage. chartbutton chart button family. story canonical usage."
+	},
+	{
+		id: "component-v1-ChartButtons",
+		type: "component",
+		name: "ChartButtons",
+		description: "ChartButtons — chart buttons for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"chartbuttons",
+			"chart",
+			"buttons",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "chartbuttons chartbuttons — chart buttons for the chart family. see the chart story for canonical usage. chartbuttons chart buttons family. story canonical usage."
+	},
+	{
+		id: "component-v1-ChartWrapper",
+		type: "component",
+		name: "ChartWrapper",
+		description: "ChartWrapper — chart wrapper for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"chartwrapper",
+			"chart",
+			"wrapper",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "chartwrapper chartwrapper — chart wrapper for the chart family. see the chart story for canonical usage. chartwrapper chart wrapper family. story canonical usage."
+	},
+	{
+		id: "component-v1-AxisDropdown",
+		type: "component",
+		name: "AxisDropdown",
+		description: "AxisDropdown — axis dropdown for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"axisdropdown",
+			"axis",
+			"dropdown",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "axisdropdown axisdropdown — axis dropdown for the chart family. see the chart story for canonical usage. axisdropdown axis dropdown chart family. story canonical usage."
+	},
+	{
+		id: "component-v1-ChartSelect",
+		type: "component",
+		name: "ChartSelect",
+		description: "ChartSelect — chart select for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"chartselect",
+			"chart",
+			"select",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "chartselect chartselect — chart select for the chart family. see the chart story for canonical usage. chartselect chart select family. story canonical usage."
+	},
+	{
+		id: "component-v1-DragToZoomButton",
+		type: "component",
+		name: "DragToZoomButton",
+		description: "DragToZoomButton — drag to zoom button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"dragtozoombutton",
+			"drag",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "dragtozoombutton dragtozoombutton — drag to zoom button for the chart family. see the chart story for canonical usage. dragtozoombutton drag zoom button chart family. story canonical usage."
+	},
+	{
+		id: "component-v1-ZoomInButton",
+		type: "component",
+		name: "ZoomInButton",
+		description: "ZoomInButton — zoom in button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"zoominbutton",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "zoominbutton zoominbutton — zoom in button for the chart family. see the chart story for canonical usage. zoominbutton zoom button chart family. story canonical usage."
+	},
+	{
+		id: "component-v1-ZoomOutButton",
+		type: "component",
+		name: "ZoomOutButton",
+		description: "ZoomOutButton — zoom out button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"zoomoutbutton",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage.",
+			"out"
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "zoomoutbutton zoomoutbutton — zoom out button for the chart family. see the chart story for canonical usage. zoomoutbutton zoom button chart family. story canonical usage. out"
+	},
+	{
+		id: "component-v1-PanButton",
+		type: "component",
+		name: "PanButton",
+		description: "PanButton — pan button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"panbutton",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage.",
+			"pan"
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "panbutton panbutton — pan button for the chart family. see the chart story for canonical usage. panbutton button chart family. story canonical usage. pan"
+	},
+	{
+		id: "component-v1-ResetZoomButton",
+		type: "component",
+		name: "ResetZoomButton",
+		description: "ResetZoomButton — reset zoom button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"resetzoombutton",
+			"reset",
+			"zoom",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "resetzoombutton resetzoombutton — reset zoom button for the chart family. see the chart story for canonical usage. resetzoombutton reset zoom button chart family. story canonical usage."
+	},
+	{
+		id: "component-v1-HideAxesButton",
+		type: "component",
+		name: "HideAxesButton",
+		description: "HideAxesButton — hide axes button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"hideaxesbutton",
+			"hide",
+			"axes",
+			"button",
+			"chart",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "hideaxesbutton hideaxesbutton — hide axes button for the chart family. see the chart story for canonical usage. hideaxesbutton hide axes button chart family. story canonical usage."
+	},
+	{
+		id: "component-v1-ChartTypeButton",
+		type: "component",
+		name: "ChartTypeButton",
+		description: "ChartTypeButton — chart type button for the Chart family. See the Chart story for canonical usage.",
+		keywords: [
+			"charttypebutton",
+			"chart",
+			"type",
+			"button",
+			"family.",
+			"story",
+			"canonical",
+			"usage."
+		],
+		tags: [
+			"v1"
+		],
+		category: "components-v1",
+		importPath: "@corva/ui/components",
+		searchText: "charttypebutton charttypebutton — chart type button for the chart family. see the chart story for canonical usage. charttypebutton chart type button family. story canonical usage."
+	},
 	{
 		id: "component-v1-ChartActionsList",
 		type: "component",
@@ -93706,6 +95417,18 @@ var byCategory = {
 		"component-v1-Breadcrumbs",
 		"component-v1-Button",
 		"component-v1-Casing",
+		"component-v1-ChartButton",
+		"component-v1-ChartButtons",
+		"component-v1-ChartWrapper",
+		"component-v1-AxisDropdown",
+		"component-v1-ChartSelect",
+		"component-v1-DragToZoomButton",
+		"component-v1-ZoomInButton",
+		"component-v1-ZoomOutButton",
+		"component-v1-PanButton",
+		"component-v1-ResetZoomButton",
+		"component-v1-HideAxesButton",
+		"component-v1-ChartTypeButton",
 		"component-v1-ChartActionsList",
 		"component-v1-Checkbox",
 		"component-v1-Chip",
@@ -95683,7 +97406,9 @@ Examples:
 - "button" - find button components
 - "loading spinner" - find loading indicators
 - "date picker" - find date/time components
-- "useSubscriptions" - find specific hook`;
+- "useSubscriptions" - find specific hook
+
+When category is 'v2' or 'v1' and the requested version has no match, the response surfaces a labeled fallback block from the other version so a single search still discovers a candidate. The agent should still prefer V2 when both versions match.`;
 const searchToolSchema = {
     query: z.string().describe('Search query - component name, use case, or description'),
     type: z
@@ -95715,18 +97440,16 @@ const handleSearch = (args) => {
     const rawWords = queryLower.trim().split(/\s+/);
     const queryWords = rawWords.filter(w => w.length > 1);
     const isMultiWord = rawWords.length >= 2 && queryWords.length >= 2;
-    let results = [];
+    // When the query has filler words around a single meaningful word (e.g. "a button"),
+    // the single-word path should match against just that word instead of the whole query.
+    const singleWordQuery = !isMultiWord && queryWords.length === 1 ? queryWords[0] : queryLower;
     // Filter by type
     let { entries } = searchIndex;
     if (type !== 'all') {
         entries = entries.filter(e => e.type === type);
     }
-    // Filter by category for components
-    if (category !== 'all') {
-        const fullCategory = category.startsWith('components-') ? category : `components-${category}`;
-        entries = entries.filter(e => e.type !== 'component' || e.category === fullCategory);
-    }
-    // Score and sort results using SEARCH_CONFIG weights
+    // Category filtering happens AFTER scoring so we can surface a V2↔V1 fallback
+    // block when the requested category is empty but the other version has hits.
     const { weights, boosts } = SEARCH_CONFIG;
     const scored = entries.map(entry => {
         let score = 0;
@@ -95735,62 +97458,87 @@ const handleSearch = (args) => {
         }
         else {
             // Exact name match (highest priority)
-            if (entry.name.toLowerCase() === queryLower) {
+            if (entry.name.toLowerCase() === singleWordQuery) {
                 score += weights.exactMatch;
             }
             // Name starts with query
-            else if (entry.name.toLowerCase().startsWith(queryLower)) {
+            else if (entry.name.toLowerCase().startsWith(singleWordQuery)) {
                 score += weights.startsWith;
             }
             // Name contains query
-            else if (entry.name.toLowerCase().includes(queryLower)) {
+            else if (entry.name.toLowerCase().includes(singleWordQuery)) {
                 score += weights.contains;
             }
             // Keyword match
             score += entry.keywords.reduce((keywordScore, keyword) => {
-                if (keyword === queryLower) {
+                if (keyword === singleWordQuery) {
                     return keywordScore + weights.keywordExact;
                 }
-                if (keyword.includes(queryLower)) {
+                if (keyword.includes(singleWordQuery)) {
                     return keywordScore + weights.keywordContains;
                 }
                 return keywordScore;
             }, 0);
             // Description match
-            if (entry.description.toLowerCase().includes(queryLower)) {
+            if (entry.description.toLowerCase().includes(singleWordQuery)) {
                 score += weights.description;
             }
             // Full text match
-            if (entry.searchText.includes(queryLower)) {
+            if (entry.searchText.includes(singleWordQuery)) {
                 score += weights.fullText;
             }
         }
-        // Boost V2 components
-        if (entry.category === 'components-v2') {
+        // Boost V2 components — but only when the entry actually matched the query.
+        // Adding the boost to a 0-score entry would make every V2 component appear
+        // as a "result" and prevent the V1 fallback from ever firing.
+        if (score > 0 && entry.category === 'components-v2') {
             score += boosts.v2Component;
         }
         return { entry, score };
     });
-    results = scored
+    const ranked = scored
         .filter(s => s.score > 0)
         .sort((a, b) => b.score - a.score)
-        .slice(0, limit)
         .map(s => s.entry);
-    if (results.length === 0) {
+    let requestedCategory = null;
+    if (category !== 'all') {
+        requestedCategory = category.startsWith('components-') ? category : `components-${category}`;
+    }
+    const matchesRequested = (entry) => requestedCategory === null ||
+        entry.type !== 'component' ||
+        entry.category === requestedCategory;
+    const primary = ranked.filter(matchesRequested).slice(0, limit);
+    const fallback = requestedCategory && primary.length === 0
+        ? ranked
+            .filter(entry => entry.type === 'component' && entry.category !== requestedCategory)
+            .slice(0, limit)
+        : [];
+    if (primary.length === 0 && fallback.length === 0) {
         return {
             response: createToolResponse(`No results found for "${query}". Try:\n- A different search term\n- Using list_corva_ui to see available items`),
             resultCount: 0,
         };
     }
-    const formatted = results
-        .map(r => {
+    const formatEntry = (r) => {
         const categoryLabel = r.type === 'component' ? ` (${r.category.replace('components-', '')})` : '';
         return `**${r.name}**${categoryLabel} - ${r.type}\n  ${r.description || 'No description'}\n  Import: \`${r.importPath}\``;
-    })
-        .join('\n\n');
+    };
+    if (primary.length > 0) {
+        const formatted = primary.map(formatEntry).join('\n\n');
+        return {
+            response: createToolResponse(`Found ${primary.length} result(s) for "${query}":\n\n${formatted}`),
+            resultCount: primary.length,
+        };
+    }
+    const requestedVersion = requestedCategory.replace('components-', '').toUpperCase();
+    const fallbackVersion = requestedVersion === 'V2' ? 'V1' : 'V2';
+    const preferenceHint = requestedVersion === 'V2'
+        ? ' V2 is preferred when available; consider these only if no V2 alternative exists.'
+        : '';
+    const formatted = fallback.map(formatEntry).join('\n\n');
     return {
-        response: createToolResponse(`Found ${results.length} result(s) for "${query}":\n\n${formatted}`),
-        resultCount: results.length,
+        response: createToolResponse(`No ${requestedVersion} matches for "${query}". ${fallbackVersion} fallback — ${fallbackVersion} components that match the query.${preferenceHint}\n\n${formatted}`),
+        resultCount: fallback.length,
     };
 };
 
@@ -96595,6 +98343,41 @@ const handleGetDiagnostics = (stats, telemetry, identity) => {
     };
 };
 
+// This file is auto-generated by `yarn mcp:generate-prompts`. Do not edit by hand.
+// Source: ./figma-to-code.prompt.md
+const figmaToCodePromptTemplate = "You are translating a Figma design into React components that consume the `@corva/ui` components library. Follow the\norchestration below strictly and prefer evidence from the target repo over assumptions.\n\n## Inputs\n\nUser request: {{input}}\n\nExtract the Figma URL from the user request by matching `figma.com/design/…`, `figma.com/make/…`, or\n`figma.com/board/…`. Treat the remainder as instructions (target path, file to extend, naming, behavior notes).\n\n## Precedence\n\nWhen sources of truth disagree on file layout, styling, or naming, follow this order (highest wins):\n\n1. Explicit instructions in the user request (target path, file to extend, naming).\n2. Figma Code Connect mappings returned by `mcp__figma__get_design_context`.\n3. `@corva/ui` MCP docs (`get_component_docs`, `get_theme_docs`, icon search, etc.). These are authoritative for what\n   exists in the components library.\n4. `AGENTS.md` / `CLAUDE.md` in the target repo, looked up in this order and merged (earlier wins):\n   a. the target directory,\n   b. the nearest package root (walk up to the first `package.json`), which matters in monorepos,\n   c. the repo root.\n5. 1–2 neighboring components in the target directory (fallback when 4 is silent on an axis).\n6. The minimal default policy in Step 8 (fallback when 4 and 5 are both silent).\n\n## Step 1 — Acknowledge (before any tool call)\n\nPrint one short line to the user confirming what you parsed: the Figma URL, the extracted `nodeId` and `fileKey`, and\nthe target path if stated. This is the only user-facing text until after Step 4 completes, so make it specific enough\nthat the user knows the command fired.\n\n## Step 2 — Verify Figma MCP availability\n\nBefore any other work, confirm the Figma Dev Mode MCP is active by checking whether `mcp__figma__get_design_context`\nappears in your available tools.\n\nIf the tool is NOT available:\n\n- Tell the user: \"The Figma Dev Mode MCP is not enabled in this Claude Code session. Enable it via Figma Desktop →\n  Preferences → Enable Dev Mode MCP Server, then restart Claude Code and re-run `/figma_to_code`.\"\n- Stop immediately. Do not call any other tool, do not ask follow-up questions, and do not attempt to generate code\n  without the design context.\n\nIf the tool IS available, proceed to the next step.\n\n## Step 3 — Resolve missing inputs\n\nIf no Figma URL is present in the user request, ask the user for it. If the target path (or file to extend) is not\nspecified, ask before generating. Do not invent a location.\n\n## Step 4 — Gather design context\n\nCall `mcp__figma__get_design_context` with the Figma URL. Inspect the response for:\n\n- Code Connect snippets / imports / designer instructions (use verbatim when present).\n- Design tokens exposed as CSS variables.\n- Screenshot and annotations.\n- Asset URLs (images, icons) that imply specific primitives.\n\nIf Code Connect coverage is unclear, `mcp__figma__get_code_connect_map` is a verification fallback.\nDo **not** call `mcp__figma__get_code_connect_suggestions`. That tool is for authoring new mappings, not codegen.\n\nIf the first `get_design_context` call returns a sparse \"too large\" response listing sublayer IDs, drill into only the\nheader, one representative row, and one content panel — do NOT recursively walk every child. A targeted sample is\nsufficient to infer the pattern for the remaining rows.\n\n## Step 5 — Read target-repo conventions\n\nBefore generating, read `AGENTS.md` / `CLAUDE.md` at precedence level 4 if present (target dir → nearest package root →\nrepo root). These files define the repo's conventions: file layout, directory structure, styling approach\n(SCSS / MUI `sx` / styled-components / CSS modules), size limits, naming, imports. Extract and apply what's relevant to\nthe target directory.\n\nIf no `AGENTS.md` / `CLAUDE.md` exists at any level, fall through to Step 8 (neighboring components).\n\nMatch the repo's documented import / module syntax (`@import` vs `@use`, named vs default exports, relative vs aliased\npaths). Do not refactor or \"modernize\" the convention as a side quest. If the documented form produces a build or type\nerror, substitute a working equivalent and list the substitution under \"Implementation deviations\" in the Gap Report so\nthe convention file can be updated.\n\n## Step 6 — Detect project mode\n\nRead `./package.json`:\n\n- `\"name\": \"@corva/ui\"` ⇒ **authoring mode**. You are contributing a new primitive to the library itself. If Step 5\n  did not yield a concrete file-structure contract (target directory, file layout, export conventions), **stop and ask\n  the user** where to scaffold before proceeding. Authoring a primitive in the wrong shape is worse than pausing.\n- `@corva/ui` listed in `dependencies` / `devDependencies` ⇒ **consumer mode** (default). Import from `@corva/ui` entry\n  points; do not scaffold new primitives into the consumer repo.\n\n## Step 7 — Resolve @corva/ui primitives for each unmapped node\n\nPriority: **Reuse > Compose > Create**. Create a new primitive only in `@corva/ui` authoring mode (per Step 6) or when\nthe user explicitly asks. In consumer mode, always compose existing primitives — never scaffold new ones.\n\n**Search by capability, not by package name.** Before importing any third-party rendering or runtime package directly,\nsearch `@corva/ui` by capability terms drawn from the Figma node's visual and behavioral language — never let a vendor\nor library name be the decisive query. `@corva/ui` typically wraps third-party libraries (including but not limited to\ncharts, maps, code editors, virtualized lists, drag-and-drop, and rich text) behind a Corva shell whose name contains\nno library name, so queries like `highcharts` or `mapbox` return noise. Treat a Corva shell as the default hypothesis\nand disprove it with three capability search axes: (a) the user-facing widget shell (e.g. `chart container with zoom\nand pan`, `map viewport`); (b) its interaction control family (e.g. `axis dropdown`, `zoom button`,\n`chart type switch`); (c) any setup, provider, or config utility (e.g. `chart theme`, `map provider`). When a shell\nturns up, also pull in its companion controls instead of re-implementing toolbar UX. Each of the three axes must be\nqueried against both `category: 'v2'` and `category: 'v1'` — interaction-control families and shell wrappers (chart,\nmap, editor) often live only in V1, so a V2-only sweep can falsely conclude no Corva equivalent exists. A direct\nthird-party import is valid only if all three axes ran across both versions and returned no Corva equivalent — record\nthe import in the Gap Report's Implementation deviations and list the exact capability queries you ran for each\nversion, so the gap is auditable.\n\nBatch all unrelated primitive, icon, and theme lookups below into a single parallel tool call. Do not serialize them\nacross turns.\n\nFor every Figma subtree without a Code Connect hit:\n\n1. `mcp__corva-ui__search_corva_ui` with `{ query: '<descriptive term>', type: 'component', category: 'v2' }` to find\n   candidate components. `query` is required; `type: 'component'` is required because category-only filtering does not\n   exclude non-component entries. The tool surfaces a labeled V1 fallback block in the response when V2 has no match —\n   when that block appears (or the response is \"No results\"), retry the same query with `category: 'v1'` and treat any\n   hits there as candidates. Prefer V2 when both versions match; a capability is only a true gap once both V2 and V1\n   have been queried explicitly.\n2. `mcp__corva-ui__get_component_docs` for each chosen component, passing the same `category` (`'v1'` or `'v2'`) that\n   the search returned — names can collide across versions (e.g., `Autocomplete` exists in both). Use the returned\n   import statement and prop schema verbatim. Variant values must come from the prop schema (e.g., the canonical\n   union returned for `variant` or `size`); do not translate Figma variant labels (`\"Primary\"`, `\"Large\"`) by guessing.\n3. For icons: `mcp__corva-ui__search_corva_ui` with `{ query: '<icon description>', type: 'icon' }`. Import exactly the\n   export name returned — naming is inconsistent (e.g., `DownSmallIcon`, `Pin`, `AttentionCustomIcon`). Do not guess a\n   suffix. Use `mcp__corva-ui__list_corva_ui` with `{ type: 'icons' }` only to discover available icon sets (it lists\n   sets and counts, not individual exports).\n4. For colors / spacing / typography / z-index: `mcp__corva-ui__get_theme_docs` — always use canonical token names, and\n   never hard-code hex values. Express tokens through whichever mechanism the target repo's `AGENTS.md` or neighboring\n   components already use (SCSS mixin, MUI `theme.*` helper, CSS custom property, Tailwind class, etc.). Match what's\n   there rather than introducing a new style system.\n\n   When a third-party config (chart libraries, mapping libs, canvas/WebGL code) requires palette / typography /\n   semantic-color literals inline in JS/TS, do not paste Figma hex values. Source the values from `get_theme_docs`. If\n   `@corva/ui` exposes a documented JS/TS theme module, import from it and cite the path. If no JS export exists,\n   surface the role as an \"Unmapped token\" in the Gap Report — do not silently inline a hex. This rule does NOT apply\n   to chart geometry (tick intervals, axis domains, heights, spacing) — those are domain values, not tokens.\n5. For hooks, constants, and clients implied by the design (subscriptions, feature flags, API calls, etc.):\n   `mcp__corva-ui__get_hook_docs`, `mcp__corva-ui__get_constants_docs`, `mcp__corva-ui__get_client_docs`. For generic\n   utilities (formatters, converters, helpers): `mcp__corva-ui__search_corva_ui` with `{ query, type: 'util' }`, or\n   browse with `mcp__corva-ui__list_corva_ui({ type: 'utils' })`.\n\n## Step 8 — Fall back to neighboring components when conventions are silent\n\nIf `AGENTS.md` / `CLAUDE.md` didn't cover a given axis (styling, file layout, naming), read 1–2 neighboring components\nin the target directory and match what's already there. Do not introduce a new styling system on top of the repo's\nexisting one.\n\nIf neighbors are also inconclusive, use this minimal default policy:\n\n- **Tokens:** canonical names from `get_theme_docs`; never hard-code hex. In `.tsx`, prefer MUI `theme.*` helpers; in\n  style files, prefer CSS custom properties.\n- **Component size:** prefer small, focused components. Split by responsibility when a single component starts handling\n  multiple distinct concerns.\n- **Output files:** emit only what's needed to render the design. Do not generate documentation, example, or story\n  files unless the user explicitly asked.\n\n## Step 9 — Generate\n\n- Emit the component file(s) at the path specified in the user's instructions (or at the location `AGENTS.md` /\n  neighbors indicate).\n- Use Code Connect imports verbatim where provided.\n- Use the exact prop names, types, and `importPath` values returned by `get_component_docs`.\n- Do **not** invent @corva/ui primitives, props, icons, or tokens that the MCP tools did not surface.\n- Prefer semantic HTML first (`<button>`, `<nav>`, `<main>`, etc.); add ARIA only where native semantics are\n  insufficient, and do not strip roles or semantics that `@corva/ui` primitives already provide.\n- When modifying an existing page/component, preserve existing data flow, state, and non-visual behavior unless the\n  user explicitly asked to change them. Touch the UI layer only.\n- When a style value must vary per instance from data (per-row colors, per-segment widths, etc.), pass it via a CSS\n  custom property rather than writing inline `style={{ <styling-property>: value }}`. Pattern:\n  `<div style={{ '--phase-color': c, '--phase-flex': flex } as React.CSSProperties} />` paired with\n  `background: var(--phase-color)` in the SCSS module. If the target repo uses a different style system, follow that\n  system's typed dynamic-value mechanism instead.\n- Per-instance dynamic styling applies only to genuinely runtime values (user input, API data, layout measurement). A\n  finite design palette of phase / status / category colors is NOT a runtime value — map those to `get_theme_docs`\n  tokens or to a documented `@corva/ui` color export. If no token exists, surface them as Unmapped tokens in Step 10\n  rather than committing raw hex anywhere (mock data, SCSS extension files, JS constants).\n\nBefore concluding, run this pre-delivery self-check:\n\n- Every `@corva/ui` import statement came from `get_component_docs` output — none guessed.\n- Every icon export name matches what `search_corva_ui` returned — no invented suffixes.\n- No hard-coded hex, rgba, or raw px spacing that should resolve through `get_theme_docs` tokens.\n- Every prop name **and value** matches the schema from `get_component_docs`, not a Figma variant label.\n- For every third-party rendering / runtime library I imported (chart, map, code editor, virtualization, etc.), I ran\n  capability-based `@corva/ui` searches across all three axes (widget shell, interaction controls, setup / config\n  utility) AND across both `category: 'v2'` and `category: 'v1'`, and either used the Corva shell with its companion\n  control family or listed the import in Implementation deviations together with the exact capability queries I ran for\n  each version.\n- The final section of this response is `## Gap Report` with the four required subsections (Step 10).\n\n## Step 10 — Gap Report (final section of your response)\n\nYour final assistant response must end with a top-level `## Gap Report` section using the exact shape below. When a\nsubsection has nothing to report, write `_None._` — do not omit subsections.\n\n    ## Gap Report\n\n    ### Unmapped design nodes\n    - <node name / Figma id> — <why no @corva/ui primitive fit; suggested action>\n    - …or `_None._`\n\n    ### Unmapped tokens\n    - <token role e.g. \"axis label color\"> — <Figma value> — <closest @corva/ui token, or \"no equivalent\">\n    - …or `_None._`\n\n    ### Implementation deviations\n    - <departure from convention or design> — <reason> — <follow-up needed>\n    - e.g. raw chart-config literals, custom HTML where a primitive existed, third-party rendering lib (chart, map,\n      editor) imported directly after capability-based `@corva/ui` searches found no Corva shell — list the queries\n      attempted across both `category: 'v2'` and `category: 'v1'`, deferred a11y, etc.\n    - …or `_None._`\n\n    ### Ambiguous props or interactions\n    - <component / interaction> — <ambiguity> — <assumption made or question for the user>\n    - …or `_None._`\n\nBegin with Step 1 now.\n";
+
+const figmaToCodePromptName = 'figma_to_code';
+const figmaToCodePromptTitle = 'Figma to Code';
+const figmaToCodePromptDescription = `Translate a Figma node into React components that follow @corva/ui conventions.
+Orchestrates the Figma MCP (for design context) and the corva-ui MCP (for components, icons, theme, hooks).
+
+Argument:
+- input: Full user request. Paste the Figma URL (design or branch) together with any extra context — target path / file to extend / naming / edge cases. The assistant extracts the URL itself.
+
+Why a single argument: Claude Code's MCP-prompt bridge splits positional string args by whitespace, so a multi-arg schema would swallow only the first token per arg. One freeform arg captures the whole request.
+
+Prerequisite: the Figma Dev Mode MCP must be enabled in the client (https://www.figma.com/design/).`;
+const figmaToCodePromptArgsSchema = {
+    input: z
+        .string()
+        .optional()
+        .describe('Full user request. Include the Figma URL and any target path / extra context. If omitted, the assistant will ask the user before generating.'),
+};
+const INPUT_FALLBACK = '(no input provided — ask the user for the Figma URL and target path/directory before generating)';
+const handleFigmaToCode = (args) => {
+    const text = figmaToCodePromptTemplate.replace('{{input}}', args.input ?? INPUT_FALLBACK);
+    return {
+        description: figmaToCodePromptDescription,
+        messages: [
+            {
+                role: 'user',
+                content: { type: 'text', text },
+            },
+        ],
+    };
+};
+
 const readJsonField = (filePath, ...keys) => {
     try {
         let value = JSON.parse(readFileSync(filePath, 'utf-8'));
@@ -96686,6 +98469,7 @@ class CorvaUiMcpServer {
             version: MCP_SERVER_VERSION,
         });
         this.setupTools();
+        this.setupPrompts();
         this.setupErrorHandling();
         this.setupInitializedHandler();
         this.mcpLogger.timeEnd('startup', startupTimer);
@@ -96814,6 +98598,77 @@ class CorvaUiMcpServer {
             throw error;
         }
     }
+    executePromptWithObservability(promptName, args, handler, options) {
+        this.requestCount += 1;
+        const startTime = Date.now();
+        const timer = this.mcpLogger.time(promptName);
+        const serializedArgs = serializeToolParams(args);
+        const parentContext = options?.parentContext;
+        const requestId = options?.requestId;
+        try {
+            const result = handler();
+            const endTime = Date.now();
+            const ms = timer.stop();
+            const serialized = serializePromptResult(result);
+            const summary = `${serialized.messageCount} msg / ${serialized.sizeBytes}B`;
+            this.mcpLogger.request(promptName, serializedArgs, summary, ms);
+            if (this.telemetry.isEnabled()) {
+                const clientInfo = this.server.server.getClientVersion();
+                this.telemetry.recordPromptCall({
+                    promptName,
+                    args: serializedArgs,
+                    resultSizeBytes: serialized.sizeBytes,
+                    messageCount: serialized.messageCount,
+                    startTime,
+                    endTime,
+                    clientName: clientInfo?.name,
+                    clientVersion: clientInfo?.version,
+                    sessionId: this.telemetry.sessionId,
+                    protocolVersion: MCP_PROTOCOL_VERSION,
+                    networkTransport: MCP_NETWORK_TRANSPORT,
+                    parentContext,
+                    requestId,
+                    extraAttrs: getProjectIdentityAttrs(this.projectIdentity),
+                });
+                this.telemetry.metrics.recordPromptInvocation(promptName, ms);
+            }
+            return result;
+        }
+        catch (error) {
+            const endTime = Date.now();
+            const ms = timer.stop();
+            this.mcpLogger.request(promptName, serializedArgs, 'error', ms);
+            if (this.telemetry.isEnabled()) {
+                const serializedError = serializeToolError(error);
+                const clientInfo = this.server.server.getClientVersion();
+                this.telemetry.recordPromptCall({
+                    promptName,
+                    args: serializedArgs,
+                    resultSizeBytes: 0,
+                    messageCount: 0,
+                    startTime,
+                    endTime,
+                    isError: true,
+                    error: serializedError.error,
+                    errorType: serializedError.errorType,
+                    clientName: clientInfo?.name,
+                    clientVersion: clientInfo?.version,
+                    sessionId: this.telemetry.sessionId,
+                    protocolVersion: MCP_PROTOCOL_VERSION,
+                    networkTransport: MCP_NETWORK_TRANSPORT,
+                    parentContext,
+                    requestId,
+                    extraAttrs: {
+                        ...serializedError.extraAttrs,
+                        ...getProjectIdentityAttrs(this.projectIdentity),
+                    },
+                });
+                this.telemetry.metrics.recordPromptInvocation(promptName, ms);
+                this.telemetry.metrics.recordPromptError(promptName, serializedError.errorType);
+            }
+            throw error;
+        }
+    }
     setupTools() {
         this.server.registerTool(searchToolName, {
             title: searchToolTitle,
@@ -96953,6 +98808,16 @@ class CorvaUiMcpServer {
             }
         });
     }
+    setupPrompts() {
+        this.server.registerPrompt(figmaToCodePromptName, {
+            title: figmaToCodePromptTitle,
+            description: figmaToCodePromptDescription,
+            argsSchema: figmaToCodePromptArgsSchema,
+        }, (args, extra) => {
+            const parentContext = extractContextFromMeta(extra?._meta);
+            return this.executePromptWithObservability(figmaToCodePromptName, args, () => handleFigmaToCode(args), { parentContext, requestId: extra?.requestId });
+        });
+    }
     async run() {
         const connectTimer = this.mcpLogger.time('transport-connect');
         this.transport = new StdioServerTransport();