@mintlify/msft-sdk 1.1.36 → 1.1.38

package/dist/api-playground/EndpointFields/ParamFields/PrimitiveParamField/index.js

@@ -1,7 +1,6 @@
 import "react/jsx-runtime";
-import "@mintlify/validation";
-const r = (t) => t.type === "enum<integer>" || t.type === "enum<number>" || t.type === "enum<string>";
+const t = (e) => e.type === "enum<integer>" || e.type === "enum<number>" || e.type === "enum<string>";
 export {
-  r as isEnum
+  t as isEnum
 };
 //# sourceMappingURL=index.js.map

package/dist/api-playground/EndpointFields/ParamFields/PrimitiveParamField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/api-playground/EndpointFields/ParamFields/PrimitiveParamField/index.tsx"],"sourcesContent":["\nimport {\n  AnySchema,\n  BooleanSchema,\n  DataSchema,\n  DataSchemaArray,\n  FileSchema,\n  IncrementalDataSchema,\n  IncrementalDataSchemaArray,\n  NullSchema,\n  NumberEnumSchema,\n  NumberSchema,\n  StringEnumSchema,\n  StringSchema,\n} from '@mintlify/validation';\n\nimport { ParamHead } from '@/components/Api/Param';\nimport { cn } from '@/api-playground-2/schemaGraph/utils';\n\nimport { Description } from '../../components/Description';\nimport { ExampleDescription } from '../ExampleDescription';\nimport { EnumConstTable, EnumOptions } from './Enum';\nimport { NumberMetadata } from './NumberMetadata';\nimport { StringMetadata } from './StringMetadata';\nimport { FieldType } from '@/api-playground-2/types/api';\n\nexport type PrimitiveParamFieldParams = {\n  fieldType: FieldType;\n  schema:\n    | BooleanSchema\n    | StringSchema\n    | NumberSchema\n    | StringEnumSchema\n    | NumberEnumSchema\n    | FileSchema\n    | NullSchema\n    | AnySchema;\n  schemaArray?: DataSchemaArray | IncrementalDataSchemaArray;\n  typeOptions: string[];\n  name?: string | null;\n  location?: string;\n  selectedIndex?: number;\n  onSelectTypeOption?: (index: number) => void;\n  parentName?: string;\n  paramId?: string;\n  style?: string;\n  explode?: boolean;\n};\n\nexport const PrimitiveParamField = ({\n  fieldType,\n  schema,\n  schemaArray,\n  name,\n  location,\n  typeOptions,\n  selectedIndex,\n  onSelectTypeOption,\n  parentName,\n  paramId,\n  style,\n  explode,\n}: PrimitiveParamFieldParams) => {\n  const typeLabel = typeOptions[selectedIndex ?? 0];\n\n  const description =\n    schema.description ??\n    (name === undefined ? `The ${fieldType} is of type \\`${typeLabel}\\`.` : undefined);\n\n  return (\n    <div className=\"mint:py-6\">\n      <ParamHead\n        id={paramId}\n        name={name}\n        typeLabel={typeLabel}\n        location={location}\n        fieldType={fieldType}\n        required={schema.required}\n        deprecated={schema.deprecated}\n        defaultValue={schema.default}\n        typeOptions={typeOptions}\n        selectedTypeOptionIndex={selectedIndex}\n        onSelectTypeOption={onSelectTypeOption}\n        parentName={parentName}\n        style={style}\n        explode={explode}\n      />\n      <div className={cn({ 'mint:mt-4': description || isEnum(schema) })}>\n        {description && <Description markdown={description} />}\n        {schemaArray && isEnumWithConsts(schemaArray) ? (\n          <EnumConstTable schemaArray={schemaArray} />\n        ) : (\n          isEnum(schema) && <EnumOptions schema={schema} />\n        )}\n        {isStringSchema(schema) && <StringMetadata schema={schema} description={description} />}\n        {isNumberSchema(schema) && <NumberMetadata schema={schema} />}\n        <ExampleDescription schema={schema} />\n      </div>\n    </div>\n  );\n};\n\nexport const isEnum = (\n  schema: DataSchema | IncrementalDataSchema\n): schema is NumberEnumSchema | StringEnumSchema => {\n  return (\n    schema.type === 'enum<integer>' ||\n    schema.type === 'enum<number>' ||\n    schema.type === 'enum<string>'\n  );\n};\n\nexport const isEnumWithConsts = (\n  schemaArray?: DataSchemaArray | IncrementalDataSchemaArray\n): boolean => {\n  if (!schemaArray) return false;\n  return schemaArray.some((schema) => isEnum(schema) && 'const' in schema);\n};\n\nconst isStringSchema = (schema: DataSchema | IncrementalDataSchema): schema is StringSchema => {\n  return schema.type === 'string';\n};\n\nconst isNumberSchema = (schema: DataSchema | IncrementalDataSchema): schema is NumberSchema => {\n  return schema.type === 'number' || schema.type === 'integer';\n};\n"],"names":["isEnum","schema"],"mappings":";;AAsGO,MAAMA,IAAS,CACpBC,MAGEA,EAAO,SAAS,mBAChBA,EAAO,SAAS,kBAChBA,EAAO,SAAS;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/api-playground/EndpointFields/ParamFields/PrimitiveParamField/index.tsx"],"sourcesContent":["\nimport {\n  AnySchema,\n  BooleanSchema,\n  DataSchema,\n  DataSchemaArray,\n  FileSchema,\n  IncrementalDataSchema,\n  IncrementalDataSchemaArray,\n  NullSchema,\n  NumberEnumSchema,\n  NumberSchema,\n  StringEnumSchema,\n  StringSchema,\n} from '@mintlify/validation';\n\nimport { ParamHead } from '@/components/Api/Param';\nimport { cn } from '@/api-playground-2/schemaGraph/utils';\n\nimport { Description } from '../../components/Description';\nimport { ExampleDescription } from '../ExampleDescription';\nimport { EnumConstTable, EnumOptions } from './Enum';\nimport { NumberMetadata } from './NumberMetadata';\nimport { StringMetadata } from './StringMetadata';\nimport { FieldType } from '@/api-playground-2/types/api';\n\nexport type PrimitiveParamFieldParams = {\n  fieldType: FieldType;\n  schema:\n    | BooleanSchema\n    | StringSchema\n    | NumberSchema\n    | StringEnumSchema\n    | NumberEnumSchema\n    | FileSchema\n    | NullSchema\n    | AnySchema;\n  schemaArray?: DataSchemaArray | IncrementalDataSchemaArray;\n  typeOptions: string[];\n  name?: string | null;\n  location?: string;\n  selectedIndex?: number;\n  onSelectTypeOption?: (index: number) => void;\n  parentName?: string;\n  paramId?: string;\n  style?: string;\n  explode?: boolean;\n};\n\nexport const PrimitiveParamField = ({\n  fieldType,\n  schema,\n  schemaArray,\n  name,\n  location,\n  typeOptions,\n  selectedIndex,\n  onSelectTypeOption,\n  parentName,\n  paramId,\n  style,\n  explode,\n}: PrimitiveParamFieldParams) => {\n  const typeLabel = typeOptions[selectedIndex ?? 0];\n\n  const description =\n    schema.description ??\n    (name === undefined ? `The ${fieldType} is of type \\`${typeLabel}\\`.` : undefined);\n\n  return (\n    <div className=\"mint:py-6\">\n      <ParamHead\n        id={paramId}\n        name={name}\n        typeLabel={typeLabel}\n        location={location}\n        fieldType={fieldType}\n        required={schema.required}\n        deprecated={schema.deprecated}\n        defaultValue={schema.default}\n        typeOptions={typeOptions}\n        selectedTypeOptionIndex={selectedIndex}\n        onSelectTypeOption={onSelectTypeOption}\n        parentName={parentName}\n        style={style}\n        explode={explode}\n      />\n      <div className={cn({ 'mint:mt-4': description || isEnum(schema) })}>\n        {description && <Description markdown={description} />}\n        {schemaArray && isEnumWithConsts(schemaArray) ? (\n          <EnumConstTable schemaArray={schemaArray} />\n        ) : (\n          isEnum(schema) && <EnumOptions schema={schema} />\n        )}\n        {isStringSchema(schema) && <StringMetadata schema={schema} description={description} />}\n        {isNumberSchema(schema) && <NumberMetadata schema={schema} />}\n        <ExampleDescription schema={schema} />\n      </div>\n    </div>\n  );\n};\n\nexport const isEnum = (\n  schema: DataSchema | IncrementalDataSchema\n): schema is NumberEnumSchema | StringEnumSchema => {\n  return (\n    schema.type === 'enum<integer>' ||\n    schema.type === 'enum<number>' ||\n    schema.type === 'enum<string>'\n  );\n};\n\nexport const isEnumWithConsts = (\n  schemaArray?: DataSchemaArray | IncrementalDataSchemaArray\n): boolean => {\n  if (!schemaArray) return false;\n  return schemaArray.some((schema) => isEnum(schema) && 'const' in schema);\n};\n\nconst isStringSchema = (schema: DataSchema | IncrementalDataSchema): schema is StringSchema => {\n  return schema.type === 'string';\n};\n\nconst isNumberSchema = (schema: DataSchema | IncrementalDataSchema): schema is NumberSchema => {\n  return schema.type === 'number' || schema.type === 'integer';\n};\n"],"names":["isEnum","schema"],"mappings":";AAsGO,MAAMA,IAAS,CACpBC,MAGEA,EAAO,SAAS,mBAChBA,EAAO,SAAS,kBAChBA,EAAO,SAAS;"}

package/dist/api-playground/EndpointFields/ParamFields/RecursiveParamField.js

@@ -1,13 +1,14 @@
 import "react/jsx-runtime";
-import $ from "@sindresorhus/slugify";
-const c = (r, e, t, i) => $(
-  `${r ? `${r}-` : ""}${t ? `${t}-` : ""}${e || ""}-`,
+import i from "@sindresorhus/slugify";
+import "../../../contexts/EndpointLocationContext.js";
+const s = (r, t, e, $) => i(
+  `${r ? `${r}-` : ""}${e ? `${e}-` : ""}${t || ""}-`,
   {
     decamelize: !0
   }
-), s = (r, e) => r ? `${e ? `${e}` : ""}${r}.` : "";
+), m = (r, t) => r ? `${t ? `${t}` : ""}${r}.` : "";
 export {
-  c as buildRecursiveParamFieldId,
-  s as getRecursiveParentName
+  s as buildRecursiveParamFieldId,
+  m as getRecursiveParentName
 };
 //# sourceMappingURL=RecursiveParamField.js.map

