docs: make code blocks collapsible (#7606)

* added collapsible code feature

* fixed side shadow

* fix build errors

* change design

* make code blocks collapsible

www/apps/book/app/advanced-development/workflows/access-workflow-errors/page.mdx

@@ -19,7 +19,7 @@ export const highlights = [
   ["14", "throwOnError", "Specify that errors occuring during the workflow's execution should be returned, not thrown."],
 ]
 
-```ts title="src/api/store/workflows/route.ts" highlights={highlights}
+```ts title="src/api/store/workflows/route.ts" highlights={highlights} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import type {
   MedusaRequest,
   MedusaResponse,

www/apps/book/app/advanced-development/workflows/advanced-example/page.mdx

@@ -46,7 +46,7 @@ export const updateProductHighlights = [
   ["39", "", "Revert the product’s data using the `previousProductData` passed from the step to the compensation function."]
 ]
 
-```ts title="src/workflows/update-product-erp/steps/update-product.ts" highlights={updateProductHighlights}
+```ts title="src/workflows/update-product-erp/steps/update-product.ts" highlights={updateProductHighlights} collapsibleLines="1-9" expandButtonLabel="Show Imports"
 import {
   createStep,
   StepResponse,
@@ -145,7 +145,7 @@ export const updateErpHighlights = [
   ["37", "updateProductErpData", "Revert the product's data in the ERP system to its previous state using the `previousErpData`."]
 ]
 
-```ts title="src/workflows/update-product-erp/steps/update-erp.ts" highlights={updateErpHighlights}
+```ts title="src/workflows/update-product-erp/steps/update-erp.ts" highlights={updateErpHighlights} collapsibleLines="1-8" expandButtonLabel="Show Imports"
 import {
   createStep,
   StepResponse,
@@ -208,7 +208,7 @@ With the steps ready, you'll create the workflow that runs these steps to update
 
 Change the content of `src/workflows/update-product-erp/index.ts` to the following:
 
-```ts title="src/workflows/update-product-erp/index.ts"
+```ts title="src/workflows/update-product-erp/index.ts" collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import { createWorkflow } from "@medusajs/workflows-sdk"
 import { UpdateProductDTO, ProductDTO } from "@medusajs/types"
 import updateProduct from "./steps/update-product"

www/apps/book/app/advanced-development/workflows/compensation-function/page.mdx

@@ -12,7 +12,7 @@ Errors can occur in a workflow. To avoid data inconsistency, define a function t
 
 For example:
 
-```ts title="src/workflows/hello-world.ts" highlights={[["16"], ["17"], ["18"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["16"], ["17"], ["18"]]} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 // other imports...
 import { 
   createStep,
@@ -52,7 +52,7 @@ const step2 = createStep(
 
 2. Use the steps in a workflow. For example:
 
-```ts title="src/workflows/hello-world.ts"
+```ts title="src/workflows/hello-world.ts" collapsibleLines="1-7" expandButtonLabel="Show Imports"
 import {
   // other imports...
   createWorkflow,
@@ -81,7 +81,7 @@ export default myWorkflow
 
 3. Execute the workflow from a resource, such as an API route:
 
-```ts title="src/api/store/workflow/route.ts"
+```ts title="src/api/store/workflow/route.ts" collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import type {
   MedusaRequest,
   MedusaResponse,

www/apps/book/app/advanced-development/workflows/long-running-workflow/page.mdx

@@ -22,7 +22,7 @@ A workflow is considered long-running if at least one step has its `async` confi
 
 For example, consider the following workflow and steps:
 
-```ts title="src/workflows/hello-world.ts" highlights={[["13"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["13"]]} collapsibleLines="1-10" expandButtonLabel="Show More"
 import { 
   createStep,  
   createWorkflow,
@@ -88,7 +88,7 @@ export const highlights = [
   ["24", "subscribe", "Subscribe to status changes of the workflow execution."],
 ]
 
-```ts title="src/api/store/workflows/route.ts" highlights={highlights}
+```ts title="src/api/store/workflows/route.ts" highlights={highlights} collapsibleLines="1-11" expandButtonLabel="Show Imports"
 import type {
   MedusaRequest,
   MedusaResponse,

www/apps/book/app/advanced-development/workflows/parallel-steps/page.mdx

@@ -19,7 +19,7 @@ export const highlights = [
   ["23", "parallelize", "Run the steps passed as parameters in parallel."],
 ]
 
-```ts highlights={highlights}
+```ts highlights={highlights} collapsibleLines="1-12" expandButtonLabel="Show Imports"
 import {
   createWorkflow,
   parallelize,

www/apps/book/app/advanced-development/workflows/retry-failed-steps/page.mdx

@@ -12,7 +12,7 @@ By default, when an error occurs in a step, the step and the workflow fail, and
 
 You can configure the step to retry on failure. The `createStep` function can accept a configuration object instead of the step’s name as a first parameter:
 
-```ts title="src/workflows/hello-world.ts" highlights={[["10"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["10"]]} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import { 
   createStep, 
   StepResponse, 

www/apps/book/app/advanced-development/workflows/workflow-timeout/page.mdx

@@ -20,7 +20,7 @@ Timeout doesn't stop the execution of a running step. The timeout only affects t
 
 For example:
 
-```ts title="src/workflows/hello-world.ts" highlights={[["22"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["22"]]} collapsibleLines="1-16" expandButtonLabel="Show More"
 import { 
   createStep,  
   createWorkflow,