package/dist/api-playground/EndpointFields/ParamFields/RecursiveParamField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecursiveParamField.js","sources":["../../../../src/api-playground/EndpointFields/ParamFields/RecursiveParamField.tsx"],"sourcesContent":["\nimport { DataSchema, DataSchemaArray, IncrementalDataSchemaArray } from '@mintlify/validation';\nimport slugify from '@sindresorhus/slugify';\n\nimport { useEndpointLocation } from '@/contexts/EndpointLocationContext';\nimport { getConstFilteredSchemaArray } from '@/openapi/filterEnums';\nimport {\n  getAuthFilteredSchemaArray,\n  isDataSchemaArrayOrIncrementalDataSchemaArray,\n} from '@/openapi/getAuthFilteredSchemaArray';\nimport { getNextPropertiesByType } from '@/utils/api-reference/getNextPropertiesByType';\n\nimport { RecursiveParamFieldWithChildrenObserver } from './RecursiveParamFieldWithChildrenObserver';\nimport { RecursiveParamFieldWithObserver } from './RecursiveParamFieldWithObserver';\nimport { FieldType, RenderedRefs } from '@/api-playground-2/types/api';\n\nexport type RecursiveParamFieldParams = {\n  fieldType: FieldType;\n  schemaArray: DataSchemaArray | IncrementalDataSchemaArray;\n  renderedRefs?: RenderedRefs;\n  name?: string | null;\n  location?: string;\n  parentName?: string;\n  depth?: number;\n  hideDescription?: boolean;\n  circularRefs?: string[];\n  paramId?: string;\n  style?: string;\n  explode?: boolean;\n};\n\nexport const RecursiveParamField = ({\n  fieldType,\n  schemaArray,\n  name,\n  location,\n  parentName,\n  depth = 0,\n  hideDescription = false,\n  renderedRefs = new Set(),\n  circularRefs,\n  paramId,\n  style,\n  explode,\n}: RecursiveParamFieldParams) => {\n  const { anchor } = useEndpointLocation();\n  let filteredSchemaArray: DataSchemaArray | IncrementalDataSchemaArray | null = schemaArray;\n  filteredSchemaArray = getAuthFilteredSchemaArray({ schemaArray, userGroups: undefined });\n\n  if (\n    filteredSchemaArray &&\n    filteredSchemaArray.some((schema) => 'enum' in schema && 'const' in schema)\n  ) {\n    filteredSchemaArray = getConstFilteredSchemaArray({ schemaArray });\n  }\n\n  if (!isDataSchemaArrayOrIncrementalDataSchemaArray(filteredSchemaArray)) {\n    return null;\n  }\n\n  const RecursiveParamFieldType = anchor\n    ? RecursiveParamFieldWithChildrenObserver\n    : RecursiveParamFieldWithObserver;\n\n  return (\n    <RecursiveParamFieldType\n      fieldType={fieldType}\n      schemaArray={filteredSchemaArray}\n      name={name}\n      location={location}\n      parentName={parentName}\n      depth={depth}\n      style={style}\n      explode={explode}\n      hideDescription={hideDescription}\n      renderedRefs={renderedRefs}\n      circularRefs={circularRefs}\n      paramId={paramId}\n    />\n  );\n};\n\ntype RenderNextPropertiesRecursivelyParams = {\n  properties: [string, DataSchemaArray | IncrementalDataSchemaArray][];\n  fieldType: FieldType;\n  depth: number;\n  refs: Set<string>;\n  parentName?: string;\n  name?: string | null;\n  currentSchemaRef: string | undefined;\n  style?: string;\n  explode?: boolean;\n  hideParentName?: boolean;\n};\n\nexport const renderNextPropertiesRecursively = ({\n  currentSchemaRef,\n  properties,\n  fieldType,\n  parentName,\n  name,\n  depth,\n  refs,\n  style,\n  explode,\n  hideParentName,\n}: RenderNextPropertiesRecursivelyParams) => {\n  // Create a new set with the current refs for this level\n  const currentLevelRefs = new Set(refs);\n\n  if (currentSchemaRef) {\n    currentLevelRefs.add(currentSchemaRef);\n  }\n\n  if (currentLevelRefs.size > 0) {\n    return properties.map((property) => {\n      const [propertyName, schemaArray] = property;\n      const nextSchemaArray = schemaArray[0];\n      const nextSchemaArrayProperties = getNextPropertiesByType(nextSchemaArray);\n      const paramId = buildRecursiveParamFieldId(fieldType, name, parentName, propertyName);\n      const passedName = hideParentName ? '' : name;\n      let circularReferences: string[] = [];\n      if (\n        Object.values(nextSchemaArrayProperties).some(\n          (value: unknown) => typeof value === 'string' && currentLevelRefs.has(value)\n        )\n      ) {\n        circularReferences = Object.values(nextSchemaArrayProperties).filter(\n          (value: unknown) => typeof value === 'string' && currentLevelRefs.has(value)\n        );\n      }\n      return (\n        <RecursiveParamField\n          paramId={paramId}\n          fieldType={fieldType}\n          key={propertyName}\n          schemaArray={schemaArray}\n          name={propertyName}\n          parentName={\n            style === 'deepObject' && explode\n              ? getDeepObjectParentName(passedName, parentName)\n              : getRecursiveParentName(passedName, parentName)\n          }\n          depth={depth + 1}\n          renderedRefs={new Set(currentLevelRefs)}\n          circularRefs={circularReferences}\n          style={style}\n          explode={explode}\n        />\n      );\n    });\n  } else {\n    return properties.map(([propertyName, schemaArray]) => {\n      const paramId = buildRecursiveParamFieldId(fieldType, name, parentName, propertyName);\n      const passedName = hideParentName ? '' : name;\n      return (\n        <RecursiveParamField\n          paramId={paramId}\n          fieldType={fieldType}\n          key={propertyName}\n          schemaArray={schemaArray}\n          name={propertyName}\n          parentName={\n            style === 'deepObject' && explode\n              ? getDeepObjectParentName(passedName, parentName)\n              : getRecursiveParentName(passedName, parentName)\n          }\n          depth={depth + 1}\n          renderedRefs={new Set()}\n          style={style}\n          explode={explode}\n        />\n      );\n    });\n  }\n};\n\ntype RenderTruncatedNextPropertiesParams = {\n  properties: [string, DataSchemaArray | IncrementalDataSchemaArray][];\n  fieldType: FieldType;\n  parentName?: string;\n  name?: string | null;\n  depth: number;\n};\n\nexport const renderTruncatedNextProperties = ({\n  properties,\n  fieldType,\n  parentName,\n  name,\n  depth,\n}: RenderTruncatedNextPropertiesParams) => {\n  return properties.map((property) => {\n    const [propertyName, schemaArray] = property;\n    const nextSchemaArray = schemaArray[0];\n    const baseSchema: DataSchema = nextSchemaArray as DataSchema;\n    if (baseSchema.type === 'array') {\n      baseSchema.items = [{ type: 'any' }];\n    } else if (baseSchema.type === 'object') {\n      baseSchema.properties = {};\n    }\n    const paramId = buildRecursiveParamFieldId(fieldType, name, parentName);\n    const id = `${paramId}-${propertyName}`;\n    return (\n      <RecursiveParamField\n        fieldType={fieldType}\n        key={propertyName}\n        schemaArray={[baseSchema]}\n        name={propertyName}\n        paramId={id}\n        depth={depth + 1}\n        renderedRefs={new Set()}\n      />\n    );\n  });\n};\n\nexport const buildRecursiveParamFieldId = (\n  fieldType: FieldType | undefined,\n  name: string | undefined | null,\n  parentName: string | undefined,\n  propertyName?: string | undefined\n) => {\n  return slugify(\n    `${fieldType ? `${fieldType}-` : ''}${parentName ? `${parentName}-` : ''}${name ? name : ''}-${propertyName ? propertyName : ''}`,\n    {\n      decamelize: true,\n    }\n  );\n};\n\nexport const getRecursiveParentName = (name?: string | null, parentName?: string): string => {\n  if (!name) {\n    return '';\n  }\n\n  return `${parentName ? `${parentName}` : ''}${name}.`;\n};\n\nexport const getDeepObjectParentName = (name?: string | null, parentName?: string): string => {\n  if (!name) {\n    return '';\n  }\n\n  return parentName ? `${parentName}${name}][` : `${name}[`;\n};\n"],"names":["buildRecursiveParamFieldId","fieldType","name","parentName","propertyName","slugify","getRecursiveParentName"],"mappings":";;AAyNO,MAAMA,IAA6B,CACxCC,GACAC,GACAC,GACAC,MAEOC;AAAA,EACL,GAAGJ,IAAY,GAAGA,CAAS,MAAM,EAAE,GAAGE,IAAa,GAAGA,CAAU,MAAM,EAAE,GAAGD,KAAc,EAAE;AAAA,EAC3F;AAAA,IACE,YAAY;AAAA,EAAA;AACd,GAISI,IAAyB,CAACJ,GAAsBC,MACtDD,IAIE,GAAGC,IAAa,GAAGA,CAAU,KAAK,EAAE,GAAGD,CAAI,MAHzC;"}
+{"version":3,"file":"RecursiveParamField.js","sources":["../../../../src/api-playground/EndpointFields/ParamFields/RecursiveParamField.tsx"],"sourcesContent":["\nimport { DataSchema, DataSchemaArray, IncrementalDataSchemaArray } from '@mintlify/validation';\nimport slugify from '@sindresorhus/slugify';\n\nimport { useEndpointLocation } from '@/contexts/EndpointLocationContext';\nimport { getConstFilteredSchemaArray } from '@/openapi/filterEnums';\nimport {\n  getAuthFilteredSchemaArray,\n  isDataSchemaArrayOrIncrementalDataSchemaArray,\n} from '@/openapi/getAuthFilteredSchemaArray';\nimport { getNextPropertiesByType } from '@/utils/api-reference/getNextPropertiesByType';\n\nimport { RecursiveParamFieldWithChildrenObserver } from './RecursiveParamFieldWithChildrenObserver';\nimport { RecursiveParamFieldWithObserver } from './RecursiveParamFieldWithObserver';\nimport { FieldType, RenderedRefs } from '@/api-playground-2/types/api';\n\nexport type RecursiveParamFieldParams = {\n  fieldType: FieldType;\n  schemaArray: DataSchemaArray | IncrementalDataSchemaArray;\n  renderedRefs?: RenderedRefs;\n  name?: string | null;\n  location?: string;\n  parentName?: string;\n  depth?: number;\n  hideDescription?: boolean;\n  circularRefs?: string[];\n  paramId?: string;\n  style?: string;\n  explode?: boolean;\n};\n\nexport const RecursiveParamField = ({\n  fieldType,\n  schemaArray,\n  name,\n  location,\n  parentName,\n  depth = 0,\n  hideDescription = false,\n  renderedRefs = new Set(),\n  circularRefs,\n  paramId,\n  style,\n  explode,\n}: RecursiveParamFieldParams) => {\n  const { anchor } = useEndpointLocation();\n  let filteredSchemaArray: DataSchemaArray | IncrementalDataSchemaArray | null = schemaArray;\n  filteredSchemaArray = getAuthFilteredSchemaArray({ schemaArray, userGroups: undefined });\n\n  if (\n    filteredSchemaArray &&\n    filteredSchemaArray.some((schema) => 'enum' in schema && 'const' in schema)\n  ) {\n    filteredSchemaArray = getConstFilteredSchemaArray({ schemaArray });\n  }\n\n  if (!isDataSchemaArrayOrIncrementalDataSchemaArray(filteredSchemaArray)) {\n    return null;\n  }\n\n  const RecursiveParamFieldType = anchor\n    ? RecursiveParamFieldWithChildrenObserver\n    : RecursiveParamFieldWithObserver;\n\n  return (\n    <RecursiveParamFieldType\n      fieldType={fieldType}\n      schemaArray={filteredSchemaArray}\n      name={name}\n      location={location}\n      parentName={parentName}\n      depth={depth}\n      style={style}\n      explode={explode}\n      hideDescription={hideDescription}\n      renderedRefs={renderedRefs}\n      circularRefs={circularRefs}\n      paramId={paramId}\n    />\n  );\n};\n\ntype RenderNextPropertiesRecursivelyParams = {\n  properties: [string, DataSchemaArray | IncrementalDataSchemaArray][];\n  fieldType: FieldType;\n  depth: number;\n  refs: Set<string>;\n  parentName?: string;\n  name?: string | null;\n  currentSchemaRef: string | undefined;\n  style?: string;\n  explode?: boolean;\n  hideParentName?: boolean;\n};\n\nexport const renderNextPropertiesRecursively = ({\n  currentSchemaRef,\n  properties,\n  fieldType,\n  parentName,\n  name,\n  depth,\n  refs,\n  style,\n  explode,\n  hideParentName,\n}: RenderNextPropertiesRecursivelyParams) => {\n  // Create a new set with the current refs for this level\n  const currentLevelRefs = new Set(refs);\n\n  if (currentSchemaRef) {\n    currentLevelRefs.add(currentSchemaRef);\n  }\n\n  if (currentLevelRefs.size > 0) {\n    return properties.map((property) => {\n      const [propertyName, schemaArray] = property;\n      const nextSchemaArray = schemaArray[0];\n      const nextSchemaArrayProperties = getNextPropertiesByType(nextSchemaArray);\n      const paramId = buildRecursiveParamFieldId(fieldType, name, parentName, propertyName);\n      const passedName = hideParentName ? '' : name;\n      let circularReferences: string[] = [];\n      if (\n        Object.values(nextSchemaArrayProperties).some(\n          (value: unknown) => typeof value === 'string' && currentLevelRefs.has(value)\n        )\n      ) {\n        circularReferences = Object.values(nextSchemaArrayProperties).filter(\n          (value: unknown) => typeof value === 'string' && currentLevelRefs.has(value)\n        );\n      }\n      return (\n        <RecursiveParamField\n          paramId={paramId}\n          fieldType={fieldType}\n          key={propertyName}\n          schemaArray={schemaArray}\n          name={propertyName}\n          parentName={\n            style === 'deepObject' && explode\n              ? getDeepObjectParentName(passedName, parentName)\n              : getRecursiveParentName(passedName, parentName)\n          }\n          depth={depth + 1}\n          renderedRefs={new Set(currentLevelRefs)}\n          circularRefs={circularReferences}\n          style={style}\n          explode={explode}\n        />\n      );\n    });\n  } else {\n    return properties.map(([propertyName, schemaArray]) => {\n      const paramId = buildRecursiveParamFieldId(fieldType, name, parentName, propertyName);\n      const passedName = hideParentName ? '' : name;\n      return (\n        <RecursiveParamField\n          paramId={paramId}\n          fieldType={fieldType}\n          key={propertyName}\n          schemaArray={schemaArray}\n          name={propertyName}\n          parentName={\n            style === 'deepObject' && explode\n              ? getDeepObjectParentName(passedName, parentName)\n              : getRecursiveParentName(passedName, parentName)\n          }\n          depth={depth + 1}\n          renderedRefs={new Set()}\n          style={style}\n          explode={explode}\n        />\n      );\n    });\n  }\n};\n\ntype RenderTruncatedNextPropertiesParams = {\n  properties: [string, DataSchemaArray | IncrementalDataSchemaArray][];\n  fieldType: FieldType;\n  parentName?: string;\n  name?: string | null;\n  depth: number;\n};\n\nexport const renderTruncatedNextProperties = ({\n  properties,\n  fieldType,\n  parentName,\n  name,\n  depth,\n}: RenderTruncatedNextPropertiesParams) => {\n  return properties.map((property) => {\n    const [propertyName, schemaArray] = property;\n    const nextSchemaArray = schemaArray[0];\n    const baseSchema: DataSchema = nextSchemaArray as DataSchema;\n    if (baseSchema.type === 'array') {\n      baseSchema.items = [{ type: 'any' }];\n    } else if (baseSchema.type === 'object') {\n      baseSchema.properties = {};\n    }\n    const paramId = buildRecursiveParamFieldId(fieldType, name, parentName);\n    const id = `${paramId}-${propertyName}`;\n    return (\n      <RecursiveParamField\n        fieldType={fieldType}\n        key={propertyName}\n        schemaArray={[baseSchema]}\n        name={propertyName}\n        paramId={id}\n        depth={depth + 1}\n        renderedRefs={new Set()}\n      />\n    );\n  });\n};\n\nexport const buildRecursiveParamFieldId = (\n  fieldType: FieldType | undefined,\n  name: string | undefined | null,\n  parentName: string | undefined,\n  propertyName?: string | undefined\n) => {\n  return slugify(\n    `${fieldType ? `${fieldType}-` : ''}${parentName ? `${parentName}-` : ''}${name ? name : ''}-${propertyName ? propertyName : ''}`,\n    {\n      decamelize: true,\n    }\n  );\n};\n\nexport const getRecursiveParentName = (name?: string | null, parentName?: string): string => {\n  if (!name) {\n    return '';\n  }\n\n  return `${parentName ? `${parentName}` : ''}${name}.`;\n};\n\nexport const getDeepObjectParentName = (name?: string | null, parentName?: string): string => {\n  if (!name) {\n    return '';\n  }\n\n  return parentName ? `${parentName}${name}][` : `${name}[`;\n};\n"],"names":["buildRecursiveParamFieldId","fieldType","name","parentName","propertyName","slugify","getRecursiveParentName"],"mappings":";;;AAyNO,MAAMA,IAA6B,CACxCC,GACAC,GACAC,GACAC,MAEOC;AAAA,EACL,GAAGJ,IAAY,GAAGA,CAAS,MAAM,EAAE,GAAGE,IAAa,GAAGA,CAAU,MAAM,EAAE,GAAGD,KAAc,EAAE;AAAA,EAC3F;AAAA,IACE,YAAY;AAAA,EAAA;AACd,GAISI,IAAyB,CAACJ,GAAsBC,MACtDD,IAIE,GAAGC,IAAa,GAAGA,CAAU,KAAK,EAAE,GAAGD,CAAI,MAHzC;"}

package/dist/api-playground/EndpointFields/index.js

@@ -1,7 +1,8 @@
 import "react/jsx-runtime";
-import { useOpenApiEndpoint as n } from "../../hooks/useEndpoint.js";
-const p = () => (n(), null);
+import "../../contexts/EndpointLocationContext.js";
+import { useOpenApiEndpoint as t } from "../../hooks/useEndpoint.js";
+const i = () => (t(), null);
 export {
-  p as default
+  i as default
 };
 //# sourceMappingURL=index.js.map

package/dist/api-playground/EndpointFields/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/api-playground/EndpointFields/index.tsx"],"sourcesContent":["\nimport { EndpointLocationProvider } from '@/contexts/EndpointLocationContext';\nimport { useOpenApiEndpoint } from '@/hooks/useEndpoint';\nimport { getFilteredSecurityOptions } from '@/utils/api-reference/getFilteredSecurityOptions';\n\nimport { EndpointBody } from './EndpointBody';\nimport { EndpointParameters } from './EndpointParameters';\nimport { EndpointResponse } from './EndpointResponse';\nimport { EndpointSecurity } from './EndpointSecurity';\n\nconst EndpointFields = () => {\n  const endpoint = useOpenApiEndpoint();\n  const newApiReferencePage = true;\n\n  if (endpoint === undefined || newApiReferencePage) {\n    return null;\n  }\n\n  // TODO(ronan): remove when all security options are handled (none should be empty)\n  const filteredSecurityOptions = getFilteredSecurityOptions(endpoint);\n\n  return (\n    <>\n      {filteredSecurityOptions.length > 0 && (\n        <EndpointSecurity securityOptions={filteredSecurityOptions} />\n      )}\n      <EndpointParameters parameters={endpoint.request.parameters} />\n      <EndpointLocationProvider location=\"request\">\n        <EndpointBody body={endpoint.request.body} />\n      </EndpointLocationProvider>\n      <EndpointLocationProvider location=\"response\">\n        {Object.entries(endpoint.response)[0] && <EndpointResponse response={endpoint.response} />}\n      </EndpointLocationProvider>\n    </>\n  );\n};\n\nexport default EndpointFields;\n"],"names":["EndpointFields","useOpenApiEndpoint"],"mappings":";;AAUA,MAAMA,IAAiB,OACJC,EAAA,GAIR;"}
+{"version":3,"file":"index.js","sources":["../../../src/api-playground/EndpointFields/index.tsx"],"sourcesContent":["\nimport { EndpointLocationProvider } from '@/contexts/EndpointLocationContext';\nimport { useOpenApiEndpoint } from '@/hooks/useEndpoint';\nimport { getFilteredSecurityOptions } from '@/utils/api-reference/getFilteredSecurityOptions';\n\nimport { EndpointBody } from './EndpointBody';\nimport { EndpointParameters } from './EndpointParameters';\nimport { EndpointResponse } from './EndpointResponse';\nimport { EndpointSecurity } from './EndpointSecurity';\n\nconst EndpointFields = () => {\n  const endpoint = useOpenApiEndpoint();\n  const newApiReferencePage = true;\n\n  if (endpoint === undefined || newApiReferencePage) {\n    return null;\n  }\n\n  // TODO(ronan): remove when all security options are handled (none should be empty)\n  const filteredSecurityOptions = getFilteredSecurityOptions(endpoint);\n\n  return (\n    <>\n      {filteredSecurityOptions.length > 0 && (\n        <EndpointSecurity securityOptions={filteredSecurityOptions} />\n      )}\n      <EndpointParameters parameters={endpoint.request.parameters} />\n      <EndpointLocationProvider location=\"request\">\n        <EndpointBody body={endpoint.request.body} />\n      </EndpointLocationProvider>\n      <EndpointLocationProvider location=\"response\">\n        {Object.entries(endpoint.response)[0] && <EndpointResponse response={endpoint.response} />}\n      </EndpointLocationProvider>\n    </>\n  );\n};\n\nexport default EndpointFields;\n"],"names":["EndpointFields","useOpenApiEndpoint"],"mappings":";;;AAUA,MAAMA,IAAiB,OACJC,EAAA,GAIR;"}

package/dist/components/content-components/callouts.js

@@ -34,8 +34,8 @@ const f = {
   warning: "Warning",
   nextstepaction: "Next step action"
 };
-function h({ type: n, children: e }) {
-  const i = f[n], a = b[n];
+function h({ type: i, children: e }) {
+  const n = f[i], a = b[i];
   return /* @__PURE__ */ r(
     "aside",
     {
@@ -43,17 +43,10 @@ function h({ type: n, children: e }) {
       "aria-label": a,
       className: l(
         "mint:my-4 mint:flex mint:gap-2 mint:px-3 mint:py-2.5 mint:rounded-lg mint:border mint:overflow-hidden",
-        i.className
+        n.className
       ),
       children: [
-        i.icon && /* @__PURE__ */ t(
-          "div",
-          {
-            className: "mint:flex mint:items-start mint:justify-center",
-            "aria-hidden": "true",
-            children: i.icon
-          }
-        ),
+        n.icon && /* @__PURE__ */ t("div", { className: "mint:flex mint:items-center mint:justify-center", "aria-hidden": "true", children: n.icon }),
         /* @__PURE__ */ t("div", { className: "mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert mint:[&>p:first-child]:font-semibold", children: e })
       ]
     }

package/dist/components/content-components/callouts.js.map

@@ -1 +1 @@
-{"version":3,"file":"callouts.js","sources":["../../../src/components/content-components/callouts.tsx"],"sourcesContent":["import {\n  Lightbulb20Regular,\n  InfoFilled,\n  Warning20Regular,\n  DismissCircle20Regular,\n  Info20Regular,\n} from \"@fluentui/react-icons\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CalloutType =\n  | \"note\"\n  | \"tip\"\n  | \"important\"\n  | \"caution\"\n  | \"warning\"\n  | \"nextstepaction\";\n\ninterface CalloutProps {\n  type: CalloutType;\n  children: React.ReactNode;\n}\n\nconst calloutConfig: Record<\n  CalloutType,\n  {\n    icon?: React.ReactNode;\n    className: string;\n  }\n> = {\n  tip: {\n    icon: <Lightbulb20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      \"mint:bg-[#f1faf1] mint:border-[#9fd89f] mint:text-[#0c5e0c] mint:dark:bg-[#052505] mint:dark:border-[#54b054] mint:dark:text-[#54b054]\",\n  },\n  note: {\n    icon: <Info20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      \"mint:bg-[#f5f5f5] mint:border-[#d1d1d1] mint:text-[#242424] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white\",\n  },\n  warning: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      \"mint:bg-[#fff9f5] mint:border-[#fdcfb4] mint:text-[#8a3707] mint:dark:bg-[#4a1e04] mint:dark:border-[#de590b] mint:dark:text-[#faa06b]\",\n  },\n  caution: {\n    icon: (\n      <DismissCircle20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />\n    ),\n    className:\n      \"mint:bg-[#fdf3f4] mint:border-[#eeacb2] mint:text-[#960b18] mint:dark:bg-[#3b0509] mint:dark:border-[#c50f1f] mint:dark:text-[#dc626d]\",\n  },\n  important: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      \"mint:bg-[#e1cefc] mint:border-[#8251ee] mint:text-[#643fb2] mint:dark:bg-[#1a1326] mint:dark:border-[#9263f1] mint:dark:text-[#9263f1]\",\n  },\n  nextstepaction: {\n    icon: (\n      <InfoFilled className=\"mint:w-5 mint:h-5 mint:shrink-0 mint:text-[#616161] mint:dark:text-white\" />\n    ),\n    className:\n      \"mint:bg-[#f9fafb] mint:border-[#d1d1d1] mint:text-[#141414] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white\",\n  },\n};\n\nconst calloutLabels: Record<CalloutType, string> = {\n  note: \"Note\",\n  tip: \"Tip\",\n  important: \"Important\",\n  caution: \"Caution\",\n  warning: \"Warning\",\n  nextstepaction: \"Next step action\",\n};\n\nexport function Callout({ type, children }: CalloutProps) {\n  const config = calloutConfig[type];\n  const label = calloutLabels[type];\n\n  return (\n    <aside\n      role=\"note\"\n      aria-label={label}\n      className={cn(\n        \"mint:my-4 mint:flex mint:gap-2 mint:px-3 mint:py-2.5 mint:rounded-lg mint:border mint:overflow-hidden\",\n        config.className\n      )}\n    >\n      {config.icon && (\n        <div\n          className=\"mint:flex mint:items-start mint:justify-center\"\n          aria-hidden=\"true\"\n        >\n          {config.icon}\n        </div>\n      )}\n      <div className=\"mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert mint:[&>p:first-child]:font-semibold\">\n        {children}\n      </div>\n    </aside>\n  );\n}\n"],"names":["calloutConfig","jsx","Lightbulb20Regular","Info20Regular","Warning20Regular","DismissCircle20Regular","InfoFilled","calloutLabels","Callout","type","children","config","label","jsxs","cn"],"mappings":";;;AAsBA,MAAMA,IAMF;AAAA,EACF,KAAK;AAAA,IACH,MAAM,gBAAAC,EAACC,GAAA,EAAmB,WAAU,kCAAA,CAAkC;AAAA,IACtE,WACE;AAAA,EAAA;AAAA,EAEJ,MAAM;AAAA,IACJ,MAAM,gBAAAD,EAACE,GAAA,EAAc,WAAU,kCAAA,CAAkC;AAAA,IACjE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAF,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MACE,gBAAAH,EAACI,GAAA,EAAuB,WAAU,kCAAA,CAAkC;AAAA,IAEtE,WACE;AAAA,EAAA;AAAA,EAEJ,WAAW;AAAA,IACT,MAAM,gBAAAJ,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,gBAAgB;AAAA,IACd,MACE,gBAAAH,EAACK,GAAA,EAAW,WAAU,2EAAA,CAA2E;AAAA,IAEnG,WACE;AAAA,EAAA;AAEN,GAEMC,IAA6C;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAClB;AAEO,SAASC,EAAQ,EAAE,MAAAC,GAAM,UAAAC,KAA0B;AACxD,QAAMC,IAASX,EAAcS,CAAI,GAC3BG,IAAQL,EAAcE,CAAI;AAEhC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAYD;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACAH,EAAO;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAAA,EAAO,QACN,gBAAAV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX,UAAAU,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ,gBAAAV,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAAS,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"callouts.js","sources":["../../../src/components/content-components/callouts.tsx"],"sourcesContent":["import {\n  Lightbulb20Regular,\n  InfoFilled,\n  Warning20Regular,\n  DismissCircle20Regular,\n  Info20Regular,\n} from '@fluentui/react-icons';\n\nimport { cn } from '../../utils/cn';\n\nexport type CalloutType = 'note' | 'tip' | 'important' | 'caution' | 'warning' | 'nextstepaction';\n\ninterface CalloutProps {\n  type: CalloutType;\n  children: React.ReactNode;\n}\n\nconst calloutConfig: Record<\n  CalloutType,\n  {\n    icon?: React.ReactNode;\n    className: string;\n  }\n> = {\n  tip: {\n    icon: <Lightbulb20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#f1faf1] mint:border-[#9fd89f] mint:text-[#0c5e0c] mint:dark:bg-[#052505] mint:dark:border-[#54b054] mint:dark:text-[#54b054]',\n  },\n  note: {\n    icon: <Info20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#f5f5f5] mint:border-[#d1d1d1] mint:text-[#242424] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white',\n  },\n  warning: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#fff9f5] mint:border-[#fdcfb4] mint:text-[#8a3707] mint:dark:bg-[#4a1e04] mint:dark:border-[#de590b] mint:dark:text-[#faa06b]',\n  },\n  caution: {\n    icon: <DismissCircle20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#fdf3f4] mint:border-[#eeacb2] mint:text-[#960b18] mint:dark:bg-[#3b0509] mint:dark:border-[#c50f1f] mint:dark:text-[#dc626d]',\n  },\n  important: {\n    icon: <Warning20Regular className=\"mint:w-5 mint:h-5 mint:shrink-0\" />,\n    className:\n      'mint:bg-[#e1cefc] mint:border-[#8251ee] mint:text-[#643fb2] mint:dark:bg-[#1a1326] mint:dark:border-[#9263f1] mint:dark:text-[#9263f1]',\n  },\n  nextstepaction: {\n    icon: (\n      <InfoFilled className=\"mint:w-5 mint:h-5 mint:shrink-0 mint:text-[#616161] mint:dark:text-white\" />\n    ),\n    className:\n      'mint:bg-[#f9fafb] mint:border-[#d1d1d1] mint:text-[#141414] mint:dark:bg-[#141414] mint:dark:border-[#666666] mint:dark:text-white',\n  },\n};\n\nconst calloutLabels: Record<CalloutType, string> = {\n  note: 'Note',\n  tip: 'Tip',\n  important: 'Important',\n  caution: 'Caution',\n  warning: 'Warning',\n  nextstepaction: 'Next step action',\n};\n\nexport function Callout({ type, children }: CalloutProps) {\n  const config = calloutConfig[type];\n  const label = calloutLabels[type];\n\n  return (\n    <aside\n      role=\"note\"\n      aria-label={label}\n      className={cn(\n        'mint:my-4 mint:flex mint:gap-2 mint:px-3 mint:py-2.5 mint:rounded-lg mint:border mint:overflow-hidden',\n        config.className\n      )}\n    >\n      {config.icon && (\n        <div className=\"mint:flex mint:items-center mint:justify-center\" aria-hidden=\"true\">\n          {config.icon}\n        </div>\n      )}\n      <div className=\"mint:text-sm mint:min-w-0 mint:w-full mint:max-w-none mint:prose mint:dark:prose-invert mint:[&>p:first-child]:font-semibold\">\n        {children}\n      </div>\n    </aside>\n  );\n}\n"],"names":["calloutConfig","jsx","Lightbulb20Regular","Info20Regular","Warning20Regular","DismissCircle20Regular","InfoFilled","calloutLabels","Callout","type","children","config","label","jsxs","cn"],"mappings":";;;AAiBA,MAAMA,IAMF;AAAA,EACF,KAAK;AAAA,IACH,MAAM,gBAAAC,EAACC,GAAA,EAAmB,WAAU,kCAAA,CAAkC;AAAA,IACtE,WACE;AAAA,EAAA;AAAA,EAEJ,MAAM;AAAA,IACJ,MAAM,gBAAAD,EAACE,GAAA,EAAc,WAAU,kCAAA,CAAkC;AAAA,IACjE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAF,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,SAAS;AAAA,IACP,MAAM,gBAAAH,EAACI,GAAA,EAAuB,WAAU,kCAAA,CAAkC;AAAA,IAC1E,WACE;AAAA,EAAA;AAAA,EAEJ,WAAW;AAAA,IACT,MAAM,gBAAAJ,EAACG,GAAA,EAAiB,WAAU,kCAAA,CAAkC;AAAA,IACpE,WACE;AAAA,EAAA;AAAA,EAEJ,gBAAgB;AAAA,IACd,MACE,gBAAAH,EAACK,GAAA,EAAW,WAAU,2EAAA,CAA2E;AAAA,IAEnG,WACE;AAAA,EAAA;AAEN,GAEMC,IAA6C;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAClB;AAEO,SAASC,EAAQ,EAAE,MAAAC,GAAM,UAAAC,KAA0B;AACxD,QAAMC,IAASX,EAAcS,CAAI,GAC3BG,IAAQL,EAAcE,CAAI;AAEhC,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAYD;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACAH,EAAO;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAAA,EAAO,0BACL,OAAA,EAAI,WAAU,mDAAkD,eAAY,QAC1E,YAAO,KAAA,CACV;AAAA,QAEF,gBAAAV,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAAS,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/content-components/link.js

@@ -1,23 +1,23 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { cn as r } from "../../utils/cn.js";
-function p({ href: n, children: o, className: s }) {
-  const t = (n == null ? void 0 : n.startsWith("http")) || (n == null ? void 0 : n.startsWith("//"));
-  return /* @__PURE__ */ i(
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+function m({ href: t, children: a, className: i }) {
+  const n = (t == null ? void 0 : t.startsWith("http")) || (t == null ? void 0 : t.startsWith("//"));
+  return /* @__PURE__ */ o(
     "a",
     {
-      href: n,
-      className: r("not-prose mint:underline", s),
-      target: t ? "_blank" : void 0,
-      rel: t ? "noopener noreferrer" : void 0,
-      "aria-label": t ? `${o} (opens in new tab)` : void 0,
+      href: t,
+      className: e("not-prose mint:underline mint:text-[#643fb2] mint:dark:text-[#c9aaf9]", i),
+      target: n ? "_blank" : void 0,
+      rel: n ? "noopener noreferrer" : void 0,
+      "aria-label": n ? `${a} (opens in new tab)` : void 0,
       children: [
-        o,
-        t && /* @__PURE__ */ a("span", { className: "mint:sr-only", children: " (opens in new tab)" })
+        a,
+        n && /* @__PURE__ */ s("span", { className: "mint:sr-only", children: " (opens in new tab)" })
       ]
     }
   );
 }
 export {
-  p as Link
+  m as Link
 };
 //# sourceMappingURL=link.js.map

package/dist/components/content-components/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":["../../../src/components/content-components/link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface LinkProps {\n  href?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function Link({ href, children, className }: LinkProps) {\n  const isExternal = href?.startsWith(\"http\") || href?.startsWith(\"//\");\n\n  return (\n    <a\n      href={href}\n      className={cn(\"not-prose mint:underline\", className)}\n      target={isExternal ? \"_blank\" : undefined}\n      rel={isExternal ? \"noopener noreferrer\" : undefined}\n      aria-label={isExternal ? `${children} (opens in new tab)` : undefined}\n    >\n      {children}\n      {isExternal && <span className=\"mint:sr-only\"> (opens in new tab)</span>}\n    </a>\n  );\n}\n"],"names":["Link","href","children","className","isExternal","jsxs","cn","jsx"],"mappings":";;AASO,SAASA,EAAK,EAAE,MAAAC,GAAM,UAAAC,GAAU,WAAAC,KAAwB;AAC7D,QAAMC,KAAaH,KAAA,gBAAAA,EAAM,WAAW,aAAWA,KAAA,gBAAAA,EAAM,WAAW;AAEhE,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,WAAWK,EAAG,4BAA4BH,CAAS;AAAA,MACnD,QAAQC,IAAa,WAAW;AAAA,MAChC,KAAKA,IAAa,wBAAwB;AAAA,MAC1C,cAAYA,IAAa,GAAGF,CAAQ,wBAAwB;AAAA,MAE3D,UAAA;AAAA,QAAAA;AAAA,QACAE,KAAc,gBAAAG,EAAC,QAAA,EAAK,WAAU,gBAAe,UAAA,sBAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE;"}
+{"version":3,"file":"link.js","sources":["../../../src/components/content-components/link.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\ninterface LinkProps {\n  href?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function Link({ href, children, className }: LinkProps) {\n  const isExternal = href?.startsWith(\"http\") || href?.startsWith(\"//\");\n\n  return (\n    <a\n      href={href}\n      className={cn(\"not-prose mint:underline mint:text-[#643fb2] mint:dark:text-[#c9aaf9]\", className)}\n      target={isExternal ? \"_blank\" : undefined}\n      rel={isExternal ? \"noopener noreferrer\" : undefined}\n      aria-label={isExternal ? `${children} (opens in new tab)` : undefined}\n    >\n      {children}\n      {isExternal && <span className=\"mint:sr-only\"> (opens in new tab)</span>}\n    </a>\n  );\n}\n"],"names":["Link","href","children","className","isExternal","jsxs","cn","jsx"],"mappings":";;AASO,SAASA,EAAK,EAAE,MAAAC,GAAM,UAAAC,GAAU,WAAAC,KAAwB;AAC7D,QAAMC,KAAaH,KAAA,gBAAAA,EAAM,WAAW,aAAWA,KAAA,gBAAAA,EAAM,WAAW;AAEhE,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,WAAWK,EAAG,yEAAyEH,CAAS;AAAA,MAChG,QAAQC,IAAa,WAAW;AAAA,MAChC,KAAKA,IAAa,wBAAwB;AAAA,MAC1C,cAAYA,IAAa,GAAGF,CAAQ,wBAAwB;AAAA,MAE3D,UAAA;AAAA,QAAAA;AAAA,QACAE,KAAc,gBAAAG,EAAC,QAAA,EAAK,WAAU,gBAAe,UAAA,sBAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE;"}

package/dist/components/content-components/tabs/tabs.js

@@ -1,99 +1,117 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import m, { useState as k, useRef as w, useEffect as N } from "react";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import o, { useState as v, useRef as $, useEffect as g } from "react";
 import { cn as p } from "../../../utils/cn.js";
-const x = m.createContext({
+const A = o.createContext({
   activeTab: 0,
   setActiveTab: () => {
   }
 });
-function E({ children: h, defaultTab: v = 0, defaultTabIndex: y, className: g, onClickTab: o, onChange: c }) {
-  const [s, b] = k(y ?? v), l = w([]), n = m.Children.toArray(h);
-  N(() => {
-    l.current = l.current.slice(0, n.length);
-  }, [n.length]);
-  const _ = (e, t) => {
-    var i;
-    let r = t;
+function T({ children: y, defaultTab: w = 0, defaultTabIndex: x, className: _, onClickTab: f, onChange: c }) {
+  const [a, b] = v(x ?? w), l = $([]), [h, N] = v({ left: 0, width: 0 }), i = o.Children.toArray(y);
+  g(() => {
+    l.current = l.current.slice(0, i.length);
+  }, [i.length]), g(() => {
+    const e = l.current[a];
+    e && N({
+      left: e.offsetLeft,
+      width: e.offsetWidth
+    });
+  }, [a]);
+  const k = (e, t) => {
+    var s;
+    let n = t;
     switch (e.key) {
       case "ArrowRight":
-        e.preventDefault(), r = (t + 1) % n.length;
+        e.preventDefault(), n = (t + 1) % i.length;
         break;
       case "ArrowLeft":
-        e.preventDefault(), r = (t - 1 + n.length) % n.length;
+        e.preventDefault(), n = (t - 1 + i.length) % i.length;
         break;
       case "Home":
-        e.preventDefault(), r = 0;
+        e.preventDefault(), n = 0;
         break;
       case "End":
-        e.preventDefault(), r = n.length - 1;
+        e.preventDefault(), n = i.length - 1;
         break;
       default:
         return;
     }
-    b(r), (i = l.current[r]) == null || i.focus();
+    b(n), (s = l.current[n]) == null || s.focus();
   };
-  return /* @__PURE__ */ a(x.Provider, { value: { activeTab: s, setActiveTab: b }, children: /* @__PURE__ */ u("div", { className: p("mint:my-6", g), children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ r(A.Provider, { value: { activeTab: a, setActiveTab: b }, children: /* @__PURE__ */ m("div", { className: p("mint:my-6", _), children: [
+    /* @__PURE__ */ m(
       "div",
       {
         role: "tablist",
         "aria-label": "Content tabs",
-        className: "mint:flex mint:gap-1 mint:border-b mint:border-gray-200 mint:mb-4 mint:overflow-x-auto mint:dark:border-b-gray-700",
-        children: n.map((e, t) => {
-          if (!m.isValidElement(e)) return null;
-          const r = e.props.title || `Tab ${t + 1}`, i = e.props.icon, d = s === t;
-          return /* @__PURE__ */ a(
-            "button",
-            {
-              ref: (f) => {
-                l.current[t] = f;
-              },
-              role: "tab",
-              "aria-selected": d,
-              "aria-controls": `tabpanel-${t}`,
-              id: `tab-${t}`,
-              tabIndex: d ? 0 : -1,
-              onClick: () => {
-                b(t), o == null || o(t), c == null || c(t);
-              },
-              onKeyDown: (f) => _(f, t),
-              className: p(
-                "mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-0 mint:border-b-2 mint:rounded-t mint:bg-transparent mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2",
-                d ? "mint:border-b-[#8251ee] mint:text-[#242424] mint:dark:border-b-[#9263f1] mint:dark:text-[#ffffff] mint:font-semibold" : "mint:border-b-transparent mint:text-gray-600 mint:hover:text-gray-900 mint:hover:border-b-gray-300 mint:dark:text-gray-400 mint:dark:hover:text-gray-200 mint:dark:hover:border-b-gray-600"
-              ),
-              children: /* @__PURE__ */ u("span", { className: "mint:flex mint:items-center mint:gap-2", children: [
-                i && /* @__PURE__ */ a("span", { "aria-hidden": "true", children: i }),
-                /* @__PURE__ */ u("span", { className: "mint:relative", children: [
-                  /* @__PURE__ */ a("span", { className: "mint:invisible mint:font-semibold", "aria-hidden": "true", children: r }),
-                  /* @__PURE__ */ a("span", { className: "mint:absolute mint:inset-0", children: r })
+        className: "mint:relative mint:flex mint:gap-1 mint:mb-4 mint:overflow-x-auto mint:pb-[3px] mint:before:content-[''] mint:before:absolute mint:before:left-0 mint:before:right-0 mint:before:bottom-0 mint:before:h-[2px] mint:before:bg-[#f2f3f3] mint:before:dark:bg-[#222223] mint:before:rounded-full",
+        children: [
+          i.map((e, t) => {
+            if (!o.isValidElement(e)) return null;
+            const n = e.props.title || `Tab ${t + 1}`, s = e.props.icon, d = a === t;
+            return /* @__PURE__ */ r(
+              "button",
+              {
+                ref: (u) => {
+                  l.current[t] = u;
+                },
+                role: "tab",
+                "aria-selected": d,
+                "aria-controls": `tabpanel-${t}`,
+                id: `tab-${t}`,
+                tabIndex: d ? 0 : -1,
+                onClick: () => {
+                  b(t), f == null || f(t), c == null || c(t);
+                },
+                onKeyDown: (u) => k(u, t),
+                className: p(
+                  "mint:relative mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-0 mint:bg-transparent mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2",
+                  d ? "mint:text-[#242424] mint:dark:text-[#ffffff] mint:font-semibold" : "mint:text-gray-600 mint:hover:text-gray-900 mint:dark:text-gray-400 mint:dark:hover:text-gray-200"
+                ),
+                children: /* @__PURE__ */ m("span", { className: "mint:flex mint:items-center mint:gap-2", children: [
+                  s && /* @__PURE__ */ r("span", { "aria-hidden": "true", children: s }),
+                  /* @__PURE__ */ m("span", { className: "mint:relative", children: [
+                    /* @__PURE__ */ r("span", { className: "mint:invisible mint:font-semibold", "aria-hidden": "true", children: n }),
+                    /* @__PURE__ */ r("span", { className: "mint:absolute mint:inset-0", children: n })
+                  ] })
                 ] })
-              ] })
-            },
-            t
-          );
-        })
+              },
+              t
+            );
+          }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: "mint:absolute mint:bottom-0 mint:h-[3px] mint:rounded-full mint:bg-[#8251ee] mint:dark:bg-[#9263f1] mint:transition-all mint:duration-300 mint:ease-out mint:z-10",
+              style: {
+                left: `${h.left}px`,
+                width: `${h.width}px`
+              }
+            }
+          )
+        ]
       }
     ),
-    /* @__PURE__ */ a("div", { children: n.map((e, t) => /* @__PURE__ */ a(
+    /* @__PURE__ */ r("div", { children: i.map((e, t) => /* @__PURE__ */ r(
       "div",
       {
         role: "tabpanel",
         id: `tabpanel-${t}`,
         "aria-labelledby": `tab-${t}`,
         tabIndex: 0,
-        hidden: s !== t,
+        hidden: a !== t,
         className: p(
           "mint:outline-none",
-          s !== t && "mint:hidden"
+          a !== t && "mint:hidden"
         ),
-        children: m.isValidElement(e) ? e.props.children : null
+        children: o.isValidElement(e) ? e.props.children : null
       },
       t
     )) })
   ] }) });
 }
 export {
-  E as Tabs,
-  x as TabsContext
+  T as Tabs,
+  A as TabsContext
 };
 //# sourceMappingURL=tabs.js.map

package/dist/components/content-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/components/content-components/tabs/tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\ninterface TabsProps {\n  children: React.ReactNode;\n  defaultTab?: number;\n  defaultTabIndex?: number;\n  className?: string;\n  onClickTab?: (index: number) => void;\n  onChange?: (index: number) => void;\n}\n\ninterface TabsContextValue {\n  activeTab: number;\n  setActiveTab: (index: number) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  activeTab: 0,\n  setActiveTab: () => {},\n});\n\nexport function Tabs({ children, defaultTab = 0, defaultTabIndex, className, onClickTab, onChange }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTabIndex ?? defaultTab);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  const tabs = React.Children.toArray(children);\n\n  useEffect(() => {\n    tabRefs.current = tabRefs.current.slice(0, tabs.length);\n  }, [tabs.length]);\n\n  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    setActiveTab(newIndex);\n    tabRefs.current[newIndex]?.focus();\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className={cn(\"mint:my-6\", className)}>\n        <div\n          role=\"tablist\"\n          aria-label=\"Content tabs\"\n          className=\"mint:flex mint:gap-1 mint:border-b mint:border-gray-200 mint:mb-4 mint:overflow-x-auto mint:dark:border-b-gray-700\"\n        >\n          {tabs.map((tab, index) => {\n            if (!React.isValidElement(tab)) return null;\n            const title = tab.props.title || `Tab ${index + 1}`;\n            const icon = tab.props.icon;\n            const isActive = activeTab === index;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => {tabRefs.current[index] = el}}\n                role=\"tab\"\n                aria-selected={isActive}\n                aria-controls={`tabpanel-${index}`}\n                id={`tab-${index}`}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => {\n                  setActiveTab(index);\n                  onClickTab?.(index);\n                  onChange?.(index);\n                }}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                className={cn(\n                  \"mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-0 mint:border-b-2 mint:rounded-t mint:bg-transparent mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2\",\n                  isActive\n                    ? \"mint:border-b-[#8251ee] mint:text-[#242424] mint:dark:border-b-[#9263f1] mint:dark:text-[#ffffff] mint:font-semibold\"\n                    : \"mint:border-b-transparent mint:text-gray-600 mint:hover:text-gray-900 mint:hover:border-b-gray-300 mint:dark:text-gray-400 mint:dark:hover:text-gray-200 mint:dark:hover:border-b-gray-600\"\n                )}\n              >\n                <span className=\"mint:flex mint:items-center mint:gap-2\">\n                  {icon && <span aria-hidden=\"true\">{icon}</span>}\n                  <span className=\"mint:relative\">\n                    <span className=\"mint:invisible mint:font-semibold\" aria-hidden=\"true\">\n                      {title}\n                    </span>\n                    <span className=\"mint:absolute mint:inset-0\">\n                      {title}\n                    </span>\n                  </span>\n                </span>\n              </button>\n            );\n          })}\n        </div>\n\n        <div>\n          {tabs.map((tab, index) => (\n            <div\n              key={index}\n              role=\"tabpanel\"\n              id={`tabpanel-${index}`}\n              aria-labelledby={`tab-${index}`}\n              tabIndex={0}\n              hidden={activeTab !== index}\n              className={cn(\n                \"mint:outline-none\",\n                activeTab !== index && \"mint:hidden\"\n              )}\n            >\n              {React.isValidElement(tab) ? tab.props.children : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n"],"names":["TabsContext","React","Tabs","children","defaultTab","defaultTabIndex","className","onClickTab","onChange","activeTab","setActiveTab","useState","tabRefs","useRef","tabs","useEffect","handleKeyDown","event","currentIndex","newIndex","_a","jsx","cn","tab","index","title","icon","isActive","el","e","jsxs"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/content-components/tabs/tabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\ninterface TabsProps {\n  children: React.ReactNode;\n  defaultTab?: number;\n  defaultTabIndex?: number;\n  className?: string;\n  onClickTab?: (index: number) => void;\n  onChange?: (index: number) => void;\n}\n\ninterface TabsContextValue {\n  activeTab: number;\n  setActiveTab: (index: number) => void;\n}\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  activeTab: 0,\n  setActiveTab: () => {},\n});\n\nexport function Tabs({ children, defaultTab = 0, defaultTabIndex, className, onClickTab, onChange }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTabIndex ?? defaultTab);\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });\n\n  const tabs = React.Children.toArray(children);\n\n  useEffect(() => {\n    tabRefs.current = tabRefs.current.slice(0, tabs.length);\n  }, [tabs.length]);\n\n  useEffect(() => {\n    const activeTabElement = tabRefs.current[activeTab];\n    if (activeTabElement) {\n      setIndicatorStyle({\n        left: activeTabElement.offsetLeft,\n        width: activeTabElement.offsetWidth,\n      });\n    }\n  }, [activeTab]);\n\n  const handleKeyDown = (event: React.KeyboardEvent, currentIndex: number) => {\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case \"ArrowRight\":\n        event.preventDefault();\n        newIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    setActiveTab(newIndex);\n    tabRefs.current[newIndex]?.focus();\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className={cn(\"mint:my-6\", className)}>\n        <div\n          role=\"tablist\"\n          aria-label=\"Content tabs\"\n          className=\"mint:relative mint:flex mint:gap-1 mint:mb-4 mint:overflow-x-auto mint:pb-[3px] mint:before:content-[''] mint:before:absolute mint:before:left-0 mint:before:right-0 mint:before:bottom-0 mint:before:h-[2px] mint:before:bg-[#f2f3f3] mint:before:dark:bg-[#222223] mint:before:rounded-full\"\n        >\n          {tabs.map((tab, index) => {\n            if (!React.isValidElement(tab)) return null;\n            const title = tab.props.title || `Tab ${index + 1}`;\n            const icon = tab.props.icon;\n            const isActive = activeTab === index;\n\n            return (\n              <button\n                key={index}\n                ref={(el) => {tabRefs.current[index] = el}}\n                role=\"tab\"\n                aria-selected={isActive}\n                aria-controls={`tabpanel-${index}`}\n                id={`tab-${index}`}\n                tabIndex={isActive ? 0 : -1}\n                onClick={() => {\n                  setActiveTab(index);\n                  onClickTab?.(index);\n                  onChange?.(index);\n                }}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                className={cn(\n                  \"mint:relative mint:px-4 mint:py-2 mint:text-sm mint:font-medium mint:border-0 mint:bg-transparent mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#fff,0_0_0_4px_#75b6e7] mint:focus-visible:outline-offset-2\",\n                  isActive\n                    ? \"mint:text-[#242424] mint:dark:text-[#ffffff] mint:font-semibold\"\n                    : \"mint:text-gray-600 mint:hover:text-gray-900 mint:dark:text-gray-400 mint:dark:hover:text-gray-200\"\n                )}\n              >\n                <span className=\"mint:flex mint:items-center mint:gap-2\">\n                  {icon && <span aria-hidden=\"true\">{icon}</span>}\n                  <span className=\"mint:relative\">\n                    <span className=\"mint:invisible mint:font-semibold\" aria-hidden=\"true\">\n                      {title}\n                    </span>\n                    <span className=\"mint:absolute mint:inset-0\">\n                      {title}\n                    </span>\n                  </span>\n                </span>\n              </button>\n            );\n          })}\n          <div\n            className=\"mint:absolute mint:bottom-0 mint:h-[3px] mint:rounded-full mint:bg-[#8251ee] mint:dark:bg-[#9263f1] mint:transition-all mint:duration-300 mint:ease-out mint:z-10\"\n            style={{\n              left: `${indicatorStyle.left}px`,\n              width: `${indicatorStyle.width}px`,\n            }}\n          />\n        </div>\n\n        <div>\n          {tabs.map((tab, index) => (\n            <div\n              key={index}\n              role=\"tabpanel\"\n              id={`tabpanel-${index}`}\n              aria-labelledby={`tab-${index}`}\n              tabIndex={0}\n              hidden={activeTab !== index}\n              className={cn(\n                \"mint:outline-none\",\n                activeTab !== index && \"mint:hidden\"\n              )}\n            >\n              {React.isValidElement(tab) ? tab.props.children : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n"],"names":["TabsContext","React","Tabs","children","defaultTab","defaultTabIndex","className","onClickTab","onChange","activeTab","setActiveTab","useState","tabRefs","useRef","indicatorStyle","setIndicatorStyle","tabs","useEffect","activeTabElement","handleKeyDown","event","currentIndex","newIndex","_a","jsx","cn","jsxs","tab","index","title","icon","isActive","el","e"],"mappings":"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"}

package/dist/components/content-components/zone-pivots/zone-pivot-selector.js

@@ -2,12 +2,12 @@ import { jsx as r, jsxs as w } from "react/jsx-runtime";
 import { useRef as p } from "react";
 import { useZonePivotContext as u } from "./zone-pivot-context.js";
 import { cn as k } from "../../../utils/cn.js";
-function g({
+function A({
   group: e,
-  className: h
+  className: b
 }) {
   var c;
-  const { activePivots: b, setActivePivot: d } = u(), m = p(null), l = (c = e.pivots.find((t) => b.has(t.id))) == null ? void 0 : c.id, v = e.pivots.findIndex((t) => t.id === l), x = (t) => {
+  const { activePivots: h, setActivePivot: a } = u(), m = p(null), l = (c = e.pivots.find((t) => h.has(t.id))) == null ? void 0 : c.id, v = e.pivots.findIndex((t) => t.id === l), x = (t) => {
     var f;
     const { key: i } = t, n = v;
     let o = n;
@@ -31,20 +31,20 @@ function g({
     }
     const s = e.pivots[o];
     if (s) {
-      d(e.id, s.id);
-      const a = (f = m.current) == null ? void 0 : f.querySelector(
+      a(e.id, s.id);
+      const d = (f = m.current) == null ? void 0 : f.querySelector(
         `[data-pivot-id="${s.id}"]`
       );
-      a == null || a.focus();
+      d == null || d.focus();
     }
   };
-  return /* @__PURE__ */ r("div", { className: h, "data-zone-pivot-group": e.id, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r("div", { className: b, "data-zone-pivot-group": e.id, children: /* @__PURE__ */ r(
     "div",
     {
       ref: m,
       role: "tablist",
       "aria-label": e.prompt,
-      className: "mint:inline-flex mint:items-center mint:gap-1 mint:p-1 mint:bg-gray-100 mint:rounded-lg mint:dark:bg-white/5",
+      className: "mint:inline-flex mint:items-center mint:gap-1 mint:p-0.5 mint:bg-[#f5f5f5] mint:rounded-lg mint:dark:bg-[#141414]",
       children: e.pivots.map((t) => {
         const i = t.id === l;
         return /* @__PURE__ */ w(
@@ -57,7 +57,7 @@ function g({
             "aria-selected": i,
             "aria-controls": `panel-${e.id}-${t.id}`,
             tabIndex: i ? 0 : -1,
-            onClick: () => d(e.id, t.id),
+            onClick: () => a(e.id, t.id),
             onKeyDown: x,
             className: k(
               "mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2",
@@ -75,6 +75,6 @@ function g({
   ) });
 }
 export {
-  g as ZonePivotSelector
+  A as ZonePivotSelector
 };
 //# sourceMappingURL=zone-pivot-selector.js.map

package/dist/components/content-components/zone-pivots/zone-pivot-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"zone-pivot-selector.js","sources":["../../../../src/components/content-components/zone-pivots/zone-pivot-selector.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { useZonePivotContext } from \"./zone-pivot-context\";\nimport type { ZonePivotGroup } from \"../../../types/page\";\nimport { cn } from \"../../../utils/cn\";\n\nexport interface ZonePivotSelectorProps {\n  group: ZonePivotGroup;\n  className?: string;\n}\n\nexport function ZonePivotSelector({\n  group,\n  className,\n}: ZonePivotSelectorProps) {\n  const { activePivots, setActivePivot } = useZonePivotContext();\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const selectedPivotId = group.pivots.find((p) => activePivots.has(p.id))?.id;\n  const selectedIndex = group.pivots.findIndex((p) => p.id === selectedPivotId);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const { key } = event;\n    const currentIndex = selectedIndex;\n    let nextIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : group.pivots.length - 1;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex < group.pivots.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        nextIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        nextIndex = group.pivots.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const nextPivot = group.pivots[nextIndex];\n    if (nextPivot) {\n      setActivePivot(group.id, nextPivot.id);\n      const button = tabListRef.current?.querySelector(\n        `[data-pivot-id=\"${nextPivot.id}\"]`\n      ) as HTMLButtonElement;\n      button?.focus();\n    }\n  };\n\n  return (\n    <div className={className} data-zone-pivot-group={group.id}>\n      <div\n        ref={tabListRef}\n        role=\"tablist\"\n        aria-label={group.prompt}\n        className=\"mint:inline-flex mint:items-center mint:gap-1 mint:p-1 mint:bg-gray-100 mint:rounded-lg mint:dark:bg-white/5\"\n      >\n        {group.pivots.map((pivot) => {\n          const isSelected = pivot.id === selectedPivotId;\n          return (\n            <button\n              key={pivot.id}\n              id={`tab-${group.id}-${pivot.id}`}\n              role=\"tab\"\n              type=\"button\"\n              data-pivot-id={pivot.id}\n              aria-selected={isSelected}\n              aria-controls={`panel-${group.id}-${pivot.id}`}\n              tabIndex={isSelected ? 0 : -1}\n              onClick={() => setActivePivot(group.id, pivot.id)}\n              onKeyDown={handleKeyDown}\n              className={cn(\n                \"mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2\",\n                isSelected\n                  ? \"mint:bg-white mint:text-[#141414] mint:shadow-sm mint:dark:bg-white/10 mint:dark:text-white mint:font-semibold\"\n                  : \"mint:text-gray-600 mint:hover:text-[#141414] mint:hover:bg-white/50 mint:dark:text-gray-400 mint:dark:hover:text-white mint:dark:hover:bg-white/10 mint:font-medium\"\n              )}\n            >\n              <span className=\"mint:invisible mint:font-semibold mint:block mint:h-0 mint:overflow-hidden\" aria-hidden=\"true\">\n                {pivot.title}\n              </span>\n              <span className=\"mint:block\">{pivot.title}</span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["ZonePivotSelector","group","className","activePivots","setActivePivot","useZonePivotContext","tabListRef","useRef","selectedPivotId","_a","p","selectedIndex","handleKeyDown","event","key","currentIndex","nextIndex","nextPivot","button","jsx","pivot","isSelected","jsxs","cn"],"mappings":";;;;AAUO,SAASA,EAAkB;AAAA,EAChC,OAAAC;AAAA,EACA,WAAAC;AACF,GAA2B;;AACzB,QAAM,EAAE,cAAAC,GAAc,gBAAAC,EAAA,IAAmBC,EAAA,GACnCC,IAAaC,EAAuB,IAAI,GAExCC,KAAkBC,IAAAR,EAAM,OAAO,KAAK,CAACS,MAAMP,EAAa,IAAIO,EAAE,EAAE,CAAC,MAA/C,gBAAAD,EAAkD,IACpEE,IAAgBV,EAAM,OAAO,UAAU,CAACS,MAAMA,EAAE,OAAOF,CAAe,GAEtEI,IAAgB,CAACC,MAAkD;;AACvE,UAAM,EAAE,KAAAC,MAAQD,GACVE,IAAeJ;AACrB,QAAIK,IAAYD;AAEhB,YAAQD,GAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,QAAAD,EAAM,eAAA,GACNG,IACED,IAAe,IAAIA,IAAe,IAAId,EAAM,OAAO,SAAS;AAC9D;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAY,EAAM,eAAA,GACNG,IACED,IAAed,EAAM,OAAO,SAAS,IAAIc,IAAe,IAAI;AAC9D;AAAA,MACF,KAAK;AACH,QAAAF,EAAM,eAAA,GACNG,IAAY;AACZ;AAAA,MACF,KAAK;AACH,QAAAH,EAAM,eAAA,GACNG,IAAYf,EAAM,OAAO,SAAS;AAClC;AAAA,MACF;AACE;AAAA,IAAA;AAGJ,UAAMgB,IAAYhB,EAAM,OAAOe,CAAS;AACxC,QAAIC,GAAW;AACb,MAAAb,EAAeH,EAAM,IAAIgB,EAAU,EAAE;AACrC,YAAMC,KAAST,IAAAH,EAAW,YAAX,gBAAAG,EAAoB;AAAA,QACjC,mBAAmBQ,EAAU,EAAE;AAAA;AAEjC,MAAAC,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAjB,GAAsB,yBAAuBD,EAAM,IACtD,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,MAAK;AAAA,MACL,cAAYL,EAAM;AAAA,MAClB,WAAU;AAAA,MAET,UAAAA,EAAM,OAAO,IAAI,CAACmB,MAAU;AAC3B,cAAMC,IAAaD,EAAM,OAAOZ;AAChC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI,OAAOrB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC/B,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeA,EAAM;AAAA,YACrB,iBAAeC;AAAA,YACf,iBAAe,SAASpB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC5C,UAAUC,IAAa,IAAI;AAAA,YAC3B,SAAS,MAAMjB,EAAeH,EAAM,IAAImB,EAAM,EAAE;AAAA,YAChD,WAAWR;AAAA,YACX,WAAWW;AAAA,cACT;AAAA,cACAF,IACI,mHACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAA,gBAAAF,EAAC,UAAK,WAAU,8EAA6E,eAAY,QACtG,YAAM,OACT;AAAA,cACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,cAAc,YAAM,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UApBrCC,EAAM;AAAA,QAAA;AAAA,MAuBjB,CAAC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}
+{"version":3,"file":"zone-pivot-selector.js","sources":["../../../../src/components/content-components/zone-pivots/zone-pivot-selector.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { useZonePivotContext } from \"./zone-pivot-context\";\nimport type { ZonePivotGroup } from \"../../../types/page\";\nimport { cn } from \"../../../utils/cn\";\n\nexport interface ZonePivotSelectorProps {\n  group: ZonePivotGroup;\n  className?: string;\n}\n\nexport function ZonePivotSelector({\n  group,\n  className,\n}: ZonePivotSelectorProps) {\n  const { activePivots, setActivePivot } = useZonePivotContext();\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const selectedPivotId = group.pivots.find((p) => activePivots.has(p.id))?.id;\n  const selectedIndex = group.pivots.findIndex((p) => p.id === selectedPivotId);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    const { key } = event;\n    const currentIndex = selectedIndex;\n    let nextIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : group.pivots.length - 1;\n        break;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        nextIndex =\n          currentIndex < group.pivots.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case \"Home\":\n        event.preventDefault();\n        nextIndex = 0;\n        break;\n      case \"End\":\n        event.preventDefault();\n        nextIndex = group.pivots.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const nextPivot = group.pivots[nextIndex];\n    if (nextPivot) {\n      setActivePivot(group.id, nextPivot.id);\n      const button = tabListRef.current?.querySelector(\n        `[data-pivot-id=\"${nextPivot.id}\"]`\n      ) as HTMLButtonElement;\n      button?.focus();\n    }\n  };\n\n  return (\n    <div className={className} data-zone-pivot-group={group.id}>\n      <div\n        ref={tabListRef}\n        role=\"tablist\"\n        aria-label={group.prompt}\n        className=\"mint:inline-flex mint:items-center mint:gap-1 mint:p-0.5 mint:bg-[#f5f5f5] mint:rounded-lg mint:dark:bg-[#141414]\"\n      >\n        {group.pivots.map((pivot) => {\n          const isSelected = pivot.id === selectedPivotId;\n          return (\n            <button\n              key={pivot.id}\n              id={`tab-${group.id}-${pivot.id}`}\n              role=\"tab\"\n              type=\"button\"\n              data-pivot-id={pivot.id}\n              aria-selected={isSelected}\n              aria-controls={`panel-${group.id}-${pivot.id}`}\n              tabIndex={isSelected ? 0 : -1}\n              onClick={() => setActivePivot(group.id, pivot.id)}\n              onKeyDown={handleKeyDown}\n              className={cn(\n                \"mint:relative mint:px-3 mint:py-1.5 mint:text-sm mint:rounded-md mint:bg-transparent mint:border-none mint:cursor-pointer mint:focus:outline-none mint:focus-visible:shadow-[0_0_0_2px_#3b82f6] mint:focus-visible:outline-offset-2\",\n                isSelected\n                  ? \"mint:bg-white mint:text-[#141414] mint:shadow-sm mint:dark:bg-white/10 mint:dark:text-white mint:font-semibold\"\n                  : \"mint:text-gray-600 mint:hover:text-[#141414] mint:hover:bg-white/50 mint:dark:text-gray-400 mint:dark:hover:text-white mint:dark:hover:bg-white/10 mint:font-medium\"\n              )}\n            >\n              <span className=\"mint:invisible mint:font-semibold mint:block mint:h-0 mint:overflow-hidden\" aria-hidden=\"true\">\n                {pivot.title}\n              </span>\n              <span className=\"mint:block\">{pivot.title}</span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["ZonePivotSelector","group","className","activePivots","setActivePivot","useZonePivotContext","tabListRef","useRef","selectedPivotId","_a","p","selectedIndex","handleKeyDown","event","key","currentIndex","nextIndex","nextPivot","button","jsx","pivot","isSelected","jsxs","cn"],"mappings":";;;;AAUO,SAASA,EAAkB;AAAA,EAChC,OAAAC;AAAA,EACA,WAAAC;AACF,GAA2B;;AACzB,QAAM,EAAE,cAAAC,GAAc,gBAAAC,EAAA,IAAmBC,EAAA,GACnCC,IAAaC,EAAuB,IAAI,GAExCC,KAAkBC,IAAAR,EAAM,OAAO,KAAK,CAACS,MAAMP,EAAa,IAAIO,EAAE,EAAE,CAAC,MAA/C,gBAAAD,EAAkD,IACpEE,IAAgBV,EAAM,OAAO,UAAU,CAACS,MAAMA,EAAE,OAAOF,CAAe,GAEtEI,IAAgB,CAACC,MAAkD;;AACvE,UAAM,EAAE,KAAAC,MAAQD,GACVE,IAAeJ;AACrB,QAAIK,IAAYD;AAEhB,YAAQD,GAAA;AAAA,MACN,KAAK;AAAA,MACL,KAAK;AACH,QAAAD,EAAM,eAAA,GACNG,IACED,IAAe,IAAIA,IAAe,IAAId,EAAM,OAAO,SAAS;AAC9D;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAY,EAAM,eAAA,GACNG,IACED,IAAed,EAAM,OAAO,SAAS,IAAIc,IAAe,IAAI;AAC9D;AAAA,MACF,KAAK;AACH,QAAAF,EAAM,eAAA,GACNG,IAAY;AACZ;AAAA,MACF,KAAK;AACH,QAAAH,EAAM,eAAA,GACNG,IAAYf,EAAM,OAAO,SAAS;AAClC;AAAA,MACF;AACE;AAAA,IAAA;AAGJ,UAAMgB,IAAYhB,EAAM,OAAOe,CAAS;AACxC,QAAIC,GAAW;AACb,MAAAb,EAAeH,EAAM,IAAIgB,EAAU,EAAE;AACrC,YAAMC,KAAST,IAAAH,EAAW,YAAX,gBAAAG,EAAoB;AAAA,QACjC,mBAAmBQ,EAAU,EAAE;AAAA;AAEjC,MAAAC,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAAjB,GAAsB,yBAAuBD,EAAM,IACtD,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKb;AAAA,MACL,MAAK;AAAA,MACL,cAAYL,EAAM;AAAA,MAClB,WAAU;AAAA,MAET,UAAAA,EAAM,OAAO,IAAI,CAACmB,MAAU;AAC3B,cAAMC,IAAaD,EAAM,OAAOZ;AAChC,eACE,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,IAAI,OAAOrB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC/B,MAAK;AAAA,YACL,MAAK;AAAA,YACL,iBAAeA,EAAM;AAAA,YACrB,iBAAeC;AAAA,YACf,iBAAe,SAASpB,EAAM,EAAE,IAAImB,EAAM,EAAE;AAAA,YAC5C,UAAUC,IAAa,IAAI;AAAA,YAC3B,SAAS,MAAMjB,EAAeH,EAAM,IAAImB,EAAM,EAAE;AAAA,YAChD,WAAWR;AAAA,YACX,WAAWW;AAAA,cACT;AAAA,cACAF,IACI,mHACA;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAA,gBAAAF,EAAC,UAAK,WAAU,8EAA6E,eAAY,QACtG,YAAM,OACT;AAAA,cACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,cAAc,YAAM,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UApBrCC,EAAM;AAAA,QAAA;AAAA,MAuBjB,CAAC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/docsPage.js

@@ -27,7 +27,7 @@ function at({
   localization: N,
   telemetry: J,
   contextMenu: n,
-  apiReferenceData2: r
+  apiReferenceData2: l
 }) {
   var f, h;
   const T = i.serializedContent, a = ((f = i.mdxExtracts) == null ? void 0 : f.zonePivotGroups) || [], c = (h = i.mdxExtracts) == null ? void 0 : h.pivotTocItems, P = !i.title, C = { ...{
@@ -42,10 +42,10 @@ function at({
     const { hash: m } = window.location;
     if (!m) return;
     const y = setTimeout(() => {
-      const E = m.substring(1), l = document.getElementById("main-content"), g = document.getElementById(E);
-      if (l && g) {
-        const b = window.getComputedStyle(document.documentElement), z = parseFloat(b.getPropertyValue("--scroll-mt") || "0"), F = parseFloat(b.fontSize), I = z * F, L = l.getBoundingClientRect(), O = g.getBoundingClientRect().top - L.top + l.scrollTop - I;
-        l.scrollTo({
+      const E = m.substring(1), r = document.getElementById("main-content"), g = document.getElementById(E);
+      if (r && g) {
+        const b = window.getComputedStyle(document.documentElement), z = parseFloat(b.getPropertyValue("--scroll-mt") || "0"), F = parseFloat(b.fontSize), I = z * F, L = r.getBoundingClientRect(), O = g.getBoundingClientRect().top - L.top + r.scrollTop - I;
+        r.scrollTo({
           top: O,
           behavior: "instant"
         });
@@ -83,7 +83,7 @@ function at({
                       className: "mint:flex mint:flex-row-reverse mint:gap-12 mint:justify-center mint:mx-auto mint:w-full",
                       id: "content-layout-container",
                       children: [
-                        r != null && r.operation ? /* @__PURE__ */ t("div", { className: "mint:hidden mint:xl:!flex mint:self-start mint:sticky mint:flex-col mint:max-w-[28rem] mint:top-0 mint:gap-6", children: /* @__PURE__ */ t(B, { apiReferenceData: r }) }) : o && o.length > 0 ? /* @__PURE__ */ t("aside", { className: "mint:w-64 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block", children: /* @__PURE__ */ e("div", { className: "mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto", children: [
+                        l != null && l.operation ? /* @__PURE__ */ t("div", { className: "mint:hidden mint:xl:flex! mint:self-start mint:sticky mint:flex-col mint:max-w-md mint:top-0 mint:gap-6", children: /* @__PURE__ */ t(B, { apiReferenceData: l }) }) : o && o.length > 0 ? /* @__PURE__ */ t("aside", { className: "mint:w-68 mint:shrink-0 mint:ml-8 mint:max-xl:hidden mint:xl:block", children: /* @__PURE__ */ e("div", { className: "mint:sticky mint:top-2 mint:p-2 mint:pb-6 mint:max-h-[calc(100vh-3.5rem)] mint:overflow-y-auto", children: [
                           /* @__PURE__ */ e("div", { className: "mint:flex mint:items-center mint:gap-2 mint:mb-4", children: [
                             /* @__PURE__ */ t(S, { className: "mint:w-4 mint:h-4 mint:text-[#4b5563] mint:dark:text-[#9ca3af]" }),
                             /* @__PURE__ */ t("h2", { className: "mint:text-sm mint:font-semibold mint:text-[#141414] mint:dark:text-white", children: C.onThisPage })
@@ -100,7 +100,7 @@ function at({
                             children: [
                               i.title && /* @__PURE__ */ t("header", { className: "mint:mb-6", children: /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-col mint:gap-5", children: [
                                 /* @__PURE__ */ e("div", { className: "mint:flex mint:flex-col mint:gap-2 mint:items-start", children: [
-                                  /* @__PURE__ */ t("h1", { className: "mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2]", children: i.title }),
+                                  /* @__PURE__ */ t("h1", { className: "mint:text-[1.875rem] mint:font-bold mint:text-[#141414] mint:dark:text-white mint:m-0 mint:leading-[1.2] mint:pt-3", children: i.title }),
                                   i.description && /* @__PURE__ */ t("p", { className: "mint:text-lg mint:text-[#4b5563] mint:dark:text-[#d1d5db] mint:m-0", children: i.description })
                                 ] }),
                                 s && /* @__PURE__ */ t(