{
  "schemaVersion": 1,
  "documentation": {
    "version": "0.1.1",
    "packageVersion": "0.12.0",
    "skill": {
      "version": "0.1.1",
      "path": "source/package/SKILL.md",
      "sha256": "6fc23f069e2c56ab4dafa75c19ed592af190a5ea1f1d693950a50b291c2ec1c6"
    }
  },
  "agentPrompt": "Use CoreAI for my UI task. First check https://microsoft.github.io/coreai-design-system/version.json, then fetch and review https://microsoft.github.io/coreai-design-system/source/package/SKILL.md. Install it at .github/skills/coreai-ds-fluentui-react/SKILL.md, or update the existing CoreAI skill to the latest published version, before implementing. Preserve repository-specific rules, do not downgrade newer local guidance, and ask before resolving conflicts. Follow the updated skill, read only relevant Markdown pages from https://microsoft.github.io/coreai-design-system/llms.txt, and check my installed package versions. Use @coreai-ds/react-components; templates are copy-and-adapt source. Report retrieval or write failures; do not invent APIs.\n\nMy task: [describe the UI you want to build or change]",
  "basePath": "/coreai-design-system/",
  "versions": {
    "@coreai-ds/react-components": "0.12.0",
    "@ctrl/tinycolor": "3.6.1",
    "@dnd-kit/core": "6.3.1",
    "@dnd-kit/sortable": "8.0.0",
    "@dnd-kit/utilities": "3.2.2",
    "@fluentui/react-components": "9.74.9",
    "@fluentui/react-icons": "2.0.343",
    "@fluentui/react-jsx-runtime": "9.4.6",
    "@fluentui/react-motion-components-preview": "0.15.9",
    "@fluentui/react-utilities": "9.26.7",
    "@types/react-window": "1.8.8",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "7.18.4",
    "react-window": "1.8.11"
  },
  "fluentSource": {
    "repository": "https://github.com/microsoft/fluentui",
    "ref": "ee856ea115d3a1c7b7a81cfd5b42613ff4bf9a06"
  },
  "coreaiSourceRef": "b97598add282476032b07d036f24a3b1f3efc118",
  "runtimePackages": {
    "react": {
      "version": "18.3.1",
      "installations": 1
    },
    "react-dom": {
      "version": "18.3.1",
      "installations": 1
    },
    "@fluentui/react-components": {
      "version": "9.74.9",
      "installations": 1
    }
  },
  "scope": [
    "components-accordion",
    "components-progressbar",
    "components-avatar",
    "components-avatargroup",
    "components-badge-badge",
    "components-breadcrumb",
    "components-button-button",
    "components-card-card",
    "components-card-cardfooter",
    "components-card-cardheader",
    "components-card-cardpreview",
    "components-carousel-carousel",
    "components-carousel-carouselnav",
    "components-checkbox",
    "components-codeblock",
    "components-colorpicker",
    "components-combobox",
    "components-button-compoundbutton",
    "components-button-copybutton",
    "components-coreaifluentprovider",
    "components-badge-counter-badge",
    "components-datagrid",
    "components-datetimepicker",
    "components-dialog",
    "components-divider",
    "components-drawer",
    "components-dropdown",
    "components-button-dropdownbutton",
    "components-field",
    "components-fileupload",
    "components-tablist",
    "components-illicon",
    "components-image",
    "components-infobutton",
    "components-infolabel",
    "components-input",
    "components-tag-interactiontag",
    "components-label",
    "components-link",
    "components-button-linkbutton",
    "components-list",
    "components-markdown",
    "components-menu-menu",
    "components-button-menubutton",
    "components-menu-menulist",
    "components-messagebar",
    "components-overflow",
    "components-persona",
    "components-popover",
    "components-portal-portal",
    "components-badge-presencebadge",
    "components-radiogroup",
    "components-rating",
    "components-ratingdisplay",
    "components-searchbox",
    "components-select",
    "components-skeleton",
    "components-slider",
    "components-spinbutton",
    "components-spinner",
    "components-button-splitbutton",
    "components-swatchpicker",
    "components-switch",
    "components-table",
    "components-tag-tag",
    "components-tag-taggroup",
    "components-tagpicker",
    "components-teachingpopover",
    "components-text",
    "components-textarea",
    "components-portal-tomountnodeprops",
    "components-toast",
    "components-button-togglebutton",
    "components-toolbar",
    "components-tooltip",
    "components-tree",
    "templates-details-list",
    "templates-empty-state",
    "templates-filterable-list",
    "templates-react-router-breadcrumb-link",
    "templates-react-router-card-link",
    "templates-react-router-link",
    "templates-react-router-link-button",
    "templates-react-router-menu-item-link",
    "templates-react-router-tab-link",
    "templates-react-router-tab-link-list",
    "templates-shell-and-navigation"
  ],
  "excludedFluentPackages": [
    "babel-preset-global-context",
    "babel-preset-storybook-full-source",
    "component-selector-preview",
    "deprecated",
    "eslint-plugin-react-components",
    "global-context",
    "keyboard-keys",
    "priority-overflow",
    "react-aria",
    "react-components",
    "react-conformance-griffel",
    "react-context-selector",
    "react-divider",
    "react-headless-components-preview",
    "react-jsx-runtime",
    "react-migration-v0-v9",
    "react-migration-v8-v9",
    "react-motion",
    "react-motion-components-preview",
    "react-nav",
    "react-positioning",
    "react-provider",
    "react-shared-contexts",
    "react-storybook-addon",
    "react-storybook-addon-export-to-sandbox",
    "react-utilities",
    "react-utilities-compat",
    "recipes",
    "theme-designer"
  ],
  "coverage": [
    {
      "id": "components-accordion--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-accordion--collapsible",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionCollapsible.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--multiple",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionMultiple.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--open-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionOpenItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--sizes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionSizes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--heading-levels",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionHeaders.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--inline",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionInline.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--expand-icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--expand-icon-position",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIconPosition.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--with-icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--default",
      "origin": "local",
      "source": "src/stories/components/Accordion.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--accordion-card",
      "origin": "local",
      "source": "src/stories/components/Accordion.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-accordion--content-alignment-dev",
      "origin": "local",
      "source": "src/stories/components/AccordionDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-progressbar--color",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarColor.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--indeterminate",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarIndeterminate.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--max",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarMax.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--thickness",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarThickness.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-progressbar--default",
      "origin": "local",
      "source": "src/stories/components/ProgressBar.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-avatar--name",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarName.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--image",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarImage.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--badge",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarBadge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--badge-icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarBadgeIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--square",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarSquare.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--color-brand",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarColorBrand.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--color-colorful",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarColorColorful.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--color-palette",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarColorPalette.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--active",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarActive.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--active-appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarActiveAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--initials",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarInitials.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--default",
      "origin": "local",
      "source": "src/stories/components/Avatar.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatar--color-neutral",
      "origin": "local",
      "source": "src/stories/components/Avatar.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-avatargroup--layout",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupLayout.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--indicator",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupIndicator.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--size-spread",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupSizeSpread.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--size-stack",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupSizeStack.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--size-pie",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupSizePie.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--tooltip",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupTooltip.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-avatargroup--default",
      "origin": "local",
      "source": "src/stories/components/AvatarGroup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-badge-badge--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--sizes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeSizes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--shapes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeShapes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--color",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeColor.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--color-and-appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-badge--default",
      "origin": "local",
      "source": "src/stories/components/Badge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-breadcrumb--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-breadcrumb--breadcrumb-size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-breadcrumb--breadcrumb-with-overflow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-breadcrumb--breadcrumb-with-tooltip",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithTooltip.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-breadcrumb--default",
      "origin": "local",
      "source": "src/stories/components/Breadcrumb.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-button-button--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonShape.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-button-button--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--loading",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonLoading.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--with-long-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonWithLongText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--default",
      "origin": "local",
      "source": "src/stories/components/Button.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--shape",
      "origin": "local",
      "source": "src/stories/components/Button.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-button--subtle-content-alignment",
      "origin": "local",
      "source": "src/stories/components/Button.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-card-card--orientation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardAppearance.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-card-card--selectable",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--selectable-indicator",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--with-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--focus-mode",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--templates",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--default",
      "origin": "local",
      "source": "src/stories/components/Card.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--appearance",
      "origin": "local",
      "source": "src/stories/components/Card.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--floating-action-position",
      "origin": "local",
      "source": "src/stories/components/Card.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--selectable-indicator-radio",
      "origin": "local",
      "source": "src/stories/components/Card.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-card--outline-interactivity",
      "origin": "local",
      "source": "src/stories/components/CardDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-cardfooter--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/CardFooter/CardFooterDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-card-cardfooter--default",
      "origin": "local",
      "source": "src/stories/components/CardFooter.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-cardheader--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/CardHeader/CardHeaderDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-card-cardheader--default",
      "origin": "local",
      "source": "src/stories/components/CardHeader.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-card-cardpreview--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-card/stories/src/CardPreview/CardPreviewDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-card-cardpreview--default",
      "origin": "local",
      "source": "src/stories/components/CardPreview.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-carousel-carousel--top-navigation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--responsive",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--image-slideshow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--alignment-and-whitespace",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--autoplay",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--first-run-experience",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--eventing",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carousel--default",
      "origin": "local",
      "source": "src/stories/components/Carousel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-carousel-carouselnav--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-carousel-carouselnav--default",
      "origin": "local",
      "source": "src/stories/components/CarouselNav.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-checkbox--checked",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxChecked.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--mixed",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxMixed.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--large",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxLarge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--label-before",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxLabelBefore.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--label-wrapping",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxLabelWrapping.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--required",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxRequired.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--circular",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxCircular.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-checkbox--default",
      "origin": "local",
      "source": "src/stories/components/Checkbox.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-codeblock--default",
      "origin": "local",
      "source": "src/stories/components/CodeBlock.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-codeblock--appearance",
      "origin": "local",
      "source": "src/stories/components/CodeBlock.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-codeblock--header",
      "origin": "local",
      "source": "src/stories/components/CodeBlock.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-codeblock--fixed-height",
      "origin": "local",
      "source": "src/stories/components/CodeBlock.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-codeblock--loading",
      "origin": "local",
      "source": "src/stories/components/CodeBlock.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-colorpicker--color-picker-shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--color-area-default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAreaDefault.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--color-slider-default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorSliderDefault.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--color-slider-channels",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorSliderChannels.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--alpha-slider-default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--color-and-swatch-picker",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--color-picker-popup",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerPopup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-colorpicker--default",
      "origin": "local",
      "source": "src/stories/components/ColorPicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-combobox--complex-options",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxComplexOptions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--custom-options",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxCustomOptions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--clearable",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxClearable.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--filtering",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFiltering.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--freeform",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFreeform.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--multiselect",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--multiselect-with-tags",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--multiselect-with-value-string",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithValueString.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--grouped",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxGrouped.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--virtualizer",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxVirtualizer.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--active-option-change",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxActiveOptionChange.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--controlling-open-and-close",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxControllingOpenAndClose.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--default",
      "origin": "local",
      "source": "src/stories/components/Combobox.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--inline-label",
      "origin": "local",
      "source": "src/stories/components/Combobox.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-combobox--truncate",
      "origin": "local",
      "source": "src/stories/components/Combobox.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-button-compoundbutton--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--with-long-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonWithLongText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-compoundbutton--default",
      "origin": "local",
      "source": "src/stories/components/CompoundButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-copybutton--default",
      "origin": "local",
      "source": "src/stories/components/CopyButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-coreaifluentprovider--default",
      "origin": "local",
      "source": "src/stories/components/CoreAIFluentProvider.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-coreaifluentprovider--custom-brand-theme",
      "origin": "local",
      "source": "src/stories/components/CoreAIFluentProvider.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-coreaifluentprovider--azure-brand-theme",
      "origin": "local",
      "source": "src/stories/components/CoreAIFluentProvider.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-coreaifluentprovider--default-theme",
      "origin": "local",
      "source": "src/stories/components/CoreAIFluentProvider.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-counter-badge--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-badge-counter-badge--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-counter-badge--shapes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeShapes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-counter-badge--sizes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeSizes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-counter-badge--color",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeColor.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-counter-badge--dot",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeDot.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-counter-badge--default",
      "origin": "local",
      "source": "src/stories/components/CounterBadge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/Default.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-datagrid--composite-navigation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/CompositeNavigation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--focusable-elements-in-cells",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/FocusableElementsInCells.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--sort",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/Sort.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--sort-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SortControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--multiple-select",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/MultipleSelect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--multiple-select-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/MultipleSelectControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--single-select",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SingleSelect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--single-select-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SingleSelectControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--subtle-selection",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SubtleSelection.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--selection-appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SelectionAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--resizable-columns",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--resizable-columns-disable-auto-fit",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--virtualization",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/Virtualization.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--custom-row-id",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/CustomRowId.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--default",
      "origin": "local",
      "source": "src/stories/components/DataGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--data-grid-card",
      "origin": "local",
      "source": "src/stories/components/DataGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--data-grid-accordion",
      "origin": "local",
      "source": "src/stories/components/DataGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--resizable-columns-controlled",
      "origin": "local",
      "source": "src/stories/components/DataGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datagrid--flex-options",
      "origin": "local",
      "source": "src/stories/components/DataGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--default",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--date-and-time",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--time",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--month",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--week",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--controlled",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--range",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--clearable",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-datetimepicker--clearable-with-default",
      "origin": "local",
      "source": "src/stories/components/DateTimePicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-dialog--non-modal",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogNonModal.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--alert",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogAlert.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--backdrop-appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--scrolling-long-content",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogScrollingLongContent.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--keep-rendered-in-the-dom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogKeepRenderedInTheDOM.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--actions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogActions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--fluid-actions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogFluidDialogActions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--no-focusable-element",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogNoFocusableElement.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--controlling-open-and-close",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogControllingOpenAndClose.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--change-focus",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogChangeFocus.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--trigger-outside-dialog",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogTriggerOutsideDialog.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--custom-trigger",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogCustomTrigger.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--with-form",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogWithForm.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--title-custom-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleCustomAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--title-no-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleNoAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--confirmation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogConfirmation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dialog--default",
      "origin": "local",
      "source": "src/stories/components/Dialog.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-divider--default",
      "origin": "local",
      "source": "src/stories/components/Divider.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-divider--default-dev",
      "origin": "local",
      "source": "src/stories/components/DividerDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-divider--appearance",
      "origin": "local",
      "source": "src/stories/components/DividerDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-divider--inset",
      "origin": "local",
      "source": "src/stories/components/DividerDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-divider--vertical",
      "origin": "local",
      "source": "src/stories/components/DividerDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-drawer--overlay",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawer.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--overlay-no-modal",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawerNoModal.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--overlay-inside-container",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--inline",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--position",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--custom-size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--separator",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--with-title",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithTitle.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--with-navigation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithNavigation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--with-scroll",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithScroll.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--motion-disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--multiple-levels",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--keep-rendered-in-the-dom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--always-open",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerAlwaysOpen.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--prevent-close",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerPreventClose.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--responsive",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--resizable",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-drawer--default",
      "origin": "local",
      "source": "src/stories/components/Drawer.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-dropdown--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--with-field",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownField.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--grouped",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownGrouped.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--clearable",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownClearable.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--complex-options",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownComplexOptions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--custom-options",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownCustomOptions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--multiselect",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownMultiselect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--truncated-value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownTruncation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--active-option-change",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownActiveOptionChange.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--controlling-open-and-close",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownControllingOpenAndClose.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--default",
      "origin": "local",
      "source": "src/stories/components/Dropdown.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--inline-label",
      "origin": "local",
      "source": "src/stories/components/Dropdown.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-dropdown--truncate",
      "origin": "local",
      "source": "src/stories/components/Dropdown.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-dropdownbutton--default",
      "origin": "local",
      "source": "src/stories/components/DropdownButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-dropdownbutton--variants",
      "origin": "local",
      "source": "src/stories/components/DropdownButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-dropdownbutton--appearance",
      "origin": "local",
      "source": "src/stories/components/DropdownButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-dropdownbutton--shape",
      "origin": "local",
      "source": "src/stories/components/DropdownButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-dropdownbutton--size",
      "origin": "local",
      "source": "src/stories/components/DropdownButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-dropdownbutton--disabled",
      "origin": "local",
      "source": "src/stories/components/DropdownButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-field--horizontal",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldHorizontal.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--required",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldRequired.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--info",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldInfo.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--validation-message",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldValidationMessage.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--hint",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldHint.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--component-examples",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldComponentExamples.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--render-function",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldRenderFunction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-field--default",
      "origin": "local",
      "source": "src/stories/components/Field.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-fileupload--default",
      "origin": "local",
      "source": "src/stories/components/FileUpload.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-fileupload--disabled",
      "origin": "local",
      "source": "src/stories/components/FileUpload.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-fileupload--with-file-grid",
      "origin": "local",
      "source": "src/stories/components/FileUpload.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-fileupload--custom-drop-zone-content",
      "origin": "local",
      "source": "src/stories/components/FileUpload.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tablist--horizontal",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListHorizontal.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--vertical",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListVertical.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--size-small",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSizeSmall.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--size-medium",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSizeMedium.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--size-large",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSizeLarge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--with-icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListWithIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--icon-only",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListIconOnly.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--select-tab-on-focus",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSelectTabOnFocus.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--with-overflow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--with-panels",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListWithPanels.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--default",
      "origin": "local",
      "source": "src/stories/components/TabList.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--elevated-appearance",
      "origin": "local",
      "source": "src/stories/components/TabList.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--left-align-tab-text",
      "origin": "local",
      "source": "src/stories/components/TabList.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tablist--custom-appearance-elevated",
      "origin": "local",
      "source": "src/stories/components/TabListDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-illicon--default",
      "origin": "local",
      "source": "src/stories/components/Illicon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-illicon--original-vs-illicon",
      "origin": "local",
      "source": "src/stories/components/Illicon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-illicon--stroked-svg",
      "origin": "local",
      "source": "src/stories/components/Illicon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-illicon--in-empty-state",
      "origin": "local",
      "source": "src/stories/components/Illicon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-illicon--catalog",
      "origin": "local",
      "source": "src/stories/components/Illicon.stories.tsx",
      "status": "excluded",
      "reason": "Local searchable gallery marked !manifest; reviewed artwork is listed below."
    },
    {
      "id": "components-illicon--source-recreation-dev",
      "origin": "local",
      "source": "src/stories/components/IlliconDev.stories.tsx",
      "status": "excluded",
      "reason": "Verification-only source comparison marked !manifest."
    },
    {
      "id": "components-illicon--empty-grid-dev",
      "origin": "local",
      "source": "src/stories/components/IlliconDev.stories.tsx",
      "status": "excluded",
      "reason": "Verification-only story marked !manifest."
    },
    {
      "id": "components-illicon--custom-svg-dev",
      "origin": "local",
      "source": "src/stories/components/IlliconDev.stories.tsx",
      "status": "excluded",
      "reason": "Verification-only story marked !manifest."
    },
    {
      "id": "components-image--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-image--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-image--bordered",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageBordered.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-image--fallback",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageFallback.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-image--block",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageBlock.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-image--fit",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageFit.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-image--shadow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageShadow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-image--default",
      "origin": "local",
      "source": "src/stories/components/Image.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infobutton--default",
      "origin": "local",
      "source": "src/stories/components/InfoButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infobutton--primitive-info",
      "origin": "local",
      "source": "src/stories/components/InfoButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infobutton--sizes",
      "origin": "local",
      "source": "src/stories/components/InfoButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infolabel--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-infolabel--required",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelRequired.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infolabel--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infolabel--in-field",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelInField.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-infolabel--default",
      "origin": "local",
      "source": "src/stories/components/InfoLabel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-input--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputAppearance.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-input--content-before-after",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputContentBeforeAfter.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputDisabled.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-input--inline",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputInline.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--placeholder",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputPlaceholder.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--type",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputType.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--uncontrolled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputUncontrolled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--default",
      "origin": "local",
      "source": "src/stories/components/Input.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--inline-label",
      "origin": "local",
      "source": "src/stories/components/Input.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--read-only",
      "origin": "local",
      "source": "src/stories/components/Input.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--appearance",
      "origin": "local",
      "source": "src/stories/components/InputDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-input--disabled",
      "origin": "local",
      "source": "src/stories/components/InputDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tag-interactiontag--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--media",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagMedia.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--secondary-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagSecondaryText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--dismiss",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDismiss.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--has-primary-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--selected",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagSelected.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-interactiontag--default",
      "origin": "local",
      "source": "src/stories/components/InteractionTag.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-label--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-label--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-label--weight",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelWeight.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-label--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-label--required",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelRequired.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-label--default",
      "origin": "local",
      "source": "src/stories/components/Label.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-link--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--inline",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkInline.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--disabled-focusable",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkDisabledFocusable.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--as-button",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkAsButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--as-span",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkAsSpan.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--default",
      "origin": "local",
      "source": "src/stories/components/Link.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-link--external",
      "origin": "local",
      "source": "src/stories/components/Link.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--default",
      "origin": "local",
      "source": "src/stories/components/LinkButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--external",
      "origin": "local",
      "source": "src/stories/components/LinkButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--variants",
      "origin": "local",
      "source": "src/stories/components/LinkButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--appearance",
      "origin": "local",
      "source": "src/stories/components/LinkButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--shape",
      "origin": "local",
      "source": "src/stories/components/LinkButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--size",
      "origin": "local",
      "source": "src/stories/components/LinkButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-linkbutton--disabled",
      "origin": "local",
      "source": "src/stories/components/LinkButtonDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/ListDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-list--single-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--single-action-selection",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleActionSelection.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--single-action-selection-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleActionSelectionControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--single-action-selection-different-primary",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--multiple-actions-with-primary",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--multiple-actions-selection",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--multiple-actions-different-primary",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--virtualized-list",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/VirtualizedList.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--virtualized-list-with-actionable-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/VirtualizedListWithActionableItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--list-active-element",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-list--default",
      "origin": "local",
      "source": "src/stories/components/List.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--default",
      "origin": "local",
      "source": "src/stories/components/Markdown.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--headings",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--formatting",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--tables",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--code-block",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--links",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--anchor-links",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-markdown--large-example",
      "origin": "local",
      "source": "src/stories/components/MarkdownDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-menu-menu--interaction",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuInteraction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--menu-item-link-navigation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuItemLinkNavigation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--menu-items-with-icons",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMenuItemsWithIcons.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--aligning-with-icons",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuAligningWithIcons.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--aligning-with-selectable-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuAligningWithSelectableItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--secondary-content-for-menu-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSecondaryContentForMenuItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--multiline-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMultilineItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--controlling-open-and-close",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuControllingOpenAndClose.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--grouping-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuGroupingItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--visual-divider-only",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuVisualDividerOnly.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--checkbox-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuCheckboxItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--switch-item",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSwitchItem.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--radio-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuRadioItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--controlled-checkbox-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuControlledCheckboxItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--controlled-radio-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuControlledRadioItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--selection-group",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSelectionGroup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--nested-submenus",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuNestedSubmenus.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--nested-submenus-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuNestedSubmenusControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--nested-submenus-responsiveness",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--anchor-to-custom-target",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuAnchorToTarget.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--custom-trigger",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuCustomTrigger.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--render-function-trigger",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuRenderFunctionTrigger.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--memoized-menu-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMemoizedMenuItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--split-menu-item",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSplitMenuItem.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--menu-trigger-with-tooltip",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuTriggerWithTooltip.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--motion-disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMotionDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menu--default",
      "origin": "local",
      "source": "src/stories/components/Menu.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-button-menubutton--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--size-small",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSizeSmall.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--size-medium",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSizeMedium.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--size-large",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSizeLarge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--with-long-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonWithLongText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-menubutton--default",
      "origin": "local",
      "source": "src/stories/components/MenuButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menulist--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-menu-menulist--menu-list-with-nested-submenus",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListNestedSubmenus.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menulist--checkbox-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListCheckboxItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menulist--radio-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListRadioItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menulist--controlled-checkbox-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledCheckboxItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menulist--controlled-radio-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledRadioItems.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-menu-menulist--default",
      "origin": "local",
      "source": "src/stories/components/MenuList.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Default.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-messagebar--intent",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Intent.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-messagebar--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Shape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--actions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Actions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--dismiss",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--animation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--reflow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Reflow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--manual-layout",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/ManualLayout.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--default",
      "origin": "local",
      "source": "src/stories/components/MessageBar.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-messagebar--intent",
      "origin": "local",
      "source": "src/stories/components/MessageBar.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Default.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-overflow--reverse-dom-order",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--minimum-visible",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--vertical",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Vertical.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--overflow-by-priority",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--wrapped",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--pinned",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Pinned.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--dividers",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Dividers.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--larger-dividers",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--priority-with-dividers",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/PriorityWithDividers.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--custom-component",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--reorder-observer",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/ReorderObserver.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--listen-to-changes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-overflow--default",
      "origin": "local",
      "source": "src/stories/components/Overflow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-persona--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-persona--text-alignment",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaTextAlignment.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-persona--text-position",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaTextPosition.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-persona--presence-previous-behavior",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaPresencePreviousBehavior.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-persona--presence-size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaPresenceSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-persona--avatar-size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaAvatarSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-persona--default",
      "origin": "local",
      "source": "src/stories/components/Persona.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-popover--non-interactive-content",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverNonInteractiveContent.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--with-arrow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--with-arrow-autosize",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--trapping-focus",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverTrappingFocus.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--controlling-open-and-close",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--motion-disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--nested-popovers",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverNestedPopovers.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--anchor-to-custom-target",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--custom-trigger",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--without-trigger",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverWithoutTrigger.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--internal-update-content",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverInternalUpdateContent.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-popover--default",
      "origin": "local",
      "source": "src/stories/components/Popover.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-portal-portal--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-portal/stories/src/Portal/PortalDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-portal-portal--default",
      "origin": "local",
      "source": "src/stories/components/Portal.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-presencebadge--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-badge-presencebadge--sizes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeSizes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-presencebadge--status",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeStatus.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-presencebadge--out-of-office",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-badge-presencebadge--default",
      "origin": "local",
      "source": "src/stories/components/PresenceBadge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-radiogroup--horizontal",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupHorizontal.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--horizontal-stacked",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupHorizontalStacked.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--default-value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDefaultValue.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--controlled-value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupControlledValue.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--required",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupRequired.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--disabled-item",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDisabledItem.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--label-subtext",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupLabelSubtext.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-radiogroup--default",
      "origin": "local",
      "source": "src/stories/components/RadioGroup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-rating--controlled-value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingControlledValue.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--step",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingStep.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--max",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingMax.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--color",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingColor.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-rating--default",
      "origin": "local",
      "source": "src/stories/components/Rating.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-ratingdisplay--value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayValue.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--count",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayCount.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--compact",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayCompact.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--max",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayMax.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplaySize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--color",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayColor.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-ratingdisplay--default",
      "origin": "local",
      "source": "src/stories/components/RatingDisplay.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-searchbox--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--content-before-after",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--placeholder",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxPlaceholder.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--typeahead",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-searchbox--default",
      "origin": "local",
      "source": "src/stories/components/SearchBox.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-select--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-select--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-select--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-select--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-select--initial-value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectInitialValue.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-select--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-select--default",
      "origin": "local",
      "source": "src/stories/components/Select.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-skeleton--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-skeleton--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-skeleton--animation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-skeleton--row",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-skeleton--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-skeleton--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-skeleton--default",
      "origin": "local",
      "source": "src/stories/components/Skeleton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-slider--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--step",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderStep.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--min-max",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderMinMax.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--vertical",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderVertical.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-slider--default",
      "origin": "local",
      "source": "src/stories/components/Slider.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-spinbutton--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--uncontrolled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonUncontrolled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--bounds",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBounds.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--display-value",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisplayValue.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--step",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonStep.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--read-only",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonReadOnly.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinbutton--default",
      "origin": "local",
      "source": "src/stories/components/SpinButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinner--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-spinner--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinner--labels",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerLabel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinner--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-spinner--default",
      "origin": "local",
      "source": "src/stories/components/Spinner.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-button-splitbutton--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--size-small",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSizeSmall.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--size-medium",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSizeMedium.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--size-large",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSizeLarge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--with-long-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonWithLongText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-splitbutton--default",
      "origin": "local",
      "source": "src/stories/components/SplitButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-swatchpicker--swatch-picker-size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-layout",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerLayout.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-spacing",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerSpacing.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-image",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerImage.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--empty-swatch-example",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/EmptySwatch.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--color-swatch-variants",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/ColorSwatchVariants.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-mixed-swatches",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-with-tooltip",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerWithTooltip.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-focus-mode",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerFocusMode.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--swatch-picker-popup",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerPopup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-swatchpicker--default",
      "origin": "local",
      "source": "src/stories/components/SwatchPicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-switch--checked",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchChecked.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--label",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchLabel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--label-wrapping",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchLabelWrapping.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--required",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchRequired.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-switch--default",
      "origin": "local",
      "source": "src/stories/components/Switch.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/Default.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-table--size-small",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SizeSmall.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--size-extra-small",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SizeExtraSmall.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--non-native-elements",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/NonNativeElements.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--cell-actions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/CellActions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--primary-cell",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/PrimaryCell.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--cell-navigation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/CellNavigation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--focusable-elements-in-cells",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/FocusableElements.Cells.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--composite-navigation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/CompositeNavigation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--sort",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/Sort.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--resizable-columns-uncontrolled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/ResizableColumnsUncontrolled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--resizable-columns-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--resizable-columns-disable-auto-fit",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/ResizableColumnsDisableAutoFit.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--sort-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SortControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--multiple-select",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/MultipleSelect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--single-select",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SingleSelect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--multiple-select-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/MultipleSelectControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--single-select-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SingleSelectControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--subtle-selection",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SubtleSelection.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--selection-with-cell-actions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/SelectionWithCellActions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--virtualization",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/Virtualization.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--data-grid",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/DataGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--memoization",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-table/stories/src/Table/Memoization.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-table--default",
      "origin": "local",
      "source": "src/stories/components/Table.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tag-tag--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--media",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagMedia.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--secondary-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagSecondaryText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--dismiss",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagDismiss.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--selected",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagSelected.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-tag--default",
      "origin": "local",
      "source": "src/stories/components/Tag.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-taggroup--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tag-taggroup--dismiss",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDismiss.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-taggroup--sizes",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSizes.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-taggroup--with-overflow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-taggroup--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-taggroup--select",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSelect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tag-taggroup--default",
      "origin": "local",
      "source": "src/stories/components/TagGroup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tagpicker--button",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--filtering",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--expand-icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--secondary-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--grouped",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--truncated-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--single-select",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--no-popover",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--single-line",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleLine.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tagpicker--default",
      "origin": "local",
      "source": "src/stories/components/TagPicker.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-teachingpopover--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-teachingpopover--appearance-brand",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverAppearanceBrand.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-teachingpopover--carousel",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-teachingpopover--carousel-brand",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-teachingpopover--carousel-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-teachingpopover--default",
      "origin": "local",
      "source": "src/stories/components/TeachingPopover.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/Default.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-text--presets",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextPresets.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-text--font",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextFont.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--weight",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextWeight.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--italic",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextItalic.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--underline",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextUnderline.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--strike-through",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextStrikeThrough.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--truncate",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextTruncate.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--alignment",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextAlignment.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--default",
      "origin": "local",
      "source": "src/stories/components/Text.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--presets",
      "origin": "local",
      "source": "src/stories/components/Text.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--foreground",
      "origin": "local",
      "source": "src/stories/components/TextDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-text--preset-compatibility",
      "origin": "local",
      "source": "src/stories/components/TextDev.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-textarea--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--placeholder",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaPlaceholder.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--resize",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaResize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--uncontrolled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaUncontrolled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-textarea--default",
      "origin": "local",
      "source": "src/stories/components/Textarea.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-portal-tomountnodeprops--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Default.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-toast--intent",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--inverted-appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/InvertedAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--default-toast-options",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DefaultToastOptions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--custom-timeout",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/CustomTimeout.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--dismiss-toast-with-action",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DismissToastWithAction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--toast-positions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ToastPositions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--offset",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Offset.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--dismiss-toast",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DismissToast.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--update-toast",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/UpdateToast.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--progress-toast",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ProgressToast.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--dismiss-all",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--pause-and-play",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/PauseAndPlay.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--pause-on-window-blur",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/PauseOnWindowBlur.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--pause-on-hover",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/PauseOnHover.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--toast-lifecycle",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--multiple-toasters",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/MultipleToasters.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--toaster-limit",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ToasterLimit.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--focus-keyboard-shortcut",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/FocusKeyboardShortcut.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--inline",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Inline.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toast--default",
      "origin": "local",
      "source": "src/stories/components/Toast.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-button-togglebutton--shape",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonShape.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--accessible-appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonAppearanceAccessible.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--disabled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonDisabled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--checked",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonChecked.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--with-long-text",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonWithLongText.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-button-togglebutton--default",
      "origin": "local",
      "source": "src/stories/components/ToggleButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-toolbar--small",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSmall.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--medium",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarMedium.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--large",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarLarge.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--overflow-items",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarOverflow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--with-tooltip",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithTooltip.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--with-popover",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithPopover.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--subtle",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSubtle.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--transparent",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarTransparent.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--controlled-toggle-button",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--radio",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadio.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--controlled-radio",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadioControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--vertical",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVertical.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--vertical-button",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVerticalButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--far-group",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarFarGroup.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-toolbar--default",
      "origin": "local",
      "source": "src/stories/components/Toolbar.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tooltip--relationship-label",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipRelationshipLabel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--relationship-description",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipRelationshipDescription.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--inverted",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipInverted.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--with-arrow",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipWithArrow.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--styled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipStyled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--custom-mount",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipCustomMount.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--positioning",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipPositioning.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--target",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipTarget.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--overflow-hidden",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipOverflowHidden.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tooltip--default",
      "origin": "local",
      "source": "src/stories/components/Tooltip.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--default",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeDefault.stories.tsx",
      "status": "replaced",
      "reason": "Replaced by the matching CoreAI example."
    },
    {
      "id": "components-tree--size",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeSize.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--appearance",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeAppearance.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--layouts",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeLayouts.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--expand-icon",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeExpandIcon.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--icon-before-and-after",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeIconBeforeAndAfter.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--aside",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeAside.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--actions",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--navigation-mode-tree-grid",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeNavigationModeTreeGrid.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--default-open",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeDefaultOpen.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--open-items-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/OpenItemsControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--open-item-controlled",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/OpenItemControlled.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--customizing-interaction",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeCustomizingInteraction.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--inline-styling-tree-item-level",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeInlineStylingTreeItemLevel.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--flat-tree",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/FlatTree.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--use-headless-flat-tree",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--selection",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeSelection.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--manipulation",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeManipulation.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--lazy-loading",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeLazyLoading.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--infinite-scrolling",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeInfiniteScrolling.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--virtualization",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/Virtualization.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--drag-and-drop",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeDragAndDrop.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--motion-custom",
      "origin": "fluent",
      "source": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.stories.tsx",
      "status": "included"
    },
    {
      "id": "components-tree--default",
      "origin": "local",
      "source": "src/stories/components/Tree.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-details-list--default",
      "origin": "local",
      "source": "src/stories/templates/DetailsList.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-details-list--with-custom-classes",
      "origin": "local",
      "source": "src/stories/templates/DetailsList.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--default",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--with-illustration",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--with-metrics",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--with-choice-cards",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--with-action-cards",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--with-detail-cards",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--no-results",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--no-permissions",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-empty-state--error-state",
      "origin": "local",
      "source": "src/stories/templates/EmptyState.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-filterable-list--default",
      "origin": "local",
      "source": "src/stories/templates/FilterableList.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-breadcrumb-link--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/BreadcrumbLink.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-card-link--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/CardLink.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-link--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/Link.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-link-button--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/LinkButton.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-menu-item-link--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/MenuItemLink.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-tab-link--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/TabLink.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-react-router-tab-link-list--default",
      "origin": "local",
      "source": "src/stories/templates/react-router/TabLinkList.stories.tsx",
      "status": "included"
    },
    {
      "id": "templates-shell-and-navigation--default",
      "origin": "local",
      "source": "src/stories/templates/ShellAndNavigation.stories.tsx",
      "status": "included"
    }
  ],
  "pages": [
    {
      "id": "home",
      "title": "CoreAI Design System",
      "summary": "The guide for building CoreAI experiences on the web",
      "kind": "overview",
      "route": "",
      "label": "Home",
      "standalone": true,
      "renderer": "home",
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-DS?node-id=0-1"
        },
        {
          "label": "npm",
          "url": "https://www.npmjs.com/package/@coreai-ds/react-components"
        }
      ],
      "aliases": [],
      "legacyIds": [
        "introduction--docs"
      ],
      "migratedFrom": [
        "apps/docsite/src/pages/Introduction.tsx",
        "apps/storybook/src/stories/docs/Introduction.mdx"
      ],
      "guidanceSource": "content/Index.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "",
      "markdownPath": "index.md"
    },
    {
      "id": "introduction",
      "title": "Introduction",
      "summary": "CoreAI builds on Fluent UI v9. It adds a shared visual language, themes, and component defaults. Components without CoreAI changes pass through from Fluent.",
      "kind": "overview",
      "route": "overview/Introduction",
      "label": "Introduction",
      "standalone": true,
      "layout": "compact-guidance",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/overview/resources/",
        "/resources/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/data/Resources.ts"
      ],
      "guidanceSource": "content/overview/Introduction.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "overview/Introduction/",
      "markdownPath": "overview/Introduction.md"
    },
    {
      "id": "changelog",
      "title": "Changelog",
      "summary": "Release notes for @coreai-ds/react-components, grouped by version.",
      "kind": "overview",
      "route": "overview/Changelog",
      "label": "Changelog",
      "standalone": true,
      "renderer": "changelog",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/changelog/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/pages/Changelog.tsx",
        "apps/docsite/Changelog.json",
        "packages/react-components/CHANGELOG.md"
      ],
      "guidanceSource": "content/overview/Changelog.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "overview/Changelog/",
      "markdownPath": "overview/Changelog.md"
    },
    {
      "id": "package",
      "title": "NPM package",
      "summary": "Install the package, configure the provider, and find implementation guidance.",
      "kind": "guides",
      "route": "guides/Package",
      "label": "NPM package",
      "standalone": true,
      "renderer": "package",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/package/",
        "/guidance/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/pages/Package.tsx",
        "packages/react-components/README.md"
      ],
      "guidanceSource": "content/guides/Package.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/Package/",
      "markdownPath": "guides/Package.md"
    },
    {
      "id": "faqs",
      "title": "FAQ",
      "summary": "Answers about CoreAI, Fluent, setup, components, and agents.",
      "kind": "overview",
      "route": "overview/Faq",
      "label": "FAQ",
      "standalone": true,
      "renderer": "faqs",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/overview/faqs/",
        "/faqs/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/data/Faqs.ts"
      ],
      "guidanceSource": "content/overview/Faq.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "overview/Faq/",
      "markdownPath": "overview/Faq.md"
    },
    {
      "id": "typography",
      "title": "Typography",
      "summary": "Type scale, weight system, and readability rules.",
      "kind": "foundations",
      "route": "foundations/Typography",
      "label": "Typography",
      "standalone": true,
      "renderer": "typography",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/typography/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/pages/Typography.tsx",
        "apps/docsite/src/data/Content.ts"
      ],
      "guidanceSource": "content/foundations/Typography.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Typography/",
      "markdownPath": "foundations/Typography.md"
    },
    {
      "id": "colors",
      "title": "Colors",
      "summary": "Palette, semantic roles, and token naming conventions.",
      "kind": "foundations",
      "route": "foundations/Colors",
      "label": "Colors",
      "standalone": true,
      "renderer": "colors",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/foundations/color/",
        "/colors/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/pages/Colors.tsx",
        "apps/docsite/src/data/Content.ts"
      ],
      "guidanceSource": "content/foundations/Colors.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Colors/",
      "markdownPath": "foundations/Colors.md"
    },
    {
      "id": "content",
      "title": "Content",
      "summary": "Write clear, useful product content and get the right level of design support.",
      "kind": "foundations",
      "route": "foundations/Content",
      "label": "Content",
      "standalone": true,
      "renderer": "content",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/content/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/pages/Content.tsx"
      ],
      "guidanceSource": "content/foundations/Content.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Content/",
      "markdownPath": "foundations/Content.md"
    },
    {
      "id": "materials",
      "title": "Surfaces",
      "summary": "Surface tiers, depth, and visual hierarchy.",
      "kind": "foundations",
      "route": "foundations/Surfaces",
      "label": "Surfaces",
      "standalone": true,
      "renderer": "materials",
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/foundations/materials/",
        "/materials/"
      ],
      "legacyIds": [],
      "migratedFrom": [
        "apps/docsite/src/pages/Materials.tsx"
      ],
      "guidanceSource": "content/foundations/Surfaces.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Surfaces/",
      "markdownPath": "foundations/Surfaces.md"
    },
    {
      "id": "spacing",
      "title": "Spacing",
      "summary": "CoreAI spacing guidance.",
      "kind": "foundations",
      "route": "foundations/Spacing",
      "label": "Spacing",
      "standalone": true,
      "showInSidebar": true,
      "resources": [],
      "aliases": [],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/foundations/Spacing.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Spacing/",
      "markdownPath": "foundations/Spacing.md"
    },
    {
      "id": "layout",
      "title": "Layout",
      "summary": "CoreAI layout guidance.",
      "kind": "foundations",
      "route": "foundations/Layout",
      "label": "Layout",
      "standalone": true,
      "showInSidebar": true,
      "resources": [],
      "aliases": [],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/foundations/Layout.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Layout/",
      "markdownPath": "foundations/Layout.md"
    },
    {
      "id": "accordion",
      "title": "Accordion",
      "summary": "An accordion groups sections of related content that can be opened and closed. Accordions decrease cognitive load by letting people choose which sections they see, such as questions in an FAQ.",
      "kind": "components",
      "route": "components/Accordion",
      "label": "Accordion",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=113348-3337"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/accordion/usage"
        }
      ],
      "aliases": [
        "/accordion/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Accordion.md",
      "examples": [
        {
          "id": "components-accordion--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Accordion.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-accordion--default.tsx",
          "sha256": "b4fb7a5125b9b43befce9cf4d71121f60f0adbb8830001c0a292ee5ccaf08178",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--accordion-card",
          "exportName": "AccordionCard",
          "name": "Accordion Card",
          "origin": "local",
          "originalSource": "src/stories/components/Accordion.stories.tsx",
          "description": "Add a border and restore header and panel padding to present an accordion as a card-like\ndisclosure without introducing a separate Card component.",
          "sourcePath": "source/examples/components-accordion--accordion-card.tsx",
          "sha256": "7548188874032249e24dc001a741eeb43535c6f5e9624af74db678f83f306efe",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--collapsible",
          "exportName": "Collapsible",
          "name": "Collapsible",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionCollapsible.stories.tsx",
          "description": "An accordion can have multiple panels collapsed at the same time.",
          "sourcePath": "source/examples/components-accordion--collapsible.tsx",
          "sha256": "1c8d68c480be2a6fe171de69b4ad493994f9e407a0271b844b2b73becf777e53",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--content-alignment-dev",
          "exportName": "ContentAlignmentDev",
          "name": "Content Alignment Dev",
          "origin": "local",
          "originalSource": "src/stories/components/AccordionDev.stories.tsx",
          "description": "Shows an open accordion aligned with content in the same vertical stack.",
          "sourcePath": "source/examples/components-accordion--content-alignment-dev.tsx",
          "sha256": "9044be479341b7f2b62216240ed8a3c5a395e4dc790906169e3df0727b9ce889",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionControlled.stories.tsx",
          "description": "An accordion can be controlled, to ensure `multiple` and `collapsible` you should use `openItems` provided through `onToggle` callback.",
          "sourcePath": "source/examples/components-accordion--controlled.tsx",
          "sha256": "190a2e76bf1e374f75e261108c7211c6722821ac42883c4560eb0e6c491c7f1b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionDisabled.stories.tsx",
          "description": "An accordion item can be `disabled`",
          "sourcePath": "source/examples/components-accordion--disabled.tsx",
          "sha256": "99842b36a946f5a47ea19696fbc5a84f98905f9d2d7d3f74561a5eed634ade58",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--expand-icon",
          "exportName": "ExpandIcon",
          "name": "Expand Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIcon.stories.tsx",
          "description": "An accordion item can have a custom expand icon.",
          "sourcePath": "source/examples/components-accordion--expand-icon.tsx",
          "sha256": "ef3c306afd87311fa2dcb611c882f6f5da47af1a3af168f6abf7d213ec97522e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-accordion--expand-icon-position",
          "exportName": "ExpandIconPosition",
          "name": "Expand Icon Position",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionExpandIconPosition.stories.tsx",
          "description": "The expand icon can be placed at the `start` or `end` of the accordian header.",
          "sourcePath": "source/examples/components-accordion--expand-icon-position.tsx",
          "sha256": "58483277164640dbcbbd0a6dd8e6505951686cead8fca2ea256b940f3af9192c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--heading-levels",
          "exportName": "HeadingLevels",
          "name": "Heading Levels",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionHeaders.stories.tsx",
          "description": "An accordion header is a `<div>` by default, but according to [WAI-ARIA specification](https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties), we recommend using a proper heading of any level in markup.",
          "sourcePath": "source/examples/components-accordion--heading-levels.tsx",
          "sha256": "4b4a9808b8e6c77fbadce1e75a86a0d42d2a1f40b7f39691c71c078e128f0bca",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--inline",
          "exportName": "Inline",
          "name": "Inline",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionInline.stories.tsx",
          "description": "An accordion header can be set to `inline`",
          "sourcePath": "source/examples/components-accordion--inline.tsx",
          "sha256": "6e68fec1c3982f000fe2ca1e7b180e27f430bb9033bdc4866869d7dd9d3d19bc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.stories.tsx",
          "description": "`AccordionPanel`'s `collapseMotion` slot can directly take `Collapse` props, such as `duration`, `easing`, `animateOpacity` and others.\n\nThe `collapseMotion` slot also supports the `children` render function, which allows replacing the default `Collapse` with a custom implementation. This story demonstrates the simpler direct prop approach:\n\n```tsx\n<AccordionPanel collapseMotion={{ duration, easing, animateOpacity }}>\n```\n",
          "sourcePath": "source/examples/components-accordion--motion-custom.tsx",
          "sha256": "01878b5e65482feb795715df4a9de0886fe968a961f79285cfff1298a07841aa",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--multiple",
          "exportName": "Multiple",
          "name": "Multiple",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionMultiple.stories.tsx",
          "description": "An accordion supports multiple panels expanded simultaneously. Since it's not simple to determine which panel will be opened by default, `multiple` will also be collapsed by default on the first render",
          "sourcePath": "source/examples/components-accordion--multiple.tsx",
          "sha256": "5aba1cbf0427368df51e9c4eb312127afe6002138136a3298e454fa7630d4268",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--open-items",
          "exportName": "OpenItems",
          "name": "Open Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionOpenItems.stories.tsx",
          "description": "An accordion can have defined open items. If no open item is present, all panels will be closed by default",
          "sourcePath": "source/examples/components-accordion--open-items.tsx",
          "sha256": "88cf409a138f8c20b51189c1387a91c630e92badf8bf5d99b0a4b3df5ec7201f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--sizes",
          "exportName": "Sizes",
          "name": "Sizes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionSizes.stories.tsx",
          "description": "AccordionHeader supports `small`, `medium`, `large` and `extra-large` sizes.",
          "sourcePath": "source/examples/components-accordion--sizes.tsx",
          "sha256": "035d53d1af04f3919fc6e2b000f740f6648739fab204d6aa6085b4e205f55155",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-accordion--with-icon",
          "exportName": "WithIcon",
          "name": "With Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-accordion/stories/src/Accordion/AccordionWithIcon.stories.tsx",
          "description": "An accordion header can contain an icon.",
          "sourcePath": "source/examples/components-accordion--with-icon.tsx",
          "sha256": "924cd53df274372218f16d613e0a0dc10d433891cd4220f5fc6d06a0694e5a78",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Accordion",
          "kind": "component",
          "propsType": "AccordionProps",
          "description": "Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "collapsible",
              "type": "boolean",
              "required": false,
              "description": "Indicates if Accordion support multiple Panels closed at the same time."
            },
            {
              "name": "defaultOpenItems",
              "type": "unknown",
              "required": false,
              "description": "Default value for the uncontrolled state of the panel."
            },
            {
              "name": "multiple",
              "type": "boolean",
              "required": false,
              "description": "Indicates if Accordion support multiple Panels opened at the same time."
            },
            {
              "name": "navigation",
              "type": "\"linear\" | \"circular\"",
              "required": false,
              "description": "",
              "deprecated": "Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.\nIndicates if keyboard navigation is available and gives two options, linear or circular navigation."
            },
            {
              "name": "onToggle",
              "type": "AccordionToggleEventHandler<unknown>",
              "required": false,
              "description": "Callback to be called when the opened items change."
            },
            {
              "name": "openItems",
              "type": "unknown",
              "required": false,
              "description": "Controls the state of the panel."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "AccordionHeader",
          "kind": "component",
          "propsType": "AccordionHeaderProps",
          "description": "Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`\nhooks.",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
              "required": false,
              "description": ""
            },
            {
              "name": "button",
              "type": "NonNullable<WithSlotShorthandValue<ARIAButtonSlotProps<\"a\">> | null>",
              "required": false,
              "description": "The component to be used as button in heading"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Expand icon slot rendered before (or after) children content in heading."
            },
            {
              "name": "expandIconPosition",
              "type": "\"start\" | \"end\"",
              "required": false,
              "description": "The position of the expand  icon slot in heading."
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Expand icon slot rendered before (or after) children content in heading."
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "Indicates if the AccordionHeader should be rendered inline."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\"",
              "required": false,
              "description": "Size of spacing in the heading."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "AccordionItem",
          "kind": "component",
          "propsType": "AccordionItemProps",
          "description": "Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Disables opening/closing of panel."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "unknown",
              "required": true,
              "description": "Required value that identifies this item inside an Accordion component."
            }
          ]
        },
        {
          "name": "AccordionPanel",
          "kind": "component",
          "propsType": "AccordionPanelProps",
          "description": "Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "collapseMotion",
              "type": "PresenceMotionSlotProps<CollapseParams> | null",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-accordion--default",
      "htmlPath": "components/Accordion/",
      "markdownPath": "components/Accordion.md"
    },
    {
      "id": "avatar",
      "title": "Avatar",
      "summary": "Represent one person or group with an image or text, plus optional presence and activity indicators. Use AvatarGroup for multiple avatars.",
      "kind": "components",
      "route": "components/Avatar",
      "label": "Avatar",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=306874-117056"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/avatar/usage"
        }
      ],
      "aliases": [
        "/avatar/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Avatar.md",
      "examples": [
        {
          "id": "components-avatar--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Avatar.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-avatar--default.tsx",
          "sha256": "144c7349567522482b49dcf995a9103e1a0a5f9c7ea29b7703fd435efd3d974e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--active",
          "exportName": "Active",
          "name": "Active",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarActive.stories.tsx",
          "description": "An avatar can communicate whether a user is currently active (for example, speaking or typing). Avatar supports `active`, `inactive`, and `unset`. The default is `unset`.",
          "sourcePath": "source/examples/components-avatar--active.tsx",
          "sha256": "7dd1a4b8bdbc03f15e333e84ba0ba12547ba577d3a132ea6cc96b30bd98554ec",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--active-appearance",
          "exportName": "ActiveAppearance",
          "name": "Active Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarActiveAppearance.stories.tsx",
          "description": "An avatar can have different appearances when `active=\"active\"`. Avatar supports `ring`, `shadow`, and `ring-shadow`. The default is `ring`.",
          "sourcePath": "source/examples/components-avatar--active-appearance.tsx",
          "sha256": "25c4bab5b3aed4d374d4fef8e40e93ea7cd28ccfd6db4c4f96d84eb246ed080f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--badge",
          "exportName": "Badge",
          "name": "Badge",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarBadge.stories.tsx",
          "description": "An avatar can have a badge to indicate presence status. See the PresenceBadge component for more info.",
          "sourcePath": "source/examples/components-avatar--badge.tsx",
          "sha256": "7fa32c5af6fe969d05ddec85d2707545fffef90b64012c496fd5a1dbae705031",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--badge-icon",
          "exportName": "BadgeIcon",
          "name": "Badge Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarBadgeIcon.stories.tsx",
          "description": "An Avatar can have a custom icon inside the badge.",
          "sourcePath": "source/examples/components-avatar--badge-icon.tsx",
          "sha256": "5d265943e58cdc06c39a2c7c827eaaf269b0596138329b1682f589f621f8f1e8",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-avatar--color-brand",
          "exportName": "ColorBrand",
          "name": "Color: brand",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarColorBrand.stories.tsx",
          "description": "An avatar can use the brand color from the theme's palette.",
          "sourcePath": "source/examples/components-avatar--color-brand.tsx",
          "sha256": "e1f6195d822a09f5fdcfbed2c323171017dc2daefa28380180895f5d4315a1dd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--color-colorful",
          "exportName": "ColorColorful",
          "name": "Color: colorful",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarColorColorful.stories.tsx",
          "description": "An avatar can have the color be automatically picked based on the `name` prop (or `idForColor` can be used if a name is not available).",
          "sourcePath": "source/examples/components-avatar--color-colorful.tsx",
          "sha256": "bb0b49b678708ab20bab9af75dcaf3afd82ba70cbfc3d7d27d500eb9147bb075",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-avatar--color-neutral",
          "exportName": "ColorNeutral",
          "name": "Color Neutral",
          "origin": "local",
          "originalSource": "src/stories/components/Avatar.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-avatar--color-neutral.tsx",
          "sha256": "fd054f012a25970fd8bd3ac9146c2f8946ca784d1e4dd8e884b0ae2abb1467a6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--color-palette",
          "exportName": "ColorPalette",
          "name": "Color: named color",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarColorPalette.stories.tsx",
          "description": "An avatar can have a specific named color from the theme's color palette  (e.g. `seafoam`, `grape`, or `pumpkin`)",
          "sourcePath": "source/examples/components-avatar--color-palette.tsx",
          "sha256": "4da5841c560f3316b7db7995db28126313599ac925936ba319539bf6c01b9300",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarIcon.stories.tsx",
          "description": "An avatar can display an icon. The icon will only be shown when there is no image or initials available.",
          "sourcePath": "source/examples/components-avatar--icon.tsx",
          "sha256": "a1dddf58bc0d5372d113d18f2ce15f01844897fdaafa71d741531b531d9091eb",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-avatar--image",
          "exportName": "Image",
          "name": "Image",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarImage.stories.tsx",
          "description": "An avatar can display an image.<br/>It is recommended to also include a name in addition to the image: the initials from the name are displayed while the image is loading, and the name makes the Avatar accessible to screen readers.",
          "sourcePath": "source/examples/components-avatar--image.tsx",
          "sha256": "4642669e8db63023bbff34a7158fc3fe2ef61fd8f831e798ce8b252c16f90996",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--initials",
          "exportName": "Initials",
          "name": "Initials: Custom Initials",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarInitials.stories.tsx",
          "description": "An avatar can display custom initials by setting the initials prop. It is generally recommended to use\n        the `name` prop instead, as that will automatically determine the initials and display them.",
          "sourcePath": "source/examples/components-avatar--initials.tsx",
          "sha256": "c1889170e2da8ddaa166f5722313ce4995984bc5225f3c1dcdcf406bf07ef5b9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--name",
          "exportName": "Name",
          "name": "Name",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarName.stories.tsx",
          "description": "The name is used to determine the initials displayed by the Avatar. It is also read by screen readers.",
          "sourcePath": "source/examples/components-avatar--name.tsx",
          "sha256": "9f487cb0c6f6eda59178154215e8e35517de15a10d46a1993a5cd881dba8c3fe",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarSize.stories.tsx",
          "description": "An avatar supports a range of sizes from 16 to 128. The default is 32. \n\nAvoid using sizes 16 and 20 for interactive Avatars, or ensure that there is at least 8px or 4px spacing respectively to meet WCAG target size requirements.",
          "sourcePath": "source/examples/components-avatar--size.tsx",
          "sha256": "cfda2873bc06b1bff945c8e1af2db002cf8f021fecab5fd9f5deb9fea4502572",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatar--square",
          "exportName": "Square",
          "name": "Shape: square",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/Avatar/AvatarSquare.stories.tsx",
          "description": "An avatar can have a square shape.",
          "sourcePath": "source/examples/components-avatar--square.tsx",
          "sha256": "d5c3616e89809b7605d58e6bf7bad5ae76f4885281da3b7a753fbb65c00ccb42",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Avatar",
          "kind": "component",
          "propsType": "AvatarProps",
          "description": "",
          "props": [
            {
              "name": "active",
              "type": "\"active\" | \"inactive\" | \"unset\"",
              "required": false,
              "description": "Optional activity indicator\n* active: the avatar will be decorated according to activeAppearance\n* inactive: the avatar will be reduced in size and partially transparent\n* unset: normal display",
              "defaultValue": "unset"
            },
            {
              "name": "activeAppearance",
              "type": "\"ring\" | \"shadow\" | \"ring-shadow\"",
              "required": false,
              "description": "The appearance when `active=\"active\"`",
              "defaultValue": "ring"
            },
            {
              "name": "as",
              "type": "\"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "badge",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<Pick<BadgeSlots, \"root\" | \"icon\">>, \"color\"> & Pick<BadgeProps, \"size\"> & { status?: PresenceBadgeStatus; outOfOffice?: boolean; } & RefAttributes<HTMLDivElement>> | null | undefined",
              "required": false,
              "description": "Badge to show the avatar's presence status."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "\"anchor\" | \"brand\" | \"neutral\" | \"colorful\" | \"dark-red\" | \"cranberry\" | \"red\" | \"pumpkin\" | \"peach\" | \"marigold\" | \"gold\" | \"brass\" | \"brown\" | \"forest\" | \"seafoam\" | \"dark-green\" | \"light-teal\" | \"teal\" | \"steel\" | \"blue\" | \"royal-blue\" | \"cornflower\" | \"navy\" | \"lavender\" | \"purple\" | \"grape\" | \"lilac\" | \"pink\" | \"magenta\" | \"plum\" | \"beige\" | \"mink\" | \"platinum\" | \"neutral-alt\"",
              "required": false,
              "description": "The color of the avatar. In addition to Fluent's options, CoreAI adds\n`\"neutral-alt\"` so a neutral avatar can sit on either a low- or\nhigh-elevation surface with appropriate contrast.\n\n- `\"neutral\"` uses `colorNeutralBackground4`\n- `\"neutral-alt\"` uses `colorNeutralBackground1`"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon to be displayed when the avatar doesn't have an image or initials.",
              "defaultValue": "`PersonRegular` (the default icon's size depends on the Avatar's size)"
            },
            {
              "name": "idForColor",
              "type": "string",
              "required": false,
              "description": "Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\nUse this when a name is not available, but there is another unique identifier that can be used instead."
            },
            {
              "name": "image",
              "type": "({ as?: \"img\"; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, \"ref\"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null; }, \"children\"> & { children?: undefined; }) | null | undefined",
              "required": false,
              "description": "The Avatar's image.\n\nUsage e.g.: `image={{ src: '...' }}`"
            },
            {
              "name": "initials",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "(optional) Custom initials.\n\nIt is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\nusing the `getInitials` function.\n\nThe initials are displayed when there is no image (including while the image is loading)."
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": "The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n\nThe name is used to determine the initials displayed when there is no image. It is also provided to\naccessibility tools."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"square\"",
              "required": false,
              "description": "The avatar can have a circular or square shape.",
              "defaultValue": "circular"
            },
            {
              "name": "size",
              "type": "16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128",
              "required": false,
              "description": "Size of the avatar in pixels.\n\nSize is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\nbased on design guidelines for the Avatar control.\n\nNote: At size 16, if initials are displayed, only the first initial will be rendered.\n\nIf a non-supported size is needed, set `size` to the next-smaller supported size, and set `width` and `height`\nto override the rendered size.\n\nFor example, to set the avatar to 45px in size:\n`<Avatar size={40} style={{ width: '45px', height: '45px' }} />`",
              "defaultValue": "32"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-avatar--default",
      "htmlPath": "components/Avatar/",
      "markdownPath": "components/Avatar.md"
    },
    {
      "id": "avatar-group",
      "title": "Avatar group",
      "summary": "Represent multiple people or groups with an avatar spread, stack, or compact pie; show overflow when space is limited.",
      "kind": "components",
      "route": "components/AvatarGroup",
      "label": "Avatar group",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=308130-4946"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/avatargroup/usage"
        }
      ],
      "aliases": [
        "/avatar-pie/",
        "/avatar-group/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/AvatarGroup.md",
      "examples": [
        {
          "id": "components-avatargroup--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/AvatarGroup.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-avatargroup--default.tsx",
          "sha256": "6cd32eb4e55b28bf5bf2bef96f385c37627cf76a60e5560a67095b9bde68db3a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatargroup--indicator",
          "exportName": "Indicator",
          "name": "Indicator",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupIndicator.stories.tsx",
          "description": "An AvatarGroup supports an icon and a count indicator.\n        When size is less than 24, then icon will be used by default.",
          "sourcePath": "source/examples/components-avatargroup--indicator.tsx",
          "sha256": "08facabd52d75b3b6656213618768d41ba2b21ae25fae9202eca8562c000ff5c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatargroup--layout",
          "exportName": "Layout",
          "name": "Layout",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupLayout.stories.tsx",
          "description": "An AvatarGroup supports three layouts: spread, stack, and pie. The default is spread.",
          "sourcePath": "source/examples/components-avatargroup--layout.tsx",
          "sha256": "da869e85a785d8104c12f5cf1286d06a7d1f661f82182124811575918dd31890",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatargroup--size-pie",
          "exportName": "SizePie",
          "name": "Size Pie",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupSizePie.stories.tsx",
          "description": "An AvatarGroup with `pie` layout supports a range of sizes from 16 to 128. The default is 32.",
          "sourcePath": "source/examples/components-avatargroup--size-pie.tsx",
          "sha256": "a6b09de81ca961a58cdfb1070c0ea175ebea4ad472db3faac1d21f024bd785ce",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatargroup--size-spread",
          "exportName": "SizeSpread",
          "name": "Size Spread",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupSizeSpread.stories.tsx",
          "description": "An AvatarGroup with `spread` layout supports a range of sizes from 16 to 128. The default is 32.",
          "sourcePath": "source/examples/components-avatargroup--size-spread.tsx",
          "sha256": "006a4309eff4a1e39aa4b51acb6eef4e85f9d2ff5352acfbffca951a8c36e95c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatargroup--size-stack",
          "exportName": "SizeStack",
          "name": "Size Stack",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupSizeStack.stories.tsx",
          "description": "An AvatarGroup with `stack` layout supports a range of sizes from 16 to 128. The default is 32. \n\nWARNING: do not make multiple avatars in a stack interactive unless the size is at least 28. Smaller sizes with overlapping click targets will fail to meet the WCAG target size requirement.",
          "sourcePath": "source/examples/components-avatargroup--size-stack.tsx",
          "sha256": "86e0125b3f15de4cd25359bfee00af79dff7c08f95b6acaa624ceb017aeaf73e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-avatargroup--tooltip",
          "exportName": "Tooltip",
          "name": "Tooltip",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-avatar/stories/src/AvatarGroup/AvatarGroupTooltip.stories.tsx",
          "description": "You can customize the tooltip of the AvatarGroupPopover, for example for translations.",
          "sourcePath": "source/examples/components-avatargroup--tooltip.tsx",
          "sha256": "0c2b178fb4db303b2a8948b490dfd3fc038b13464f27661d08cf76d7585085e0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "AvatarGroup",
          "kind": "component",
          "propsType": "AvatarGroupProps",
          "description": "The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement\nof individual Avatars in a spread, stack, or pie layout.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "layout",
              "type": "\"spread\" | \"stack\" | \"pie\"",
              "required": false,
              "description": "Layout the AvatarGroupItems should be displayed as.",
              "defaultValue": "spread"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128",
              "required": false,
              "description": "Size of the AvatarGroupItems.",
              "defaultValue": "32"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "AvatarGroupItem",
          "kind": "component",
          "propsType": "AvatarGroupItemProps",
          "description": "The AvatarGroupItem component represents a single person or entity.\nAvatarGroupItem should only be used in an AvatarGroup component.",
          "props": [
            {
              "name": "active",
              "type": "\"active\" | \"inactive\" | \"unset\"",
              "required": false,
              "description": "Optional activity indicator\n* active: the avatar will be decorated according to activeAppearance\n* inactive: the avatar will be reduced in size and partially transparent\n* unset: normal display",
              "defaultValue": "unset"
            },
            {
              "name": "activeAppearance",
              "type": "\"ring\" | \"shadow\" | \"ring-shadow\"",
              "required": false,
              "description": "The appearance when `active=\"active\"`",
              "defaultValue": "ring"
            },
            {
              "name": "as",
              "type": "\"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "avatar",
              "type": "NonNullable<WithSlotShorthandValue<Omit<ComponentProps<AvatarSlots>, \"color\"> & { active?: \"active\" | \"inactive\" | \"unset\"; activeAppearance?: \"ring\" | \"shadow\" | \"ring-shadow\"; color?: \"brand\" | \"neutral\" | \"colorful\" | AvatarNamedColor | undefined; idForColor?: string | undefined; name?: string | undefined; shape?: AvatarShape | undefined; size?: AvatarSize | undefined; } & RefAttributes<HTMLSpanElement>> | null> | undefined",
              "required": false,
              "description": "Avatar that represents a person or entity."
            },
            {
              "name": "badge",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<Pick<BadgeSlots, \"root\" | \"icon\">>, \"color\"> & Pick<BadgeProps, \"size\"> & { status?: PresenceBadgeStatus; outOfOffice?: boolean; } & RefAttributes<HTMLDivElement>> | null | undefined",
              "required": false,
              "description": "Badge to show the avatar's presence status."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "\"anchor\" | \"brand\" | \"neutral\" | \"colorful\" | \"dark-red\" | \"cranberry\" | \"red\" | \"pumpkin\" | \"peach\" | \"marigold\" | \"gold\" | \"brass\" | \"brown\" | \"forest\" | \"seafoam\" | \"dark-green\" | \"light-teal\" | \"teal\" | \"steel\" | \"blue\" | \"royal-blue\" | \"cornflower\" | \"navy\" | \"lavender\" | \"purple\" | \"grape\" | \"lilac\" | \"pink\" | \"magenta\" | \"plum\" | \"beige\" | \"mink\" | \"platinum\"",
              "required": false,
              "description": "The color when displaying either an icon or initials.\n* neutral (default): gray\n* brand: color from the brand palette\n* colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n* [AvatarNamedColor]: a specific color from the theme",
              "defaultValue": "neutral"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon to be displayed when the avatar doesn't have an image or initials.",
              "defaultValue": "`PersonRegular` (the default icon's size depends on the Avatar's size)"
            },
            {
              "name": "idForColor",
              "type": "string",
              "required": false,
              "description": "Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\nUse this when a name is not available, but there is another unique identifier that can be used instead."
            },
            {
              "name": "image",
              "type": "({ as?: \"img\"; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, \"ref\"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null; }, \"children\"> & { children?: undefined; }) | null | undefined",
              "required": false,
              "description": "The Avatar's image.\n\nUsage e.g.: `image={{ src: '...' }}`"
            },
            {
              "name": "initials",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "(optional) Custom initials.\n\nIt is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\nusing the `getInitials` function.\n\nThe initials are displayed when there is no image (including while the image is loading)."
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": "The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n\nThe name is used to determine the initials displayed when there is no image. It is also provided to\naccessibility tools."
            },
            {
              "name": "overflowLabel",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Label used for the name of the AvatarGroupItem when rendered as an overflow item.\nThe content of the label, by default, is the `name` prop from the `avatar` slot."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | ({ as: \"li\"; } & Omit<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, \"ref\"> & { ref?: ((instance: HTMLLIElement | null) => void) | RefObject<HTMLLIElement> | null | undefined; }, \"children\"> & { children?: any; }) | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "AvatarGroupPopover",
          "kind": "component",
          "propsType": "AvatarGroupPopoverProps",
          "description": "The AvatarGroupPopover component provides a button with a Popover containing the children provided.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"inverted\"",
              "required": false,
              "description": "A popover can appear styled with brand or inverted.\nWhen not specified, the default style is used."
            },
            {
              "name": "children",
              "type": "ReactNode",
              "required": true,
              "description": ""
            },
            {
              "name": "closeOnIframeFocus",
              "type": "boolean",
              "required": false,
              "description": "Flag to close the Popover when an iframe outside a PopoverSurface is focused",
              "defaultValue": "true"
            },
            {
              "name": "closeOnScroll",
              "type": "boolean",
              "required": false,
              "description": "Close when scroll outside of it",
              "defaultValue": "false"
            },
            {
              "name": "content",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"ul\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, \"ref\"> & { ref?: ((instance: HTMLUListElement | null) => void) | RefObject<HTMLUListElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "List that contains the overflowed AvatarGroupItems."
            },
            {
              "name": "count",
              "type": "number",
              "required": false,
              "description": "Number of AvatarGroupItems that will be rendered.\n\nNote: AvatarGroupPopover handles counting the number of children, but when using a react fragment to wrap the\nchildren, this is not possible and therefore it has do be added manually."
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "Used to set the initial open state of the Popover in uncontrolled mode",
              "defaultValue": "false"
            },
            {
              "name": "indicator",
              "type": "\"icon\" | \"count\"",
              "required": false,
              "description": "Whether the triggerButton should render an icon instead of the number of overflowed AvatarGroupItems.\nNote: The indicator will default to `icon` when the size is less than 24.",
              "defaultValue": "count"
            },
            {
              "name": "inertTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert,\nmaking navigation leak from the trapped area back to the browser toolbar and vice-versa.",
              "defaultValue": "false"
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order",
              "defaultValue": "false"
            },
            {
              "name": "legacyTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Must be used with the `trapFocus` prop\nEnables older Fluent UI focus trap behavior where the user\ncannot tab into the window outside of the document. This is now\nnon-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert.",
              "deprecated": "this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "mouseLeaveDelay",
              "type": "number",
              "required": false,
              "description": "Sets the delay for closing popover on mouse leave"
            },
            {
              "name": "onOpenChange",
              "type": "((e: OpenPopoverEvents, data: OnOpenChangeData) => void)",
              "required": false,
              "description": "Call back when the component requests to change value\nThe `open` value is used as a hint when directly controlling the component"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the opening of the Popover",
              "defaultValue": "false"
            },
            {
              "name": "openOnContext",
              "type": "boolean",
              "required": false,
              "description": "Flag to open the Popover as a context menu. Disables all other interactions",
              "defaultValue": "false"
            },
            {
              "name": "openOnHover",
              "type": "boolean",
              "required": false,
              "description": "Flag to open the Popover by hovering the trigger",
              "defaultValue": "false"
            },
            {
              "name": "popoverSurface",
              "type": "NonNullable<WithSlotShorthandValue<Omit<PopoverSurfaceSlots, \"root\"> & Omit<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }, \"ref\"> & RefAttributes<HTMLDivElement>> | null> | undefined",
              "required": false,
              "description": "PopoverSurface that contains the content."
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configures the position of the Popover.\nExplore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Determines popover padding and arrow size",
              "defaultValue": "medium"
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps | null",
              "required": false,
              "description": "Slot for the surface motion animation.\nFor more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "tooltip",
              "type": "NonNullable<WithSlotShorthandValue<TooltipProps> | null>",
              "required": false,
              "description": "Tooltip shown when triggerButton is hovered."
            },
            {
              "name": "trapFocus",
              "type": "boolean",
              "required": false,
              "description": "Should trap focus",
              "defaultValue": "false"
            },
            {
              "name": "triggerButton",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Button that triggers the Popover."
            },
            {
              "name": "unstable_disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "By default Popover focuses the first focusable element in PopoverSurface on open.\nSpecify `disableAutoFocus` to prevent this behavior.",
              "defaultValue": "false"
            },
            {
              "name": "withArrow",
              "type": "boolean",
              "required": false,
              "description": "Display an arrow pointing to the target.",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-avatargroup--default",
      "htmlPath": "components/AvatarGroup/",
      "markdownPath": "components/AvatarGroup.md"
    },
    {
      "id": "badge",
      "title": "Badge",
      "summary": "A badge is a visual indicator that communicates a status or description of an associated component.",
      "kind": "components",
      "route": "components/Badge",
      "label": "Badge",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=151708-5234"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/badge/usage"
        }
      ],
      "aliases": [
        "/badge/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Badge.md",
      "examples": [
        {
          "id": "components-badge-badge--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Badge.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-badge-badge--default.tsx",
          "sha256": "1e7e876097169350686794ad2a7ee54fb86ddfe3cf670889187f191054d0104d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-badge--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeAppearance.stories.tsx",
          "description": "A badge can have a `filled`, `ghost`, `outline`, or `tint` appearance. The default is `filled`.",
          "sourcePath": "source/examples/components-badge-badge--appearance.tsx",
          "sha256": "978960fc376e21876e31484cc869171bdb9ef70c67b1f3cb0c9f3d65db6d2867",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-badge--color",
          "exportName": "Color",
          "name": "Color",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeColor.stories.tsx",
          "description": "A badge can have different colors. The available colors are `brand`, `danger`, `important`, `informative`, `severe`, `subtle`, `success` or `warning`. The default is `brand`. Information conveyed by color should also be communicated in another way to meet [accessibility requirements](https://w3c.github.io/wcag/guidelines/22/#use-of-color).",
          "sourcePath": "source/examples/components-badge-badge--color.tsx",
          "sha256": "a865064dc996618675c696236ac0421e730232c302f4fd546d66a6647e85a120",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-badge--color-and-appearance",
          "exportName": "ColorAndAppearance",
          "name": "Color And Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.stories.tsx",
          "description": "`ghost-subtle` and `outline-subtle` are intended only for use on a branded background — the boxed \"On brand background:\" examples above demonstrate the intended usage context.",
          "sourcePath": "source/examples/components-badge-badge--color-and-appearance.tsx",
          "sha256": "7b3b89807bf150c3bde1e95ee6d503ee86d8ab7de0d13497cc328f9f6f333935",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-badge-badge--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeIcon.stories.tsx",
          "description": "A badge can display an icon. If the icon is meaningful, then either the icon must have a label or the parent control's label must include the information conveyed by the icon.",
          "sourcePath": "source/examples/components-badge-badge--icon.tsx",
          "sha256": "3b1d7053b9494b803c194f927ab64fee8b95953dcea58b042748d852ec64f9a5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-badge-badge--shapes",
          "exportName": "Shapes",
          "name": "Shapes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeShapes.stories.tsx",
          "description": "A badge can have `square`, `rounded` or `circular` shape. The default is `circular`.",
          "sourcePath": "source/examples/components-badge-badge--shapes.tsx",
          "sha256": "627185280bc6ef6fbda0685337e901d7cc6bd572273117717c47dbab81fc1844",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-badge--sizes",
          "exportName": "Sizes",
          "name": "Sizes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/Badge/BadgeSizes.stories.tsx",
          "description": "A badge supports `tiny`, `extra-small`, `small`, `medium`, `large`, and `extra-large` sizes. The default is `medium`.",
          "sourcePath": "source/examples/components-badge-badge--sizes.tsx",
          "sha256": "648a09bc86f4c0742d521d15b6512254de304cd86ecf1bef357430ab256eb1e0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Badge",
          "kind": "component",
          "propsType": "BadgeProps",
          "description": "Define a styled Badge, using the `useBadge_unstable` hook.",
          "props": [
            {
              "name": "appearance",
              "type": "\"filled\" | \"ghost\" | \"outline\" | \"tint\"",
              "required": false,
              "description": "A Badge can be filled, outline, ghost, inverted"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "\"brand\" | \"success\" | \"warning\" | \"danger\" | \"important\" | \"informative\" | \"severe\" | \"subtle\"",
              "required": false,
              "description": "A Badge can be one of preset colors"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A Badge can position the icon before or after the content."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A Badge can be square, circular or rounded."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\" | \"tiny\" | \"extra-small\"",
              "required": false,
              "description": "A Badge can be on of several preset sizes."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-badge-badge--default",
      "htmlPath": "components/Badge/",
      "markdownPath": "components/Badge.md"
    },
    {
      "id": "breadcrumb",
      "title": "Breadcrumb",
      "summary": "A breadcrumb helps people quickly understand where they are within the hierarchy of a large and complex site or app.",
      "kind": "components",
      "route": "components/Breadcrumb",
      "label": "Breadcrumb",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=133494-14993"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/breadcrumb/usage"
        }
      ],
      "aliases": [
        "/breadcrumb/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Breadcrumb.md",
      "examples": [
        {
          "id": "components-breadcrumb--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Breadcrumb.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-breadcrumb--default.tsx",
          "sha256": "fe60a76b65edfd6b6bd0ea5d11586d445b4ef4a6bbe53b080b4bd6ba48919353",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-breadcrumb--breadcrumb-size",
          "exportName": "BreadcrumbSize",
          "name": "Breadcrumb Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbSize.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-breadcrumb--breadcrumb-size.tsx",
          "sha256": "eb1687aa6c94b557fe86d2af2585d03d87278dccd3814758458991420acb240b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-breadcrumb--breadcrumb-with-overflow",
          "exportName": "BreadcrumbWithOverflow",
          "name": "Breadcrumb With Overflow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-breadcrumb--breadcrumb-with-overflow.tsx",
          "sha256": "616e36b208ca913fcb9361f9680d985dae0aff8274516217f47f1b5a437edd76",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-breadcrumb--breadcrumb-with-tooltip",
          "exportName": "BreadcrumbWithTooltip",
          "name": "Breadcrumb With Tooltip",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithTooltip.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-breadcrumb--breadcrumb-with-tooltip.tsx",
          "sha256": "d2a623e4826f6a7c4ef27dd08758aa6028b7d4849916fe405711d22c38ebd105",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Breadcrumb",
          "kind": "component",
          "propsType": "BreadcrumbProps",
          "description": "Breadcrumb component - TODO: add more docs",
          "props": [
            {
              "name": "as",
              "type": "\"nav\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "focusMode",
              "type": "\"tab\" | \"arrow\"",
              "required": false,
              "description": "Sets the focus behavior for the Breadcrumb.\n\n`tab`\nThis behaviour will cycle through all elements inside of the Breadcrumb when pressing the Tab key and then release focus\nafter the last inner element.\n\n`arrow`\nThis behaviour will cycle through all elements inside of the Breadcrumb when pressing the Arrow key.",
              "defaultValue": "'tab'"
            },
            {
              "name": "list",
              "type": "WithSlotShorthandValue<{ as?: \"ol\"; } & Omit<Omit<DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, \"ref\"> & { ref?: ((instance: HTMLOListElement | null) => void) | RefObject<HTMLOListElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Ordered list which contains items."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls size of Breadcrumb items and dividers.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "BreadcrumbButton",
          "kind": "component",
          "propsType": "BreadcrumbButtonProps",
          "description": "A button component which is used inside the Breadcrumb.",
          "props": [
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "current",
              "type": "boolean",
              "required": false,
              "description": "Defines current sate of BreadcrumbButton.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls size of Breadcrumb items and dividers.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "BreadcrumbDivider",
          "kind": "component",
          "propsType": "BreadcrumbDividerProps",
          "description": "A divider component which is used inside the Breadcrumb",
          "props": [
            {
              "name": "as",
              "type": "\"li\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLLIElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "BreadcrumbItem",
          "kind": "component",
          "propsType": "BreadcrumbItemProps",
          "description": "BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.\nIt can be used as a non-interactive item.",
          "props": [
            {
              "name": "as",
              "type": "\"li\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLLIElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls size of Breadcrumb items and dividers.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-breadcrumb--default",
      "htmlPath": "components/Breadcrumb/",
      "markdownPath": "components/Breadcrumb.md"
    },
    {
      "id": "button",
      "title": "Button",
      "summary": "A button triggers an action or event. Use buttons for important actions like submitting a response, committing a change, or moving to the next step.",
      "kind": "components",
      "route": "components/Button",
      "label": "Button",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=160313-4460"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/button/usage"
        }
      ],
      "aliases": [
        "/button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Button.md",
      "examples": [
        {
          "id": "components-button-button--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Button.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-button--default.tsx",
          "sha256": "05aad76d08818294a352b726e31488f749fbffa3f24a08d7c41b9338a8ebfd2d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-button--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx",
          "description": "- `(undefined)`: the button appears with the default style\n- `primary`: emphasizes the button as a primary action.\n- `outline`: removes background styling.\n- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n- `transparent`: removes background and border styling.\n",
          "sourcePath": "source/examples/components-button-button--appearance.tsx",
          "sha256": "28055683ea4ee125d2dc575905c797befbc518711b2a4abfa1ea03262da41d74",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-button--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonDisabled.stories.tsx",
          "description": "A button can be `disabled` or `disabledFocusable`.\n              `disabledFocusable` is used in scenarios where it is important to keep a consistent tab order\n              for screen reader and keyboard users. The primary example of this pattern is when\n              the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
          "sourcePath": "source/examples/components-button-button--disabled.tsx",
          "sha256": "15069eaf9daa707259e952abe162191d170eac9ca5a7c404b3f236cd2ed32948",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-button--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonIcon.stories.tsx",
          "description": "Button has an `icon` slot that, if specified, renders an icon either `before` or `after` the children, as specified by the `iconPosition` prop.",
          "sourcePath": "source/examples/components-button-button--icon.tsx",
          "sha256": "2689da124be6a9eed09b0c6c8380feb5050e85750111b571488bb8e9cd2c7405",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-button--loading",
          "exportName": "Loading",
          "name": "Loading",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonLoading.stories.tsx",
          "description": "You can customize a Button's contents and styles to simulate a convincing loading state.",
          "sourcePath": "source/examples/components-button-button--loading.tsx",
          "sha256": "ecc33bb1d376509b3db9023d59b77e2e967f7422f847893db203a038cd712abb",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "@fluentui/react-utilities",
            "react"
          ]
        },
        {
          "id": "components-button-button--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "local",
          "originalSource": "src/stories/components/Button.stories.tsx",
          "description": "Demonstrates each available button shape.",
          "sourcePath": "source/examples/components-button-button--shape.tsx",
          "sha256": "a4a38a62e083bd9a9e61f9a8ef54f5cc57db653fd677317cf2c5ba90b799d9b8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-button--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonSize.stories.tsx",
          "description": "A button supports `small`, `medium` and `large` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-button-button--size.tsx",
          "sha256": "7b35caaad4a502fec23879febdc5e20601a5fbef89bdcf7170c7058f7479e0cf",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-button--subtle-content-alignment",
          "exportName": "SubtleContentAlignment",
          "name": "Subtle Content Alignment",
          "origin": "local",
          "originalSource": "src/stories/components/Button.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-button--subtle-content-alignment.tsx",
          "sha256": "9cd2659f7095aec8d4b0985e6fbc435eeebeca5052f9f729d83eba69423350b8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-button--with-long-text",
          "exportName": "WithLongText",
          "name": "With Long Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/Button/ButtonWithLongText.stories.tsx",
          "description": "Text wraps after it hits the max width of the component.",
          "sourcePath": "source/examples/components-button-button--with-long-text.tsx",
          "sha256": "7ce002ea1d80dca336b96f4b845383afda276781989f72b968cd477a5ef5df54",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Button",
          "kind": "component",
          "propsType": "ButtonProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'circular'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-button--default",
      "htmlPath": "components/Button/",
      "markdownPath": "components/Button.md"
    },
    {
      "id": "card",
      "title": "Card",
      "summary": "A card is a container that holds information and actions related to a single concept or object, like a document or a contact. Cards can give information prominence and create predictable patterns.",
      "kind": "components",
      "route": "components/Card",
      "label": "Card",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=432832-55273"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/card/usage"
        }
      ],
      "aliases": [
        "/card/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Card.md",
      "examples": [
        {
          "id": "components-card-card--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Card.stories.tsx",
          "description": "A typical `Card` composition: a `CardHeader` with an image, title and\ndescription, a `CardPreview`, and a `CardFooter` with actions.",
          "sourcePath": "source/examples/components-card-card--default.tsx",
          "sha256": "dd0826e9a2b886c6016c456bee087cbb65f264d6fb274ee402f247a0841f192d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/Card.stories.tsx",
          "description": "Under the CoreAI theme, `Card` defaults `appearance` to\n`filled-alternative` instead of Fluent's `filled`. All four appearances\nremain available: `filled-alternative` (CoreAI default), `filled` (stock\nFluent default), `outline`, and `subtle`.",
          "sourcePath": "source/examples/components-card-card--appearance.tsx",
          "sha256": "5f8c5a19d88cf89b053e715d2fd393487dae99f243eb12fc616fc77de25b58b0",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardDisabled.stories.tsx",
          "description": "\nA card can be disabled, which prevents interaction and shows a visual disabled state.\n\n**Key behaviors:**\n- Interactive disabled cards do not respond to click events\n- Selectable disabled cards cannot change their selection state\n- The internal checkbox in selectable cards is also disabled\n- Focus is not applied to disabled cards (no tabindex)\n\n**Accessibility:**\n- Disabled cards have `aria-disabled=\"true\"`\n- Screen readers announce the disabled state\n- Cards do not receive focus when disabled, maintaining proper tab order\n- Make sure to explicitly disable interactive child elements as well, like buttons and fields, as they are not disabled by default due to limited control over slot contents\n      ",
          "sourcePath": "source/examples/components-card-card--disabled.tsx",
          "sha256": "619c210c199b9ace2ee564c2fc7b38ebafba12a16d3ce0089534f8a348d4a99a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--floating-action-position",
          "exportName": "FloatingActionPosition",
          "name": "Floating Action Position",
          "origin": "local",
          "originalSource": "src/stories/components/Card.stories.tsx",
          "description": "The CoreAI `Card` adds a `floatingActionPosition` prop that re-pins the\n`floatingAction` slot. Stock Fluent only supports the right placement;\nthis wrapper adds a `\"left\"` placement too.",
          "sourcePath": "source/examples/components-card-card--floating-action-position.tsx",
          "sha256": "a523a50fedac11dd0dda43ca061f249057086dc74b5f7f923ff1123f33ca4e31",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-card-card--focus-mode",
          "exportName": "FocusMode",
          "name": "Focus Mode",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardFocusMode.stories.tsx",
          "description": "Cards can be focusable and manage the focus of their contents in several different strategies. Using the `focusMode` prop, we can achieve the following:",
          "sourcePath": "source/examples/components-card-card--focus-mode.tsx",
          "sha256": "096593bd95047a69330d11dc79691271e46c2ebd0745926aff0a452b7c2bbbf6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--orientation",
          "exportName": "Orientation",
          "name": "Orientation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardOrientation.stories.tsx",
          "description": "Cards can have a different anatomy and be displayed either vertically (by default) or horizontally.",
          "sourcePath": "source/examples/components-card-card--orientation.tsx",
          "sha256": "2a409d3d9f1e9fe6db4e27e42c63518e800dbadfc60cd03eb890f45a3d3d0aa3",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--outline-interactivity",
          "exportName": "OutlineInteractivity",
          "name": "Outline Interactivity",
          "origin": "local",
          "originalSource": "src/stories/components/CardDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-card-card--outline-interactivity.tsx",
          "sha256": "3a9a9a2a8ac6ed5eb847e8b7e07dec47e3135a88761fc958e8e5c0a1bfe7cc45",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-card-card--selectable",
          "exportName": "Selectable",
          "name": "Selectable",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardSelectable.stories.tsx",
          "description": "Cards can be selectable and clicking the card surface can toggle its state to selected.",
          "sourcePath": "source/examples/components-card-card--selectable.tsx",
          "sha256": "6e9bac6e94677669443e013e00d263a8512f35386fd11a0d318f2696dff65f0c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--selectable-indicator",
          "exportName": "SelectableIndicator",
          "name": "Selectable Indicator",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.stories.tsx",
          "description": "By default, selectable cards do not include any element to represent its selection state. For example,\n      checkboxes can be composed together as an additional element by using the `floatingAction` property.\n      When doing so, ensure the checkbox's accessible name matches the card's title.",
          "sourcePath": "source/examples/components-card-card--selectable-indicator.tsx",
          "sha256": "310a6816fedd6ec21100574474d90c96a341c378807665505e23b3dfcc55b494",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--selectable-indicator-radio",
          "exportName": "SelectableIndicatorRadio",
          "name": "Selectable Indicator Radio",
          "origin": "local",
          "originalSource": "src/stories/components/Card.stories.tsx",
          "description": "Combines `floatingActionPosition=\"left\"` with a `Radio` in the\n`floatingAction` slot to build a selectable card group driven by a single\n`RadioGroup`.",
          "sourcePath": "source/examples/components-card-card--selectable-indicator-radio.tsx",
          "sha256": "e1bec4689cac5bff1c0d1604011fb770abc1305bc12cbf3a29d8bb60b90bd84e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-card-card--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardSize.stories.tsx",
          "description": "Size options are mainly to provide variety, and consistency when using cards for different usages.It relates to padding and border-radius and not so much the actual dimensions of the card.",
          "sourcePath": "source/examples/components-card-card--size.tsx",
          "sha256": "173c2dcb8f8e7bca9b801e7ac6d10de8ac8e82635c0f7642ccc5723835d2acf2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-card-card--templates",
          "exportName": "Templates",
          "name": "Templates",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardTemplates.stories.tsx",
          "description": "Cards can be composed with other components to build rich elements for a page.",
          "sourcePath": "source/examples/components-card-card--templates.tsx",
          "sha256": "70f63478daa7137a84cc59dd56aa956efdcb42bd8a57dc6a50a8da8a6b12a41a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-card-card--with-action",
          "exportName": "WithAction",
          "name": "With Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx",
          "description": "When giving a card a top-level click handler, it's important to ensure the same action can be done by a button or link within the Card. This ensures the action is accesible to screen reader, touch screen reader, keyboard, and voice control users.",
          "sourcePath": "source/examples/components-card-card--with-action.tsx",
          "sha256": "e8bc562dfdeee0edcd168a55a07bd13abb6347b17aecb77e5bb336f7b5d4ae9d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Card",
          "kind": "component",
          "propsType": "CardProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"filled\" | \"outline\" | \"subtle\" | \"filled-alternative\"",
              "required": false,
              "description": "Sets the appearance of the card.\n\n`filled`\nThe card will have a shadow, border and background color.\n\n`filled-alternative`\nThis appearance is similar to `filled`, but the background color will be a little darker.\n\n`outline`\nThis appearance is similar to `filled`, but the background color will be transparent and no shadow applied.\n\n`subtle`\nThis appearance is similar to `filled-alternative`, but no border is applied.",
              "defaultValue": "'filled'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkbox",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | null | undefined",
              "required": false,
              "description": "The internal checkbox element that renders when the card is selectable."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelected",
              "type": "boolean",
              "required": false,
              "description": "Defines whether the card is initially in a selected state when rendered.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Makes the card and card selection disabled (not propagated to children).",
              "defaultValue": "false"
            },
            {
              "name": "floatingAction",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Floating action that can be rendered on the top-right of a card. Often used together with\n`selected`, `defaultSelected`, and `onSelectionChange` props"
            },
            {
              "name": "floatingActionPosition",
              "type": "\"right\" | \"left\"",
              "required": false,
              "description": "Placement of the `floatingAction` slot within the card.\n- 'right' (default): matches stock Fluent placement\n- 'left': left edge",
              "defaultValue": "'right'"
            },
            {
              "name": "focusMode",
              "type": "\"off\" | \"no-tab\" | \"tab-exit\" | \"tab-only\"",
              "required": false,
              "description": "Sets the focus behavior for the card.\n\n`off`\nThe card will not focusable.\n\n`no-tab`\nThis behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\npressing the Escape key.\n\n`tab-exit`\nThis behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\nthe Tab key on the last inner element.\n\n`tab-only`\nThis behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\nafter the last inner element.",
              "defaultValue": "'off'"
            },
            {
              "name": "onSelectionChange",
              "type": "((event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void)",
              "required": false,
              "description": "Callback to be called when the selected state value changes."
            },
            {
              "name": "orientation",
              "type": "\"horizontal\" | \"vertical\"",
              "required": false,
              "description": "Defines the orientation of the card.",
              "defaultValue": "'vertical'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selected",
              "type": "boolean",
              "required": false,
              "description": "Defines the controlled selected state of the card.",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls the card's border radius and padding between inner elements.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-card-card--default",
      "htmlPath": "components/Card/",
      "markdownPath": "components/Card.md"
    },
    {
      "id": "card-footer",
      "title": "CardFooter",
      "summary": "Footer region of a Card that lays out related actions.",
      "kind": "components",
      "route": "components/CardFooter",
      "label": "CardFooter",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/card-footer/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CardFooter.md",
      "examples": [
        {
          "id": "components-card-cardfooter--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CardFooter.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-card-cardfooter--default.tsx",
          "sha256": "f9f7acd9804e43b133d4e21329f1bb0265d8d905cd5a61146f4276bae4108637",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CardFooter",
          "kind": "component",
          "propsType": "CardFooterProps",
          "description": "Component to render Button actions in a Card component.",
          "props": [
            {
              "name": "action",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Container that renders on the far end of the footer, used for action buttons."
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-card-cardfooter--default",
      "htmlPath": "components/CardFooter/",
      "markdownPath": "components/CardFooter.md"
    },
    {
      "id": "card-header",
      "title": "CardHeader",
      "summary": "Header region of a Card for a title, subtitle, image, and actions.",
      "kind": "components",
      "route": "components/CardHeader",
      "label": "CardHeader",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/card-header/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CardHeader.md",
      "examples": [
        {
          "id": "components-card-cardheader--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CardHeader.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-card-cardheader--default.tsx",
          "sha256": "a71a293e55163ab3fa013b8f11d2cb0cfae320e005e466f2d662302fe5f562f4",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CardHeader",
          "kind": "component",
          "propsType": "CardHeaderProps",
          "description": "Component to render an image, text and an action in a Card component.",
          "props": [
            {
              "name": "action",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Container that renders on the far end of the footer, used for action buttons."
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "description",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element used to render short descriptions related to the title."
            },
            {
              "name": "header",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element used to render the main header title."
            },
            {
              "name": "image",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | ({ as: \"img\"; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, \"ref\"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null | undefined; }, \"children\"> & { children?: undefined; }) | null | undefined",
              "required": false,
              "description": "Element used to render an image or avatar related to the card."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-card-cardheader--default",
      "htmlPath": "components/CardHeader/",
      "markdownPath": "components/CardHeader.md"
    },
    {
      "id": "card-preview",
      "title": "CardPreview",
      "summary": "Preview region of a Card for prominent media or content.",
      "kind": "components",
      "route": "components/CardPreview",
      "label": "CardPreview",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/card-preview/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CardPreview.md",
      "examples": [
        {
          "id": "components-card-cardpreview--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CardPreview.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-card-cardpreview--default.tsx",
          "sha256": "186d0986d1e32f7a518451ad710b6b7b72e2768cb5bb1cfe927d7b9652c254fa",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CardPreview",
          "kind": "component",
          "propsType": "CardPreviewProps",
          "description": "Component to render image previews of documents or articles in a Card component.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "logo",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | ({ as: \"img\"; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, \"ref\"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null | undefined; }, \"children\"> & { children?: undefined; }) | null | undefined",
              "required": false,
              "description": "Container that holds a logo related to the image preview provided."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-card-cardpreview--default",
      "htmlPath": "components/CardPreview/",
      "markdownPath": "components/CardPreview.md"
    },
    {
      "id": "carousel",
      "title": "Carousel",
      "summary": "A carousel is a dynamic user interface component that allows users to cycle through content both linearly and cyclically.",
      "kind": "components",
      "route": "components/Carousel",
      "label": "Carousel",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=322705-4097"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/carousel/usage"
        }
      ],
      "aliases": [
        "/carousel/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Carousel.md",
      "examples": [
        {
          "id": "components-carousel-carousel--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Carousel.stories.tsx",
          "description": "Displays full-width image banners with overlaid content and carousel navigation controls.",
          "sourcePath": "source/examples/components-carousel-carousel--default.tsx",
          "sha256": "f9f2c0e7adfed017fcc02f8c8f41700799141abc5908d1dafaaecd8f43b6fc43",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-carousel-carousel--alignment-and-whitespace",
          "exportName": "AlignmentAndWhitespace",
          "name": "Alignment And Whitespace",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.stories.tsx",
          "description": "Carousel can have slides aligned relative to the carousel viewport, use the `align` prop to set the alignment. Note, the `whitespace` prop could be used to clear leading and trailing empty space that causes excessive scrolling.",
          "sourcePath": "source/examples/components-carousel-carousel--alignment-and-whitespace.tsx",
          "sha256": "22666d31ed4e7d897118fadd9e916b7a5daf10d9d5961840a7059a3503ec4cda",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-carousel-carousel--appearance.tsx",
          "sha256": "c4e3670798b61bbec80c54711d0cacf0187ea0ade751e7dd570f2f7aefc134c4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--autoplay",
          "exportName": "Autoplay",
          "name": "Autoplay",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.stories.tsx",
          "description": "The Autoplay button must be present to enable autoplay as it is an accessibility requirement. To enable, any valid prop (recommended ariaLabel) must be passed in, while setting the autoplay prop in CarouselNav to undefined will disable and remove it. The `autoplayInterval` prop controls the delay between slide transitions in milliseconds (defaults to 4000ms).",
          "sourcePath": "source/examples/components-carousel-carousel--autoplay.tsx",
          "sha256": "0e8ddc29620b2c9dfb6448dacbc6056acca5333f996ae75474d4b024088fe459",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.stories.tsx",
          "description": "Carousel can be controlled by setting `activeIndex` and `onActiveIndexChange` props.",
          "sourcePath": "source/examples/components-carousel-carousel--controlled.tsx",
          "sha256": "08e8bdaae04f98b9c965e8dcf566aa9559508df4ead57ec0d4841c4fa5002c1b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--eventing",
          "exportName": "Eventing",
          "name": "Eventing",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.stories.tsx",
          "description": "Carousel provides callbacks on index change with a multitude of event types.",
          "sourcePath": "source/examples/components-carousel-carousel--eventing.tsx",
          "sha256": "7100d8c46b15d6f8b2f0a114c70a99e1b0c4714949ee89cd7bdf9fa56da3d66b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--first-run-experience",
          "exportName": "FirstRunExperience",
          "name": "First Run Experience",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.stories.tsx",
          "description": "Carousel can be used in a Dialog to create a _first-run_ experience.",
          "sourcePath": "source/examples/components-carousel-carousel--first-run-experience.tsx",
          "sha256": "62668811516c321adef302e48f109c18c02b9ee71ec2fc52e5ac09276c6a9670",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--image-slideshow",
          "exportName": "ImageSlideshow",
          "name": "Image Slideshow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselImageBox.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-carousel-carousel--image-slideshow.tsx",
          "sha256": "2e1d92c4b71deafefc24bb00c6728f81dc7896b5db596966610e6807e70409cb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--responsive",
          "exportName": "Responsive",
          "name": "Responsive",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.stories.tsx",
          "description": "Carousel can have responsive cards that adjust their size based on the content, using `autoSize` prop on `CarouselCard`.",
          "sourcePath": "source/examples/components-carousel-carousel--responsive.tsx",
          "sha256": "5066a401f269c28d793608618cecab3356d7a695ffe36a50055d21e242473028",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-carousel-carousel--top-navigation",
          "exportName": "TopNavigation",
          "name": "Top Navigation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.stories.tsx",
          "description": "Top navigation places carousel controls at the header so users can see the title, page position, and navigation in one line. This story shows the default variant with previous and next buttons and dot pagination using CarouselNav inside CarouselNavContainer.",
          "sourcePath": "source/examples/components-carousel-carousel--top-navigation.tsx",
          "sha256": "90133aaeba2c4084eec34ab149d6a6de3c1852476fd3d12614b3e93e3f5aa065",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Carousel",
          "kind": "component",
          "propsType": "CarouselProps",
          "description": "Carousel is the context wrapper and container for all carousel content/controls,\nit has no direct style or slot opinions.\n\nCarousel also provides API interfaces for callbacks that will occur on navigation events.",
          "props": [
            {
              "name": "activeIndex",
              "type": "number",
              "required": false,
              "description": "The value of the currently active page."
            },
            {
              "name": "align",
              "type": "\"center\" | \"start\" | \"end\"",
              "required": false,
              "description": "The alignment of the carousel."
            },
            {
              "name": "announcement",
              "type": "CarouselAnnouncerFunction",
              "required": false,
              "description": "Localizes the string used to announce carousel page changes\nDefaults to: undefined"
            },
            {
              "name": "appearance",
              "type": "\"flat\" | \"elevated\"",
              "required": false,
              "description": "Sets visual treatment for the Carousel container.\n\n`flat`\nRetains the minimal styling used by default prior to introducing appearance-based styles.\n\n`elevated`\nApplies rounded corners, background, and shadow tokens so the Carousel is presented as a surfaced container.",
              "defaultValue": "'flat'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "autoplayInterval",
              "type": "number",
              "required": false,
              "description": "Choose a delay between autoplay transitions in milliseconds.\nOnly active if Autoplay is enabled via CarouselAutoplayButton\n\nDefaults: 4000"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "circular",
              "type": "boolean",
              "required": false,
              "description": "Circular enables the carousel to loop back around on navigation past trailing index."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultActiveIndex",
              "type": "number",
              "required": false,
              "description": "The initial page to display in uncontrolled mode."
            },
            {
              "name": "draggable",
              "type": "Booleanish",
              "required": false,
              "description": "Enables drag to scroll on carousel items.\nDefaults to: False"
            },
            {
              "name": "groupSize",
              "type": "number | \"auto\"",
              "required": false,
              "description": "Controls the number of carousel cards per navigation element, will default to 'auto'\nRecommended to set to '1' when using full page carousel cards."
            },
            {
              "name": "motion",
              "type": "CarouselMotion",
              "required": false,
              "description": "Sets motion type as either 'slide' or 'fade'\nDefaults: 'slide'\n\nUsers can also pass 'slide' & duration via CarouselMotion object to control carousel speed.\nDrag interactions are not affected because duration is then determined by the drag force.\n\nNote: Duration is not in milliseconds because Carousel uses an\nattraction physics simulation when scrolling instead of easings.\nOnly values between 20-60 are recommended, 25 is the default."
            },
            {
              "name": "onActiveIndexChange",
              "type": "EventHandler<CarouselIndexChangeData>",
              "required": false,
              "description": "Callback to notify a page change."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "whitespace",
              "type": "boolean",
              "required": false,
              "description": "Adds whitespace to start/end so that 'align' prop is always respected for current index\nDefaults to: False"
            }
          ]
        },
        {
          "name": "CarouselAutoplayButton",
          "kind": "component",
          "propsType": "CarouselAutoplayButtonProps",
          "description": "If the Carousel is on auto-play, the user may opt into pausing the auto-play feature via the\nCarouselAutoplayButton which must be present for auto-play to be enabled.\n\nIf CarouselAutoplayButton is present, auto-play will default to true on mount.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checked",
              "type": "boolean",
              "required": false,
              "description": "Defines the controlled checked state of the `ToggleButton`.\nIf passed, `ToggleButton` ignores the `defaultChecked` property.\nThis should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\ncorrect value based on handling `onClick` events and re-rendering.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultChecked",
              "type": "boolean",
              "required": false,
              "description": "Defines whether the `ToggleButton` is initially in a checked state or not when rendered.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "isAccessible",
              "type": "boolean",
              "required": false,
              "description": "Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style",
              "defaultValue": "false"
            },
            {
              "name": "onCheckedChange",
              "type": "EventHandler<CarouselAutoplayChangeData>",
              "required": false,
              "description": "Callback that informs the user when internal autoplay value has changed"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'rounded'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselButton",
          "kind": "component",
          "propsType": "CarouselButtonProps",
          "description": "A default navigation button that will set value to the next/previous page,\ndriven by it's type 'next' or 'previous'.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "navType",
              "type": "\"next\" | \"prev\"",
              "required": false,
              "description": "Dictates whether button will be of type go next or go previous\nDefault: 'next'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'rounded'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselCard",
          "kind": "component",
          "propsType": "CarouselCardProps",
          "description": "The defining wrapper of a carousel's indexed content, they will take up the full\nviewport of CarouselSlider or div wrapper,\nusers may place multiple items within this Card if desired, with consideration of viewport width.\n\nClickable actions within the content area are available via mouse and tab as expected,\nnon-active card content will be set to inert until moved to active card.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "autoSize",
              "type": "boolean",
              "required": false,
              "description": "Sets the card styling to be responsive based on content."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselNav",
          "kind": "component",
          "propsType": "CarouselNavProps",
          "description": "Used to jump to a card based on index, using arrow navigation via Tabster.\n\nThe children of this component will be wrapped in a context to\nprovide the appropriate value based on their index position.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\"",
              "required": false,
              "description": "Enables an alternate brand style when set to 'brand'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "NavButtonRenderFunction",
              "required": true,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "totalSlides",
              "type": "number",
              "required": false,
              "description": "The total number of slides available.\nUsers may override if using the component without a Carousel wrapper or implementing custom functionality."
            }
          ]
        },
        {
          "name": "CarouselNavButton",
          "kind": "component",
          "propsType": "CarouselNavButtonProps",
          "description": "The child element of CarouselNav, a singular button that will set the carousels active value on click.",
          "props": [
            {
              "name": "as",
              "type": "\"a\" | \"button\" | \"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselNavContainer",
          "kind": "component",
          "propsType": "CarouselNavContainerProps",
          "description": "CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "autoplay",
              "type": "WithSlotShorthandValue<(Omit<ButtonSlots, \"root\"> & Omit<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; } & { defaultChecked?: boolean | undefined; checked?: boolean | undefined; isAccessible?: boolean | undefined; } & Omit<CarouselAutoplayButtonSlots, \"root\"> & { onCheckedChange?: EventHandler<CarouselAutoplayChangeData> | undefined; } & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) | (Omit<ButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; } & { defaultChecked?: boolean | undefined; checked?: boolean | undefined; isAccessible?: boolean | undefined; } & Omit<CarouselAutoplayButtonSlots, \"root\"> & { onCheckedChange?: EventHandler<CarouselAutoplayChangeData> | undefined; } & RefAttributes<HTMLAnchorElement | HTMLButtonElement>)> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "autoplayTooltip",
              "type": "WithSlotShorthandValue<TooltipProps> | null",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "layout",
              "type": "\"inline\" | \"inline-wide\" | \"overlay\" | \"overlay-wide\" | \"overlay-expanded\"",
              "required": false,
              "description": "Default: 'inline'\nDefines the nav container layout:\n\n'inline' - Default controls inline with carousel view\n\n inline-wide - Similar to inline but places nav buttons on far left/right\n\n'overlay' - Controls overlaid on bottom of carousel viewport,\n\n'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n\n'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered"
            },
            {
              "name": "next",
              "type": "WithSlotShorthandValue<(Partial<Omit<ButtonSlots, \"root\"> & Omit<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; }> & Omit<CarouselButtonSlots, \"root\"> & Omit<{ as?: \"button\" | undefined; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { navType?: \"next\" | \"prev\" | undefined; }) | (Partial<Omit<ButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; }> & Omit<CarouselButtonSlots, \"root\"> & Omit<{ as?: \"button\" | undefined; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { navType?: \"next\" | \"prev\" | undefined; }) | (Partial<Omit<ButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; }> & Omit<CarouselButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { navType?: \"next\" | \"prev\" | undefined; })> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "nextTooltip",
              "type": "WithSlotShorthandValue<TooltipProps> | null",
              "required": false,
              "description": ""
            },
            {
              "name": "prev",
              "type": "WithSlotShorthandValue<(Partial<Omit<ButtonSlots, \"root\"> & Omit<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; }> & Omit<CarouselButtonSlots, \"root\"> & Omit<{ as?: \"button\" | undefined; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { navType?: \"next\" | \"prev\" | undefined; }) | (Partial<Omit<ButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; }> & Omit<CarouselButtonSlots, \"root\"> & Omit<{ as?: \"button\" | undefined; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { navType?: \"next\" | \"prev\" | undefined; }) | (Partial<Omit<ButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; }> & Omit<CarouselButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & { navType?: \"next\" | \"prev\" | undefined; })> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "prevTooltip",
              "type": "WithSlotShorthandValue<TooltipProps> | null",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselNavImageButton",
          "kind": "component",
          "propsType": "CarouselNavImageButtonProps",
          "description": "A variant child element of CarouselNav, a singular image button that displays a\npreview of card content and will set the carousels active value on click.",
          "props": [
            {
              "name": "as",
              "type": "\"a\" | \"button\" | \"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false"
            },
            {
              "name": "image",
              "type": "{ as?: \"img\" | undefined; } & Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, \"ref\"> & { ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null | undefined; }, \"children\"> & { children?: undefined; }",
              "required": true,
              "description": "Required: The image within the button"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselSlider",
          "kind": "component",
          "propsType": "CarouselSliderProps",
          "description": "CarouselSlider component - The viewport window that CarouselCards are contained within.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "cardFocus",
              "type": "boolean",
              "required": false,
              "description": "cardFocus sets the carousel slider as a focus group,\nenabling left/right navigation of elements.\n\nThis will also be passed into CarouselCards via context and set the appropriate focus attributes\n\nDefaults: false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "CarouselViewport",
          "kind": "component",
          "propsType": "CarouselViewportProps",
          "description": "CarouselViewport component - TODO: add more docs",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-carousel-carousel--default",
      "htmlPath": "components/Carousel/",
      "markdownPath": "components/Carousel.md"
    },
    {
      "id": "carousel-nav",
      "title": "CarouselNav",
      "summary": "Index-based pagination control for a Carousel.",
      "kind": "components",
      "route": "components/CarouselNav",
      "label": "CarouselNav",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/carousel-nav/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CarouselNav.md",
      "examples": [
        {
          "id": "components-carousel-carouselnav--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CarouselNav.stories.tsx",
          "description": "Switches between standard pagination buttons and image preview buttons.",
          "sourcePath": "source/examples/components-carousel-carouselnav--default.tsx",
          "sha256": "70be58845ae4af0ce9e57018c65e0ea296db833e389f79bf791d00b39acaa142",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CarouselNav",
          "kind": "component",
          "propsType": "CarouselNavProps",
          "description": "Used to jump to a card based on index, using arrow navigation via Tabster.\n\nThe children of this component will be wrapped in a context to\nprovide the appropriate value based on their index position.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\"",
              "required": false,
              "description": "Enables an alternate brand style when set to 'brand'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "NavButtonRenderFunction",
              "required": true,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "totalSlides",
              "type": "number",
              "required": false,
              "description": "The total number of slides available.\nUsers may override if using the component without a Carousel wrapper or implementing custom functionality."
            }
          ]
        }
      ],
      "defaultExampleId": "components-carousel-carouselnav--default",
      "htmlPath": "components/CarouselNav/",
      "markdownPath": "components/CarouselNav.md"
    },
    {
      "id": "checkbox",
      "title": "Checkbox",
      "summary": "Checkboxes let people select multiple options from a group or switch a single option on or off. To restrict someone to picking one option, try a radio group or dropdown.",
      "kind": "components",
      "route": "components/Checkbox",
      "label": "Checkbox",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=116-46830"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/checkbox/usage"
        }
      ],
      "aliases": [
        "/checkbox/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Checkbox.md",
      "examples": [
        {
          "id": "components-checkbox--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Checkbox.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-checkbox--default.tsx",
          "sha256": "7970889ad7269c9c44024a70ad7ab960b7c0a95aacd9d6611ed0e7d8ce16d0d9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--checked",
          "exportName": "Checked",
          "name": "Checked",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxChecked.stories.tsx",
          "description": "A checkbox can be initially checked using `defaultChecked`, or controlled via the `checked` property.",
          "sourcePath": "source/examples/components-checkbox--checked.tsx",
          "sha256": "d3ff48cc7e42be790328504d54ea600f7d27f189b0499a14f4565c3da1b6a005",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--circular",
          "exportName": "Circular",
          "name": "Circular",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxCircular.stories.tsx",
          "description": "A checkbox can have a circular shape.<br />**Usage warning**: Unless you are designing a tasks experience, we strongly discourage using this styling variant, as it can be confused with `RadioItem`.",
          "sourcePath": "source/examples/components-checkbox--circular.tsx",
          "sha256": "452f710bb62cf976b83a683e82c51a43cba50abbebcd00ac0923cb645c7ce944",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxDisabled.stories.tsx",
          "description": "A checkbox can be disabled.",
          "sourcePath": "source/examples/components-checkbox--disabled.tsx",
          "sha256": "0398394ee4e938b2a329066f3345fc1aa8c77953cfe52962e4ad212184fadfdc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--label-before",
          "exportName": "LabelBefore",
          "name": "Label Before",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxLabelBefore.stories.tsx",
          "description": "The label can be placed before the checkbox.",
          "sourcePath": "source/examples/components-checkbox--label-before.tsx",
          "sha256": "48bfdebd2f466e1ff8f3101368a3d3f2a906e3b3c452318c28bfb7725957ab91",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--label-wrapping",
          "exportName": "LabelWrapping",
          "name": "Label Wrapping",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxLabelWrapping.stories.tsx",
          "description": "The label will wrap if it is wider than the available space. The checkbox indicator will stay aligned to the first line of text.",
          "sourcePath": "source/examples/components-checkbox--label-wrapping.tsx",
          "sha256": "80f1e2bda6e7a403147c7d2bb7d20cf68f0e2424344592100773684b356e0585",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--large",
          "exportName": "Large",
          "name": "Large",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxLarge.stories.tsx",
          "description": "A checkbox can be large in size.",
          "sourcePath": "source/examples/components-checkbox--large.tsx",
          "sha256": "2c7d155d8e85a4d6afaddf12bcd0d390549a50194156a01d123c11bf16dddcee",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--mixed",
          "exportName": "Mixed",
          "name": "Mixed",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxMixed.stories.tsx",
          "description": "A checkbox can be initially mixed (also known as indeterminate) using `defaultChecked=\"mixed\"`, or controlled via `checked=\"mixed\"`.<br />In this example, the mixed state is used when a group of options has differing values.",
          "sourcePath": "source/examples/components-checkbox--mixed.tsx",
          "sha256": "14af8de9eafd9b8e4db205938ba955d8dc8b876d673e77c8e1d8c06914f01087",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-checkbox--required",
          "exportName": "Required",
          "name": "Required",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-checkbox/stories/src/Checkbox/CheckboxRequired.stories.tsx",
          "description": "When a checkbox is marked as `required`, its label also gets the required styling.",
          "sourcePath": "source/examples/components-checkbox--required.tsx",
          "sha256": "e8ab32816207c20e7d67540e4591567c6b1c7ff153b7c58e471db68f565df1ee",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Checkbox",
          "kind": "component",
          "propsType": "CheckboxProps",
          "description": "Checkboxes give people a way to select one or more items from a group,\nor switch between two mutually exclusive options (checked or unchecked).",
          "props": [
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checked",
              "type": "boolean | \"mixed\"",
              "required": false,
              "description": "The controlled value for the checkbox.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": "Checkboxes don't support children. To add a label, use the `label` prop."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultChecked",
              "type": "boolean | \"mixed\"",
              "required": false,
              "description": "Whether the checkbox should be rendered as checked by default."
            },
            {
              "name": "indicator",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | ({ as: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }) | null | undefined",
              "required": false,
              "description": "The checkbox, with the checkmark icon as its child when checked."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "Hidden input that handles the checkbox's functionality.\n\nThis is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\nexcept `className` and `style`, which remain on the root slot."
            },
            {
              "name": "label",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, \"required\"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined; size?: \"small\" | \"medium\" | \"large\" | undefined; weight?: \"regular\" | \"semibold\" | undefined; } & RefAttributes<HTMLLabelElement>> | null | undefined",
              "required": false,
              "description": "The Checkbox's label."
            },
            {
              "name": "labelPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "The position of the label relative to the checkbox indicator.",
              "defaultValue": "after"
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void)",
              "required": false,
              "description": "Callback to be called when the checked state value changes."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root element of the Checkbox.\n\nThe root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\nAll other native props will be applied to the primary slot: `input`"
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"square\"",
              "required": false,
              "description": "The shape of the checkbox indicator.\n\nThe `circular` variant is only recommended to be used in a tasks-style UI (checklist),\nsince it otherwise could be confused for a `RadioItem`.",
              "defaultValue": "square"
            },
            {
              "name": "size",
              "type": "\"medium\" | \"large\"",
              "required": false,
              "description": "The size of the checkbox indicator.",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-checkbox--default",
      "htmlPath": "components/Checkbox/",
      "markdownPath": "components/Checkbox.md"
    },
    {
      "id": "codeblock",
      "title": "CodeBlock",
      "summary": "Display source code as plain text or with syntax highlighting.",
      "kind": "components",
      "route": "components/CodeBlock",
      "label": "CodeBlock",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/codeblock/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CodeBlock.md",
      "examples": [
        {
          "id": "components-codeblock--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CodeBlock.stories.tsx",
          "description": "`CodeBlock` syntax-highlights a string of source code based on the\n`language` prop (e.g. `tsx`, `css`). Omitting `language` renders the code\nas plain, un-highlighted text.",
          "sourcePath": "source/examples/components-codeblock--default.tsx",
          "sha256": "473aeb24e4a8a4d4a3cac9d7f97d79c4295fc3327fcbaa775ecfaac1ef73bf49",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-codeblock--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/CodeBlock.stories.tsx",
          "description": "`CodeBlock` accepts an `appearance` prop mirroring `Card`'s appearances:\n`filled-alternative` (default), `filled`, `outline`, and `subtle`.",
          "sourcePath": "source/examples/components-codeblock--appearance.tsx",
          "sha256": "2ec0b636996963cda2b7c988eb30610afbe1af6eeb0e14257c7cd6b880affbe4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-codeblock--fixed-height",
          "exportName": "FixedHeight",
          "name": "Fixed Height",
          "origin": "local",
          "originalSource": "src/stories/components/CodeBlock.stories.tsx",
          "description": "Constrain a long code sample to a fixed height, then remove the height to\nreveal the complete source when the user selects Show All.",
          "sourcePath": "source/examples/components-codeblock--fixed-height.tsx",
          "sha256": "9221c7c6eec32762365738ba5ba54e92bf75f8d1f947dad045be8cd3971afcd8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-codeblock--header",
          "exportName": "Header",
          "name": "Header",
          "origin": "local",
          "originalSource": "src/stories/components/CodeBlock.stories.tsx",
          "description": "Header content can contain any React node. These examples show a divided\nheader with controls and a subtle header with a language tag.",
          "sourcePath": "source/examples/components-codeblock--header.tsx",
          "sha256": "081b84fe016a9a1f5d796d3cb78c8d003645ea5005ba6fa1510dc97252828eb5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-codeblock--loading",
          "exportName": "Loading",
          "name": "Loading",
          "origin": "local",
          "originalSource": "src/stories/components/CodeBlock.stories.tsx",
          "description": "Use `fallbackContent` for a loading or empty state. It renders only while\n`code` is empty or omitted, and the copy action remains hidden.",
          "sourcePath": "source/examples/components-codeblock--loading.tsx",
          "sha256": "23058287ed5ef38d458d707e4fb9c9521270f45e40de04e71a6317485df0ef79",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CodeBlock",
          "kind": "component",
          "propsType": "CodeBlockProps",
          "description": "Render source code with syntax highlighting via `rehype-highlight`.",
          "props": [
            {
              "name": "appearance",
              "type": "\"filled\" | \"outline\" | \"subtle\" | \"filled-alternative\"",
              "required": false,
              "description": "Visual style of the surrounding surface, matching `Card`'s appearances.\n`subtle` is borderless, transparent, and also drops the inner padding.",
              "defaultValue": "'filled-alternative'"
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "code",
              "type": "string",
              "required": false,
              "description": "The source code to highlight."
            },
            {
              "name": "fallbackContent",
              "type": "ReactNode",
              "required": false,
              "description": "Content rendered in place of the code when `code` is empty or omitted."
            },
            {
              "name": "footer",
              "type": "ReactNode",
              "required": false,
              "description": "Optional content rendered in a footer below the code."
            },
            {
              "name": "footerAppearance",
              "type": "\"subtle\" | \"divided\"",
              "required": false,
              "description": "- divided footer separates the code and footer with a border\n- subtle footer has no border and is flush with the codeblock",
              "defaultValue": "'divided'"
            },
            {
              "name": "footerClassName",
              "type": "string",
              "required": false,
              "description": "Optional class name for the footer element."
            },
            {
              "name": "header",
              "type": "ReactNode",
              "required": false,
              "description": "Optional content rendered in a header above the code."
            },
            {
              "name": "headerAppearance",
              "type": "\"subtle\" | \"divided\"",
              "required": false,
              "description": "- divided header splits the codeblack and header with a border\n- subtle header has no border and is flush with the codeblock",
              "defaultValue": "'divided'"
            },
            {
              "name": "headerClassName",
              "type": "string",
              "required": false,
              "description": "Optional class name for the header element."
            },
            {
              "name": "hideCopybutton",
              "type": "boolean",
              "required": false,
              "description": "Whether to hide the copy button.",
              "defaultValue": "false"
            },
            {
              "name": "language",
              "type": "string",
              "required": false,
              "description": "Language hint (e.g. `\"js\"`, `\"ts\"`, `\"css\"`). Sets the `language-*` class\n`rehype-highlight` keys off. When omitted, the code is left un-highlighted."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-codeblock--default",
      "htmlPath": "components/CodeBlock/",
      "markdownPath": "components/CodeBlock.md"
    },
    {
      "id": "color-picker",
      "title": "ColorPicker",
      "summary": "Lets users browse and select a color across a spectrum. Subcomponents: ColorArea, ColorSlider, AlphaSlider.",
      "kind": "components",
      "route": "components/ColorPicker",
      "label": "ColorPicker",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/color-picker/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/ColorPicker.md",
      "examples": [
        {
          "id": "components-colorpicker--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/ColorPicker.stories.tsx",
          "description": "Selects a color and keeps HSV, RGB, hexadecimal, and alpha inputs synchronized.",
          "sourcePath": "source/examples/components-colorpicker--default.tsx",
          "sha256": "d1b77d7318dc9f52107d0f08123d8605f8ef762b646ae3b0dba7afadd370f160",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--alpha-slider-default",
          "exportName": "AlphaSliderDefault",
          "name": "Alpha Slider Default",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/AlphaSliderDefault.stories.tsx",
          "description": "The `AlphaSlider` allows users to change the alpha channel of a color value.",
          "sourcePath": "source/examples/components-colorpicker--alpha-slider-default.tsx",
          "sha256": "786ea25465096b369ff3f6f237feece9cb9f2735a4247781ac6d1ed244b8e2d4",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--color-and-swatch-picker",
          "exportName": "ColorAndSwatchPicker",
          "name": "Color And Swatch Picker",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-colorpicker--color-and-swatch-picker.tsx",
          "sha256": "aef1fb4cbb3ba3b2c8788d5d7d0cccb7347522f26c6e1ba5b21e09584e379fdc",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--color-area-default",
          "exportName": "ColorAreaDefault",
          "name": "Color Area Default",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAreaDefault.stories.tsx",
          "description": "The `ColorArea` component allows users to adjust two channels of HSB color values against a two-dimensional gradient background.",
          "sourcePath": "source/examples/components-colorpicker--color-area-default.tsx",
          "sha256": "7622747b2ec2cb593e1c47a3b20be1ff905e2f0bff43ef79087a220093979acf",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--color-picker-popup",
          "exportName": "ColorPickerPopup",
          "name": "Color Picker Popup",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerPopup.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-colorpicker--color-picker-popup.tsx",
          "sha256": "74ba891f7d79787e4ebc09bf5a48c2924e86a25d2d4288a93e2ac908bd068f2a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--color-picker-shape",
          "exportName": "ColorPickerShape",
          "name": "Color Picker Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorPickerShape.stories.tsx",
          "description": "The `shape` prop sets border-radius of the ColorPicker sub-components. The default is `rounded`.",
          "sourcePath": "source/examples/components-colorpicker--color-picker-shape.tsx",
          "sha256": "f4531ab27e58f27137846fbd8716752d6cd141a7b2c825a71f451deb636115ee",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--color-slider-channels",
          "exportName": "ColorSliderChannels",
          "name": "Color Slider Channels",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorSliderChannels.stories.tsx",
          "description": "The `ColorSlider` allows users to choose color channels like hue, saturation, and value.",
          "sourcePath": "source/examples/components-colorpicker--color-slider-channels.tsx",
          "sha256": "0b7729fdbcbe7b572777c05bb0ddb97a4e243d098d61098344c2e0490e276c9f",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-colorpicker--color-slider-default",
          "exportName": "ColorSliderDefault",
          "name": "Color Slider Default",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorSliderDefault.stories.tsx",
          "description": "The `ColorSlider` allows users to change the hue aspect of a color value.",
          "sourcePath": "source/examples/components-colorpicker--color-slider-default.tsx",
          "sha256": "f0890b3fca859a3192007c2eeecba5539ebc61596c6d81414a4cc65f0767a6c6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "ColorPicker",
          "kind": "component",
          "propsType": "ColorPickerProps",
          "description": "ColorPicker component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "HsvColor",
              "required": false,
              "description": "Selected color."
            },
            {
              "name": "onColorChange",
              "type": "EventHandler<ColorPickerOnChangeData>",
              "required": false,
              "description": "Callback for when the user changes the color."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"rounded\" | \"square\"",
              "required": false,
              "description": "ColorPicker shape"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "AlphaSlider",
          "kind": "component",
          "propsType": "AlphaSliderProps",
          "description": "AlphaSlider component",
          "props": [
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "HsvColor",
              "required": false,
              "description": "Color of the ColorPicker"
            },
            {
              "name": "defaultColor",
              "type": "HsvColor",
              "required": false,
              "description": "The starting color for an uncontrolled ColorSlider."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "onChange",
              "type": "EventHandler<SliderOnChangeData>",
              "required": false,
              "description": "Triggers a callback when the value has been changed. This will be called on every individual step."
            },
            {
              "name": "rail",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"rounded\" | \"square\"",
              "required": false,
              "description": "ColorPicker shape"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "thumb",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "transparency",
              "type": "boolean",
              "required": false,
              "description": "The `transparency` property determines how the alpha channel is interpreted.\n- When `false`, the alpha channel represents the opacity of the color.\n- When `true`, the alpha channel represents the transparency of the color.\nFor example, a 30% transparent color has 70% opacity."
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "Render the Slider in a vertical orientation, smallest value on the bottom.",
              "defaultValue": "`false`"
            }
          ]
        },
        {
          "name": "ColorArea",
          "kind": "component",
          "propsType": "ColorAreaProps",
          "description": "ColorArea component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "HsvColor",
              "required": false,
              "description": "The current color of the ColorArea."
            },
            {
              "name": "defaultColor",
              "type": "HsvColor",
              "required": false,
              "description": "The starting value for an uncontrolled ColorArea."
            },
            {
              "name": "inputX",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "inputY",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "onChange",
              "type": "EventHandler<ColorAreaOnColorChangeData>",
              "required": false,
              "description": "Triggers a callback when the value has been changed. This will be called on every individual step."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"rounded\" | \"square\"",
              "required": false,
              "description": "ColorPicker shape"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "thumb",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ColorSlider",
          "kind": "component",
          "propsType": "ColorSliderProps",
          "description": "ColorSlider component",
          "props": [
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "channel",
              "type": "\"value\" | \"hue\" | \"saturation\"",
              "required": false,
              "description": "Color channel of the Slider.",
              "defaultValue": "`hue`"
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "HsvColor",
              "required": false,
              "description": "Color of the ColorPicker"
            },
            {
              "name": "defaultColor",
              "type": "HsvColor",
              "required": false,
              "description": "The starting color for an uncontrolled ColorSlider."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "onChange",
              "type": "EventHandler<SliderOnChangeData>",
              "required": false,
              "description": "Triggers a callback when the value has been changed. This will be called on every individual step."
            },
            {
              "name": "rail",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"rounded\" | \"square\"",
              "required": false,
              "description": "ColorPicker shape"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "thumb",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "Render the Slider in a vertical orientation, smallest value on the bottom.",
              "defaultValue": "`false`"
            }
          ]
        }
      ],
      "defaultExampleId": "components-colorpicker--default",
      "htmlPath": "components/ColorPicker/",
      "markdownPath": "components/ColorPicker.md"
    },
    {
      "id": "combobox",
      "title": "Combobox",
      "summary": "Text field combined with a dropdown for selecting an option or typing a custom value.",
      "kind": "components",
      "route": "components/Combobox",
      "label": "Combobox",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/combobox/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Combobox.md",
      "examples": [
        {
          "id": "components-combobox--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Combobox.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-combobox--default.tsx",
          "sha256": "bb36a440c4099e37f6f2979b265d45c62399f219dc755baa96bb70350ced8093",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--active-option-change",
          "exportName": "ActiveOptionChange",
          "name": "Active Option Change",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxActiveOptionChange.stories.tsx",
          "description": "OnActiveOptionChange notifies the user when the active option in the Combobox was changed by keyboard. To react on mouse hover events, use onMouseEnter on the invididual options.",
          "sourcePath": "source/examples/components-combobox--active-option-change.tsx",
          "sha256": "634e6a40de4e82db4461dc7a510432843a0766c05ab0bb1286956a7771ee9097",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxAppearance.stories.tsx",
          "description": "A Combobox can have the following `appearance` variants:\n- `outline` (default): has a border around all four sides.\n- `underline`: only has a bottom border.\n- `filled-darker`: no border, only a subtle background color difference against a white page.\n- `filled-lighter`: no border, and a white background.\n",
          "sourcePath": "source/examples/components-combobox--appearance.tsx",
          "sha256": "f7bf9508fc239f0efb6cd334e1f579d3b6260e22ca260492ec90405982ec7d75",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--clearable",
          "exportName": "Clearable",
          "name": "Clearable",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxClearable.stories.tsx",
          "description": "A Combobox can be clearable and let users remove their selection. Note: this is not supported in multiselect mode yet.",
          "sourcePath": "source/examples/components-combobox--clearable.tsx",
          "sha256": "17bfbfe47af25fee7d8fa855168b6d177b36046427c98f5380c13f706a55c2ef",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--complex-options",
          "exportName": "ComplexOptions",
          "name": "Complex Options",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxComplexOptions.stories.tsx",
          "description": "Options are defined as JSX children, and can include nested elements or other components. When this is the case, the Option's `text` prop should be the plain text version of the option, and is used as the Combobox value when the option is selected. Options should never contain interactive elements, such as buttons or links.",
          "sourcePath": "source/examples/components-combobox--complex-options.tsx",
          "sha256": "e860c55f474cafeaf9a6345f4b2026a713262a47a23a6782b7b06a24d7d50ee7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxControlled.stories.tsx",
          "description": "A Combobox may have controlled or controlled selection and value. When the selection is controlled or a default selection is provided, a controlled value or default value must also be defined. Otherwise, the Combobox will not be able to display a value before the Options are rendered.",
          "sourcePath": "source/examples/components-combobox--controlled.tsx",
          "sha256": "6caf13c2187f6a47371b24554f765c719d57292d9e0c8d8d501bd78a11dded2f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--controlling-open-and-close",
          "exportName": "ControllingOpenAndClose",
          "name": "Controlling Open And Close",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxControllingOpenAndClose.stories.tsx",
          "description": "The opening and close of the `Combobox` can be controlled with your own state.\nThe `onOpenChange` callback will provide the hints for the state and triggers based on the appropriate\nevent.\n\n_When controlling the open state of the `Combobox`, extra effort is required to ensure that interactions are_\n_still appropriate and that keyboard accessibility does not degrade._",
          "sourcePath": "source/examples/components-combobox--controlling-open-and-close.tsx",
          "sha256": "95259e85077d7f057ef3f66bd73768747975fa82eac66b970d181df4d8ad841e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--custom-options",
          "exportName": "CustomOptions",
          "name": "Custom Options",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxCustomOptions.stories.tsx",
          "description": "Options and OptionGroups can be extended and customized.Here `OptionGroup` is wrapped in `CustomOptionGroup`,which adds a custom label style and takes an `options` array prop which is mapped to child Option elements.`Option` is also wrapped in `CustomOption`, which adds a custom check icon.",
          "sourcePath": "source/examples/components-combobox--custom-options.tsx",
          "sha256": "8001d63734dfdd21474a1039b80fc9d6e40e403f2608c18382b30abb5c4ad883",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-combobox--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxDisabled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-combobox--disabled.tsx",
          "sha256": "5fae80a82d6ea89b8b707aeef86aa802edb0136606e2b5a729cc603960a88245",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--filtering",
          "exportName": "Filtering",
          "name": "Filtering",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFiltering.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-combobox--filtering.tsx",
          "sha256": "73f58c184ec75cda9b979d7f89acdf1ba8ec31392cf76f9fdda8527cec7c1b02",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--freeform",
          "exportName": "Freeform",
          "name": "Freeform",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxFreeform.stories.tsx",
          "description": "Combobox supports the `freeform` prop, which allows freeform text input. Implementing filtering together with `freeform` is generally recommended.We also recommend displaying a custom freeform string if the user input doesn't match an existing option.",
          "sourcePath": "source/examples/components-combobox--freeform.tsx",
          "sha256": "05a8abc9c061e2de8dab76ddf2397e7e324b4b5c76c60be7af098c3e2eabe981",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--grouped",
          "exportName": "Grouped",
          "name": "Grouped",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxGrouped.stories.tsx",
          "description": "Combobox options can be semantically grouped with the `OptionGroup` element, with an optional label.",
          "sourcePath": "source/examples/components-combobox--grouped.tsx",
          "sha256": "65a18f2b8e0b12b2954ef1298a8e885445e8857d208446c826049ddfd80883ef",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--inline-label",
          "exportName": "InlineLabel",
          "name": "Inline Label",
          "origin": "local",
          "originalSource": "src/stories/components/Combobox.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-combobox--inline-label.tsx",
          "sha256": "18c3f04e82fd2b8efc7c60a2c47d7d74b521429aa920aae137ec298a143a32a3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--multiselect",
          "exportName": "Multiselect",
          "name": "Multiselect",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselect.stories.tsx",
          "description": "Combobox supports multiselect, and options within a multiselect will display checkbox icons.",
          "sourcePath": "source/examples/components-combobox--multiselect.tsx",
          "sha256": "b2373548186a2cde9efe17c49f31aa555f75bed6515dacc122f015e4a4766569",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--multiselect-with-tags",
          "exportName": "MultiselectWithTags",
          "name": "Multiselect With Tags",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.stories.tsx",
          "description": "Combobox can display multiselect values in custom tags. This example uses a controlled selection so the tags can be used to remove selected options.",
          "sourcePath": "source/examples/components-combobox--multiselect-with-tags.tsx",
          "sha256": "a63c84b95c9b9fdf93651b75aee9c79d7cebc1e0922a6409061fcb0bfbd7dbf1",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-combobox--multiselect-with-value-string",
          "exportName": "MultiselectWithValueString",
          "name": "Multiselect With Value String",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithValueString.stories.tsx",
          "description": "Multiselect Combobox supports using a controlled value todisplay selected options when not in focus, similar to v8 behavior.We recommend using tags rather than the value string when possible,since they have better UX and accessibility.",
          "sourcePath": "source/examples/components-combobox--multiselect-with-value-string.tsx",
          "sha256": "7abebcd7fea15c15a2f61141224655e94104a269d209ea84e8af556ca3ff076c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxSize.stories.tsx",
          "description": "A Combobox's size can be set to `small`, `medium` (default), or `large`.",
          "sourcePath": "source/examples/components-combobox--size.tsx",
          "sha256": "ad6af7b8ea82a1af848c6f3f1f4bb9efd5695c04563cae9d2bf59a62fe5ddc40",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--truncate",
          "exportName": "Truncate",
          "name": "Truncate",
          "origin": "local",
          "originalSource": "src/stories/components/Combobox.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-combobox--truncate.tsx",
          "sha256": "084b943c4725112e9fcda9b1eef1c08e39b39b75c955aa2764c9e50f029f2fa5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-combobox--virtualizer",
          "exportName": "Virtualizer",
          "name": "Virtualizer",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Combobox/ComboboxVirtualizer.stories.tsx",
          "description": "A Combobox can use Virtualizer to display a large number of options\nTo manually control the maxHeight of the listbox, refer to the [positioning autoSize property](https://storybooks.fluentui.dev/react/?path=/docs/concepts-developer-positioning-components--docs#auto-size-for-small-viewport)",
          "sourcePath": "source/examples/components-combobox--virtualizer.tsx",
          "sha256": "6ddd335c92081973364bf4126348cc1aa2ba94f27e175c098af9281819108ae5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-components/unstable",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Combobox",
          "kind": "component",
          "propsType": "ComboboxProps",
          "description": "A Combobox component that extends Fluent UI's Combobox with an inline label.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the combobox trigger.",
              "defaultValue": "'outline'"
            },
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "ReactNode",
              "required": false,
              "description": "The primary slot, `<input>`, does not support children so we need to explicitly include it here."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "clearable",
              "type": "boolean",
              "required": false,
              "description": "If set, the combobox will show an icon to clear the current value."
            },
            {
              "name": "clearIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown clear icon"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "The default open state when open is uncontrolled"
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "defaultValue",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "The default value displayed in the trigger input or button when the combobox's value is uncontrolled"
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false"
            },
            {
              "name": "dynamicWidth",
              "type": "boolean",
              "required": false,
              "description": "Collapse the control to its content width when nothing is selected and\ngrow it with the typed/selected content. Only available when `label` is set."
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown arrow icon"
            },
            {
              "name": "freeform",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "inlinePopup",
              "type": "boolean",
              "required": false,
              "description": "Render the combobox's popup inline in the DOM.\nThis has accessibility benefits, particularly for touch screen readers."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "The primary slot, an input with role=\"combobox\""
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "Optional inline label rendered inside the control, before the value."
            },
            {
              "name": "listbox",
              "type": "WithSlotShorthandValue<Omit<ListboxSlots, \"root\"> & Omit<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }, \"ref\"> & SelectionProps & { disableAutoFocus?: boolean | undefined; } & RefAttributes<HTMLDivElement>> | null | undefined",
              "required": false,
              "description": "The dropdown listbox slot"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "multiselect",
              "type": "boolean",
              "required": false,
              "description": "Sets the selection type to multiselect.\nSet this to true for multiselect, even if fully controlling selection state.\nThis enables styles and accessibility properties to be set.",
              "defaultValue": "false"
            },
            {
              "name": "onActiveOptionChange",
              "type": "EventHandler<ActiveOptionChangeData>",
              "required": false,
              "description": ""
            },
            {
              "name": "onOpenChange",
              "type": "((e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void)",
              "required": false,
              "description": "Callback when the open/closed state of the dropdown changes"
            },
            {
              "name": "onOptionSelect",
              "type": "((event: SelectionEvents, data: OptionOnSelectData) => void)",
              "required": false,
              "description": "Callback when an option is selected"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Sets the open/closed state of the dropdown.\nUse together with onOpenChange to fully control the dropdown's visibility"
            },
            {
              "name": "placeholder",
              "type": "string",
              "required": false,
              "description": "If set, the placeholder will show when no value is selected"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configure the positioning of the combobox dropdown.\nPlease refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\nfor more details."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root combobox slot"
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls the size of the combobox faceplate",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncateTextOverflow",
              "type": "boolean",
              "required": false,
              "description": "Controls text overflow behavior for the value. When true, long text is truncated with an ellipsis."
            },
            {
              "name": "value",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "The value displayed by the Combobox.\nUse this with `onOptionSelect` to directly control the displayed value string"
            }
          ]
        },
        {
          "name": "Listbox",
          "kind": "component",
          "propsType": "ListboxProps",
          "description": "Listbox component: a standalone selection control, or the popup in a Combobox",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false"
            },
            {
              "name": "multiselect",
              "type": "boolean",
              "required": false,
              "description": "Sets the selection type to multiselect.\nSet this to true for multiselect, even if fully controlling selection state.\nThis enables styles and accessibility properties to be set.",
              "defaultValue": "false"
            },
            {
              "name": "onOptionSelect",
              "type": "((event: SelectionEvents, data: OptionOnSelectData) => void)",
              "required": false,
              "description": "Callback when an option is selected"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "Option",
          "kind": "component",
          "propsType": "OptionProps",
          "description": "Option component: a styled child option of a Combobox",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The check icon that is visible for selected options"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Sets an option to the `disabled` state.\nDisabled options cannot be selected, but are still keyboard navigable"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "text",
              "type": "string",
              "required": false,
              "description": "An optional override the string value of the Option's display text,\ndefaulting to the Option's child content.\nThis is used as the Dropdown button's or Combobox input's value when the option is selected,\nand as the comparison for type-to-find keyboard functionality.\nThe string value of the Option's display text when the Option's children are not a string.\nThis is used as the Dropdown button's or Combobox input's value when the option is selected,\nand as the comparison for type-to-find keyboard functionality."
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "Defines a unique identifier for the option.\nUse this to control selectedOptions, or to get the option value in the onOptionSelect callback.\nDefaults to `text` if not provided."
            }
          ]
        }
      ],
      "defaultExampleId": "components-combobox--default",
      "htmlPath": "components/Combobox/",
      "markdownPath": "components/Combobox.md"
    },
    {
      "id": "compound-button",
      "title": "Compound button",
      "summary": "A compound button includes a main title and an additional description of the title. Use it when it’s helpful to include more detail.",
      "kind": "components",
      "route": "components/CompoundButton",
      "label": "Compound button",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=161008-6469"
        },
        {
          "label": "Fluent button guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/button/usage"
        }
      ],
      "aliases": [
        "/compound-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CompoundButton.md",
      "examples": [
        {
          "id": "components-button-compoundbutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CompoundButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-compoundbutton--default.tsx",
          "sha256": "b825db78bc7772c37b85f4e428439bb2f5c8b35d96093824d995a5f3eb79c4d1",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-compoundbutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonAppearance.stories.tsx",
          "description": "- `(undefined)`: the compound button appears with the default style\n- `primary`: emphasizes the compound button as a primary action.\n- `outline`: removes background styling.\n- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n- `transparent`: removes background and border styling.\n",
          "sourcePath": "source/examples/components-button-compoundbutton--appearance.tsx",
          "sha256": "c81990164bf48635f2408c618cd97a042ee36d2fa3bbae16ce82447f68918e04",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-compoundbutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonDisabled.stories.tsx",
          "description": "A compound button can be `disabled` or `disabledFocusable`.\n              `disabledFocusable` is used in scenarios where it is important to keep a consistent tab order\n              for screen reader and keyboard users. The primary example of this pattern is when\n              the disabled compound button is in a menu or a commandbar and is seldom used for standalone buttons.",
          "sourcePath": "source/examples/components-button-compoundbutton--disabled.tsx",
          "sha256": "03e359314155d3905521b40bdf27440d648fffab6a03d30f42ddd5bd44aad8a5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-compoundbutton--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonIcon.stories.tsx",
          "description": "The CompoundButton has an `icon` slot that, if specified, renders an icon either `before` or `after` the children, as specified by the `iconPosition` prop.",
          "sourcePath": "source/examples/components-button-compoundbutton--icon.tsx",
          "sha256": "f9a7858cd42a465f595cd7508fe00d253c628f85485afe1b2afbe038f320ae5c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-compoundbutton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonShape.stories.tsx",
          "description": "A compound button can be rounded, circular, or square.",
          "sourcePath": "source/examples/components-button-compoundbutton--shape.tsx",
          "sha256": "375d6eb38d938c9d548201a86ae325c60787e5c18aec03fea18482a805821a96",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-compoundbutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonSize.stories.tsx",
          "description": "A compound button supports `small`, `medium` and `large` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-button-compoundbutton--size.tsx",
          "sha256": "9eee8716d7c83a4a6f698cd52ca9e981a2fd21ea263184118c7f65637aac02e3",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-compoundbutton--with-long-text",
          "exportName": "WithLongText",
          "name": "With Long Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/CompoundButton/CompoundButtonWithLongText.stories.tsx",
          "description": "Text wraps after it hits the max width of the component.",
          "sourcePath": "source/examples/components-button-compoundbutton--with-long-text.tsx",
          "sha256": "7def99b682cfb919880d6a6958fd1c2ac5a4c8224c835539b23bcaecfcd1364e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CompoundButton",
          "kind": "component",
          "propsType": "CompoundButtonProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "contentContainer",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Container that wraps the children and the secondaryContent slot."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Second line of text that describes the action this button takes."
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'circular'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-compoundbutton--default",
      "htmlPath": "components/CompoundButton/",
      "markdownPath": "components/CompoundButton.md"
    },
    {
      "id": "copy-button",
      "title": "CopyButton",
      "summary": "A Button preset that copies text to the clipboard with transient confirmation.",
      "kind": "components",
      "route": "components/CopyButton",
      "label": "CopyButton",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/copy-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CopyButton.md",
      "examples": [
        {
          "id": "components-button-copybutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CopyButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-copybutton--default.tsx",
          "sha256": "c69306865769ffc8bf8328307d7fb27609cce17b22763a2c120580c0dc5836fe",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CopyButton",
          "kind": "component",
          "propsType": "CopyButtonProps",
          "description": "A Button preset for copy-to-clipboard actions.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "aria-label",
              "type": "string",
              "required": false,
              "description": "Defines a string value that labels the current element.\nRequired so screen readers can differentiate multiple copy buttons on a page."
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "contentToCopy",
              "type": "string | undefined",
              "required": true,
              "description": "Text written to the clipboard when the button is clicked."
            },
            {
              "name": "copiedMessage",
              "type": "string",
              "required": false,
              "description": "Confirmation shown above the button after copying. Defaults to \"Copied\"."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "onCopyError",
              "type": "(() => void)",
              "required": false,
              "description": "Called when the clipboard write fails."
            },
            {
              "name": "onCopySuccess",
              "type": "(() => void)",
              "required": false,
              "description": "Called after the clipboard write completes successfully."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'rounded'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-copybutton--default",
      "htmlPath": "components/CopyButton/",
      "markdownPath": "components/CopyButton.md"
    },
    {
      "id": "core-aifluent-provider",
      "title": "CoreAIFluentProvider",
      "summary": "Root provider applying the CoreAI theme, global styles, and component defaults over Fluent's FluentProvider.",
      "kind": "components",
      "route": "components/CoreAIFluentProvider",
      "label": "CoreAIFluentProvider",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/core-aifluent-provider/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CoreAIFluentProvider.md",
      "examples": [
        {
          "id": "components-coreaifluentprovider--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "Provide the CoreAI theme to a component subtree.",
          "sourcePath": "source/examples/components-coreaifluentprovider--default.tsx",
          "sha256": "f8f1b5b97a2e3294e4b4764302bf12d8831a36fa458c7330a006efc3c2429abe",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-coreaifluentprovider--azure-brand-theme",
          "exportName": "AzureBrandTheme",
          "name": "Azure Brand Theme",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "Pre-built Azure / Coherence brand themes. These apply the Azure blue brand\nramp while sharing CoreAI's neutral palette, Aptos fonts, and interactive\nbackground tokens.",
          "sourcePath": "source/examples/components-coreaifluentprovider--azure-brand-theme.tsx",
          "sha256": "b30499058d42629f5e5cf1633573f818b793935ba6c0129bfe58238051f92374",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-coreaifluentprovider--custom-brand-theme",
          "exportName": "CustomBrandTheme",
          "name": "Custom Brand Theme",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "Customize the brand colors and feed the resulting theme to a nested\n`CoreAIFluentProvider`. Each provider re-themes only its own subtree, so the\nsurrounding Storybook canvas keeps the toolbar-selected CoreAI theme.",
          "sourcePath": "source/examples/components-coreaifluentprovider--custom-brand-theme.tsx",
          "sha256": "d93047cff7aa7680d2e4cbd679543aab805f50302e55585ebccc2f654c952383",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-coreaifluentprovider--default-theme",
          "exportName": "DefaultTheme",
          "name": "Default Theme",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "The default CoreAI theme in light and dark modes side by side.",
          "sourcePath": "source/examples/components-coreaifluentprovider--default-theme.tsx",
          "sha256": "863973b267ab8559e9b3434864bf5aeed6f5970d0e5a123fdb0067e0c15fd7f6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "CoreAIFluentProvider",
          "kind": "component",
          "propsType": "CoreAIFluentProviderProps",
          "description": "",
          "props": [
            {
              "name": "applyStylesToPortals",
              "type": "boolean",
              "required": false,
              "description": "Passes styles applied to a component down to portals if enabled.",
              "defaultValue": "true"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "customStyleHooks_unstable",
              "type": "Partial<{ useAccordionHeaderStyles_unstable: CustomStyleHook; useAccordionItemStyles_unstable: CustomStyleHook; useAccordionPanelStyles_unstable: CustomStyleHook; useAccordionStyles_unstable: CustomStyleHook; useAlphaSliderStyles_unstable: CustomStyleHook; useAvatarGroupItemStyles_unstable: CustomStyleHook; useAvatarGroupPopoverStyles_unstable: CustomStyleHook; useAvatarGroupStyles_unstable: CustomStyleHook; useAvatarStyles_unstable: CustomStyleHook; useBadgeStyles_unstable: CustomStyleHook; useBreadcrumbButtonStyles_unstable: CustomStyleHook; useBreadcrumbDividerStyles_unstable: CustomStyleHook; useBreadcrumbItemStyles_unstable: CustomStyleHook; useBreadcrumbStyles_unstable: CustomStyleHook; useButtonStyles_unstable: CustomStyleHook; useCardFooterStyles_unstable: CustomStyleHook; useCardHeaderStyles_unstable: CustomStyleHook; useCardPreviewStyles_unstable: CustomStyleHook; useCardStyles_unstable: CustomStyleHook; useCarouselAutoplayButtonStyles_unstable: CustomStyleHook; useCarouselButtonStyles_unstable: CustomStyleHook; useCarouselCardStyles_unstable: CustomStyleHook; useCarouselNavButtonStyles_unstable: CustomStyleHook; useCarouselNavContainerStyles_unstable: CustomStyleHook; useCarouselNavImageButtonStyles_unstable: CustomStyleHook; useCarouselNavStyles_unstable: CustomStyleHook; useCarouselSliderStyles_unstable: CustomStyleHook; useCarouselStyles_unstable: CustomStyleHook; useCarouselViewportStyles_unstable: CustomStyleHook; useCheckboxStyles_unstable: CustomStyleHook; useComboboxStyles_unstable: CustomStyleHook; useCompoundButtonStyles_unstable: CustomStyleHook; useColorAreaStyles_unstable: CustomStyleHook; useColorPickerStyles_unstable: CustomStyleHook; useColorSliderStyles_unstable: CustomStyleHook; useColorSwatchStyles_unstable: CustomStyleHook; useCounterBadgeStyles_unstable: CustomStyleHook; useDataGridBodyStyles_unstable: CustomStyleHook; useDataGridCellStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridRowStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; useDataGridStyles_unstable: CustomStyleHook; useDialogActionsStyles_unstable: CustomStyleHook; useDialogBodyStyles_unstable: CustomStyleHook; useDialogContentStyles_unstable: CustomStyleHook; useDialogSurfaceStyles_unstable: CustomStyleHook; useDialogTitleStyles_unstable: CustomStyleHook; useDividerStyles_unstable: CustomStyleHook; useDrawerBodyStyles_unstable: CustomStyleHook; useDrawerFooterStyles_unstable: CustomStyleHook; useDrawerHeaderNavigationStyles_unstable: CustomStyleHook; useDrawerHeaderStyles_unstable: CustomStyleHook; useDrawerHeaderTitleStyles_unstable: CustomStyleHook; useDrawerInlineStyles_unstable: CustomStyleHook; useDrawerOverlayStyles_unstable: CustomStyleHook; useOverlayDrawerSurfaceStyles_unstable: CustomStyleHook; useDrawerStyles_unstable: CustomStyleHook; useDropdownStyles_unstable: CustomStyleHook; useEmptySwatchStyles_unstable: CustomStyleHook; useFieldStyles_unstable: CustomStyleHook; useFlatTreeStyles_unstable: CustomStyleHook; useImageStyles_unstable: CustomStyleHook; useImageSwatchStyles_unstable: CustomStyleHook; useInfoButtonStyles_unstable: CustomStyleHook; useInfoLabelStyles_unstable: CustomStyleHook; useInlineDrawerStyles_unstable: CustomStyleHook; useInputStyles_unstable: CustomStyleHook; useInteractionTagPrimaryStyles_unstable: CustomStyleHook; useInteractionTagSecondaryStyles_unstable: CustomStyleHook; useInteractionTagStyles_unstable: CustomStyleHook; useLabelStyles_unstable: CustomStyleHook; useLinkStyles_unstable: CustomStyleHook; useListItemButtonStyles_unstable: CustomStyleHook; useListItemStyles_unstable: CustomStyleHook; useListStyles_unstable: CustomStyleHook; useListboxStyles_unstable: CustomStyleHook; useMenuButtonStyles_unstable: CustomStyleHook; useMenuDividerStyles_unstable: CustomStyleHook; useMenuGroupHeaderStyles_unstable: CustomStyleHook; useMenuGroupStyles_unstable: CustomStyleHook; useMenuItemCheckboxStyles_unstable: CustomStyleHook; useMenuItemLinkStyles_unstable: CustomStyleHook; useMenuItemRadioStyles_unstable: CustomStyleHook; useMenuItemStyles_unstable: CustomStyleHook; useMenuItemSwitchStyles_unstable: CustomStyleHook; useMenuListStyles_unstable: CustomStyleHook; useMenuPopoverStyles_unstable: CustomStyleHook; useMenuSplitGroupStyles_unstable: CustomStyleHook; useMessageBarActionsStyles_unstable: CustomStyleHook; useMessageBarBodyStyles_unstable: CustomStyleHook; useMessageBarGroupStyles_unstable: CustomStyleHook; useMessageBarStyles_unstable: CustomStyleHook; useMessageBarTitleStyles_unstable: CustomStyleHook; useAppItemStyles_unstable: CustomStyleHook; useAppItemStaticStyles_unstable: CustomStyleHook; useHamburgerStyles_unstable: CustomStyleHook; useNavCategoryItemStyles: CustomStyleHook; useNavDividerStyles_unstable: CustomStyleHook; useNavDrawerStyles_unstable: CustomStyleHook; useNavDrawerBodyStyles_unstable: CustomStyleHook; useNavDrawerFooterStyles_unstable: CustomStyleHook; useNavDrawerHeaderStyles_unstable: CustomStyleHook; useNavItemStyles_unstable: CustomStyleHook; useNavSectionHeaderStyles_unstable: CustomStyleHook; useNavSubItemStyles_unstable: CustomStyleHook; useNavSubItemGroupStyles_unstable: CustomStyleHook; useSplitNavItemStyles_unstable: CustomStyleHook; useOptionGroupStyles_unstable: CustomStyleHook; useOptionStyles_unstable: CustomStyleHook; useOverlayDrawerStyles_unstable: CustomStyleHook; usePersonaStyles_unstable: CustomStyleHook; usePopoverSurfaceStyles_unstable: CustomStyleHook; usePresenceBadgeStyles_unstable: CustomStyleHook; useProgressBarStyles_unstable: CustomStyleHook; useRadioGroupStyles_unstable: CustomStyleHook; useRadioStyles_unstable: CustomStyleHook; useRatingDisplayStyles_unstable: CustomStyleHook; useRatingItemStyles_unstable: CustomStyleHook; useRatingStyles_unstable: CustomStyleHook; useSearchBoxStyles_unstable: CustomStyleHook; useSelectStyles_unstable: CustomStyleHook; useSkeletonItemStyles_unstable: CustomStyleHook; useSkeletonStyles_unstable: CustomStyleHook; useSliderStyles_unstable: CustomStyleHook; useSpinButtonStyles_unstable: CustomStyleHook; useSpinnerStyles_unstable: CustomStyleHook; useSplitButtonStyles_unstable: CustomStyleHook; useSwatchPickerRowStyles_unstable: CustomStyleHook; useSwatchPickerStyles_unstable: CustomStyleHook; useSwitchStyles_unstable: CustomStyleHook; useTabListStyles_unstable: CustomStyleHook; useTabStyles_unstable: CustomStyleHook; useTeachingPopoverBodyStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselCardStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselFooterButtonStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselFooterStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselNavButtonStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselNavStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselPageCountStyles_unstable: CustomStyleHook; useTeachingPopoverCarouselStyles_unstable: CustomStyleHook; useTeachingPopoverFooterStyles_unstable: CustomStyleHook; useTeachingPopoverHeaderStyles_unstable: CustomStyleHook; useTeachingPopoverActionsStyles_unstable: CustomStyleHook; useTeachingPopoverButtonStyles_unstable: CustomStyleHook; useTeachingPopoverStyles_unstable: CustomStyleHook; useTeachingPopoverPageCountStyles_unstable: CustomStyleHook; useTeachingPopoverSurfaceStyles_unstable: CustomStyleHook; useTeachingPopoverTitleStyles_unstable: CustomStyleHook; useTagGroupStyles_unstable: CustomStyleHook; useTagPickerButtonStyles_unstable: CustomStyleHook; useTagPickerControlStyles_unstable: CustomStyleHook; useTagPickerGroupStyles_unstable: CustomStyleHook; useTagPickerInputStyles_unstable: CustomStyleHook; useTagPickerListStyles_unstable: CustomStyleHook; useTagPickerOptionGroupStyles_unstable: CustomStyleHook; useTagPickerOptionStyles_unstable: CustomStyleHook; useTagStyles_unstable: CustomStyleHook; useTableBodyStyles_unstable: CustomStyleHook; useTableCellActionsStyles_unstable: CustomStyleHook; useTableCellLayoutStyles_unstable: CustomStyleHook; useTableCellStyles_unstable: CustomStyleHook; useTableHeaderCellStyles_unstable: CustomStyleHook; useTableHeaderStyles_unstable: CustomStyleHook; useTableResizeHandleStyles_unstable: CustomStyleHook; useTableRowStyles_unstable: CustomStyleHook; useTableSelectionCellStyles_unstable: CustomStyleHook; useTableStyles_unstable: CustomStyleHook; useTextareaStyles_unstable: CustomStyleHook; useTextStyles_unstable: CustomStyleHook; useTimePickerCompatStyles_unstable: CustomStyleHook; useToastBodyStyles_unstable: CustomStyleHook; useToastContainerStyles_unstable: CustomStyleHook; useToasterStyles_unstable: CustomStyleHook; useToastFooterStyles_unstable: CustomStyleHook; useToastStyles_unstable: CustomStyleHook; useToastTitleStyles_unstable: CustomStyleHook; useToggleButtonStyles_unstable: CustomStyleHook; useToolbarButtonStyles_unstable: CustomStyleHook; useToolbarDividerStyles_unstable: CustomStyleHook; useToolbarGroupStyles_unstable: CustomStyleHook; useToolbarRadioButtonStyles_unstable: CustomStyleHook; useToolbarToggleButtonStyles_unstable: CustomStyleHook; useToolbarStyles_unstable: CustomStyleHook; useTooltipStyles_unstable: CustomStyleHook; useTreeItemLayoutStyles_unstable: CustomStyleHook; useTreeItemPersonaLayoutStyles_unstable: CustomStyleHook; useTreeItemStyles_unstable: CustomStyleHook; useTreeStyles_unstable: CustomStyleHook; useVirtualizerScrollViewDynamicStyles_unstable: CustomStyleHook; useVirtualizerScrollViewStyles_unstable: CustomStyleHook; useVirtualizerStyles_unstable: CustomStyleHook; }>",
              "required": false,
              "description": "Sets the hooks for custom styling components."
            },
            {
              "name": "dir",
              "type": "\"ltr\" | \"rtl\"",
              "required": false,
              "description": "Sets the direction of text & generated styles."
            },
            {
              "name": "overrides_unstable",
              "type": "OverridesContextValue_unstable",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "LegacyRef<HTMLDivElement>",
              "required": false,
              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref)."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "targetDocument",
              "type": "Document",
              "required": false,
              "description": "Provides the document, can be undefined during SSR render."
            },
            {
              "name": "theme",
              "type": "Partial<Theme>",
              "required": false,
              "description": "Sets the theme used in a scope."
            },
            {
              "name": "withComponentDefaults",
              "type": "boolean",
              "required": false,
              "description": "When `true` (the default), wrapped components apply CoreAI's default\nprops. Set to `false` to render with stock Fluent semantics — e.g.,\nwhen previewing the Web or Teams themes."
            }
          ]
        }
      ],
      "defaultExampleId": "components-coreaifluentprovider--default",
      "htmlPath": "components/CoreAIFluentProvider/",
      "markdownPath": "components/CoreAIFluentProvider.md"
    },
    {
      "id": "counter-badge",
      "title": "Counter Badge",
      "summary": "Badge that displays a numerical count.",
      "kind": "components",
      "route": "components/CounterBadge",
      "label": "Counter Badge",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/counter-badge/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/CounterBadge.md",
      "examples": [
        {
          "id": "components-badge-counter-badge--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/CounterBadge.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-badge-counter-badge--default.tsx",
          "sha256": "d1b29bed273d1bf2f6aa44ddb2997fa2bdcfe05a83758da5c564207034c8d8db",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-counter-badge--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeAppearance.stories.tsx",
          "description": "A counter badge can have a `ghost` or `filled` appearance. The default is `filled`.",
          "sourcePath": "source/examples/components-badge-counter-badge--appearance.tsx",
          "sha256": "d42c2eef5935e88d95a745f6e83a900ffca3ee142796e1f3fff3b13f3be9dcb6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-counter-badge--color",
          "exportName": "Color",
          "name": "Color",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeColor.stories.tsx",
          "description": "A counter badge can be different colors. The available colors are `brand`, `danger`, `important`, `informative`, `severe`, `severe`, `success` or `warning`. The default is `brand`. Information conveyed by color should also be communicated in another way to meet [accessibility requirements](https://w3c.github.io/wcag/guidelines/22/#use-of-color).",
          "sourcePath": "source/examples/components-badge-counter-badge--color.tsx",
          "sha256": "fde2d39cb47cb9d10f60b11bc5e1db10fb5063878ec184efbf2e44648030fdeb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-counter-badge--dot",
          "exportName": "Dot",
          "name": "Dot",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeDot.stories.tsx",
          "description": "A counter badge can display a small dot.",
          "sourcePath": "source/examples/components-badge-counter-badge--dot.tsx",
          "sha256": "a02098424bbdd781402612185fa732b9897f24e9152b3262f8dcc4bc0d4982ec",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-counter-badge--shapes",
          "exportName": "Shapes",
          "name": "Shapes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeShapes.stories.tsx",
          "description": "A counter badge can have a `rounded` or `circular` shape. The default is `circular`.",
          "sourcePath": "source/examples/components-badge-counter-badge--shapes.tsx",
          "sha256": "26701e3bfc8fb1258901b66a9bf63bc1b5cb9a8aff2f57561542cb636f68c36a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-counter-badge--sizes",
          "exportName": "Sizes",
          "name": "Sizes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/CounterBadge/CounterBadgeSizes.stories.tsx",
          "description": "A counter badge supports `tiny`, `extra-small`, `small`, `medium`, `large`, and `extra-large` sizes. The default is `medium`.",
          "sourcePath": "source/examples/components-badge-counter-badge--sizes.tsx",
          "sha256": "1aa9ae2fd6e6fbf64ea7ea2be77f1c29555d442c37ddb50cd1e60816ebfa98fb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "CounterBadge",
          "kind": "component",
          "propsType": "CounterBadgeProps",
          "description": "Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.",
          "props": [
            {
              "name": "appearance",
              "type": "\"filled\" | \"ghost\"",
              "required": false,
              "description": "A Badge can have different appearances that emphasize certain parts of it:\n - filled: The default appearance if one is not specified.\n   The badge background is filled with color with a contrasting foreground text to match.\n - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.",
              "defaultValue": "filled"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "\"brand\" | \"danger\" | \"important\" | \"informative\"",
              "required": false,
              "description": "Semantic colors for a counter badge",
              "defaultValue": "brand"
            },
            {
              "name": "count",
              "type": "number",
              "required": false,
              "description": "Value displayed by the Badge",
              "defaultValue": "0"
            },
            {
              "name": "dot",
              "type": "boolean",
              "required": false,
              "description": "If a dot should be displayed without the count",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A Badge can position the icon before or after the content."
            },
            {
              "name": "overflowCount",
              "type": "number",
              "required": false,
              "description": "Max number to be displayed",
              "defaultValue": "99"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\"",
              "required": false,
              "description": "A Badge can be circular or rounded",
              "defaultValue": "circular"
            },
            {
              "name": "showZero",
              "type": "boolean",
              "required": false,
              "description": "If the badge should be shown when count is 0",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\" | \"tiny\" | \"extra-small\"",
              "required": false,
              "description": "A Badge can be on of several preset sizes."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-badge-counter-badge--default",
      "htmlPath": "components/CounterBadge/",
      "markdownPath": "components/CounterBadge.md"
    },
    {
      "id": "data-grid-cell-medium",
      "title": "Data grid",
      "summary": "Presents data in a two-dimensional DataGrid format, arranged in columns and rows in a rectangular form.",
      "kind": "components",
      "route": "components/DataGrid",
      "label": "Data grid",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=298485-9476"
        }
      ],
      "aliases": [
        "/data-grid-cell-action-header/",
        "/data-grid-cell-large/",
        "/data-grid-cell-small/",
        "/data-grid-cell-smaller/",
        "/data-grid-content-header/",
        "/data-grid-cell-medium/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/DataGrid.md",
      "examples": [
        {
          "id": "components-datagrid--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/DataGrid.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datagrid--default.tsx",
          "sha256": "d02b4e5ebe469f00932152112b0d03b7683d985153842aeda96582bf9faaa793",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--composite-navigation",
          "exportName": "CompositeNavigation",
          "name": "Composite Navigation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/CompositeNavigation.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datagrid--composite-navigation.tsx",
          "sha256": "6267a10e69e575e01a99d9ea7d28214a4f1844fe2894e139b13d908de770b8ec",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--custom-row-id",
          "exportName": "CustomRowId",
          "name": "Custom Row Id",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/CustomRowId.stories.tsx",
          "description": "By default row Ids are the index of the item in the collection. In order to use a row Id based on the data\nuse the `getRowId` prop.",
          "sourcePath": "source/examples/components-datagrid--custom-row-id.tsx",
          "sha256": "7126242304f350430bf3131612278c0129fb73740a56275479d9aef89007af75",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--data-grid-accordion",
          "exportName": "DataGridAccordion",
          "name": "Data Grid Accordion",
          "origin": "local",
          "originalSource": "src/stories/components/DataGrid.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datagrid--data-grid-accordion.tsx",
          "sha256": "d595cead746cf3b7d6b9d489f870e085839f036ea53ddad0cf90695ea4b5529c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--data-grid-card",
          "exportName": "DataGridCard",
          "name": "Data Grid Card",
          "origin": "local",
          "originalSource": "src/stories/components/DataGrid.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datagrid--data-grid-card.tsx",
          "sha256": "1a7e24b8846cf33ba469bd3a2a647e0dd7bdc96eeeb8d2f7c616a9082a1670d5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--flex-options",
          "exportName": "FlexOptions",
          "name": "Flex Options",
          "origin": "local",
          "originalSource": "src/stories/components/DataGrid.stories.tsx",
          "description": "CoreAI-only: `columnFlexOptions` is a CSS-only, non-interactive alternative to\n`resizableColumns` for static layouts. Give each column a `flexGrow`/`flexShrink`/\n`flexBasis`/`minWidth`/`maxWidth` override (keyed by `columnId`, same convention as\n`columnSizingOptions`) and the `DataGridHeaderCell`/`DataGridCell` wrappers apply it\nautomatically - no need to read `columnId` off the render prop yourself.",
          "sourcePath": "source/examples/components-datagrid--flex-options.tsx",
          "sha256": "ca2dbd36100366a75d63b78bc8a5fa2e8947cc875cbefb73a4f311e46dd45594",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--focusable-elements-in-cells",
          "exportName": "FocusableElementsInCells",
          "name": "Focusable Elements In Cells",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/FocusableElementsInCells.stories.tsx",
          "description": "When cells contain focusable elements, set the `focusMode` prop on the `DataGridCell` or `DataGridHeaderCell` components.\n\nUse `group` when there are multiple focusable elements in cell,\n`group` will enable the following behaviour:\n- Enter will move focus into the cell\n- Focus is trapped in the cell\n- Escape will move focus back to the cell\n\nUse `none` when there is one single focusable element in cell,\n`none` will make the cell non-focusable.\n\nDo not add nested focusable elements to a sortable `DataGridHeaderCell`, since they will be rendered within the sort button.",
          "sourcePath": "source/examples/components-datagrid--focusable-elements-in-cells.tsx",
          "sha256": "4ffbfc5ff56b487fe996ba7015f80b2a4280317835a077b148e2e4b1e1692096",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--multiple-select",
          "exportName": "MultipleSelect",
          "name": "Multiple Select",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/MultipleSelect.stories.tsx",
          "description": "In order to enable this feature the `selectionMode` prop needs to be set. The API surface is directly\nequivalent to the usage of `useTableFeatures`.",
          "sourcePath": "source/examples/components-datagrid--multiple-select.tsx",
          "sha256": "c1a1c7842159f5b8f9248d31613a878b26dfadecb68b3eb5e737c2321925115e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--multiple-select-controlled",
          "exportName": "MultipleSelectControlled",
          "name": "Multiple Select Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/MultipleSelectControlled.stories.tsx",
          "description": "To enable selection, the `selectionMode` prop needs to be set. The API surface is directly\nequivalent to the usage of `useTableFeatures`.",
          "sourcePath": "source/examples/components-datagrid--multiple-select-controlled.tsx",
          "sha256": "26133ffabf4d53d513a969c8d5389fbe8030cbecd7b481ca692c3ade3b6a0b7b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--resizable-columns",
          "exportName": "ResizableColumns",
          "name": "Resizable Columns (preview)",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx",
          "description": "Columns can be made resizable by passing a prop `resizableColumns`. The resizing configuration for each \ncolumn (like `minWidth` and `defaultWidth`), can be further customized by passing down a \n`columnSizingOptions` prop.\n\nThe control over the state of resizing can be achieved with the combination of `onColumnResize` callback \nand setting the `idealWidth` for a column in `columnSizingOptions`.\n\nFor accessibility, the `DataGrid` component supports keyboard navigation and screen reader navigation\nTo make features like column resizing work with keyboard navigation, the `Menu` component is used to provide\n a context menu for the header cells, which allows the user to access other DataGrid features.\n\nOnce an option is selected, the arrows keys can be used to interact with the `DataGrid` (e.g. resize columns).\n`ESC`, `ENTER`, or `SPACE` can be used to return to the original navigation mode.",
          "sourcePath": "source/examples/components-datagrid--resizable-columns.tsx",
          "sha256": "254aed6b434c973b1227cef026de285b400c13158c058ef1bdabe6a965d44c9e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--resizable-columns-controlled",
          "exportName": "ResizableColumnsControlled",
          "name": "Resizable Columns Controlled",
          "origin": "local",
          "originalSource": "src/stories/components/DataGrid.stories.tsx",
          "description": "`resizableColumns` turns each column boundary into a drag handle. This story shows the\n*controlled* pattern: widths live in your own state and `onColumnResize` writes them\nback, so they survive re-renders. See **Resizable Columns** for the uncontrolled\ndefault, where the grid auto-fits columns to the container.\n\nCombine `columnSizingOptions` (per-column `minWidth`/`defaultWidth`/`idealWidth`) with\n`onColumnResize`, and with `resizableColumnsOptions={{ autoFitColumns: false }}` to let\nthe grid overflow its container instead of squeezing columns — that also keeps a handle\non the last column.\n\nWrap the grid in a horizontally scrollable container so the overflow is reachable.\nResizing also works from the keyboard: open the header cell's context menu, choose\n**Keyboard Column Resizing**, then use <kbd>←</kbd>/<kbd>→</kbd> (hold <kbd>Shift</kbd>\nfor finer steps) and <kbd>Enter</kbd>/<kbd>Esc</kbd> to exit.\n\n`resizableColumns` and `columnFlexOptions` are mutually exclusive — see the Flex Options story.",
          "sourcePath": "source/examples/components-datagrid--resizable-columns-controlled.tsx",
          "sha256": "3fea751c62f4534bc435d6e93b1ed611a530533b7b635305cc01cf22eb6f52e3",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--resizable-columns-disable-auto-fit",
          "exportName": "ResizableColumnsDisableAutoFit",
          "name": "Resizable Columns - Disabled container auto-fit",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx",
          "description": "In the previous example, the columns are automatically fitted to the container. This means that the columns are\nsqueezed when the container is narrowed, until the\nminimum width is reached, and the last column is extended past its optimal width to fill the available\nspace. This also effectively prevents the user from making the columns wider than the total width of the \ncontainer, as the columns are automatically resized to fit the container.\n\nThis behavior can be disabled by passing `resizableColumnsOptions` prop to Datagrid,\nwith the `{autoFitColumns: false}` option.\n\nWith this option, the columns can be made wider than the container, and the container will overflow.\nAlso, the automatic resizing of adjacent columns will be disabled, as the column are now allowed to be wider\nthat the container. This also enables the resize handle on the last column.",
          "sourcePath": "source/examples/components-datagrid--resizable-columns-disable-auto-fit.tsx",
          "sha256": "c6db8d9180796a5699265acd77583c39277d5dbeca1c6e86b548e7ee482b1b57",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--selection-appearance",
          "exportName": "SelectionAppearance",
          "name": "Selection Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SelectionAppearance.stories.tsx",
          "description": "The `selectionAppearance` prop will vary the appearance of selected rows. The default appearance is a brand\nbackground color. However a neutral (grey) background is also available.",
          "sourcePath": "source/examples/components-datagrid--selection-appearance.tsx",
          "sha256": "42ed5d853e0dbc57a14c136a6c4563d3d2a3cde3e77eefe639ea661e87d73309",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--single-select",
          "exportName": "SingleSelect",
          "name": "Single Select",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SingleSelect.stories.tsx",
          "description": "To enable selection, the `selectionMode` prop needs to be set. The API surface is directly\nequivalent to the usage of `useTableFeatures`.",
          "sourcePath": "source/examples/components-datagrid--single-select.tsx",
          "sha256": "9c5d474d4660c4c544d20ee3537b8bd2a722f0bb9120fe3a8a5643c73dc89951",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--single-select-controlled",
          "exportName": "SingleSelectControlled",
          "name": "Single Select Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SingleSelectControlled.stories.tsx",
          "description": "To enable selection, the `selectionMode` prop needs to be set. The API surface is directly\nequivalent to the usage of `useTableFeatures`.",
          "sourcePath": "source/examples/components-datagrid--single-select-controlled.tsx",
          "sha256": "21d2315fca44944329125963ce156061becea17748f006a1cbca13d5d9aa1fe5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--sort",
          "exportName": "Sort",
          "name": "Sort",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/Sort.stories.tsx",
          "description": "To enable sorting, the `sortable` prop needs to be set. \n\n> ⚠️ Column definitions without a `compare` function will not be sortable.\n\n> Due to screen reader support, the sort status might not be announced once a sortable column header\nis invoked. [This is a known issue.](https://github.com/nvaccess/nvda/issues/10890)\nHowever the implementation still follows the\n[pattern recommended by the WAI](https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html)",
          "sourcePath": "source/examples/components-datagrid--sort.tsx",
          "sha256": "a634e3f11d2c851b65bbd4dccd9bf7f3d59ae921ff65be463f8eebe106a8035c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--sort-controlled",
          "exportName": "SortControlled",
          "name": "Sort Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SortControlled.stories.tsx",
          "description": "To enable sorting, the `sortable` prop needs to be set. The API surface is directly\nequivalent to the usage of `useTableFeatures`.",
          "sourcePath": "source/examples/components-datagrid--sort-controlled.tsx",
          "sha256": "798bc1de9b56a4d0e8b6eecf0694b50434f17b248e9c49962269cdde660af885",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--subtle-selection",
          "exportName": "SubtleSelection",
          "name": "Subtle Selection",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/SubtleSelection.stories.tsx",
          "description": "To enable subtle selection mode, the `subtleSelection` should be set.\nThe selection indicator slot will only\nappear when:\n- the `DataGridRow` component is hovered.\n- The current focused element is within the `DataGridRow`\n- The `DataGridSelectionCell` is checked",
          "sourcePath": "source/examples/components-datagrid--subtle-selection.tsx",
          "sha256": "3effa6f4557884238565534f113ff0bd4c8a9aadbfc1ffd641887bf59ac451dd",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-datagrid--virtualization",
          "exportName": "Virtualization",
          "name": "Virtualization",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/DataGrid/Virtualization.stories.tsx",
          "description": "Virtualizating the DataGrid component involves recomposing components to use a virtualized container.\nThis is already done in the extension package `@fluentui-contrib/react-data-grid-react-window` which provides\nextended DataGrid components that are powered\nby [react-window](https://react-window.vercel.app/#/examples/list/fixed-size).\n\nThe example below shows how to use this extension package to virtualize the DataGrid component.\n\nHere some useful links for the package:\n- [Storybook documentation](https://microsoft.github.io/fluentui-contrib/react-data-grid-react-window/?path=/story/datagrid--virtualized-data-grid)\n- [NPM page](https://www.npmjs.com/package/@fluentui-contrib/react-data-grid-react-window)\n- [README](https://github.com/microsoft/fluentui-contrib/blob/main/packages/react-data-grid-react-window/README.md)\n\n> ⚠️ Make sure to memoize the row render function to avoid excessive unmouting/mounting of components.\nreact-window will [create components based on this renderer](https://react-window.vercel.app/#/api/FixedSizeList)",
          "sourcePath": "source/examples/components-datagrid--virtualization.tsx",
          "sha256": "589099035de5cdd92381b358f265f2df8ec1aa6b855d5ac16d6f48088784c35d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "DataGrid",
          "kind": "component",
          "propsType": "DataGridProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"table\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "columnFlexOptions",
              "type": "DataGridColumnFlexOptions",
              "required": false,
              "description": "CSS-only per-column flexbox overrides, keyed by `columnId` (same convention as\n`columnSizingOptions`). Automatically picked up by this package's `DataGridHeaderCell`\nand `DataGridCell` wrappers — no need to read `columnId` off the render prop yourself.\n\nIntended for static/non-resizable layouts. Not supported in combination with\n`resizableColumns` — that takes precedence when both are set."
            },
            {
              "name": "columns",
              "type": "TableColumnDefinition<any>[]",
              "required": true,
              "description": "Table columns"
            },
            {
              "name": "columnSizingOptions",
              "type": "TableColumnSizingOptions",
              "required": false,
              "description": "Options for column resizing, specific for each column"
            },
            {
              "name": "containerWidthOffset",
              "type": "number",
              "required": false,
              "description": "For column resizing. Allows for a container size to be adjusted by a number of pixels, to make\nsure the columns don't overflow the table.\nBy default, this value is calculated internally based on other props, but can be overriden."
            },
            {
              "name": "defaultSelectedItems",
              "type": "Iterable<SelectionItemId>",
              "required": false,
              "description": "Used in uncontrolled mode to set initial selected items on mount"
            },
            {
              "name": "defaultSortState",
              "type": "SortState",
              "required": false,
              "description": "Used in uncontrolled mode to set initial sort column and direction on mount"
            },
            {
              "name": "focusMode",
              "type": "\"none\" | \"cell\" | \"row_unstable\" | \"composite\"",
              "required": false,
              "description": "How focus navigation will work in the datagrid",
              "defaultValue": "cell"
            },
            {
              "name": "getRowId",
              "type": "((item: any) => TableRowId)",
              "required": false,
              "description": ""
            },
            {
              "name": "items",
              "type": "any[]",
              "required": true,
              "description": ""
            },
            {
              "name": "noNativeElements",
              "type": "boolean",
              "required": false,
              "description": "Render all table elements as divs instead of semantic table elements\nUsing divs no longer uses `display: table` layout but `display: flex`",
              "defaultValue": "false"
            },
            {
              "name": "onColumnResize",
              "type": "((e: MouseEvent | TouchEvent | KeyboardEvent, data: { columnId: TableColumnId; width: number; }) => void)",
              "required": false,
              "description": "A callback triggered when a column is resized."
            },
            {
              "name": "onSelectionChange",
              "type": "((e: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>, data: OnSelectionChangeData) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "onSortChange",
              "type": "((e: MouseEvent<Element, MouseEvent>, sortState: SortState) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "resizableColumns",
              "type": "boolean",
              "required": false,
              "description": "Enables column resizing"
            },
            {
              "name": "resizableColumnsOptions",
              "type": "{ autoFitColumns?: boolean; }",
              "required": false,
              "description": "Custom options for column resizing."
            },
            {
              "name": "selectedItems",
              "type": "Iterable<SelectionItemId>",
              "required": false,
              "description": "Used to control selected items"
            },
            {
              "name": "selectionAppearance",
              "type": "\"none\" | \"brand\" | \"neutral\"",
              "required": false,
              "description": "Row appearance when selected",
              "defaultValue": "brand"
            },
            {
              "name": "selectionMode",
              "type": "\"multiselect\" | \"single\"",
              "required": false,
              "description": "Enables row selection and sets the selection mode",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"extra-small\"",
              "required": false,
              "description": "Affects the sizes of all table subcomponents",
              "defaultValue": "medium"
            },
            {
              "name": "sortable",
              "type": "boolean",
              "required": false,
              "description": "Whether the table is sortable",
              "defaultValue": "false"
            },
            {
              "name": "sortState",
              "type": "SortState",
              "required": false,
              "description": "Used to control sorting"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "subtleSelection",
              "type": "boolean",
              "required": false,
              "description": "Enables subtle selection style",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "DataGridBody",
          "kind": "component",
          "propsType": "DataGridBodyProps",
          "description": "DataGridBody component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"tbody\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "RowRenderFunction<unknown>",
              "required": true,
              "description": "Render function for rows"
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DataGridCell",
          "kind": "component",
          "propsType": "DataGridCellProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"td\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "focusMode",
              "type": "\"none\" | \"cell\" | \"group\"",
              "required": false,
              "description": "Used when there are nested focusble elements inside a focusable cell\n- `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n- `cell`: The cell is focusable - if there are focusable elements in the cell use `group`\n- `none`: The cell is not focusable",
              "defaultValue": "cell"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DataGridHeader",
          "kind": "component",
          "propsType": "DataGridHeaderProps",
          "description": "DataGridHeader component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"thead\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DataGridHeaderCell",
          "kind": "component",
          "propsType": "DataGridHeaderCellProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"th\"",
              "required": false,
              "description": ""
            },
            {
              "name": "aside",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "aside content for anything that should be after main content of the table header cell"
            },
            {
              "name": "button",
              "type": "NonNullable<WithSlotShorthandValue<ARIAButtonSlotProps> | null>",
              "required": false,
              "description": "Button handles correct narration and interactions for sorting;"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "focusMode",
              "type": "\"none\" | \"cell\" | \"group\"",
              "required": false,
              "description": "Used when there are nested focusble elements inside a focusable cell\n- `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n- `cell`: The cell is focusable - if there are focusable elements in the cell use `group`\n- `none`: The cell is not focusable",
              "defaultValue": "cell"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "sortDirection",
              "type": "\"ascending\" | \"descending\"",
              "required": false,
              "description": "",
              "defaultValue": "undefined"
            },
            {
              "name": "sortIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DataGridRow",
          "kind": "component",
          "propsType": "DataGridRowProps",
          "description": "DataGridRow component",
          "props": [
            {
              "name": "appearance",
              "type": "\"none\" | \"brand\" | \"neutral\"",
              "required": false,
              "description": "A table row can have different variants. These appearances are\nintended to be used with selection.",
              "defaultValue": "none"
            },
            {
              "name": "as",
              "type": "\"div\" | \"tr\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "CellRenderFunction<unknown>",
              "required": true,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectionCell",
              "type": "WithSlotShorthandValue<TableSelectionCellProps & RefAttributes<HTMLDivElement>> | null",
              "required": false,
              "description": "When selection is enabled on the"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DataGridSelectionCell",
          "kind": "component",
          "propsType": "DataGridSelectionCellProps",
          "description": "DataGridSelectionCell component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"td\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkboxIndicator",
              "type": "(Omit<ComponentProps<Partial<CheckboxSlots>, \"input\">, \"defaultChecked\" | \"onChange\" | \"size\" | \"checked\"> & { checked?: boolean | \"mixed\"; children?: undefined; defaultChecked?: boolean | \"mixed\"; labelPosition?: \"before\" | \"after\" | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void) | undefined; shape?: \"circular\" | \"square\" | undefined; size?: \"medium\" | \"large\" | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined",
              "required": false,
              "description": "Selection indicator if selection type is checkbox"
            },
            {
              "name": "checked",
              "type": "boolean | \"mixed\"",
              "required": false,
              "description": "",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "hidden",
              "type": "boolean",
              "required": false,
              "description": "Completely hides the selection cell",
              "deprecated": "cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead."
            },
            {
              "name": "invisible",
              "type": "boolean",
              "required": false,
              "description": "Hides the selection cell visually but takes up the same space",
              "defaultValue": "false"
            },
            {
              "name": "radioIndicator",
              "type": "(Omit<ComponentProps<Partial<RadioSlots>, \"input\">, \"onChange\" | \"size\"> & { value?: string; labelPosition?: \"below\" | \"after\"; disabled?: boolean | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void) | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined",
              "required": false,
              "description": "Selection indicator if selection type is radio"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "subtle",
              "type": "boolean",
              "required": false,
              "description": "Only visible when checked or the parent row is hovered/focused",
              "defaultValue": "false"
            },
            {
              "name": "type",
              "type": "\"checkbox\" | \"radio\"",
              "required": false,
              "description": "A table can have two kinds of selection modes.",
              "defaultValue": "checkbox"
            }
          ]
        }
      ],
      "defaultExampleId": "components-datagrid--default",
      "htmlPath": "components/DataGrid/",
      "markdownPath": "components/DataGrid.md"
    },
    {
      "id": "date-time-picker",
      "title": "DateTimePicker",
      "summary": "Native browser input for picking a date, time, or related value.",
      "kind": "components",
      "route": "components/DateTimePicker",
      "label": "DateTimePicker",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/date-time-picker/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/DateTimePicker.md",
      "examples": [
        {
          "id": "components-datetimepicker--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--default.tsx",
          "sha256": "23d9f03a9ddae13ba3f0c0676dd501874b330ae18f05fa65d71b2592bb0ab807",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--clearable",
          "exportName": "Clearable",
          "name": "Clearable",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--clearable.tsx",
          "sha256": "29eb02d8bc0efbbc834e7a7cf8b5d693416d6a59ebd9d570eb76a774a33526b9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--clearable-with-default",
          "exportName": "ClearableWithDefault",
          "name": "Clearable With Default",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--clearable-with-default.tsx",
          "sha256": "288d69385f1bcd541e46d01ed0e3b4e702d0206124dcf4da99b7a38773f823e3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--controlled.tsx",
          "sha256": "350c62ca32c82991e0e7afa7b6a90722c24c33a05121ab93bebcbe433f328a52",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--date-and-time",
          "exportName": "DateAndTime",
          "name": "Date And Time",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--date-and-time.tsx",
          "sha256": "2dbb07a929a34868a107cce37ad5037b9cf900b705eb20490d48a81e70594ff3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--month",
          "exportName": "Month",
          "name": "Month",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--month.tsx",
          "sha256": "5f6b0a2ca1f15332439cbe63370d3811b1ec599b772aff8e79a9d02b83ffd9da",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--range",
          "exportName": "Range",
          "name": "Range",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--range.tsx",
          "sha256": "2873186d00b82164817da8527b1e7b5d751b5c5e798d479f45964bc45ea5b1aa",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--time",
          "exportName": "Time",
          "name": "Time",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--time.tsx",
          "sha256": "044c14b356a38023b61c20ac9b9f48545983163fb62acfba2a76edc190db9055",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-datetimepicker--week",
          "exportName": "Week",
          "name": "Week",
          "origin": "local",
          "originalSource": "src/stories/components/DateTimePicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-datetimepicker--week.tsx",
          "sha256": "d5d392da10d127ef4eec28823f565f24005e6f1ae62c7440523df3e18d01736c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "DateTimePicker",
          "kind": "component",
          "propsType": "DateTimePickerProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\" | \"filled-darker-shadow\" | \"filled-lighter-shadow\"",
              "required": false,
              "description": "Controls the colors and borders of the input.\n\nNote: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.",
              "defaultValue": "'outline'"
            },
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": "Input can't have children."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "clearable",
              "type": "boolean",
              "required": false,
              "description": "If set, shows an \"x\" button once there's a value to act on. If `defaultValue` is set, the\nbutton resets the value back to `defaultValue`; otherwise it clears the value entirely."
            },
            {
              "name": "contentAfter",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element after the input text, within the input border"
            },
            {
              "name": "contentBefore",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element before the input text, within the input border"
            },
            {
              "name": "defaultValue",
              "type": "Date",
              "required": false,
              "description": "Initial value for an uncontrolled component."
            },
            {
              "name": "dynamicWidth",
              "type": "boolean",
              "required": false,
              "description": "Collapse the control to its content width when nothing is selected and\ngrow it with the typed/selected content. Only available when `label` is set."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n\nThis is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n(except `className` and `style`, which go to the `root` slot). The top-level `ref` will\nalso go here."
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "Optional inline label rendered inside the control, before the value."
            },
            {
              "name": "max",
              "type": "Date",
              "required": false,
              "description": "The maximum allowable value."
            },
            {
              "name": "min",
              "type": "Date",
              "required": false,
              "description": "The minimum allowable value."
            },
            {
              "name": "onChange",
              "type": "((event: ChangeEvent<HTMLInputElement>, data: DateTimePickerOnChangeData) => void)",
              "required": false,
              "description": "Called when the user changes the value."
            },
            {
              "name": "onValidationResult",
              "type": "((event: ChangeEvent<HTMLInputElement>, data: DateTimePickerValidationResultData) => void)",
              "required": false,
              "description": "Called after every `onChange` with the native constraint-validation result, derived from\nthe input's `ValidityState`, so `min`/`max`/`required`/malformed-input are all covered\nwithout re-deriving them from the `Date` value. Pair with `Field`'s `validationState`/\n`validationMessage` to surface it (Fluent's `Input` already themes `aria-invalid` for you)."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n(A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n\nThe root slot receives the `className` and `style` specified directly on the `<Input>`.\nAll other top-level native props will be applied to the primary slot, `input`."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Size of the input (changes the font size and spacing).",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncateTextOverflow",
              "type": "boolean",
              "required": false,
              "description": "Controls text overflow behavior for the value. When true, long text is truncated with an ellipsis."
            },
            {
              "name": "type",
              "type": "\"time\" | \"date\" | \"datetime-local\" | \"month\" | \"week\"",
              "required": false,
              "description": "Which native temporal input to render.",
              "defaultValue": "'date'"
            },
            {
              "name": "value",
              "type": "Date | null",
              "required": false,
              "description": "Current value. Provide this for a controlled component; otherwise use `defaultValue`."
            }
          ]
        }
      ],
      "defaultExampleId": "components-datetimepicker--default",
      "htmlPath": "components/DateTimePicker/",
      "markdownPath": "components/DateTimePicker.md"
    },
    {
      "id": "dialog",
      "title": "Dialog",
      "summary": "A dialog is a window overlaid on the page to focus a task or message.",
      "kind": "components",
      "route": "components/Dialog",
      "label": "Dialog",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=168998-1175"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/dialog/usage"
        }
      ],
      "aliases": [
        "/dialog/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Dialog.md",
      "examples": [
        {
          "id": "components-dialog--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Dialog.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--default.tsx",
          "sha256": "5e2bd72e2cf769d02f5b6d9eae5a2736f76a0608f2adfb36a126871a317e5904",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--actions",
          "exportName": "Actions",
          "name": "Actions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogActions.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--actions.tsx",
          "sha256": "491baf4675ff05bf0b05cc775d1cb3bcc4f0f86705a934f5fc09c36ada9fe2cb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--alert",
          "exportName": "Alert",
          "name": "Alert",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogAlert.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--alert.tsx",
          "sha256": "780e558974ffee3d21369d36b5213bd41ba91417cba9963c157b655e440cbc7e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--backdrop-appearance",
          "exportName": "BackdropAppearance",
          "name": "Backdrop Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--backdrop-appearance.tsx",
          "sha256": "eaac8d3208bba41c94ad5cd28f7affbb8d23e1d690a93ab0f0027261dd8ea453",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-dialog--change-focus",
          "exportName": "ChangeFocus",
          "name": "Change Focus",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogChangeFocus.stories.tsx",
          "description": "Changing the default focused element can be done in an effect",
          "sourcePath": "source/examples/components-dialog--change-focus.tsx",
          "sha256": "be6669bf0f9938766d07da147f7b4d9993e959880985fe9a05b560768072af19",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--confirmation",
          "exportName": "Confirmation",
          "name": "Confirmation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogConfirmation.stories.tsx",
          "description": "A confirmation dialog is a type of very short dialog that sends focus directly to an action button, usually at the end of the dialog. For this type of dialog it makes sense to set the dialog's accessible name to the title, and the accessible description to the content via `aria-labelledby` and `aria-describedby`. This should not be done for dialogs with longer content.",
          "sourcePath": "source/examples/components-dialog--confirmation.tsx",
          "sha256": "6af443956947284dd54cb8b7e6e24083e06c684d020188f26c983db2c29940b7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--controlling-open-and-close",
          "exportName": "ControllingOpenAndClose",
          "name": "Controlling Open And Close",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogControllingOpenAndClose.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--controlling-open-and-close.tsx",
          "sha256": "213e5a274a6cddba7e365292d8c79329a0bc2b6a5643b2136e0fe0d556469921",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--custom-trigger",
          "exportName": "CustomTrigger",
          "name": "Custom Trigger",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogCustomTrigger.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--custom-trigger.tsx",
          "sha256": "bc4c8c22960cd282c0d845e8bf0c4dc4ea94a410494530c1b74284797a0b136e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--fluid-actions",
          "exportName": "FluidActions",
          "name": "Fluid Actions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogFluidDialogActions.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--fluid-actions.tsx",
          "sha256": "8225915dd1df53187fd1411827233faa8f84dc1620519762dedfbf9220d0eb76",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--keep-rendered-in-the-dom",
          "exportName": "KeepRenderedInTheDOM",
          "name": "Keep Rendered In The DOM",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogKeepRenderedInTheDOM.stories.tsx",
          "description": "Keep the dialog in the DOM tree when it is closed by setting the `unmountOnClose` prop to `false`.\nThis is useful when you want to preserve the state of the dialog content between opens.\nFor this example, the scroll position will be preserved when reopening the dialog.",
          "sourcePath": "source/examples/components-dialog--keep-rendered-in-the-dom.tsx",
          "sha256": "bb37d6e629993e1bb259954b66a27427e324f16bb825478f8b66726bb8d67a04",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogMotionCustom.stories.tsx",
          "description": "`Dialog`'s `surfaceMotion` slot accepts `Scale` params directly, such as `duration`, `outScale`, `easing`, and `animateOpacity`. `DialogSurface`'s `backdropMotion` slot accepts `Fade` params.\n\nBoth slots also support the `children` render function, which allows replacing the default motion with a custom implementation. This story demonstrates the simpler direct prop approach:\n\n```tsx\n<Dialog surfaceMotion={{ duration, outScale, easing, animateOpacity }}>\n  <DialogSurface backdropMotion={{ duration: backdropDuration }}>…</DialogSurface>\n</Dialog>\n```\n",
          "sourcePath": "source/examples/components-dialog--motion-custom.tsx",
          "sha256": "3f5ddb9f1d0119afacb85136b7db3ad205135aab7c5bc4b9ec35db7a4a77618a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--no-focusable-element",
          "exportName": "NoFocusableElement",
          "name": "No Focusable Element",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogNoFocusableElement.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--no-focusable-element.tsx",
          "sha256": "cdad1f2e3a62b1aaf1b6dd3fe44650a42c267ab713fdda311cebb5d77be3efda",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--non-modal",
          "exportName": "NonModal",
          "name": "Non Modal",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogNonModal.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--non-modal.tsx",
          "sha256": "fcef5db89df1aeeddf68f113e8ee4d94ea4fac281f110e71776102e324606ca5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--scrolling-long-content",
          "exportName": "ScrollingLongContent",
          "name": "Scrolling Long Content",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogScrollingLongContent.stories.tsx",
          "description": "By default `DialogContent` should grow until it fits viewport size, overflowed content will be scrollable",
          "sourcePath": "source/examples/components-dialog--scrolling-long-content.tsx",
          "sha256": "126f4e94930a5523f68d3d737a0c6f7a899e39c401b8059b5867cd17c9b29a06",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--title-custom-action",
          "exportName": "TitleCustomAction",
          "name": "Title Custom Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleCustomAction.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--title-custom-action.tsx",
          "sha256": "4f9cde0730b627e4caca08210a6d59e3e3b03b11974c181e5ac7aa23dc421b0d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-dialog--title-no-action",
          "exportName": "TitleNoAction",
          "name": "Title No Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogTitleNoAction.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--title-no-action.tsx",
          "sha256": "065405316d24d1ccf83c47c3cece0752097e0bb4b9cc1c3ede1f3ac90ccc84a8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--trigger-outside-dialog",
          "exportName": "TriggerOutsideDialog",
          "name": "Trigger Outside Dialog",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogTriggerOutsideDialog.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--trigger-outside-dialog.tsx",
          "sha256": "f854c661cdc15d2e03379019be6e5fccde5ccecf37bb4f0c080ebf773ae5b615",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dialog--with-form",
          "exportName": "WithForm",
          "name": "With Form",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogWithForm.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--with-form.tsx",
          "sha256": "0dab761db51b0c62b4a20d44e0f91bbe56f3af617e53b676b85d35435475824e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Dialog",
          "kind": "component",
          "propsType": "DialogProps",
          "description": "The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\nIt provides context down the hierarchy to `children` compound components to allow functionality.\nThis component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\nand a `DialogSurface` (or some component that will eventually render one of those compound components)\nin this specific order",
          "props": [
            {
              "name": "children",
              "type": "JSXElement | [JSXElement, JSXElement]",
              "required": true,
              "description": "Can contain two children including `DialogTrigger` and `DialogSurface`.\nAlternatively can only contain `DialogSurface` if using trigger outside dialog, or controlling state."
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "Default value for the uncontrolled open state of the dialog.",
              "defaultValue": "false"
            },
            {
              "name": "inertTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert.",
              "defaultValue": "false"
            },
            {
              "name": "modalType",
              "type": "\"alert\" | \"modal\" | \"non-modal\"",
              "required": false,
              "description": "Dialog variations.\n\n`modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\nThe tab sequence is kept within the dialog and moving the focus outside\nthe dialog will imply closing it. This is the default type of the component.\n\n`non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\nand users can interact with the rest of the page.\nThis also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n\n`alert`: is a special type of modal dialogs that interrupts the user's workflow\nto communicate an important message or ask for a decision.\nUnlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\nand it cannot be dismissed through the dimmed background.",
              "defaultValue": "modal"
            },
            {
              "name": "onOpenChange",
              "type": "DialogOpenChangeEventHandler",
              "required": false,
              "description": "Callback fired when the component changes value from open state."
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the open state of the dialog",
              "defaultValue": "false"
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps<ScaleParams> | null",
              "required": false,
              "description": "For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "unmountOnClose",
              "type": "boolean",
              "required": false,
              "description": "Decides whether the dialog should be removed from the DOM tree when it is closed.\nThis can be useful when dealing with components that may contain state that should not\nbe reset when the dialog is closed.",
              "defaultValue": "true"
            }
          ]
        },
        {
          "name": "DialogActions",
          "kind": "component",
          "propsType": "DialogActionsProps",
          "description": "`DialogActions` is a container for the actions of the dialog.\nApart from styling, this component does not have other behavior.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "fluid",
              "type": "boolean",
              "required": false,
              "description": "Makes the actions expand the entire width of the DialogBody",
              "defaultValue": "false"
            },
            {
              "name": "position",
              "type": "\"start\" | \"end\"",
              "required": false,
              "description": "defines the position on the dialog grid of the actions",
              "defaultValue": "'end'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DialogSurface",
          "kind": "component",
          "propsType": "DialogSurfaceProps",
          "description": "DialogSurface component represents the visual part of a `Dialog` as a whole,\nit contains everything that should be visible.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "backdrop",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; } & { appearance?: \"transparent\" | \"dimmed\" | undefined; }> | null | undefined",
              "required": false,
              "description": "Dimmed background of dialog.\nThe default backdrop is rendered as a `<div>` with styling.\nThis slot expects a `<div>` element which will replace the default backdrop.\nThe backdrop should have `aria-hidden=\"true\"`.\n\nAccepts an `appearance` prop to control backdrop visibility:\n- `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n- `'transparent'`: Always shows a transparent backdrop."
            },
            {
              "name": "backdropMotion",
              "type": "PresenceMotionSlotProps<FadeParams> | null",
              "required": false,
              "description": "For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DialogTitle",
          "kind": "component",
          "propsType": "DialogTitleProps",
          "description": "The `DialogTitle` component expects to have a title/header\nand when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.",
          "props": [
            {
              "name": "action",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "By default a Dialog with modalType='non-modal' will have a close button action"
            },
            {
              "name": "as",
              "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DialogTrigger",
          "kind": "component",
          "propsType": "DialogTriggerProps",
          "description": "A non-visual component that wraps its child\nand configures them to be the trigger that will open or close a `Dialog`.\nThis component should only accept one child.\n\nThis component sole purpose is to avoid opting out of the internal controlled open state of a `Dialog`\nBesides being a trigger that opens/close a dialog through context this component doesn't do much,\nmaking it basically unnecessary in cases where the trigger is outside of the `Dialog` component.",
          "props": [
            {
              "name": "action",
              "type": "\"open\" | \"close\"",
              "required": false,
              "description": "Explicitly declare if the trigger is responsible for opening or\nclosing a Dialog visibility state.\n\nIf `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default\n\nIf `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default"
            },
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>> | ((props: DialogTriggerChildProps<ARIAButtonType, {}>) => ReactElement<any, string | JSXElementConstructor<any>> | null) | null",
              "required": false,
              "description": ""
            },
            {
              "name": "disableButtonEnhancement",
              "type": "boolean",
              "required": false,
              "description": "Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-dialog--default",
      "htmlPath": "components/Dialog/",
      "markdownPath": "components/Dialog.md"
    },
    {
      "id": "divider",
      "title": "Divider",
      "summary": "A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and text hierarchy to organize content in your layout.",
      "kind": "components",
      "route": "components/Divider",
      "label": "Divider",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=320758-1170"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/divider/usage"
        }
      ],
      "aliases": [
        "/divider/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Divider.md",
      "examples": [
        {
          "id": "components-divider--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Divider.stories.tsx",
          "description": "Unlike Fluent's `Divider`, this `Divider` drops the `children` and\n`alignContent` props entirely — there's no inline content/label slot, just\na plain line. Use it purely to visually separate two pieces of content, as\nbelow. If you need a labelled divider, use the Fluent-compatible\n`DividerLabeled` export instead.",
          "sourcePath": "source/examples/components-divider--default.tsx",
          "sha256": "2da5e653eed0984cd6b66ebed85ef9e0d59442cafca579157d03a559d05651ae",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-divider--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/DividerDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-divider--appearance.tsx",
          "sha256": "169b9842f7581ad05226a49d7138f3b3bf4cc99b23848ad05a935c443cc48ef0",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-divider--default-dev",
          "exportName": "DefaultDev",
          "name": "Default Dev",
          "origin": "local",
          "originalSource": "src/stories/components/DividerDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-divider--default-dev.tsx",
          "sha256": "5219104f0238c2027cf6680279d03b75a02e63416819c14c8a175146e013685d",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-divider--inset",
          "exportName": "Inset",
          "name": "Inset",
          "origin": "local",
          "originalSource": "src/stories/components/DividerDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-divider--inset.tsx",
          "sha256": "c98bdb75efa5ffaecd350ead06ed150a26689c7cb023491f17a042d88e6bc9ed",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-divider--vertical",
          "exportName": "Vertical",
          "name": "Vertical",
          "origin": "local",
          "originalSource": "src/stories/components/DividerDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-divider--vertical.tsx",
          "sha256": "4fe8e937a54c08d00a0a2eb16fbfb33c399aea7ab757b393357f51daeada072c",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Divider",
          "kind": "component",
          "propsType": "DividerProps",
          "description": "A divider visually separates two pieces of content. Renders a styled `<hr>`.",
          "props": [
            {
              "name": "appearance",
              "type": "\"strong\" | \"brand\" | \"subtle\" | \"default\"",
              "required": false,
              "description": "A divider can have one of the preset appearances.\nWhen not specified, the divider has its default appearance.",
              "defaultValue": "'default'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": "Render as a `div` instead of the default `hr`."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "inset",
              "type": "boolean",
              "required": false,
              "description": "Adds padding to the beginning and end of the divider.",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "string | ((instance: HTMLHRElement | null) => void) | RefObject<HTMLHRElement> | null",
              "required": false,
              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref)."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "A divider can be horizontal (default) or vertical.",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-divider--default",
      "htmlPath": "components/Divider/",
      "markdownPath": "components/Divider.md"
    },
    {
      "id": "drawer",
      "title": "Drawer",
      "summary": "A drawer is a secondary content surface that slides in from one edge of a layout. Use drawers for supplemental info and simple actions related to the main content.",
      "kind": "components",
      "route": "components/Drawer",
      "label": "Drawer",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=145579-770"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/drawer/usage"
        }
      ],
      "aliases": [
        "/drawer/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Drawer.md",
      "examples": [
        {
          "id": "components-drawer--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Drawer.stories.tsx",
          "description": "Switches between overlay and inline drawer behavior while restoring focus to the trigger.",
          "sourcePath": "source/examples/components-drawer--default.tsx",
          "sha256": "1a14b3d47e91c6954acf698c6ea0398ca5317f6ae7e2696bdbf584526de694ec",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--always-open",
          "exportName": "AlwaysOpen",
          "name": "Always Open",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerAlwaysOpen.stories.tsx",
          "description": "A drawer can be always open, in which case it will not be able to be closed by the user.\nThis is useful for drawers that are used for navigation, and should always be visible.",
          "sourcePath": "source/examples/components-drawer--always-open.tsx",
          "sha256": "86e44d4e91624f2530aa3f040931bdd20cfd735a0f44f84f9fb5660ce4164673",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-drawer--custom-size",
          "exportName": "CustomSize",
          "name": "Custom Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.stories.tsx",
          "description": "The Drawer can be sized to any custom width, by overriding the `width` style property.",
          "sourcePath": "source/examples/components-drawer--custom-size.tsx",
          "sha256": "e33114de52238296316f6f6c45dbb22c0962911450845336e2e68c12fe448b34",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--inline",
          "exportName": "Inline",
          "name": "Inline",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.stories.tsx",
          "description": "InlineDrawer is often used for navigation that is not dismissible.\nAs it is on the same level as the main surface, users can still interact with other UI elements.\nThis could be useful for swapping between different items in the main surface.",
          "sourcePath": "source/examples/components-drawer--inline.tsx",
          "sha256": "43e44ead2fc73dd48c777d9e224d7dd3bcd574907c5f8d3d8d02945a754d2608",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--keep-rendered-in-the-dom",
          "exportName": "KeepRenderedInTheDOM",
          "name": "Keep Rendered In The DOM",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-drawer--keep-rendered-in-the-dom.tsx",
          "sha256": "610ef8444b6984661c951d7d2a741a09b656700a1ad552be5068f00c0cc8b6d7",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.stories.tsx",
          "description": "Drawer animations can be customized using the [Motion APIs](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs), together with the `surfaceMotion` prop.\n",
          "sourcePath": "source/examples/components-drawer--motion-custom.tsx",
          "sha256": "a4d4ee3dd7686f6f6cf57d1ea12ef2a2b0e0611852242d34131d719a3ce00766",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--motion-disabled",
          "exportName": "MotionDisabled",
          "name": "Motion Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.stories.tsx",
          "description": "To disable the Drawer transition animation, you can set both `surfaceMotion` and `backdropMotion` props of the Drawer to `null`.",
          "sourcePath": "source/examples/components-drawer--motion-disabled.tsx",
          "sha256": "bf16d56ea87e3ea3ad4cf930817522af7ab4d8842920df6230002793e13b3fab",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--multiple-levels",
          "exportName": "MultipleLevels",
          "name": "Multiple Levels",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerMultipleLevels.stories.tsx",
          "description": "When there is a need to display multiple levels of content, the drawer can be used to display them.\nIt is not recommended to invoke one drawer from another, as it can lead to a confusing experience for the user.\nInstead, when a second level of a Drawer is required, the L2 content pushes the L1 Drawer content to the side and out of the Drawer.\n\n\n\nThis can be achieved by using the Motion APIs to animate the inner content of the Drawer.",
          "sourcePath": "source/examples/components-drawer--multiple-levels.tsx",
          "sha256": "cc927c354e622030d1acabcdd475de816eb5cd4792850383ebbe2f3ddbc4819a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "@fluentui/react-motion-components-preview",
            "react"
          ]
        },
        {
          "id": "components-drawer--overlay",
          "exportName": "Overlay",
          "name": "Overlay",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawer.stories.tsx",
          "description": "OverlayDrawer contains supplementary content and is used for complex creation, edit, or management experiences.\nFor example, viewing details about an item in a list or editing settings.\nBy default, drawer is blocking and signifies that the user's full attention is required when making configurations.",
          "sourcePath": "source/examples/components-drawer--overlay.tsx",
          "sha256": "df3ea72a0faad175b756a8c321881680a88e1915b3f3a22190821c1766c72bc5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--overlay-inside-container",
          "exportName": "OverlayInsideContainer",
          "name": "Overlay Inside Container",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.stories.tsx",
          "description": "The overlay Drawer can be rendered inside a specific container by setting the `mountNode` prop to the desired container element.\nThis approach is useful when you need the Drawer to appear within a particular section of the DOM, rather than being attached to the root element.",
          "sourcePath": "source/examples/components-drawer--overlay-inside-container.tsx",
          "sha256": "9ab92d0de0d57d12045aa89f62a39c35ac7e7b12d712c634fb6e1b68650b22e2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--overlay-no-modal",
          "exportName": "OverlayNoModal",
          "name": "Overlay No Modal",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/OverlayDrawerNoModal.stories.tsx",
          "description": "An overlay is optional depending on whether or not interacting with the background content is beneficial to the user's context/scenario.\nBy setting the `modalType` prop to `non-modal`, the Drawer will not be blocking and the user can interact with the background content.",
          "sourcePath": "source/examples/components-drawer--overlay-no-modal.tsx",
          "sha256": "8f67ba9cff4cfceb7c57ad5580caed01cc003d718ba00209c4e9de1e7cc5e6d9",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--position",
          "exportName": "Position",
          "name": "Position",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.stories.tsx",
          "description": "When a Drawer is invoked, it slides in from either the start or end side, or bottom of the screen.\nThis can be specified by the `position` prop.",
          "sourcePath": "source/examples/components-drawer--position.tsx",
          "sha256": "09cb10ad1de58e0d8b3eec66235a56791d24a897b5782d4ce65e346778098d34",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--prevent-close",
          "exportName": "PreventClose",
          "name": "Prevent Close",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerPreventClose.stories.tsx",
          "description": "By setting the `modalType` prop to `alert` and not providing an onOpenChange handler, the Drawer will not be closable by clicking outside nor using the \"ESC\" key.\nThis is useful for scenarios where the user must interact with the Drawer before continuing, when opening a Drawer is a critical action or when multiple Drawers are open at the same time.",
          "sourcePath": "source/examples/components-drawer--prevent-close.tsx",
          "sha256": "c016385ca009757542c40834ce738a942a0dfbeb1a3dc723a775e4ef833fe9e2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--resizable",
          "exportName": "Resizable",
          "name": "Resizable",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.stories.tsx",
          "description": "This example shows how to implement a resizable drawer.",
          "sourcePath": "source/examples/components-drawer--resizable.tsx",
          "sha256": "5594885f3e97bf1b8849a96794aba8790e3b2cceaf91ba3c00bcb421926fc2cf",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--responsive",
          "exportName": "Responsive",
          "name": "Responsive",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.stories.tsx",
          "description": "When using the `Drawer` component, the `type` prop can be used to change the drawer type based on the viewport size.\nThe example below will change the drawer type to `overlay` when the viewport is smaller than 720px.",
          "sourcePath": "source/examples/components-drawer--responsive.tsx",
          "sha256": "ba531a1ab3fd6c565b2786997ced9753fc00d7c24d8ea530542ba9c54e1714f2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--separator",
          "exportName": "Separator",
          "name": "Separator",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.stories.tsx",
          "description": "The `separator` prop adds a line separator between the drawer and the content.\nIts placement will be determined by the `position` prop",
          "sourcePath": "source/examples/components-drawer--separator.tsx",
          "sha256": "7d7df2323f56c2de14ec5d0e5a12d05bb56d452f6399950a24e3604194576ce8",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.stories.tsx",
          "description": "The `size` prop controls the width of the drawer. The default is `small`.",
          "sourcePath": "source/examples/components-drawer--size.tsx",
          "sha256": "403f5e0934ea9854cb8f52d1f8853a5d56de8e0b51436610e95052b15329a90a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--with-navigation",
          "exportName": "WithNavigation",
          "name": "With Navigation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithNavigation.stories.tsx",
          "description": "Drawers can have any type of content and one great case is to have a toolbar in the header.\nDrawer ships with a `DrawerHeaderNavigation` component that can be used to display a toolbar in the header of the drawer.\nThis can be combined with `DrawerHeaderTitle` to display a title in the header.",
          "sourcePath": "source/examples/components-drawer--with-navigation.tsx",
          "sha256": "a312d5f1e1483f9cef0d838ebb9ffad6ee97689997f2166c8eba3ac6ebb0271e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-drawer--with-scroll",
          "exportName": "WithScroll",
          "name": "With Scroll",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithScroll.stories.tsx",
          "description": "By default, the drawer will not scroll its content when it overflows.\nTo enable this behavior, the DrawerBody component can be used to wrap the content of the drawer. \n\nImportant note: if the drawer content does not contain any focusable elements, the DrawerBody itself needs\na tabIndex of 0 to ensure keyboard scroll access.",
          "sourcePath": "source/examples/components-drawer--with-scroll.tsx",
          "sha256": "115214684fb88e1b2b0971c5e2c215ec8b4b435be98a4c2ed18444668323c493",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-drawer--with-title",
          "exportName": "WithTitle",
          "name": "With Title",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithTitle.stories.tsx",
          "description": "`DrawerHeaderTitle` is a component that provides a structured heading for a Drawer and can be used to display a title and an action.\nAlthough it works as a standalone component, it is intended to be used within a `DrawerHeader`.\nThe title renders an `h2` element by default but it can be customized using the `heading` prop.",
          "sourcePath": "source/examples/components-drawer--with-title.tsx",
          "sha256": "85a53d7813127e7d607fb4e6f76d5e7cb7e088709097a9bae353b6b20420475c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Drawer",
          "kind": "component",
          "propsType": "DrawerProps",
          "description": "Drawer contains supplementary content and are used for complex creation, edit, or management experiences.",
          "props": [
            {
              "name": "as",
              "type": "\"aside\" | \"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "backdrop",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; } & { appearance?: \"transparent\" | \"dimmed\" | undefined; }> | null | undefined",
              "required": false,
              "description": "Dimmed background of dialog.\nThe default backdrop is rendered as a `<div>` with styling.\nThis slot expects a `<div>` element which will replace the default backdrop.\nThe backdrop should have `aria-hidden=\"true\"`.\n\nAccepts an `appearance` prop to control backdrop visibility:\n- `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n- `'transparent'`: Always shows a transparent backdrop."
            },
            {
              "name": "backdropMotion",
              "type": "PresenceMotionSlotProps<FadeParams> | (Pick<PresenceComponentProps, \"imperativeRef\" | \"onMotionFinish\" | \"onMotionStart\"> & Partial<Required<Pick<DrawerBaseProps, \"size\">>> & { as?: JSXIntrinsicElementKeys; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & Required<Pick<DrawerBaseProps, \"size\">> & { children: JSXElement; }>; } & Partial<FadeParams> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & PresenceDuration & PresenceEasing & PresenceDelay & { outOpacity?: number | undefined; inOpacity?: number | undefined; } & { children: JSXElement; }> | undefined; }) | (Pick<PresenceComponentProps, \"imperativeRef\" | \"onMotionFinish\" | \"onMotionStart\"> & Partial<FadeParams> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & PresenceDuration & PresenceEasing & PresenceDelay & { outOpacity?: number | undefined; inOpacity?: number | undefined; } & { children: JSXElement; }> | undefined; } & Partial<Required<Pick<DrawerBaseProps, \"size\">>> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & Required<Pick<DrawerBaseProps, \"size\">> & { children: JSXElement; }> | undefined; }) | null | undefined",
              "required": false,
              "description": "For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "OverlayDrawer can work only as a controlled component\nand does not support uncontrolled mode i.e. defaultOpen prop"
            },
            {
              "name": "inertTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert.",
              "defaultValue": "false"
            },
            {
              "name": "modalType",
              "type": "\"alert\" | \"modal\" | \"non-modal\"",
              "required": false,
              "description": "Dialog variations.\n\n`modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\nThe tab sequence is kept within the dialog and moving the focus outside\nthe dialog will imply closing it. This is the default type of the component.\n\n`non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\nand users can interact with the rest of the page.\nThis also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n\n`alert`: is a special type of modal dialogs that interrupts the user's workflow\nto communicate an important message or ask for a decision.\nUnlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\nand it cannot be dismissed through the dimmed background.",
              "defaultValue": "modal"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "onOpenChange",
              "type": "DialogOpenChangeEventHandler",
              "required": false,
              "description": "Callback fired when the component changes value from open state."
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the open state of the Drawer",
              "defaultValue": "false"
            },
            {
              "name": "position",
              "type": "\"start\" | \"end\" | \"bottom\"",
              "required": false,
              "description": "Position of the drawer.\n\nNote: 'bottom' does not supports size, but it supports customized height.",
              "defaultValue": "'start'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement> | ((((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>) & (((instance: HTMLElement | null) => void) | RefObject<HTMLElement>))",
              "required": false,
              "description": ""
            },
            {
              "name": "separator",
              "type": "boolean",
              "required": false,
              "description": "Whether the drawer has a separator line.",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"full\"",
              "required": false,
              "description": "Size of the drawer.\n\n- 'small' - Drawer is 320px wide.\n- 'medium' - Drawer is 592px wide.\n- 'large' - Drawer is 940px wide.\n- 'full' - Drawer is 100vw wide.",
              "defaultValue": "'small'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps<Required<Pick<DrawerBaseProps, \"size\" | \"position\"> & Pick<ProviderContextValue_unstable, \"dir\">>> | SurfaceMotionSlotProps | null",
              "required": false,
              "description": "For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "type",
              "type": "\"inline\" | \"overlay\"",
              "required": false,
              "description": "Type of the drawer.\n\n- 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.\n- 'inline' - Drawer is stacked with the content",
              "defaultValue": "overlay"
            },
            {
              "name": "unmountOnClose",
              "type": "boolean",
              "required": false,
              "description": "Decides whether the drawer should be removed from the DOM tree when it is closed.\nThis can be useful when dealing with components that may contain state that should not\nbe reset when the drawer is closed.",
              "defaultValue": "true"
            }
          ]
        },
        {
          "name": "DrawerBody",
          "kind": "component",
          "propsType": "DrawerBodyProps",
          "description": "DrawerBody provides with a container for the main content of a Drawer.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DrawerFooter",
          "kind": "component",
          "propsType": "DrawerFooterProps",
          "description": "DrawerFooter provides a structured footer for the drawer component.",
          "props": [
            {
              "name": "as",
              "type": "\"footer\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DrawerHeader",
          "kind": "component",
          "propsType": "DrawerHeaderProps",
          "description": "DrawerHeader provides a structured header for the drawer component.",
          "props": [
            {
              "name": "as",
              "type": "\"header\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DrawerHeaderNavigation",
          "kind": "component",
          "propsType": "DrawerHeaderNavigationProps",
          "description": "DrawerHeaderNavigation provides a header navigation area for the Drawer.",
          "props": [
            {
              "name": "as",
              "type": "\"nav\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "DrawerHeaderTitle",
          "kind": "component",
          "propsType": "DrawerHeaderTitleProps",
          "description": "DrawerHeader provides a structured header for the drawer component.",
          "props": [
            {
              "name": "action",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Action slot for the close button"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "heading",
              "type": "({ as: \"h1\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, \"ref\"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null; }, \"children\"> & { children?: any; }) | ({ as: \"h3\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, \"ref\"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null; }, \"children\"> & { children?: any; }) | ({ as: \"h4\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, \"ref\"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, \"children\"> & { children?: any; }) | ({ as: \"h5\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, \"ref\"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, \"children\"> & { children?: any; }) | ({ as: \"h6\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, \"ref\"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, \"children\"> & { children?: any; }) | ({ as: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined; }, \"children\"> & { children?: any; }) | WithSlotShorthandValue<{ as?: \"h2\" | undefined; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, \"ref\"> & { ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "By default this is a h2, but can be any heading or div.\nIf `div` is provided do not forget to also provide proper `role=\"heading\"` and `aria-level` attributes"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "InlineDrawer",
          "kind": "component",
          "propsType": "InlineDrawerProps",
          "description": "InlineDrawer is often used for navigation that is not dismissible. As it is on the same level as\nthe main surface, users can still interact with other UI elements.",
          "props": [
            {
              "name": "as",
              "type": "\"aside\" | \"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the open state of the Drawer",
              "defaultValue": "false"
            },
            {
              "name": "position",
              "type": "\"start\" | \"end\" | \"bottom\"",
              "required": false,
              "description": "Position of the drawer.\n\nNote: 'bottom' does not supports size, but it supports customized height.",
              "defaultValue": "'start'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "separator",
              "type": "boolean",
              "required": false,
              "description": "Whether the drawer has a separator line.",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"full\"",
              "required": false,
              "description": "Size of the drawer.\n\n- 'small' - Drawer is 320px wide.\n- 'medium' - Drawer is 592px wide.\n- 'large' - Drawer is 940px wide.\n- 'full' - Drawer is 100vw wide.",
              "defaultValue": "'small'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "surfaceMotion",
              "type": "SurfaceMotionSlotProps | null",
              "required": false,
              "description": ""
            },
            {
              "name": "unmountOnClose",
              "type": "boolean",
              "required": false,
              "description": "Decides whether the drawer should be removed from the DOM tree when it is closed.\nThis can be useful when dealing with components that may contain state that should not\nbe reset when the drawer is closed.",
              "defaultValue": "true"
            }
          ]
        },
        {
          "name": "OverlayDrawer",
          "kind": "component",
          "propsType": "OverlayDrawerProps",
          "description": "OverlayDrawer contains supplementary content and are used for complex creation, edit, or management experiences.",
          "props": [
            {
              "name": "as",
              "type": "\"aside\" | \"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "backdrop",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; } & { appearance?: \"transparent\" | \"dimmed\" | undefined; }> | null | undefined",
              "required": false,
              "description": "Dimmed background of dialog.\nThe default backdrop is rendered as a `<div>` with styling.\nThis slot expects a `<div>` element which will replace the default backdrop.\nThe backdrop should have `aria-hidden=\"true\"`.\n\nAccepts an `appearance` prop to control backdrop visibility:\n- `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n- `'transparent'`: Always shows a transparent backdrop."
            },
            {
              "name": "backdropMotion",
              "type": "(Pick<PresenceComponentProps, \"imperativeRef\" | \"onMotionFinish\" | \"onMotionStart\"> & Partial<Required<Pick<DrawerBaseProps, \"size\">>> & { as?: JSXIntrinsicElementKeys; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & Required<Pick<DrawerBaseProps, \"size\">> & { children: JSXElement; }>; } & Partial<FadeParams> & { as?: JSXIntrinsicElementKeys | undefined; children?: SlotRenderFunction<PresenceMotionSlotRenderProps & PresenceDuration & PresenceEasing & PresenceDelay & { outOpacity?: number | undefined; inOpacity?: number | undefined; } & { children: JSXElement; }> | undefined; }) | null | undefined",
              "required": false,
              "description": "For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "OverlayDrawer can work only as a controlled component\nand does not support uncontrolled mode i.e. defaultOpen prop"
            },
            {
              "name": "inertTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert.",
              "defaultValue": "false"
            },
            {
              "name": "modalType",
              "type": "\"alert\" | \"modal\" | \"non-modal\"",
              "required": false,
              "description": "Dialog variations.\n\n`modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\nThe tab sequence is kept within the dialog and moving the focus outside\nthe dialog will imply closing it. This is the default type of the component.\n\n`non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\nand users can interact with the rest of the page.\nThis also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n\n`alert`: is a special type of modal dialogs that interrupts the user's workflow\nto communicate an important message or ask for a decision.\nUnlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\nand it cannot be dismissed through the dimmed background.",
              "defaultValue": "modal"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "onOpenChange",
              "type": "DialogOpenChangeEventHandler",
              "required": false,
              "description": "Callback fired when the component changes value from open state."
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the open state of the Drawer",
              "defaultValue": "false"
            },
            {
              "name": "position",
              "type": "\"start\" | \"end\" | \"bottom\"",
              "required": false,
              "description": "Position of the drawer.\n\nNote: 'bottom' does not supports size, but it supports customized height.",
              "defaultValue": "'start'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"full\"",
              "required": false,
              "description": "Size of the drawer.\n\n- 'small' - Drawer is 320px wide.\n- 'medium' - Drawer is 592px wide.\n- 'large' - Drawer is 940px wide.\n- 'full' - Drawer is 100vw wide.",
              "defaultValue": "'small'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps<Required<Pick<DrawerBaseProps, \"size\" | \"position\"> & Pick<ProviderContextValue_unstable, \"dir\">>> | null",
              "required": false,
              "description": "For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "unmountOnClose",
              "type": "boolean",
              "required": false,
              "description": "Decides whether the drawer should be removed from the DOM tree when it is closed.\nThis can be useful when dealing with components that may contain state that should not\nbe reset when the drawer is closed.",
              "defaultValue": "true"
            }
          ]
        }
      ],
      "defaultExampleId": "components-drawer--default",
      "htmlPath": "components/Drawer/",
      "markdownPath": "components/Drawer.md"
    },
    {
      "id": "dropdown",
      "title": "Dropdown",
      "summary": "A dropdown lets people choose one or more options from a list. It can be used in forms where the options require custom styling [or as a component to filter or sort information].",
      "kind": "components",
      "route": "components/Dropdown",
      "label": "Dropdown",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=324567-6252"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/dropdown/usage"
        }
      ],
      "aliases": [
        "/dropdown/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Dropdown.md",
      "examples": [
        {
          "id": "components-dropdown--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Dropdown.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dropdown--default.tsx",
          "sha256": "8062ce6a698557e170ccc340ffb4bce86254204c53f28d8475e474607712ed2b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--active-option-change",
          "exportName": "ActiveOptionChange",
          "name": "Active Option Change",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownActiveOptionChange.stories.tsx",
          "description": "OnActiveOptionChange notifies the user when the active option in the Dropdown was changed by keyboard. To react on mouse hover events, use onMouseEnter on the invididual options.",
          "sourcePath": "source/examples/components-dropdown--active-option-change.tsx",
          "sha256": "1e1663ec2a060319483fde94f60887d38813a7343fda64c315fcb53e82462c5a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownAppearance.stories.tsx",
          "description": "A Dropdown can have the following `appearance` variants:\n- `outline` (default): has a border around all four sides.\n- `underline`: only has a bottom border.\n- `filled-darker`: no border, only a subtle background color difference against a white page.\n- `filled-lighter`: no border, and a white background.\n",
          "sourcePath": "source/examples/components-dropdown--appearance.tsx",
          "sha256": "0b0477c6a46f917d6c175a3b59fbaed8fdc3f1e6b374e3caaf1902684a43495c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--clearable",
          "exportName": "Clearable",
          "name": "Clearable",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownClearable.stories.tsx",
          "description": "A Dropdown can be clearable and let users remove their selection. Note: this is not supported in multiselect mode yet.",
          "sourcePath": "source/examples/components-dropdown--clearable.tsx",
          "sha256": "d1ffee2eac190349b8e5a41aa8f8ca4804477e9cae02f23347f3eb0a845fa068",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--complex-options",
          "exportName": "ComplexOptions",
          "name": "Complex Options",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownComplexOptions.stories.tsx",
          "description": "Options are defined as JSX children, and can include nested elements or other components. When this is the case, the Option's `text` prop should be the plain text version of the option, and is used as the Dropdown button's value when the option is selected. Options should never contain interactive elements, such as buttons or links.",
          "sourcePath": "source/examples/components-dropdown--complex-options.tsx",
          "sha256": "96904ecc2e187ca82d954a8c55ecd6455892962d3ee7042635d946c085889820",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownControlled.stories.tsx",
          "description": "A Dropdown may have controlled or controlled selection and value. When the selection is controlled or a default selection is provided, a controlled value or default value must also be defined. Otherwise, the Dropdown will not be able to display a value before the Options are rendered.",
          "sourcePath": "source/examples/components-dropdown--controlled.tsx",
          "sha256": "15a31d0cdae32bb380b87377a59cfeff0a9c4f093dafa31a13201f5cb74e5929",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--controlling-open-and-close",
          "exportName": "ControllingOpenAndClose",
          "name": "Controlling Open And Close",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownControllingOpenAndClose.stories.tsx",
          "description": "The opening and close of the `Dropdown` can be controlled with your own state.\nThe `onOpenChange` callback will provide the hints for the state and triggers based on the appropriate\nevent.\n\n_When controlling the open state of the `Dropdown`, extra effort is required to ensure that interactions are_\n_still appropriate and that keyboard accessibility does not degrade._",
          "sourcePath": "source/examples/components-dropdown--controlling-open-and-close.tsx",
          "sha256": "6b79431beac757cf8d44daa954633df43a74aad16e3a7eebf80bd35f12fb8086",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--custom-options",
          "exportName": "CustomOptions",
          "name": "Custom Options",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownCustomOptions.stories.tsx",
          "description": "Options and OptionGroups can be extended and customized.Here `OptionGroup` is wrapped in `CustomOptionGroup`,which adds a custom label style and takes an `options` array prop which is mapped to child Option elements.`Option` is also wrapped in `CustomOption`, which adds a custom check icon and animal icon.The `text` prop is added to `<Option>`, since the children of `<Option>` are not a simple string.",
          "sourcePath": "source/examples/components-dropdown--custom-options.tsx",
          "sha256": "b799bef7c80409367d8accc25540988577fad95d2d6c42c9a2bb21c6b7b71f8b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-dropdown--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownDisabled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dropdown--disabled.tsx",
          "sha256": "ba84f6c4467d16e7eafe1bb2111cd1c25e9e9b9b21988a1ae7dc93e130e14c96",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--grouped",
          "exportName": "Grouped",
          "name": "Grouped",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownGrouped.stories.tsx",
          "description": "Dropdown options can be semantically grouped with the `OptionGroup` element, with an optional group label.",
          "sourcePath": "source/examples/components-dropdown--grouped.tsx",
          "sha256": "e141238e26b7e684a7d129ff7f9e917a44cb1771d58c0e90aa4c0a438d0f5423",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--inline-label",
          "exportName": "InlineLabel",
          "name": "Inline Label",
          "origin": "local",
          "originalSource": "src/stories/components/Dropdown.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dropdown--inline-label.tsx",
          "sha256": "296877860784f43a0eb62a98f06a16076394730dc0362b74bfe74ba7b4809426",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--multiselect",
          "exportName": "Multiselect",
          "name": "Multiselect",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownMultiselect.stories.tsx",
          "description": "Dropdown supports multiselect, and options within a multiselect will display checkbox icons.",
          "sourcePath": "source/examples/components-dropdown--multiselect.tsx",
          "sha256": "7098188176b97df207b31acb8e95e4a43d56419fc7c5ab356a1f5824315bc061",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownSize.stories.tsx",
          "description": "A Dropdown's size can be set to `small`, `medium` (default), or `large`.",
          "sourcePath": "source/examples/components-dropdown--size.tsx",
          "sha256": "6b67f4db4337b6aa266e307fc266430daac53d0d9634e60057903f47d53e83d3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--truncate",
          "exportName": "Truncate",
          "name": "Truncate",
          "origin": "local",
          "originalSource": "src/stories/components/Dropdown.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dropdown--truncate.tsx",
          "sha256": "807026911b55ae7d5a4bb4a02989f6ca57b9552d331ca051ffb091a43a3258eb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--truncated-value",
          "exportName": "TruncatedValue",
          "name": "Truncated Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownTruncation.stories.tsx",
          "description": "The Dropdown button slot can be customized to render child JSX, which can be used to truncate the selected value text. Dropdown options can also be customized to overflow in various ways, e.g. by allowing long words to break and wrap.",
          "sourcePath": "source/examples/components-dropdown--truncated-value.tsx",
          "sha256": "9f2191f84a59943f54ea4d63d4195a216bcc78fbf8696ab54c162ddb3ade6788",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-dropdown--with-field",
          "exportName": "WithField",
          "name": "With Field",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-combobox/stories/src/Dropdown/DropdownField.stories.tsx",
          "description": "Field can be used with Dropdown to provide a label, description, error message, and more.",
          "sourcePath": "source/examples/components-dropdown--with-field.tsx",
          "sha256": "45fda5489d5b35516034ce7efc80d05b4c05dc8adb54da2829a9bb9262589c74",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Dropdown",
          "kind": "component",
          "propsType": "DropdownProps",
          "description": "A Dropdown component that extends Fluent UI's Dropdown.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the combobox trigger.",
              "defaultValue": "'outline'"
            },
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "button",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The primary slot, the element with role=\"combobox\""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "clearable",
              "type": "boolean",
              "required": false,
              "description": "If set, the combobox will show an icon to clear the current value."
            },
            {
              "name": "clearButton",
              "type": "WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown clear icon"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "The default open state when open is uncontrolled"
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "defaultValue",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "The default value displayed in the trigger input or button when the combobox's value is uncontrolled"
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false"
            },
            {
              "name": "dynamicWidth",
              "type": "boolean",
              "required": false,
              "description": "Collapse the control to its content width when nothing is selected and\ngrow it with the typed/selected content. Only available when `label` is set."
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown arrow icon"
            },
            {
              "name": "inlinePopup",
              "type": "boolean",
              "required": false,
              "description": "Render the combobox's popup inline in the DOM.\nThis has accessibility benefits, particularly for touch screen readers."
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "Optional inline label rendered inside the control, before the value."
            },
            {
              "name": "listbox",
              "type": "WithSlotShorthandValue<Omit<ListboxSlots, \"root\"> & Omit<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }, \"ref\"> & SelectionProps & { disableAutoFocus?: boolean | undefined; } & RefAttributes<HTMLDivElement>> | null | undefined",
              "required": false,
              "description": "The dropdown listbox slot"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "multiselect",
              "type": "boolean",
              "required": false,
              "description": "Sets the selection type to multiselect.\nSet this to true for multiselect, even if fully controlling selection state.\nThis enables styles and accessibility properties to be set.",
              "defaultValue": "false"
            },
            {
              "name": "onActiveOptionChange",
              "type": "EventHandler<ActiveOptionChangeData>",
              "required": false,
              "description": ""
            },
            {
              "name": "onOpenChange",
              "type": "((e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void)",
              "required": false,
              "description": "Callback when the open/closed state of the dropdown changes"
            },
            {
              "name": "onOptionSelect",
              "type": "((event: SelectionEvents, data: OptionOnSelectData) => void)",
              "required": false,
              "description": "Callback when an option is selected"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Sets the open/closed state of the dropdown.\nUse together with onOpenChange to fully control the dropdown's visibility"
            },
            {
              "name": "placeholder",
              "type": "string",
              "required": false,
              "description": "If set, the placeholder will show when no value is selected"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configure the positioning of the combobox dropdown.\nPlease refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\nfor more details."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root dropdown slot"
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls the size of the combobox faceplate",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncateTextOverflow",
              "type": "boolean",
              "required": false,
              "description": "Controls text overflow behavior for the value. When true, long text is truncated with an ellipsis."
            },
            {
              "name": "value",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "The value displayed by the Combobox.\nUse this with `onOptionSelect` to directly control the displayed value string"
            }
          ]
        },
        {
          "name": "Listbox",
          "kind": "component",
          "propsType": "ListboxProps",
          "description": "Listbox component: a standalone selection control, or the popup in a Combobox",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false"
            },
            {
              "name": "multiselect",
              "type": "boolean",
              "required": false,
              "description": "Sets the selection type to multiselect.\nSet this to true for multiselect, even if fully controlling selection state.\nThis enables styles and accessibility properties to be set.",
              "defaultValue": "false"
            },
            {
              "name": "onOptionSelect",
              "type": "((event: SelectionEvents, data: OptionOnSelectData) => void)",
              "required": false,
              "description": "Callback when an option is selected"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "Option",
          "kind": "component",
          "propsType": "OptionProps",
          "description": "Option component: a styled child option of a Combobox",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The check icon that is visible for selected options"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Sets an option to the `disabled` state.\nDisabled options cannot be selected, but are still keyboard navigable"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "text",
              "type": "string",
              "required": false,
              "description": "An optional override the string value of the Option's display text,\ndefaulting to the Option's child content.\nThis is used as the Dropdown button's or Combobox input's value when the option is selected,\nand as the comparison for type-to-find keyboard functionality.\nThe string value of the Option's display text when the Option's children are not a string.\nThis is used as the Dropdown button's or Combobox input's value when the option is selected,\nand as the comparison for type-to-find keyboard functionality."
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "Defines a unique identifier for the option.\nUse this to control selectedOptions, or to get the option value in the onOptionSelect callback.\nDefaults to `text` if not provided."
            }
          ]
        }
      ],
      "defaultExampleId": "components-dropdown--default",
      "htmlPath": "components/Dropdown/",
      "markdownPath": "components/Dropdown.md"
    },
    {
      "id": "dropdown-button",
      "title": "DropdownButton",
      "summary": "A Dropdown with a labelled, button-like trigger instead of an input field.",
      "kind": "components",
      "route": "components/DropdownButton",
      "label": "DropdownButton",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/dropdown-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/DropdownButton.md",
      "examples": [
        {
          "id": "components-button-dropdownbutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/DropdownButton.stories.tsx",
          "description": "With no `value`/`selectedOptions`, `DropdownButton` renders just its\n`label` (e.g. `Sort by`) instead of a `label: value` pair — it reads like a\nmenu trigger until an option is picked. Pass `clearable` if users should be\nable to return to this unselected state after choosing a value.",
          "sourcePath": "source/examples/components-button-dropdownbutton--default.tsx",
          "sha256": "1035e0d28cd8e8aac2b346d8c5fd591d05d9657cb0c201b3366569ed8cc02470",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-button-dropdownbutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/DropdownButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-dropdownbutton--appearance.tsx",
          "sha256": "860302240c3dffc44aee6ed9dd8ead967cbe61b8df0a1a3e592d5278c0169bb5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-dropdownbutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "local",
          "originalSource": "src/stories/components/DropdownButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-dropdownbutton--disabled.tsx",
          "sha256": "e7dd4404b152b78168b27604d877a95ee74e0e2234564b6399b8371e1d5803ae",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-dropdownbutton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "local",
          "originalSource": "src/stories/components/DropdownButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-dropdownbutton--shape.tsx",
          "sha256": "63f626f43e30095cc47e0ef9233e8f06beb8a13b7862323e0c4c4250e87c0965",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-dropdownbutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "local",
          "originalSource": "src/stories/components/DropdownButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-dropdownbutton--size.tsx",
          "sha256": "c75e9c8cb5c81a01e95db07b92f7249bf9f7bec85f4f7e91aafed7679845b837",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-dropdownbutton--variants",
          "exportName": "Variants",
          "name": "Variants",
          "origin": "local",
          "originalSource": "src/stories/components/DropdownButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-dropdownbutton--variants.tsx",
          "sha256": "77226e9b4f83d3c9d9472687bd799c0a4c283e87b3e7cc4e5a874e03faabf52e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "DropdownButton",
          "kind": "component",
          "propsType": "DropdownButtonProps",
          "description": "A `Dropdown` rendered as a button with a required inline `label`.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "clearable",
              "type": "boolean",
              "required": false,
              "description": "If set, the combobox will show an icon to clear the current value."
            },
            {
              "name": "clearButton",
              "type": "WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown clear icon"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "The default open state when open is uncontrolled"
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "defaultValue",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "The default value displayed in the trigger input or button when the combobox's value is uncontrolled"
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown arrow icon"
            },
            {
              "name": "inlinePopup",
              "type": "boolean",
              "required": false,
              "description": "Render the combobox's popup inline in the DOM.\nThis has accessibility benefits, particularly for touch screen readers."
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "Optional inline label rendered inside the control, before the value."
            },
            {
              "name": "listbox",
              "type": "WithSlotShorthandValue<Omit<ListboxSlots, \"root\"> & Omit<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }, \"ref\"> & SelectionProps & { disableAutoFocus?: boolean | undefined; } & RefAttributes<HTMLDivElement>> | null | undefined",
              "required": false,
              "description": "The dropdown listbox slot"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "multiselect",
              "type": "boolean",
              "required": false,
              "description": "Sets the selection type to multiselect.\nSet this to true for multiselect, even if fully controlling selection state.\nThis enables styles and accessibility properties to be set.",
              "defaultValue": "false"
            },
            {
              "name": "onActiveOptionChange",
              "type": "EventHandler<ActiveOptionChangeData>",
              "required": false,
              "description": ""
            },
            {
              "name": "onOpenChange",
              "type": "((e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void)",
              "required": false,
              "description": "Callback when the open/closed state of the dropdown changes"
            },
            {
              "name": "onOptionSelect",
              "type": "((event: SelectionEvents, data: OptionOnSelectData) => void)",
              "required": false,
              "description": "Callback when an option is selected"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Sets the open/closed state of the dropdown.\nUse together with onOpenChange to fully control the dropdown's visibility"
            },
            {
              "name": "placeholder",
              "type": "string",
              "required": false,
              "description": "If set, the placeholder will show when no value is selected"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configure the positioning of the combobox dropdown.\nPlease refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\nfor more details."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root dropdown slot"
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'rounded'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls the size of the combobox faceplate\nA button supports different sizes.",
              "defaultValue": "'medium'\n'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "The value displayed by the Combobox.\nUse this with `onOptionSelect` to directly control the displayed value string"
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-dropdownbutton--default",
      "htmlPath": "components/DropdownButton/",
      "markdownPath": "components/DropdownButton.md"
    },
    {
      "id": "field",
      "title": "Field",
      "summary": "A field is a combination of a label and any form component, like an input, text area, or dropdown.",
      "kind": "components",
      "route": "components/Field",
      "label": "Field",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=32182-95336"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/field/usage"
        }
      ],
      "aliases": [
        "/field/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Field.md",
      "examples": [
        {
          "id": "components-field--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Field.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-field--default.tsx",
          "sha256": "83ec671c172915c7b293c097c2948ceda3dc9f8c6f845d68f4537432fcf74c1c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--component-examples",
          "exportName": "ComponentExamples",
          "name": "Component Examples",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldComponentExamples.stories.tsx",
          "description": "Field can be used with any input components in this library. This story shows some examples.\n        It can also be used to add a label or error text to components like ProgressBar.",
          "sourcePath": "source/examples/components-field--component-examples.tsx",
          "sha256": "14c178d2180178db9ccbb6b29a1fce402d424092604c2cf8c2bafae1217974de",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--disabled",
          "exportName": "Disabled",
          "name": "Disabled control",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldDisabled.stories.tsx",
          "description": "When the control inside the Field is disabled, the label should _not_ be marked disabled. This ensures the label remains readable to users.",
          "sourcePath": "source/examples/components-field--disabled.tsx",
          "sha256": "bb19dab8d4690dd7a51bedc17b85a6a42b7ddeb420e55483c087865c645ea0e1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--hint",
          "exportName": "Hint",
          "name": "Hint",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldHint.stories.tsx",
          "description": "The `hint` provides additional descriptive information about the field. Hint text should be used sparingly.",
          "sourcePath": "source/examples/components-field--hint.tsx",
          "sha256": "65d7b2bbe8dc18e1c4c56f65a2c1b40e4e03a4c0c3f2521dbe5bc50f8f671798",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--horizontal",
          "exportName": "Horizontal",
          "name": "Horizontal Orientation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldHorizontal.stories.tsx",
          "description": "Setting `orientation=\"horizontal\"` places the label beside the input. The validationMessage and hint still appear below the input.<br />The label width is a fixed 33% of the width of the field. This makes it so horizontal fields are aligned when stacked together.",
          "sourcePath": "source/examples/components-field--horizontal.tsx",
          "sha256": "17884827d62739f1f6679e7b8cf2824b24d5561e7996836b7d1c143093fad413",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--info",
          "exportName": "Info",
          "name": "Info button",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldInfo.stories.tsx",
          "description": "Add an info button to the label by replacing the Field's label with an `InfoLabel`. This can be done using a [slot render function](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs#replacing-the-entire-slot). See the code from this story for more details.\n",
          "sourcePath": "source/examples/components-field--info.tsx",
          "sha256": "19170da2c88fad102c25ad7de3c021e8f646c79b8c35786326b84e30c119ad8a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--render-function",
          "exportName": "RenderFunction",
          "name": "Third party controls a Field",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldRenderFunction.stories.tsx",
          "description": "Field uses context to associate its label and message text with its child form control. All of the form controls in this library support FieldContext.<br/>To use a third party control that does not support FieldContext, the child of Field may be a function that takes props to pass to the control. See the code in this example for more details.",
          "sourcePath": "source/examples/components-field--render-function.tsx",
          "sha256": "ea2481039d693ca63b30fdd27e7b64326d523148734a4f2742a5655f4c2c1f22",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-field--required",
          "exportName": "Required",
          "name": "Required",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldRequired.stories.tsx",
          "description": "When a Field is marked as `required`, the label has a red asterisk, and the input gets the `aria-required` property for accessiblity tools.",
          "sourcePath": "source/examples/components-field--required.tsx",
          "sha256": "8b0dfebda4e77526f6d1827feb0c9aca8dbbd7b087e5c11ddfe0adcf8ea2a345",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldSize.stories.tsx",
          "description": "The `size` prop affects the size of the Field's label, as well as form controls that support a `size` prop.",
          "sourcePath": "source/examples/components-field--size.tsx",
          "sha256": "f02889664bcc5b995e155b382fd44f77f17eb0ff719ac2db68b643cf8aca16e7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-field--validation-message",
          "exportName": "ValidationMessage",
          "name": "Validation Message",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-field/stories/src/Field/FieldValidationMessage.stories.tsx",
          "description": "<p>The `validationMessage` is used to give the user feedback about the value entered. Field does not do validation itself, but can be used to report the result of form validation.</p><p>The `validationState` affects the behavior and appearance of the message: <ul>  <li>`error` - (default) The validation message has red text with a red error icon. It has `role=\"alert\"`    so it is announced by accessibility tools. Additionally, the control inside the field has `aria-invalid`    set, which adds a red border to some field components (such as `Input`).</li>  <li>`success` - The validation message has gray text with a green checkmark icon.</li>  <li>`warning` - The validation message has gray text with a yellow exclamation icon.</li>  <li>`none` - The validation message has gray text with no icon.</li></ul></p><p>Optionally, `validationMessageIcon` can be used to override the default icon (or add an icon in the case of `validationState=\"none\"`).</p>",
          "sourcePath": "source/examples/components-field--validation-message.tsx",
          "sha256": "1949c9ade93f10a6dd3bbf8ace4f2aa02214425b12f68af3bd0c2941bf7e07c1",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Field",
          "kind": "component",
          "propsType": "FieldProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "ReactNode | ((props: FieldControlProps) => ReactNode)",
              "required": false,
              "description": "The Field's child can be a single form control, or a render function that takes the props that should be spread on\na form control.\n\nAll form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n\nFor other controls, there are two options:\n1. The child of Field can be a render function that is given the props that should be spread on the control.\n   `<Field>{(props) => <MyInput {...props} />}</Field>`\n2. The control itself can merge props from field with useFieldControlProps_unstable().\n   `props = useFieldControlProps_unstable(props);`"
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "hint",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional hint text below the field."
            },
            {
              "name": "label",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, \"required\"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined; size?: \"small\" | \"medium\" | \"large\" | undefined; weight?: \"regular\" | \"semibold\" | undefined; } & RefAttributes<HTMLLabelElement>> | null | undefined",
              "required": false,
              "description": "The label associated with the field."
            },
            {
              "name": "orientation",
              "type": "\"horizontal\" | \"vertical\"",
              "required": false,
              "description": "The orientation of the label relative to the field component.\nThis only affects the label, and not the validationMessage or hint (which always appear below the field component).",
              "defaultValue": "vertical"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "required",
              "type": "boolean",
              "required": false,
              "description": "Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\non the Field's child."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "The size of the Field's label.",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "validationMessage",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A message about the validation state. By default, this is an error message, but it can be a success, warning,\nor custom message by setting `validationState`."
            },
            {
              "name": "validationMessageIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n\nThe default depends on `validationState`:\n* error: `<ErrorCircle12Filled />`\n* warning: `<Warning12Filled />`\n* success: `<CheckmarkCircle12Filled />`\n* none: `null`"
            },
            {
              "name": "validationState",
              "type": "\"none\" | \"success\" | \"warning\" | \"error\"",
              "required": false,
              "description": "The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n\n* error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n    announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n    red border to some field components (such as `Input`).\n* success: The validation message has a green checkmark icon and gray text.\n* warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n    announced by screen readers.\n* none: The validation message has no icon and gray text.",
              "defaultValue": "error when validationMessage is set; none otherwise."
            }
          ]
        }
      ],
      "defaultExampleId": "components-field--default",
      "htmlPath": "components/Field/",
      "markdownPath": "components/Field.md"
    },
    {
      "id": "file-upload",
      "title": "FileUpload",
      "summary": "Styled drop zone exposing stable react-dropzone options and render state.",
      "kind": "components",
      "route": "components/FileUpload",
      "label": "FileUpload",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/file-upload/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/FileUpload.md",
      "examples": [
        {
          "id": "components-fileupload--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/FileUpload.stories.tsx",
          "description": "Basic drop-and-browse picker with validation and observable selection.",
          "sourcePath": "source/examples/components-fileupload--default.tsx",
          "sha256": "19fad181664510a0270c3b472d78b829396492db72fd558fc0dbba171440c937",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-fileupload--custom-drop-zone-content",
          "exportName": "CustomDropZoneContent",
          "name": "Custom Content",
          "origin": "local",
          "originalSource": "src/stories/components/FileUpload.stories.tsx",
          "description": "Demonstrates consumer-defined drop-zone content with a custom icon, layout,\ninstructions, validation feedback, and selected-file state.",
          "sourcePath": "source/examples/components-fileupload--custom-drop-zone-content.tsx",
          "sha256": "0b1f7cfd7b46aae645b9d8f817bcff2a0e8e73404b77fd53e85a09f57b930923",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-fileupload--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "local",
          "originalSource": "src/stories/components/FileUpload.stories.tsx",
          "description": "Disabled drop zone with no pointer or keyboard activation.",
          "sourcePath": "source/examples/components-fileupload--disabled.tsx",
          "sha256": "5708385caf926aa684902b70d918ab618f9a2d94d2bd15075f41f2ad6b9e55a4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-fileupload--with-file-grid",
          "exportName": "WithFileGrid",
          "name": "With File Grid",
          "origin": "local",
          "originalSource": "src/stories/components/FileUpload.stories.tsx",
          "description": "Composes `FileUpload` with an application-owned `DataGrid`. This story owns\nits file model, status transitions, retry, and delete behavior.",
          "sourcePath": "source/examples/components-fileupload--with-file-grid.tsx",
          "sha256": "a3eeb02f89f06a4cced08fd9c939b8854d52b1653b59306775c96b82f8e93f18",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "FileUpload",
          "kind": "component",
          "propsType": "FileUploadProps",
          "description": "",
          "props": [
            {
              "name": "accept",
              "type": "Accept",
              "required": false,
              "description": ""
            },
            {
              "name": "ariaDescribedBy",
              "type": "string",
              "required": false,
              "description": "IDs of elements that describe the drop zone and its file input."
            },
            {
              "name": "ariaLabel",
              "type": "string",
              "required": true,
              "description": "Localized accessible name for the drop zone and its file input."
            },
            {
              "name": "children",
              "type": "ReactNode | ((state: FileUploadState) => ReactNode)",
              "required": true,
              "description": "Presentational content shown inside the drop zone, optionally based on its\ncurrent drag state. Do not include interactive controls such as buttons or\nlinks because the root is already interactive."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "maxFiles",
              "type": "number",
              "required": false,
              "description": ""
            },
            {
              "name": "maxSize",
              "type": "number",
              "required": false,
              "description": ""
            },
            {
              "name": "minSize",
              "type": "number",
              "required": false,
              "description": ""
            },
            {
              "name": "onDrop",
              "type": "(<T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "onDropAccepted",
              "type": "(<T extends File>(files: T[], event: DropEvent) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "onDropRejected",
              "type": "((fileRejections: FileRejection[], event: DropEvent) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "LegacyRef<HTMLDivElement>",
              "required": false,
              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref)."
            },
            {
              "name": "validator",
              "type": "(<T extends File>(file: T) => FileError | readonly FileError[] | null)",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-fileupload--default",
      "htmlPath": "components/FileUpload/",
      "markdownPath": "components/FileUpload.md"
    },
    {
      "id": "illicon",
      "title": "Illicon",
      "summary": "Render saved dot-grid illustrations, convert icons in the browser, and export editable SVG.",
      "kind": "components",
      "route": "components/Illicon",
      "label": "Illicon",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/illicon/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Illicon.md",
      "examples": [
        {
          "id": "components-illicon--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Illicon.stories.tsx",
          "description": "Samples Agents20Filled at 2x its native resolution, then renders the resulting\n40 x 40 grid at 200 x 200 CSS pixels with 2px dots and 5px pitch.\nNative 20px at 2x is the recommended standard for new Fluent-based Illicons.\nThe helper shows asynchronous browser preparation with explicit loading and\nerror states. Applications can save the returned data and render it directly\nwithout converting again. An accessible label identifies the standalone image.",
          "sourcePath": "source/examples/components-illicon--default.tsx",
          "sha256": "ac1d28a1af1bf47fcb20a5f51a9a44f7806544b4f1459e7b11edc2114a9778b3",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-illicon--in-empty-state",
          "exportName": "InEmptyState",
          "name": "In Empty State",
          "origin": "local",
          "originalSource": "src/stories/components/Illicon.stories.tsx",
          "description": "Uses an Illicon as the dotted illustration in an empty state.",
          "sourcePath": "source/examples/components-illicon--in-empty-state.tsx",
          "sha256": "52fc7396401c3101b5edc88d9aa2554b2974272a728057a35fbf6fa8fbf0fd65",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-illicon--original-vs-illicon",
          "exportName": "OriginalVsIllicon",
          "name": "Original vs. Illicon",
          "origin": "local",
          "originalSource": "src/stories/components/Illicon.stories.tsx",
          "description": "Compare Filled and Regular icons at native-size sampling multiples.\nStarts with the recommended native 20px source at 2x; other settings are\navailable for visual testing.\nThe multiplier changes occupancy resolution. Radius and pitch only change\nrendering; a 2px dot stays 2px at every multiplier. Regular icons usually\nrepresent outlines using filled paths rather than SVG stroke attributes.",
          "sourcePath": "source/examples/components-illicon--original-vs-illicon.tsx",
          "sha256": "d4afa4b067ae5ece35335310544868a40977638a3c3a0841133cf897d1cde5ef",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-illicon--stroked-svg",
          "exportName": "StrokedSvg",
          "name": "Stroked SVG",
          "origin": "local",
          "originalSource": "src/stories/components/Illicon.stories.tsx",
          "description": "Real 1px SVG strokes, rather than outline-shaped filled paths. Compare\nrectangles, curves, and a diagonal at 1x, 2x, 3x, or 4x sampling.",
          "sourcePath": "source/examples/components-illicon--stroked-svg.tsx",
          "sha256": "dda1cad6d7887c960593081b56556e798b4fc0bb7f55e7ae0c805615e24fc698",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "CustomSvgDev is excluded: Verification-only story marked !manifest.",
        "EmptyGridDev is excluded: Verification-only story marked !manifest.",
        "SourceRecreationDev is excluded: Verification-only source comparison marked !manifest.",
        "Catalog is excluded: Local searchable gallery marked !manifest; reviewed artwork is listed below."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Illicon",
          "kind": "component",
          "propsType": "IlliconProps",
          "description": "Renders saved occupancy as SVG circles, or preserves custom inline SVG artwork.\nSupply aria-label/aria-labelledby for meaningful images; otherwise it is decorative.\nConvert source icons separately with iconToDotGrid before rendering.",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<SVGProps<SVGSVGElement>, string | JSXElementConstructor<any>>",
              "required": false,
              "description": "Trusted inline SVG. Use currentColor for theme-aware paint; geometry is not rewritten."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "data",
              "type": "DotGridData",
              "required": false,
              "description": ""
            },
            {
              "name": "pitch",
              "type": "number",
              "required": false,
              "description": "Center-to-center distance between cells. Defaults to 5."
            },
            {
              "name": "radius",
              "type": "number",
              "required": false,
              "description": "Circle radius. Defaults to 1; must fit within half the pitch."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "number",
              "required": false,
              "description": "Display width for custom SVG artwork only. Grids use cells times pitch."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "iconToDotGrid",
          "kind": "function",
          "description": "Browser-only conversion of standalone, static SVG artwork into occupancy.\nThe browser renders shapes, strokes, transforms, and local SVG references.\nBy default, grid dimensions are the SVG viewBox dimensions times 2.\nFor Fluent-based Illicons, prefer native 20px variants at the default 2x.\nThe canvas has one pixel per output cell; each pixel's alpha determines occupancy.\nEmpty rows and columns are never trimmed. No radius or pitch is stored.",
          "signatures": [
            "(source: IconToDotGridSource, options?: IconToDotGridOptions): Promise<DotGridData>"
          ]
        },
        {
          "name": "dotGridToSvg",
          "kind": "function",
          "description": "Export standalone, circle-based SVG with explicit ink for Figma and other tools.",
          "signatures": [
            "(data: DotGridData, options?: DotGridRenderOptions): string"
          ]
        }
      ],
      "defaultExampleId": "components-illicon--default",
      "htmlPath": "components/Illicon/",
      "markdownPath": "components/Illicon.md"
    },
    {
      "id": "image",
      "title": "Image",
      "summary": "Images, like photos and illustrations, help reinforce a message and express your product or app's style.",
      "kind": "components",
      "route": "components/Image",
      "label": "Image",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=417322-8489"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/image/usage"
        }
      ],
      "aliases": [
        "/image/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Image.md",
      "examples": [
        {
          "id": "components-image--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Image.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-image--default.tsx",
          "sha256": "18106ec057544088762dc4552929e1b6bbdbd7a9f2be01e47bcf3c711bace8c9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-image--block",
          "exportName": "Block",
          "name": "Block",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageBlock.stories.tsx",
          "description": "An Image can be maximized in order to fill its parent container.",
          "sourcePath": "source/examples/components-image--block.tsx",
          "sha256": "1d490ba00777593a5682cf303911059870955ca49cc98d6208e51b1ef73c8967",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-image--bordered",
          "exportName": "Bordered",
          "name": "Bordered",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageBordered.stories.tsx",
          "description": "The `bordered` prop will apply a border style to images regardless of its shape.",
          "sourcePath": "source/examples/components-image--bordered.tsx",
          "sha256": "ed2b6235ed15a91b41ad236a589728b567ac8d6cab1c46b1baf2f3cb5e305659",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-image--fallback",
          "exportName": "Fallback",
          "name": "Fallback",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageFallback.stories.tsx",
          "description": "In cases when images fail to load, the Image component will result into the native `<img/>` browser fallback.",
          "sourcePath": "source/examples/components-image--fallback.tsx",
          "sha256": "8958a7768f16267102cadb9bc6b58015399d3f5bc66da13774049dc095d51008",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-image--fit",
          "exportName": "Fit",
          "name": "Fit",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageFit.stories.tsx",
          "description": "The `fit` prop is used to determine how the image should be resized in order to fit its container.\n\nThe image can be resized in various ways: centering to its container(`center`),\n         filling its container (`cover`) or preserving the aspect ratio (`contain`).",
          "sourcePath": "source/examples/components-image--fit.tsx",
          "sha256": "99d24a8303aaf44366a87fbe81fdd530a3b76441260e5eea9eca7eb19d23eee0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-image--shadow",
          "exportName": "Shadow",
          "name": "Shadow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageShadow.stories.tsx",
          "description": "The shadow prop will apply box shadow styling to the image.",
          "sourcePath": "source/examples/components-image--shadow.tsx",
          "sha256": "af4d9bdb5e31d0720e7d80c248e6b381dea288e723673453b7fe58e93fd4e163",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-image--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-image/stories/src/Image/ImageShape.stories.tsx",
          "description": "Images can be styled as square (default), circular, or with rounded corners.",
          "sourcePath": "source/examples/components-image--shape.tsx",
          "sha256": "18cac17ffa2c0622aa1c4f916f7676c3a38923c65043ec7b9a551638934c08f8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Image",
          "kind": "component",
          "propsType": "ImageProps",
          "description": "The Image component ensures the consistent styling of images.",
          "props": [
            {
              "name": "as",
              "type": "\"img\"",
              "required": false,
              "description": ""
            },
            {
              "name": "block",
              "type": "boolean",
              "required": false,
              "description": "An image can take up the width of its container.",
              "defaultValue": "false"
            },
            {
              "name": "bordered",
              "type": "boolean",
              "required": false,
              "description": "An image can appear with a rectangular border.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "fit",
              "type": "\"center\" | \"none\" | \"default\" | \"contain\" | \"cover\"",
              "required": false,
              "description": "An image can set how it should be resized to fit its container.",
              "defaultValue": "'default'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLImageElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shadow",
              "type": "boolean",
              "required": false,
              "description": "An image can appear elevated with shadow.",
              "defaultValue": "false"
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "An image can appear square, circular, or rounded.",
              "defaultValue": "'square'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-image--default",
      "htmlPath": "components/Image/",
      "markdownPath": "components/Image.md"
    },
    {
      "id": "info-button",
      "title": "Info button",
      "summary": "A button that reveals supplemental information in a popover.",
      "kind": "components",
      "route": "components/InfoButton",
      "label": "Info button",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=77695-190112"
        },
        {
          "label": "Fluent info label guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/infolabel/usage"
        }
      ],
      "aliases": [
        "/info-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/InfoButton.md",
      "examples": [
        {
          "id": "components-infobutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/InfoButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-infobutton--default.tsx",
          "sha256": "5bf78258b653d8d359761c165e39535669d6360aaffde97af2ead0d44884597a",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-infobutton--primitive-info",
          "exportName": "PrimitiveInfo",
          "name": "Primitive Info",
          "origin": "local",
          "originalSource": "src/stories/components/InfoButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-infobutton--primitive-info.tsx",
          "sha256": "0a9bf4d5dc8df76b8956da5a2a14a3d1afc8327288a47760840bb500476a9cb3",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-infobutton--sizes",
          "exportName": "Sizes",
          "name": "Sizes",
          "origin": "local",
          "originalSource": "src/stories/components/InfoButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-infobutton--sizes.tsx",
          "sha256": "5068c8a8c6436a4e62d6ec2b94d130330dc3bcebf3d6c4ca81ce753792ef5c1e",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "InfoButton",
          "kind": "component",
          "propsType": "InfoButtonProps",
          "description": "A button that reveals supplemental information in a Popover. Requires an\naccessible name via `aria-label` or `aria-labelledby`.",
          "props": [
            {
              "name": "aria-label",
              "type": "string",
              "required": false,
              "description": "Defines a string value that labels the current element."
            },
            {
              "name": "aria-labelledby",
              "type": "string",
              "required": false,
              "description": "Identifies the element (or elements) that labels the current element."
            },
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "info",
              "type": "NonNullable<WithSlotShorthandValue<Omit<PopoverSurfaceSlots, \"root\"> & Omit<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }, \"ref\"> & RefAttributes<HTMLDivElement>> | null> | undefined",
              "required": false,
              "description": "The information to be displayed in the PopoverSurface when the button is pressed."
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "Whether the InfoButton should be rendered inline or on a Portal.",
              "defaultValue": "true"
            },
            {
              "name": "popover",
              "type": "NonNullable<WithSlotShorthandValue<Partial<Omit<PopoverProps, \"openOnHover\">>> | null>",
              "required": false,
              "description": "The Popover element that wraps the info and root slots. Use this slot to pass props to the Popover."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Size of the InfoButton.",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-infobutton--default",
      "htmlPath": "components/InfoButton/",
      "markdownPath": "components/InfoButton.md"
    },
    {
      "id": "info-label",
      "title": "Info label",
      "summary": "InfoLabel is a combination of a label and info button. When people interact with the info button, the information is surfaced in a Popover.",
      "kind": "components",
      "route": "components/InfoLabel",
      "label": "Info label",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=323059-758"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/infolabel/usage"
        }
      ],
      "aliases": [
        "/info-label/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/InfoLabel.md",
      "examples": [
        {
          "id": "components-infolabel--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/InfoLabel.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-infolabel--default.tsx",
          "sha256": "59e1c0a5eab979427d2746673c938746dd19fc147aba6ba382e1a3b3c0f90154",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-infolabel--in-field",
          "exportName": "InField",
          "name": "In a Field",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelInField.stories.tsx",
          "description": "An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot [render function](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--docs#replacing-the-entire-slot) support. See the code from this story for an example.\n",
          "sourcePath": "source/examples/components-infolabel--in-field.tsx",
          "sha256": "ad510182107c1ab89573446b8f8ecb94424ccff417cdb61806a1df79cd73e9b5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-infolabel--required",
          "exportName": "Required",
          "name": "Required",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelRequired.stories.tsx",
          "description": "When marked `required`, the indicator asterisk is placed before the InfoButton.",
          "sourcePath": "source/examples/components-infolabel--required.tsx",
          "sha256": "b31d6eacc627087b13cfc86281729d5fe654601dc50a90e76e47378c4d440d9e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-infolabel--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelSize.stories.tsx",
          "description": "InfoLabel's `size` prop affects the size of the Label and InfoButton. The default size is medium. The small size only meets WCAG's minimum target size requirement if it has at least 2px of non-interactive space on all sides.",
          "sourcePath": "source/examples/components-infolabel--size.tsx",
          "sha256": "1b6613c3da33be8cf0ace223f01674fd43ae34f26854ca4009f1d6569f371783",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "InfoLabel",
          "kind": "component",
          "propsType": "InfoLabelProps",
          "description": "InfoLabel component",
          "props": [
            {
              "name": "as",
              "type": "\"label\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Renders the label as disabled",
              "defaultValue": "false"
            },
            {
              "name": "info",
              "type": "NonNullable<WithSlotShorthandValue<Omit<PopoverSurfaceSlots, \"root\"> & Omit<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }, \"ref\"> & RefAttributes<HTMLDivElement>> | null> | undefined",
              "required": false,
              "description": "The content of the InfoButton's popover."
            },
            {
              "name": "infoButton",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<Partial<InfoButtonSlots>>, \"disabled\" | \"popover\"> & { size?: \"small\" | \"medium\" | \"large\"; inline?: boolean; popover?: NonNullable<WithSlotShorthandValue<Partial<Omit<PopoverProps, \"openOnHover\">>> | null> | undefined; } & RefAttributes<HTMLButtonElement>> | null | undefined",
              "required": false,
              "description": "The InfoButton component.\n\nIt is not typically necessary to use this prop. The content can be set using the `info` prop of the InfoLabel."
            },
            {
              "name": "label",
              "type": "NonNullable<WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, \"required\"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined; size?: \"small\" | \"medium\" | \"large\" | undefined; weight?: \"regular\" | \"semibold\" | undefined; } & RefAttributes<HTMLLabelElement>> | null> | undefined",
              "required": false,
              "description": "The Label component.\n\nIt is not typically necessary to use this prop. The label text is the child of the `<InfoLabel>`, and other props\nsuch as `size` and `required` should be set directly on the `InfoLabel`.\n\nThis is the PRIMARY slot: all native properties specified directly on `<InfoLabel>` will be applied to this slot,\nexcept `className` and `style`, which remain on the root slot."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLLabelElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "required",
              "type": "boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Displays an indicator that the label is for a required field. The required prop can be set to true to display\nan asterisk (*). Or it can be set to a string or jsx content to display a different indicator.",
              "defaultValue": "false"
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A label supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "weight",
              "type": "\"regular\" | \"semibold\"",
              "required": false,
              "description": "A label supports regular and semibold fontweight.",
              "defaultValue": "regular"
            }
          ]
        }
      ],
      "defaultExampleId": "components-infolabel--default",
      "htmlPath": "components/InfoLabel/",
      "markdownPath": "components/InfoLabel.md"
    },
    {
      "id": "input",
      "title": "Input",
      "summary": "An input allows people to enter short, free form text data. If you need to collect more than one line of information, try textarea.",
      "kind": "components",
      "route": "components/Input",
      "label": "Input",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=321038-7764"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/input/usage"
        }
      ],
      "aliases": [
        "/input/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Input.md",
      "examples": [
        {
          "id": "components-input--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Input.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-input--default.tsx",
          "sha256": "57440aa8fade9d20ce127b7ec432b39ec3950fd4b3dc49e3768e93f42eea6f6a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/InputDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-input--appearance.tsx",
          "sha256": "1b9231475d80dd8751fd1fbd5935c6234b25e96e3310d491070602e225e93bdc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--content-before-after",
          "exportName": "ContentBeforeAfter",
          "name": "Content before/after",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputContentBeforeAfter.stories.tsx",
          "description": "An input can have elements such as an icon or a button before or after the entered text. These elements are displayed inside the input border.",
          "sourcePath": "source/examples/components-input--content-before-after.tsx",
          "sha256": "e850e2bad7f617294b30cee09e23171dfd9e4e04805285bd1062b73a6fa43604",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-input--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputControlled.stories.tsx",
          "description": "An input can be controlled: the consuming component tracks the input's value in its state and manually handles all updates.",
          "sourcePath": "source/examples/components-input--controlled.tsx",
          "sha256": "eb2190877a26cdf4018f3fb3894541d4ed5fcda79185312df9187935488ea6bd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "local",
          "originalSource": "src/stories/components/InputDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-input--disabled.tsx",
          "sha256": "2030617d74474df476fee956e897d43a934024e78b3a324e2e21d1048951459a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--inline",
          "exportName": "Inline",
          "name": "Inline",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputInline.stories.tsx",
          "description": "An input can be rendered inline with text.",
          "sourcePath": "source/examples/components-input--inline.tsx",
          "sha256": "097bc6afded4a9264a544597da0d8c1ac3421ad4e4957ecb559c319c3f89c530",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--inline-label",
          "exportName": "InlineLabel",
          "name": "Inline Label",
          "origin": "local",
          "originalSource": "src/stories/components/Input.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-input--inline-label.tsx",
          "sha256": "95746e4050ae323893d01e96bd7a74a1ee2e1fab74a4c4c800af0ffc2e1c9437",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--placeholder",
          "exportName": "Placeholder",
          "name": "Placeholder",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputPlaceholder.stories.tsx",
          "description": "An input can have placeholder text. If using the placeholder as a label (which is not recommended for usability), be sure to provide an `aria-label` for screen reader users.",
          "sourcePath": "source/examples/components-input--placeholder.tsx",
          "sha256": "ee53b5e1e2d2b8509db9b3cfbdc91fde63b1873960f1c07fb5f39055a0a67548",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--read-only",
          "exportName": "ReadOnly",
          "name": "Read Only",
          "origin": "local",
          "originalSource": "src/stories/components/Input.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-input--read-only.tsx",
          "sha256": "b6d7572165195948771fb7a59709040df1bfcdb022f70bb0bd4478a78dbcb7ce",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputSize.stories.tsx",
          "description": "An input can have different sizes.",
          "sourcePath": "source/examples/components-input--size.tsx",
          "sha256": "d83ad6ce28c0197a59c25d59afd25d4331cce962c40bec4032515001fd006d3d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--type",
          "exportName": "Type",
          "name": "Type",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputType.stories.tsx",
          "description": "An input can have a custom text-based [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types) such as `email`, `url`, or `password` based on the type of value the user will enter.\n\nNote that no custom styling is currently applied for alternative types, and some types may activate browser-default styling which does not match the Fluent design language.",
          "sourcePath": "source/examples/components-input--type.tsx",
          "sha256": "e4c91b38456fb46b83699a75f814a7780fbcb0005e4570a34d005634e8da226b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-input--uncontrolled",
          "exportName": "Uncontrolled",
          "name": "Uncontrolled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-input/stories/src/Input/InputUncontrolled.stories.tsx",
          "description": "By default, an input is uncontrolled: it tracks all updates internally. You can optionally provide a default value.",
          "sourcePath": "source/examples/components-input--uncontrolled.tsx",
          "sha256": "35dacabc6d628d55545bc38176c72af516b85cd11838d4772063fe7a06c64295",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Input",
          "kind": "component",
          "propsType": "InputProps",
          "description": "An Input component that extends Fluent UI's Input with an inline label.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\" | \"filled-darker-shadow\" | \"filled-lighter-shadow\"",
              "required": false,
              "description": "Controls the colors and borders of the input.\n\nNote: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.",
              "defaultValue": "'outline'"
            },
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": "Input can't have children."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "contentAfter",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element after the input text, within the input border"
            },
            {
              "name": "contentBefore",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element before the input text, within the input border"
            },
            {
              "name": "defaultValue",
              "type": "string",
              "required": false,
              "description": "Default value of the input. Provide this if the input should be an uncontrolled component\nwhich tracks its current state internally; otherwise, use `value`.\n\n(This prop is mutually exclusive with `value`.)"
            },
            {
              "name": "dynamicWidth",
              "type": "boolean",
              "required": false,
              "description": "Collapse the control to its content width when nothing is selected and\ngrow it with the typed/selected content. Only available when `label` is set."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n\nThis is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n(except `className` and `style`, which go to the `root` slot). The top-level `ref` will\nalso go here."
            },
            {
              "name": "label",
              "type": "string",
              "required": false,
              "description": "Optional inline label rendered inside the control, before the value."
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void)",
              "required": false,
              "description": "Called when the user changes the input's value."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n(A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n\nThe root slot receives the `className` and `style` specified directly on the `<Input>`.\nAll other top-level native props will be applied to the primary slot, `input`."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Size of the input (changes the font size and spacing).",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncateTextOverflow",
              "type": "boolean",
              "required": false,
              "description": "Controls text overflow behavior for the value. When true, long text is truncated with an ellipsis."
            },
            {
              "name": "type",
              "type": "\"number\" | \"search\" | \"time\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"date\" | \"datetime-local\" | \"month\" | \"password\" | \"week\"",
              "required": false,
              "description": "An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\nbased on the type of value the user will enter.\n\nNote that no custom styling is currently applied for alternative types, and some types may\nactivate browser-default styling which does not match the Fluent design language.\n\n(For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n`<input>` element instead.)",
              "defaultValue": "'text'"
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "Current value of the input. Provide this if the input is a controlled component where you\nare maintaining its current state; otherwise, use `defaultValue`.\n\n(This prop is mutually exclusive with `defaultValue`.)"
            }
          ]
        }
      ],
      "defaultExampleId": "components-input--default",
      "htmlPath": "components/Input/",
      "markdownPath": "components/Input.md"
    },
    {
      "id": "interaction-tag",
      "title": "Interaction tag",
      "summary": "A tag is a representation of a value that someone has picked, like recipients for an email or categories on a planner task.",
      "kind": "components",
      "route": "components/InteractionTag",
      "label": "Interaction tag",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=175028-86039"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tag/usage"
        }
      ],
      "aliases": [
        "/interaction-tag/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/InteractionTag.md",
      "examples": [
        {
          "id": "components-tag-interactiontag--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/InteractionTag.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tag-interactiontag--default.tsx",
          "sha256": "4b1a4376929d0f10d9227914c6519d24aab3cf160a555372fb84be0f3481a06d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagAppearance.stories.tsx",
          "description": "An InteractionTag can have a `filled`, `outline` or `brand` appearance. The default is `filled`.",
          "sourcePath": "source/examples/components-tag-interactiontag--appearance.tsx",
          "sha256": "10abc03519bd9ea7abf0e7ea104ce9aa2c84e1071956bb8c4ee0e11e14296d16",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDisabled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tag-interactiontag--disabled.tsx",
          "sha256": "d2dbaa7d4ccbf0514b9829eb3af843a3528688e05a7394367994a7b787e6df1e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--dismiss",
          "exportName": "Dismiss",
          "name": "Dismiss",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagDismiss.stories.tsx",
          "description": "An InteractionTag can have a secondary action that is usually dismiss. TagGroup can handle dismiss for a collection of tags. Ensure that focus is properly managed when all tags have been dismissed.",
          "sourcePath": "source/examples/components-tag-interactiontag--dismiss.tsx",
          "sha256": "8e06f01f53f10ddd419146ad477717f99463cc50ad47c0060437445e24fa9bd7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--has-primary-action",
          "exportName": "HasPrimaryAction",
          "name": "Has Primary Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx",
          "description": "An InteractionTag can have a primary action. This example shows an Interaction Tag that opens a popover as Primary Action.",
          "sourcePath": "source/examples/components-tag-interactiontag--has-primary-action.tsx",
          "sha256": "632c8c9f5cfb11694ff8eece02acd3a04bde89a062bb7069bcbf72939cd696bd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagIcon.stories.tsx",
          "description": "An InteractionTag can render a custom icon if provided.",
          "sourcePath": "source/examples/components-tag-interactiontag--icon.tsx",
          "sha256": "21295c93189ac74a5e61fb71222da1dd540753dd930ddd439b7ac914967578d5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--media",
          "exportName": "Media",
          "name": "Media",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagMedia.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tag-interactiontag--media.tsx",
          "sha256": "054a445de7ed049d380c2ccfcb0d5a76e120e64b4b702a8e64b8352d00fe0229",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--secondary-text",
          "exportName": "SecondaryText",
          "name": "SecondaryText",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagSecondaryText.stories.tsx",
          "description": "An InteractionTag can have a secondary text.",
          "sourcePath": "source/examples/components-tag-interactiontag--secondary-text.tsx",
          "sha256": "02808e8b9964d4278299b4179dce051813637faf2f65f849dd420c8294f13f11",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--selected",
          "exportName": "Selected",
          "name": "Selected",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagSelected.stories.tsx",
          "description": "InteractionTag that can be selected. Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.",
          "sourcePath": "source/examples/components-tag-interactiontag--selected.tsx",
          "sha256": "3971022c9fcf13a6e3cc99415e3624f67c7b39fd940f10ecda00f9d1b1a82ae6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagShape.stories.tsx",
          "description": "An InteractionTag can be rounded or circular,",
          "sourcePath": "source/examples/components-tag-interactiontag--shape.tsx",
          "sha256": "f4aaba61437bad8fc43c7435789017abbf4413e3885e517645e2f49c61b006fb",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-interactiontag--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/InteractionTag/InteractionTagSize.stories.tsx",
          "description": "An InteractionTag supports `medium`, `small` and `extra-small` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-tag-interactiontag--size.tsx",
          "sha256": "a102d18d3563f14f9acdea8e0941aeeadd54bd755af5f305f058cf5802e62e04",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "InteractionTag",
          "kind": "component",
          "propsType": "InteractionTagProps",
          "description": "InteractionTag component - a visual representation of an attribute with primary and secondary actions.\nCan have `InteractionTagPrimary` and `InteractionTagSecondary` components as its children.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"filled\" | \"outline\"",
              "required": false,
              "description": "An InteractionTag can have filled, outlined or brand experience.",
              "defaultValue": "'filled'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "An InteractionTag can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selected",
              "type": "boolean",
              "required": false,
              "description": "An InteractionTag can be selected.\nNote: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.",
              "defaultValue": "false"
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\"",
              "required": false,
              "description": "An InteractionTag can have rounded or circular shape.",
              "defaultValue": "'round'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"extra-small\"",
              "required": false,
              "description": "An InteractionTag has three sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "Unique value identifying the tag within a TagGroup"
            }
          ]
        },
        {
          "name": "InteractionTagPrimary",
          "kind": "component",
          "propsType": "InteractionTagPrimaryProps",
          "description": "InteractionTagPrimary component - used as the first child of the `InteractionTag` component.\nProvides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach a primary action.",
          "props": [
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "hasSecondaryAction",
              "type": "boolean",
              "required": false,
              "description": "Whether the `InteractionTag` component has a `Secondary` component that provides an secondary action.\nIf `true`, the `InteractionTagPrimary` component will adjust its styles to accommodate the `Secondary` component.",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Slot for an icon"
            },
            {
              "name": "media",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Slot for a visual element, usually an avatar"
            },
            {
              "name": "primaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Main text for the InteractionTagPrimary button. Children of the root slot are automatically rendered here"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary text that describes or complements the main text"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "InteractionTagSecondary",
          "kind": "component",
          "propsType": "InteractionTagSecondaryProps",
          "description": "InteractionTagSecondary component - used as the second child of the `InteractionTag` component and provides the secondary action, which is dismiss by default.",
          "props": [
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-tag-interactiontag--default",
      "htmlPath": "components/InteractionTag/",
      "markdownPath": "components/InteractionTag.md"
    },
    {
      "id": "label",
      "title": "Label",
      "summary": "Labels give a name to a component or group of components.",
      "kind": "components",
      "route": "components/Label",
      "label": "Label",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=7062-121104"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/label/usage"
        }
      ],
      "aliases": [
        "/label/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Label.md",
      "examples": [
        {
          "id": "components-label--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Label.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-label--default.tsx",
          "sha256": "0fac1947d56cefd80040929e3950ea979517c48dd000a2e7a3704ac34cfdd334",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-label--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelDisabled.stories.tsx",
          "description": "A Label can be disabled.\nSince this state does not meet the required accessibility contrast ratio,\n      it should be used sparingly and make it clear that there's no interaction with the\n      control associated with it.",
          "sourcePath": "source/examples/components-label--disabled.tsx",
          "sha256": "f2140341e6c5b0635cb9b1c2e4590bbae717bf3b2e2a06b4b3caab616c459ca5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-label--required",
          "exportName": "Required",
          "name": "Required",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelRequired.stories.tsx",
          "description": "A Label can display a required asterisk or a custom required indicator. This custom required indicator canbe a custom string or jsx content.",
          "sourcePath": "source/examples/components-label--required.tsx",
          "sha256": "cc92fef24841be590a566dbf3357684144a73af5aece3d697753e76c468d4cfd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-label--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelSize.stories.tsx",
          "description": "A Label supports `small`, `medium`, and `large` sizes.",
          "sourcePath": "source/examples/components-label--size.tsx",
          "sha256": "12ca04e6d8326ba8581b3dc8d134b2df11e52f406b9cfd84ce52925ddccb8c30",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-label--weight",
          "exportName": "Weight",
          "name": "Weight",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-label/stories/src/Label/LabelWeight.stories.tsx",
          "description": "A Label with a semibold font weight.",
          "sourcePath": "source/examples/components-label--weight.tsx",
          "sha256": "b49f237f5e27109e7859abc8a0936dc77d16ff16ef7cd535b019f7aa9686162d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Label",
          "kind": "component",
          "propsType": "LabelProps",
          "description": "A label component provides a title or name to a component.",
          "props": [
            {
              "name": "as",
              "type": "\"label\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Renders the label as disabled",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLLabelElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "required",
              "type": "boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Displays an indicator that the label is for a required field. The required prop can be set to true to display\nan asterisk (*). Or it can be set to a string or jsx content to display a different indicator.",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A label supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "weight",
              "type": "\"regular\" | \"semibold\"",
              "required": false,
              "description": "A label supports regular and semibold fontweight.",
              "defaultValue": "regular"
            }
          ]
        }
      ],
      "defaultExampleId": "components-label--default",
      "htmlPath": "components/Label/",
      "markdownPath": "components/Label.md"
    },
    {
      "id": "link",
      "title": "Link",
      "summary": "Link component does not support breaking and wrapping onto the next line. In that case, use another Link component.",
      "kind": "components",
      "route": "components/Link",
      "label": "Link",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=6401-122467"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/link/usage"
        }
      ],
      "aliases": [
        "/link/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Link.md",
      "examples": [
        {
          "id": "components-link--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Link.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-link--default.tsx",
          "sha256": "c39def8b5ab03c4ee9f146f5df2bc89c493e185b79bd043c26e6c7f7ff36fa00",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkAppearance.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-link--appearance.tsx",
          "sha256": "f89cbb2e02fa76275cab4bf561580ab4a16ed7b8b1435892e595ea5f02d21038",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--as-button",
          "exportName": "AsButton",
          "name": "As Button",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkAsButton.stories.tsx",
          "description": "When the `href` property is not provided, the component is rendered as an html `<button>`",
          "sourcePath": "source/examples/components-link--as-button.tsx",
          "sha256": "2733f3d21652203a184287f7021c96ef166e9bf4fa7387a8504feba8cf92e19c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--as-span",
          "exportName": "AsSpan",
          "name": "As Span",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkAsSpan.stories.tsx",
          "description": "A Link can be rendered as an html `<span>`, in which case it will have `role=\"button\"` set.\nLinks that render as a span wrap correctly between lines, behaving as inline elements as opposed to links rendered as buttons, which always behave as inline-block elements that do not wrap correctly.",
          "sourcePath": "source/examples/components-link--as-span.tsx",
          "sha256": "ae1e44703f2e48ed0ab06d33c37da7606a6322f097b9da48a61804479c740bb5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkDisabled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-link--disabled.tsx",
          "sha256": "b67e0686884407988d72fb877061f24354ab67b2a9342d463c9004299f1cb973",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--disabled-focusable",
          "exportName": "DisabledFocusable",
          "name": "Disabled Focusable",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkDisabledFocusable.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-link--disabled-focusable.tsx",
          "sha256": "6475b789a01a18736111e76380f5cfe2ed6b3dbdc63d3aeef3c647e3e4a65c7b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--external",
          "exportName": "External",
          "name": "External",
          "origin": "local",
          "originalSource": "src/stories/components/Link.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-link--external.tsx",
          "sha256": "35682ad18fafc0f83d0f1ab081e7f73a768ac58e5bebe80648069db8010bd467",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-link--inline",
          "exportName": "Inline",
          "name": "Inline",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-link/stories/src/Link/LinkInline.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-link--inline.tsx",
          "sha256": "d69a826be9a9d407720a13fb0bed78fb13d249c7e6ca3022f7f8e1a221da7153",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Link",
          "kind": "component",
          "propsType": "LinkProps",
          "description": "A link component that extends Fluent UI's Link with an `external` flag that\nappends an inline external-link icon after the link text.",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"default\"",
              "required": false,
              "description": "A link can appear either with its default style or subtle.\nIf not specified, the link appears with its default styling.",
              "defaultValue": "'default'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\" | \"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Whether the link is disabled.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\nimportant to keep a consistent tab order for screen reader and keyboard users.",
              "defaultValue": "false"
            },
            {
              "name": "external",
              "type": "boolean",
              "required": false,
              "description": "When `true`, renders an external-link icon inline after the link text to\nsignal that the destination opens outside the current context.\nDefaults `target` to `_blank` and `rel` to `noopener noreferrer`."
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "If true, changes styling when the link is being used alongside other text content.",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "rel",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "target",
              "type": "HTMLAttributeAnchorTarget",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-link--default",
      "htmlPath": "components/Link/",
      "markdownPath": "components/Link.md"
    },
    {
      "id": "link-button",
      "title": "LinkButton",
      "summary": "A native anchor styled with Fluent Button chrome for a real, navigable link.",
      "kind": "components",
      "route": "components/LinkButton",
      "label": "LinkButton",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/link-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/LinkButton.md",
      "examples": [
        {
          "id": "components-button-linkbutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButton.stories.tsx",
          "description": "`LinkButton` renders a native `<a>` — not a `<button>` — so it's a real,\nnavigable, keyboard- and screen-reader-friendly link (works with\nctrl/cmd-click, \"open in new tab\", `rel`, crawlers, …) while preserving the\ncomplete Fluent `Button` content and visual API.",
          "sourcePath": "source/examples/components-button-linkbutton--default.tsx",
          "sha256": "7e2607f917e48068f3be499255615a559f8773cfc14d7de2646a631afb5e1ec4",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons"
          ]
        },
        {
          "id": "components-button-linkbutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-linkbutton--appearance.tsx",
          "sha256": "e8c943f556ceddc272f0a74b955364c6fbfcc733f5885368380cbb3a3bbe7b22",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-button-linkbutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-linkbutton--disabled.tsx",
          "sha256": "284d478e9ff38adbbf23c9d68561a31f2179a037fbb96bba368d2446d62c30a7",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-button-linkbutton--external",
          "exportName": "External",
          "name": "External",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButton.stories.tsx",
          "description": "Set `external` to append an external-link icon and default the native anchor\nto `target=\"_blank\"` with `rel=\"noopener noreferrer\"`.",
          "sourcePath": "source/examples/components-button-linkbutton--external.tsx",
          "sha256": "32d7eaabe78bd3c2bd8ffadd8805b55750c267ebaceb986ae51a9ea829c64e1b",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-button-linkbutton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-linkbutton--shape.tsx",
          "sha256": "bf6f86b112f55f847233cf09cbc3400e8b7a3c69fdbeb51829d60f01987057e3",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-button-linkbutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-linkbutton--size.tsx",
          "sha256": "472a02a0ba159dee62aabfbf3efabc4845081f172b9c7f15108a8702f48220c6",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-button-linkbutton--variants",
          "exportName": "Variants",
          "name": "Variants",
          "origin": "local",
          "originalSource": "src/stories/components/LinkButtonDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-linkbutton--variants.tsx",
          "sha256": "62a45ceff7320232d3b1ba327eb49e23b6bcb27850ffff6420d297b92c8e0cce",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "LinkButton",
          "kind": "component",
          "propsType": "LinkButtonProps",
          "description": "A native anchor with the complete CoreAI Button visual and content API.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "ElementType<NativeAnchorProps, keyof IntrinsicElements>",
              "required": false,
              "description": "An anchor-compatible component used to render the root."
            },
            {
              "name": "children",
              "type": "ReactNode",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "external",
              "type": "boolean",
              "required": false,
              "description": "When `true`, renders an external-link icon after the content and defaults\n`target` to `_blank` and `rel` to `noopener noreferrer`."
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'rounded'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-linkbutton--default",
      "htmlPath": "components/LinkButton/",
      "markdownPath": "components/LinkButton.md"
    },
    {
      "id": "list-item",
      "title": "List",
      "summary": "A list is a collection of items or information repeated in a vertical stack. Use lists to make information easy to scan and access.",
      "kind": "components",
      "route": "components/List",
      "label": "List",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=287954-86982"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/list/usage"
        }
      ],
      "aliases": [
        "/list-content/",
        "/list-item/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/List.md",
      "examples": [
        {
          "id": "components-list--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/List.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-list--default.tsx",
          "sha256": "d4c1a21f38a4eb17c9b978925946a05cddf726bffbce8aa278a3a3943d98f7b1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-list--list-active-element",
          "exportName": "ListActiveElement",
          "name": "List Active Element",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/ListActiveElement.stories.tsx",
          "description": "You can use selection and custom styles to show the active element in a different way. This is useful for scenarios where you want to show the details of the selected item, for example.\n\nIn this example, we are also demonstrating how the `onFocus` prop can be utilized to change the selected item immediately upon receiving focus. This allows us to show the details of the selected item in the right panel as user navigates through the list with the keyboard.",
          "sourcePath": "source/examples/components-list--list-active-element.tsx",
          "sha256": "8e3c54ff4627075d0e20e1441f466975d4f54da5071c05519d1ddb5ecaf63c0a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-list--multiple-actions-different-primary",
          "exportName": "MultipleActionsDifferentPrimary",
          "name": "Multiple Actions Different Primary",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx",
          "description": "Similar to previous example, but this one implements a custom `onAction` prop on the `ListItem`, \nallowing us to trigger a different action than the selection when the user clicks \non the list item or presses Enter.\n\nThe primary action can be triggered by clicking on the list item or pressing `Enter`.\n\nThe selection can be toggled by clicking on the checkbox or pressing `Space` when the item is focused.\n\nTo focus on the secondary actions, you can navigate between them by using left and right arrows.",
          "sourcePath": "source/examples/components-list--multiple-actions-different-primary.tsx",
          "sha256": "b3524924990e6bccc384542874ff9198b344899148639f475b3935deb14571e7",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-list--multiple-actions-selection",
          "exportName": "MultipleActionsSelection",
          "name": "Multiple Actions Selection",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.stories.tsx",
          "description": "Item with multiple actions. It has selection enabled, which is also it's primary action.\nThe selection can be toggled by clicking on the item or pressing the `Space` key.\n\nBecause the selection is the action on the item, to properly narrate the state of selection\nwe are using the role grid / row / gridcell here to properly announce when the selection on the\nitem is toggled.\n\nTo enable the user to navigate inside of the list items by pressing the `RightArrow` key,\nthe `navigationMode` prop should be set to `composite`.",
          "sourcePath": "source/examples/components-list--multiple-actions-selection.tsx",
          "sha256": "8506c5ea929ebeb232d8e3e6086a53cce481b360124a4b892afe3664f11a5158",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-list--multiple-actions-with-primary",
          "exportName": "MultipleActionsWithPrimary",
          "name": "Multiple Actions With Primary",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.stories.tsx",
          "description": "Base item with multiple actions. Doesn't support selection, but the list items have a primary action \nthat can be triggered by clicking on the item or pressing Enter.\n\n__To make the navigation work properly, the `navigationMode` prop should be set to `composite`.__\nThis will allow the user to navigate inside of the list items by pressing the `Right Arrow` key.\nIt also sets the `grid` role automatically to the list.\n\n> ⚠️ _In cases where `grid` role is used, it is important that every direct children of `ListItem`_\n_has role `gridcell`. Also each focusable item should be in its own \"gridcell\". This makes sure the _\n_screen readers work properly._",
          "sourcePath": "source/examples/components-list--multiple-actions-with-primary.tsx",
          "sha256": "54bddebbc183526ddbb1922a8c7263375c36b82729f5fd81679cf04fde1ce3dc",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-list--single-action",
          "exportName": "SingleAction",
          "name": "Single Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleAction.stories.tsx",
          "description": "When the list item should have a custom primary action on it, you can pass the `onAction` prop to the `ListItem` component.\nThis callback will also be automatically called when the user presses the Enter or Space key on the list item.\n\nTo learn more about what event triggered the action, you can check the `event.details.originalEvent`.\n\nTo enable keyboard navigation between the list items, the `navigationMode` prop should be set to `items`.",
          "sourcePath": "source/examples/components-list--single-action.tsx",
          "sha256": "471e5a57894520e7fab4a802b04dd316020c56b64d6347cd9a09b2075fd75072",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-list--single-action-selection",
          "exportName": "SingleActionSelection",
          "name": "Single Action Selection",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleActionSelection.stories.tsx",
          "description": "Any List can be selectable. You have an option to control the selection state yourself or let the List manage it for you.\n\nYou can pass `selectionMode` prop with value \"single\" or \"multiselect\" to the List component to get support for selection.\nThe items can be toggled by clicking on the list item, or pressing `Spacebar` or `Enter` when the item is focused. Keyboard navigation is automatically enabled and `navigationMode` is set to `items`.\n\nAlso this example only has one action in the list item, and it's for toggling the selection. The roles for this one are listbox and option.",
          "sourcePath": "source/examples/components-list--single-action-selection.tsx",
          "sha256": "1b4c5e7439dd96328a95a7c0809ea6eca3d389da9ddb730e8df2fbd54d5243d1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-list--single-action-selection-controlled",
          "exportName": "SingleActionSelectionControlled",
          "name": "Single Action Selection Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleActionSelectionControlled.stories.tsx",
          "description": "This example shows how to use the `selectedItems` and `onSelectionChange`\nprops to control the selection state of the List and keep track of it in the parent component.\n\nThis is more in line with how we expect the selection to be used in production environment.",
          "sourcePath": "source/examples/components-list--single-action-selection-controlled.tsx",
          "sha256": "c21970c007ae7d869480f17af5c925775cae3958d28454f9902a6f795f0a282c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-list--single-action-selection-different-primary",
          "exportName": "SingleActionSelectionDifferentPrimary",
          "name": "Single Action Selection Different Primary",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx",
          "description": "This example is similar to the previous one, but it implements a custom primary action on `ListItem`,\nallowing us to trigger a\n__different action than the selection when the user clicks on the list item or presses Enter__\n. This is useful when you want to have a primary action on the list item, but still want \nto allow the user to select it.\n\nTo change the default action on the `ListItem` (when user clicks on it or presses Enter), you can use the\n`onAction` prop. By calling `event.preventDefault()` in the `onAction` callback, you can prevent the default\naction (toggling the selection) from happening. This way, you can perform a completely custom action.\nIn this example, the custom action is an alert that triggers when the user\nclicks on the list item or presses Enter.\n\n__The selection can still be toggled by clicking on the checkbox or pressing `Space` when the item is focused.__",
          "sourcePath": "source/examples/components-list--single-action-selection-different-primary.tsx",
          "sha256": "0f5dd438aa81a24c89a5d50c4c9f2ea2ea19f0a0082d76a53a63d609de0a90c5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-list--virtualized-list",
          "exportName": "VirtualizedList",
          "name": "Virtualized List",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/VirtualizedList.stories.tsx",
          "description": "When creating a list of large size, one way of making sure you are getting the best performance\nis to use virtualization. In this example we are leveraging the `react-window` package.\n\nPlease note that if the virtualized list contains non-actionable list items, scrolling should be achieved\nby using the `tabIndex={0}` property on the List.\n\n> ⚠️ _It is important to manually set `aria-setsize` and `aria-posinset` attributes on the list items, since_\n_the virualization will only render the visible items. Relying on the DOM state for these attributes will not work._",
          "sourcePath": "source/examples/components-list--virtualized-list.tsx",
          "sha256": "2380dc10bb957950aff3213ec6771a725e1878f8c974337d9336dfc19e4fdbde",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-window"
          ]
        },
        {
          "id": "components-list--virtualized-list-with-actionable-items",
          "exportName": "VirtualizedListWithActionableItems",
          "name": "Virtualized List With Actionable Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-list/stories/src/List/VirtualizedListWithActionableItems.stories.tsx",
          "description": "Virtualized list can also be used with interactive elements.",
          "sourcePath": "source/examples/components-list--virtualized-list-with-actionable-items.tsx",
          "sha256": "896ff56b5da62f9f16c6c881446cf7f16c9e0d4d7aded253ad7e62f77efdc242",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-window"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "List examples reuse selection values as DOM IDs. Run one example at a time to keep IDs unique."
      ],
      "singlePreview": true,
      "api": [
        {
          "name": "List",
          "kind": "component",
          "propsType": "ListProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"ol\" | \"ul\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedItems",
              "type": "SelectionItemId[]",
              "required": false,
              "description": ""
            },
            {
              "name": "navigationMode",
              "type": "\"items\" | \"composite\"",
              "required": false,
              "description": ""
            },
            {
              "name": "onSelectionChange",
              "type": "EventHandler<OnListSelectionChangeData>",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement | HTMLUListElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedItems",
              "type": "SelectionItemId[]",
              "required": false,
              "description": ""
            },
            {
              "name": "selectionMode",
              "type": "\"multiselect\" | \"single\"",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-list--default",
      "htmlPath": "components/List/",
      "markdownPath": "components/List.md"
    },
    {
      "id": "markdown",
      "title": "Markdown",
      "summary": "Renders a Markdown string as themed Fluent content, including code, tables, and math.",
      "kind": "components",
      "route": "components/Markdown",
      "label": "Markdown",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/markdown/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Markdown.md",
      "examples": [
        {
          "id": "components-markdown--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Markdown.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--default.tsx",
          "sha256": "64cda85325ba08464a9f12004da33b321944a6d8953b6de6fad442b4c3823bed",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--anchor-links",
          "exportName": "AnchorLinks",
          "name": "Anchor Links",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--anchor-links.tsx",
          "sha256": "3ed83cdd7058b413cdcce4821d2b4be568e45e0a827fa993896d9ce58578a8d7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--code-block",
          "exportName": "CodeBlock",
          "name": "Code Block",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--code-block.tsx",
          "sha256": "9c8f041da3e53f3bc934ccf7fed63a300314a82e64c5d5ff4c60c6c0035dc580",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--formatting",
          "exportName": "Formatting",
          "name": "Formatting",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--formatting.tsx",
          "sha256": "943875487fcaa278929f0925f1c7732651a821af554a37715f3f7255dbd4b1c0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--headings",
          "exportName": "Headings",
          "name": "Headings",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--headings.tsx",
          "sha256": "ae89d8d4abbba1d3b002423e4e4fc0deb19b3fa027479d8427a816918e471b75",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--large-example",
          "exportName": "LargeExample",
          "name": "Large Example",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--large-example.tsx",
          "sha256": "4c737bc2de7fa58cdaa6c996ad6b88434fee7873f9653c999c97ec51b4bef389",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--links",
          "exportName": "Links",
          "name": "Links",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--links.tsx",
          "sha256": "8acad8cc72ffae2befbac7baba6b580724f4f8cf789ecd22d78a46a5389ca488",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-markdown--tables",
          "exportName": "Tables",
          "name": "Tables",
          "origin": "local",
          "originalSource": "src/stories/components/MarkdownDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-markdown--tables.tsx",
          "sha256": "e8ccd35a000041e582897b360e865d548ecbdd274aaf65a687fa842a08e95a35",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Markdown",
          "kind": "component",
          "propsType": "MarkdownProps",
          "description": "Render a Markdown string as themed Fluent UI content.",
          "props": [
            {
              "name": "allowedElements",
              "type": "readonly string[] | null",
              "required": false,
              "description": "Tag names to allow (default: all tag names);\ncannot combine w/ `disallowedElements`."
            },
            {
              "name": "allowElement",
              "type": "AllowElement | null",
              "required": false,
              "description": "Filter elements (optional);\n`allowedElements` / `disallowedElements` is used first."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": "Wrap in a `div` with this class name.\nAdditional class applied to the wrapping element."
            },
            {
              "name": "components",
              "type": "Components",
              "required": false,
              "description": "Override or extend the default element renderers."
            },
            {
              "name": "content",
              "type": "string",
              "required": true,
              "description": "The Markdown source to render."
            },
            {
              "name": "disallowedElements",
              "type": "readonly string[] | null",
              "required": false,
              "description": "Tag names to disallow (default: `[]`);\ncannot combine w/ `allowedElements`."
            },
            {
              "name": "rehypePlugins",
              "type": "PluggableList | null",
              "required": false,
              "description": "List of rehype plugins to use."
            },
            {
              "name": "remarkPlugins",
              "type": "PluggableList | null",
              "required": false,
              "description": "List of remark plugins to use."
            },
            {
              "name": "remarkRehypeOptions",
              "type": "Readonly<Options> | null",
              "required": false,
              "description": "Options to pass through to `remark-rehype`."
            },
            {
              "name": "skipHtml",
              "type": "boolean | null",
              "required": false,
              "description": "Ignore HTML in markdown completely (default: `false`)."
            },
            {
              "name": "unwrapDisallowed",
              "type": "boolean | null",
              "required": false,
              "description": "Extract (unwrap) what’s in disallowed elements (default: `false`);\nnormally when say `strong` is not allowed, it and it’s children are dropped,\nwith `unwrapDisallowed` the element itself is replaced by its children."
            },
            {
              "name": "urlTransform",
              "type": "UrlTransform | null",
              "required": false,
              "description": "Change URLs (default: `defaultUrlTransform`)"
            }
          ]
        }
      ],
      "defaultExampleId": "components-markdown--default",
      "htmlPath": "components/Markdown/",
      "markdownPath": "components/Markdown.md"
    },
    {
      "id": "menu",
      "title": "Menu",
      "summary": "A menu is a hidden list of options that is shown when someone interacts with a trigger component, like a button, an avatar, or an icon.",
      "kind": "components",
      "route": "components/Menu",
      "label": "Menu",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=301778-9076"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/menu/usage"
        }
      ],
      "aliases": [
        "/menu-item/",
        "/menu-section/",
        "/menu-split-item/",
        "/menu/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Menu.md",
      "examples": [
        {
          "id": "components-menu-menu--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Menu.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menu--default.tsx",
          "sha256": "b908e89ea34283a719b4d33fb5ed28339d104ec5fe8beba797fe716b6bde1da5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--aligning-with-icons",
          "exportName": "AligningWithIcons",
          "name": "Aligning With Icons",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuAligningWithIcons.stories.tsx",
          "description": "The `hasIcons` prop will align menu items if only a subset of menu items contain an icon.\nWhen separation of menu items is only for visual aesthetics, the `MenuDivider` component can be used\nby itself as it has no accessible markup features.",
          "sourcePath": "source/examples/components-menu-menu--aligning-with-icons.tsx",
          "sha256": "dad340e7eaca07a6f16b3653c04e4fefd8a0b3e16c138710fe80cce9a9ffa004",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--aligning-with-selectable-items",
          "exportName": "AligningWithSelectableItems",
          "name": "Aligning With Selectable Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuAligningWithSelectableItems.stories.tsx",
          "description": "The `hasCheckmarks` prop will align menu items if only a subset of menu items are selectable.",
          "sourcePath": "source/examples/components-menu-menu--aligning-with-selectable-items.tsx",
          "sha256": "5754b36080283c146234303d9a5b5a901b1f0915f33f8ea87b8368b77d040f1b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--anchor-to-custom-target",
          "exportName": "AnchorToCustomTarget",
          "name": "Anchor To Custom Target",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuAnchorToTarget.stories.tsx",
          "description": "A Menu can be used without a trigger and anchored to any DOM element. This can be useful if\na Menu instance needs to be reused in different places.\n\n_Not using a MenuTrigger will require more work to make sure your scenario is accessible_\n_such as implementing accessible markup and keyboard interactions for your trigger_",
          "sourcePath": "source/examples/components-menu-menu--anchor-to-custom-target.tsx",
          "sha256": "4242ea806bbe3219bbc9ebb494658b8c9921106ba73c1dad517dbb0f0f13d58e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--checkbox-items",
          "exportName": "CheckboxItems",
          "name": "Checkbox Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuCheckboxItems.stories.tsx",
          "description": "A variant of `MenuItem` that handles checkbox like selection. The `name` and `value` props are are used\nsimilar to [HTML checkboxes with `input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)\n\n```html\n<input type=\"checkbox\" name=\"name\" value=\"value\" />\n```",
          "sourcePath": "source/examples/components-menu-menu--checkbox-items.tsx",
          "sha256": "3f1f3760d3180b5f9b991f27d4f8d5b8cd8647cdc803d15916e17bebd982f87c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--controlled-checkbox-items",
          "exportName": "ControlledCheckboxItems",
          "name": "Controlled Checkbox Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuControlledCheckboxItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menu--controlled-checkbox-items.tsx",
          "sha256": "e4b927fcf296f0ed94e0c4faf796001db1cfecd702e209c95fc6c791318a0690",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--controlled-radio-items",
          "exportName": "ControlledRadioItems",
          "name": "Controlled Radio Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuControlledRadioItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menu--controlled-radio-items.tsx",
          "sha256": "5ba36b4cd4057d202e54bc8adb55b6f0917e89d123ee121ccb5bfe1369146328",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--controlling-open-and-close",
          "exportName": "ControllingOpenAndClose",
          "name": "Controlling Open And Close",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuControllingOpenAndClose.stories.tsx",
          "description": "The opening and close of the `Menu` can be controlled with your own state.\nThe `onOpenChange` callback will provide the hints for the state and triggers based on the appropriate\nevent.\n\n_When controlling the open state of the `Menu`, extra effort is required to ensure that interactions are_\n_still appropriate and that keyboard accessibility does not degrade._",
          "sourcePath": "source/examples/components-menu-menu--controlling-open-and-close.tsx",
          "sha256": "a048051a28babf7a099bdeac9ed4ecdd83052ab21c582596c14d9cf68ed1a377",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--custom-trigger",
          "exportName": "CustomTrigger",
          "name": "Custom Trigger",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuCustomTrigger.stories.tsx",
          "description": "Native elements and Fluent components have first class support as children of `MenuTrigger`\nso they will be injected automatically with the correct props for interactions and accessibility attributes.\n\nIt is possible to use your own custom React component as a child of `MenuTrigger`. These components should\nuse ref forwarding with [React.forwardRef](https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components)",
          "sourcePath": "source/examples/components-menu-menu--custom-trigger.tsx",
          "sha256": "60b60e872a6bbe2984a9193805a6ece11b152cd22d5d8702d9f2fb79da2f72e1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--grouping-items",
          "exportName": "GroupingItems",
          "name": "Grouping Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuGroupingItems.stories.tsx",
          "description": "A menu can be divided in to separate groups, using the `MenuGroup` and `MenuGroupHeader`\ncomponents. This ensures the correct accessible markup is rendered for screen reader users.",
          "sourcePath": "source/examples/components-menu-menu--grouping-items.tsx",
          "sha256": "4825175fa58796b9781d12e74794dfdd075600e1e1338e235ef3ecb39a2c79ed",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--interaction",
          "exportName": "Interaction",
          "name": "Interaction",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuInteraction.stories.tsx",
          "description": "Each sub component of the `Menu` that renders DOM elements can be assigned HTML event listeners.\nYou can simply add an `onClick` listener to individual `MenuItem` without needing to control the entire\ncomponent. Special handling is required for checkboxes and radio items inside a `Menu`, read the further\nexamples below to see how to handle those variants.",
          "sourcePath": "source/examples/components-menu-menu--interaction.tsx",
          "sha256": "422ba4c1a4fbb97b99b95f08d7b67277063cc8dc11780f3a56ff7ca74b9e988d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--memoized-menu-items",
          "exportName": "MemoizedMenuItems",
          "name": "Memoized Menu Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMemoizedMenuItems.stories.tsx",
          "description": "⚠️ _Rerendering menu items is a cheap operation and React philosophy encourages rerenders._\n_Memoization is not free, so use it only when there are concrete benefits to doing so._\n\nMemoized menu items can be created using [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)\nto optimize rerenders of menu items if their props have not changed. Can be useful for selectable items,\nsince each selection will rerender all items in the menu by default.",
          "sourcePath": "source/examples/components-menu-menu--memoized-menu-items.tsx",
          "sha256": "5feaa843ac01fb804404c696a5222bcb39ff0a80d5c5094f773bda9c0541df20",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--menu-item-link-navigation",
          "exportName": "MenuItemLinkNavigation",
          "name": "Menu Item Link Navigation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuItemLinkNavigation.stories.tsx",
          "description": "To implement a navigation menu, simply use the `MenuItemLink` component that provides the correct semantics\nfor link based navigation.",
          "sourcePath": "source/examples/components-menu-menu--menu-item-link-navigation.tsx",
          "sha256": "92fa6a4cd6d0471114db60eafdd9474f3af3e6dfea8ba76502dc9cd5dc87a7b7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--menu-items-with-icons",
          "exportName": "MenuItemsWithIcons",
          "name": "Menu Items With Icons",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMenuItemsWithIcons.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menu--menu-items-with-icons.tsx",
          "sha256": "ec836c79c50bda2a0bf8be6c833ac2bbce307673ec9c57747c5d044951951c52",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--menu-trigger-with-tooltip",
          "exportName": "MenuTriggerWithTooltip",
          "name": "Menu Trigger With Tooltip",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuTriggerWithTooltip.stories.tsx",
          "description": "A trigger for `Menu` can also have a tooltip.",
          "sourcePath": "source/examples/components-menu-menu--menu-trigger-with-tooltip.tsx",
          "sha256": "b8c36d5b7f013feb3958ddfec26a483382c85f471676bacb53183d629150f583",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMotionCustom.stories.tsx",
          "description": "Menu animations can be customized using the [Motion APIs](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs), together with the `surfaceMotion` slot.\n",
          "sourcePath": "source/examples/components-menu-menu--motion-custom.tsx",
          "sha256": "e9d3a0c52bb3df72307769d529b4648db6cca7b0cbfa089fdb01e8e1a97d3ad9",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-motion-components-preview",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--motion-disabled",
          "exportName": "MotionDisabled",
          "name": "Motion Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMotionDisabled.stories.tsx",
          "description": "To disable the Menu transition animation, set the `surfaceMotion` prop to `null`.",
          "sourcePath": "source/examples/components-menu-menu--motion-disabled.tsx",
          "sha256": "d44381d1bbc498decc2b9618c8de78f9bdcc735aa6d014cb1e917f500b0d6249",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--multiline-items",
          "exportName": "MultilineItems",
          "name": "Multiline Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuMultilineItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menu--multiline-items.tsx",
          "sha256": "2640ce3921be2e5b42513d65bfb4fe03edea64c474d0471e6dedb014721c0b5a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--nested-submenus",
          "exportName": "NestedSubmenus",
          "name": "Nested Submenus",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuNestedSubmenus.stories.tsx",
          "description": "Menus can be nested within each other to render application submenus.\nSubmenus are a complex control for any app, make sure you need them.\n\n- Try and limit nesting to 2 levels.\n- Creating submenus as separate components will result in more maintainable code.",
          "sourcePath": "source/examples/components-menu-menu--nested-submenus.tsx",
          "sha256": "df2218594adeaeb484a34525e0fe392685841f3dced44f43a1258a5a50c19ec8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--nested-submenus-controlled",
          "exportName": "NestedSubmenusControlled",
          "name": "Nested Submenus Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuNestedSubmenusControlled.stories.tsx",
          "description": "Menus can be nested within each other to render application submenus.\nSubmenus are a complex control for any app, make sure you need them.\n\n- Try and limit nesting to 2 levels.\n- Creating submenus as separate components will result in more maintainable code.",
          "sourcePath": "source/examples/components-menu-menu--nested-submenus-controlled.tsx",
          "sha256": "8b0180058b6605548dc05c512655f63b79142e56d28424bb70f126281af6f07e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--nested-submenus-responsiveness",
          "exportName": "NestedSubmenusResponsiveness",
          "name": "Nested Submenus Responsiveness",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.stories.tsx",
          "description": "Nested submenus have some limited responsiveness built in. If the boundaries of the container/viewport\nget smaller, nested submenus will try to position themselves accordingly. Below is the order or\nfallbacks that will happen:\n- Move alignment of the nested menu higher\n- Flip the position of the nested menu\n- Position the nested menu above the parent menu\n\nYou can use the resizable container below to try this out.\n**(Click outside the resizable area to dismiss the menus)**",
          "sourcePath": "source/examples/components-menu-menu--nested-submenus-responsiveness.tsx",
          "sha256": "282164f690fcd20f5f6cb87b146e685c3d57ed07f50b540c9c548723322d2465",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--radio-items",
          "exportName": "RadioItems",
          "name": "Radio Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuRadioItems.stories.tsx",
          "description": "A variant of `MenuItem` that handles radio like selection. The `name` and `value` props are are used\nsimilar to [HTML checkboxes with `input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)\n\n```html\n<input type=\"radio\" name=\"name\" value=\"value\" />\n```",
          "sourcePath": "source/examples/components-menu-menu--radio-items.tsx",
          "sha256": "9376dffa075dd601e4f59b1f71ce262f27ed87e022a6810b2681cd9335069685",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--render-function-trigger",
          "exportName": "RenderFunctionTrigger",
          "name": "Render Function Trigger",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuRenderFunctionTrigger.stories.tsx",
          "description": "When a function is passed as the children of `MenuTrigger`, the actual trigger can be customized to be an\ninner part of the function.",
          "sourcePath": "source/examples/components-menu-menu--render-function-trigger.tsx",
          "sha256": "04a1197ff5935f74b09c3a146cb8972d92ab434791f099d988ed5d4595f36175",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--secondary-content-for-menu-items",
          "exportName": "SecondaryContentForMenuItems",
          "name": "Secondary Content For Menu Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSecondaryContentForMenuItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menu--secondary-content-for-menu-items.tsx",
          "sha256": "a89b664186b94717dd4ee9fb9afd3d9542ced2de13060e0010627752cf90aefe",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--selection-group",
          "exportName": "SelectionGroup",
          "name": "Selection Group",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSelectionGroup.stories.tsx",
          "description": "Both menu item checkboxes and radio items can be used in the same menu surface.\nDifferent selection areas should be grouped to provide clear expectations for users.",
          "sourcePath": "source/examples/components-menu-menu--selection-group.tsx",
          "sha256": "dc6ab7c4898fbe427df27237b4da2d541b54ac1af7b6431d1103f18125b8f736",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--split-menu-item",
          "exportName": "SplitMenuItem",
          "name": "Split Menu Item",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSplitMenuItem.stories.tsx",
          "description": "A menu item can be split into a main action and a trigger that opens a submenu.\nUse this pattern sparingly. Make sure to add an `aria-label` to the trigger for screen reader users.",
          "sourcePath": "source/examples/components-menu-menu--split-menu-item.tsx",
          "sha256": "54f010b35d25f43ceb459d84d00d6b35889e7381276ee4362e9acf04d3049a49",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--switch-item",
          "exportName": "SwitchItem",
          "name": "Switch Item",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuSwitchItem.stories.tsx",
          "description": "A variant of `MenuItemCheckbox` that displays selection using a switch design.\nThis is commonly used for menus that don't really have strong selection function but needs\nto support an exceptional selected option.",
          "sourcePath": "source/examples/components-menu-menu--switch-item.tsx",
          "sha256": "911fd60e0277f890c24d51eddfe200064e3f25566fae5b471d662a48444a7a52",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menu--visual-divider-only",
          "exportName": "VisualDividerOnly",
          "name": "Visual Divider Only",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/Menu/MenuVisualDividerOnly.stories.tsx",
          "description": "If a divider is needed only for visual aesthetics, the `MenuDivider` component can be used separately.\nWhen items should be logically groupped, use the `MenuGroup` and `MenuGroupHeader` components\nfor correct accessible markup.",
          "sourcePath": "source/examples/components-menu-menu--visual-divider-only.tsx",
          "sha256": "d0c65e3a68268fb5e4fbc3306a9af1e406bd6e7603b0a47fe3b745bd97e0419e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Menu",
          "kind": "component",
          "propsType": "MenuProps",
          "description": "Wrapper component that manages state for a popup MenuList and a MenuTrigger",
          "props": [
            {
              "name": "checkedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Map of all checked values"
            },
            {
              "name": "children",
              "type": "JSXElement | [JSXElement, JSXElement]",
              "required": true,
              "description": "Can contain two children including `MenuTrigger` and `MenuPopover`.\nAlternatively can only contain `MenuPopover` if using a custom `target`."
            },
            {
              "name": "closeOnScroll",
              "type": "boolean",
              "required": false,
              "description": "Close when scroll outside of it",
              "defaultValue": "false"
            },
            {
              "name": "defaultCheckedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Default values to be checked on mount"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "Whether the popup is open by default",
              "defaultValue": "false"
            },
            {
              "name": "hasCheckmarks",
              "type": "boolean",
              "required": false,
              "description": "States that menu items can contain selectable items and reserve slots for item alignment"
            },
            {
              "name": "hasIcons",
              "type": "boolean",
              "required": false,
              "description": "States that menu items can contain icons and reserve slots for item alignment"
            },
            {
              "name": "hoverDelay",
              "type": "number",
              "required": false,
              "description": "Sets the delay for mouse open/close for the popover one mouse enter/leave"
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\nThis option is disregarded for submenus",
              "defaultValue": "false"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "onCheckedValueChange",
              "type": "((e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void)",
              "required": false,
              "description": "Callback when checked items change for value with a name"
            },
            {
              "name": "onOpenChange",
              "type": "((e: MouseEvent | Event | TouchEvent | KeyboardEvent<HTMLElement> | React.MouseEvent<Element, MouseEvent> | React.MouseEvent<HTMLElement, MouseEvent>, data: MenuOpenChangeData) => void)",
              "required": false,
              "description": "Call back when the component requests to change value\nThe `open` value is used as a hint when directly controlling the component"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Whether the popup is open",
              "defaultValue": "false"
            },
            {
              "name": "openOnContext",
              "type": "boolean",
              "required": false,
              "description": "Opens the menu on right click (context menu), removes all other menu open interactions",
              "defaultValue": "false"
            },
            {
              "name": "openOnHover",
              "type": "boolean",
              "required": false,
              "description": "Opens the menu on hover",
              "defaultValue": "false"
            },
            {
              "name": "persistOnItemClick",
              "type": "boolean",
              "required": false,
              "description": "Do not dismiss the menu when a menu item is clicked",
              "defaultValue": "false"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configures the positioned menu"
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps | null",
              "required": false,
              "description": "Slot for the surface motion animation.\nFor more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            }
          ]
        },
        {
          "name": "MenuDivider",
          "kind": "component",
          "propsType": "MenuDividerProps",
          "description": "Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuGroup",
          "kind": "component",
          "propsType": "MenuGroupProps",
          "description": "Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuGroupHeader",
          "kind": "component",
          "propsType": "MenuGroupHeaderProps",
          "description": "Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuItem",
          "kind": "component",
          "propsType": "MenuItemProps",
          "description": "Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "this property does nothing.\ndisabled focusable is by default by simply using `disabled` property"
            },
            {
              "name": "hasSubmenu",
              "type": "boolean",
              "required": false,
              "description": "If the menu item is a trigger for a submenu",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "submenuIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that shows the indicator for a submenu"
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            }
          ]
        },
        {
          "name": "MenuItemCheckbox",
          "kind": "component",
          "propsType": "MenuItemCheckboxProps",
          "description": "Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "this property does nothing.\ndisabled focusable is by default by simply using `disabled` property"
            },
            {
              "name": "hasSubmenu",
              "type": "boolean",
              "required": false,
              "description": "If the menu item is a trigger for a submenu",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "name",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_name.asp"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "submenuIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that shows the indicator for a submenu"
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_value.asp"
            }
          ]
        },
        {
          "name": "MenuItemLink",
          "kind": "component",
          "propsType": "MenuItemLinkProps",
          "description": "MenuItemLink component",
          "props": [
            {
              "name": "as",
              "type": "\"a\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "((WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null) & string) | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "href",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuItemRadio",
          "kind": "component",
          "propsType": "MenuItemRadioProps",
          "description": "Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "this property does nothing.\ndisabled focusable is by default by simply using `disabled` property"
            },
            {
              "name": "hasSubmenu",
              "type": "boolean",
              "required": false,
              "description": "If the menu item is a trigger for a submenu",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "name",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_name.asp"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "submenuIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that shows the indicator for a submenu"
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_value.asp"
            }
          ]
        },
        {
          "name": "MenuItemSwitch",
          "kind": "component",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "((WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null) & string) | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "name",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_name.asp"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            },
            {
              "name": "switchIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_value.asp"
            }
          ]
        },
        {
          "name": "MenuList",
          "kind": "component",
          "propsType": "MenuListProps",
          "description": "Define a styled MenuList, using the `useMenuList_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Map of all checked values"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultCheckedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Default values to be checked on mount"
            },
            {
              "name": "hasCheckmarks",
              "type": "boolean",
              "required": false,
              "description": "States that menu items can contain selectable items and reserve slots for item alignment"
            },
            {
              "name": "hasIcons",
              "type": "boolean",
              "required": false,
              "description": "States that menu items can contain icons and reserve slots for item alignment"
            },
            {
              "name": "onCheckedValueChange",
              "type": "((e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void)",
              "required": false,
              "description": "Callback when checked items change for value with a name"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuPopover",
          "kind": "component",
          "propsType": "MenuPopoverProps",
          "description": "Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuSplitGroup",
          "kind": "component",
          "propsType": "MenuSplitGroupProps",
          "description": "Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuTrigger",
          "kind": "component",
          "propsType": "MenuTriggerProps",
          "description": "Wraps a trigger element as an only child\nand adds the necessary event handling to open a popup menu",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>> | ((props: MenuTriggerChildProps<ARIAButtonType, {}>) => ReactElement<any, string | JSXElementConstructor<any>> | null) | null",
              "required": false,
              "description": ""
            },
            {
              "name": "disableButtonEnhancement",
              "type": "boolean",
              "required": false,
              "description": "Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-menu-menu--default",
      "htmlPath": "components/Menu/",
      "markdownPath": "components/Menu.md"
    },
    {
      "id": "menu-button",
      "title": "MenuButton",
      "summary": "Button with a trailing chevron that opens a menu.",
      "kind": "components",
      "route": "components/MenuButton",
      "label": "MenuButton",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/menu-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/MenuButton.md",
      "examples": [
        {
          "id": "components-button-menubutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/MenuButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-menubutton--default.tsx",
          "sha256": "e5165588d1266135b0f3602a5998b9e2fd98b695c9065eaecc06174a9ff47040",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonAppearance.stories.tsx",
          "description": "- `(undefined)`: the menu button appears with the default style\n- `primary`: emphasizes the menu button as a primary action.\n- `outline`: removes background styling.\n- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n- `transparent`: removes background and border styling.\n",
          "sourcePath": "source/examples/components-button-menubutton--appearance.tsx",
          "sha256": "42cc7a9f73c4ae2dbefbb17c6baff775b77b11fdc79019329a820b66d98fd19a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonDisabled.stories.tsx",
          "description": "A menu button can be `disabled` or `disabledFocusable`.\n              `disabledFocusable` is used in scenarios where it is important to keep a consistent tab order\n              for screen reader and keyboard users. The primary example of this pattern is when\n              the disabled menu button is in a menu or a commandbar and is seldom used for standalone buttons.",
          "sourcePath": "source/examples/components-button-menubutton--disabled.tsx",
          "sha256": "fc123f7b3790eb0ddd133334a3244006810620b8aa7a8993d1c317528647bc38",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonIcon.stories.tsx",
          "description": "MenuButton has an `icon` slot that renders before the text, and `menuIcon` slot that renders after the text.",
          "sourcePath": "source/examples/components-button-menubutton--icon.tsx",
          "sha256": "2cb72b98a968bd512e95bb11c9eda502d2083ee3b6bdcd3bf3d9599c7087b9e0",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonShape.stories.tsx",
          "description": "A menu button can be rounded, circular, or square.",
          "sourcePath": "source/examples/components-button-menubutton--shape.tsx",
          "sha256": "716ab0512e61f218743849a14d5c4337b704ca57f1022960d1f8cadf43d008e3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSize.stories.tsx",
          "description": "MenuButton supports `small`, `medium` and `large` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-button-menubutton--size.tsx",
          "sha256": "732fe7c1adac513ca6dd2729d9db7237e384de4cde083b9e74fa794a521565d2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--size-large",
          "exportName": "SizeLarge",
          "name": "Size: large",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSizeLarge.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-menubutton--size-large.tsx",
          "sha256": "3abcd8879acc56461a01604a992862dd61fd4fe158a2c44d93a466d7ef039fc0",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--size-medium",
          "exportName": "SizeMedium",
          "name": "Size: medium",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSizeMedium.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-menubutton--size-medium.tsx",
          "sha256": "77c553730dd576e95569cdbfe35b9e17eecff1ac5d73e8cf5f54d788f4427b3e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--size-small",
          "exportName": "SizeSmall",
          "name": "Size: small",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonSizeSmall.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-menubutton--size-small.tsx",
          "sha256": "e8ef0031ac86d0755eba7c92e514825eb998fac810d5f4f8510a91649819a5a6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-menubutton--with-long-text",
          "exportName": "WithLongText",
          "name": "With Long Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/MenuButton/MenuButtonWithLongText.stories.tsx",
          "description": "Text wraps after it hits the max width of the component.",
          "sourcePath": "source/examples/components-button-menubutton--with-long-text.tsx",
          "sha256": "b621375ece186027c44d33cd20ef95d5971c2ada73a3acbaf8891ef6319577a8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "MenuButton",
          "kind": "component",
          "propsType": "MenuButtonProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "menuIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Menu icon that indicates that this button has a menu that can be expanded."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'circular'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-menubutton--default",
      "htmlPath": "components/MenuButton/",
      "markdownPath": "components/MenuButton.md"
    },
    {
      "id": "menu-list",
      "title": "MenuList",
      "summary": "Standalone list of menu actions, usually rendered inside a Menu. Subcomponents: MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuItemCheckbox, MenuItemLink, MenuItemRadio, MenuSplitGroup.",
      "kind": "components",
      "route": "components/MenuList",
      "label": "MenuList",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/menu-list/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/MenuList.md",
      "examples": [
        {
          "id": "components-menu-menulist--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/MenuList.stories.tsx",
          "description": "Displays a standalone list of common editing actions.",
          "sourcePath": "source/examples/components-menu-menulist--default.tsx",
          "sha256": "b6c66e46efec17166e637885968590cd91c28c27fbca2d9a5b9ad677285b4a9c",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-menu-menulist--checkbox-items",
          "exportName": "CheckboxItems",
          "name": "Checkbox Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListCheckboxItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menulist--checkbox-items.tsx",
          "sha256": "9871b4d54b89fa23c451aaf486c827e9633b66ca8eafd976f6ef5a79796d0738",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menulist--controlled-checkbox-items",
          "exportName": "ControlledCheckboxItems",
          "name": "Controlled Checkbox Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledCheckboxItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menulist--controlled-checkbox-items.tsx",
          "sha256": "b033213c882982b53ffe1dcd6037c3e73b8afba908bb0af04608f5a7dc42e3ac",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menulist--controlled-radio-items",
          "exportName": "ControlledRadioItems",
          "name": "Controlled Radio Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledRadioItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menulist--controlled-radio-items.tsx",
          "sha256": "73c8fdf86b7ce8194cf2a450944b37921684bc5cfecc8cbf8158c38ed3f59c4f",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-menu-menulist--menu-list-with-nested-submenus",
          "exportName": "MenuListWithNestedSubmenus",
          "name": "Menu List With Nested Submenus",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListNestedSubmenus.stories.tsx",
          "description": "A permanent `MenuList` can also nest `Menu` components. This can be useful when embedding `MenuList` inside\na custom temporary surface such as a popover dialog.",
          "sourcePath": "source/examples/components-menu-menulist--menu-list-with-nested-submenus.tsx",
          "sha256": "748af91f979084e3d52b082934f7d102f1c877d3226b36c3d2db42599c2fb330",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-menu-menulist--radio-items",
          "exportName": "RadioItems",
          "name": "Radio Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-menu/stories/src/MenuList/MenuListRadioItems.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-menu-menulist--radio-items.tsx",
          "sha256": "278e628b002488a543cbb7dbc68d128f1039316b88cca342b1d6f0c1606395ca",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "MenuList",
          "kind": "component",
          "propsType": "MenuListProps",
          "description": "Define a styled MenuList, using the `useMenuList_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Map of all checked values"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultCheckedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Default values to be checked on mount"
            },
            {
              "name": "hasCheckmarks",
              "type": "boolean",
              "required": false,
              "description": "States that menu items can contain selectable items and reserve slots for item alignment"
            },
            {
              "name": "hasIcons",
              "type": "boolean",
              "required": false,
              "description": "States that menu items can contain icons and reserve slots for item alignment"
            },
            {
              "name": "onCheckedValueChange",
              "type": "((e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void)",
              "required": false,
              "description": "Callback when checked items change for value with a name"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuDivider",
          "kind": "component",
          "propsType": "MenuDividerProps",
          "description": "Define a styled MenuDivider, using the `useMenuDivider_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuGroup",
          "kind": "component",
          "propsType": "MenuGroupProps",
          "description": "Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuGroupHeader",
          "kind": "component",
          "propsType": "MenuGroupHeaderProps",
          "description": "Define a styled MenuGroupHeader, using the `useMenuGroupHeader_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuItem",
          "kind": "component",
          "propsType": "MenuItemProps",
          "description": "Define a styled MenuItem, using the `useMenuItem_unstable` and `useMenuItemStyles_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "this property does nothing.\ndisabled focusable is by default by simply using `disabled` property"
            },
            {
              "name": "hasSubmenu",
              "type": "boolean",
              "required": false,
              "description": "If the menu item is a trigger for a submenu",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "submenuIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that shows the indicator for a submenu"
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            }
          ]
        },
        {
          "name": "MenuItemCheckbox",
          "kind": "component",
          "propsType": "MenuItemCheckboxProps",
          "description": "Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "this property does nothing.\ndisabled focusable is by default by simply using `disabled` property"
            },
            {
              "name": "hasSubmenu",
              "type": "boolean",
              "required": false,
              "description": "If the menu item is a trigger for a submenu",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "name",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_name.asp"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "submenuIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that shows the indicator for a submenu"
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_value.asp"
            }
          ]
        },
        {
          "name": "MenuItemLink",
          "kind": "component",
          "propsType": "MenuItemLinkProps",
          "description": "MenuItemLink component",
          "props": [
            {
              "name": "as",
              "type": "\"a\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "((WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null) & string) | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "href",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MenuItemRadio",
          "kind": "component",
          "propsType": "MenuItemRadioProps",
          "description": "Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkmark",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A helper slot for alignment when a menu item is used with selectable menuitems\nAvoid using this slot as a replacement for MenuItemCheckbox and MenuItemRadio components"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "",
              "deprecated": "this property does nothing.\ndisabled focusable is by default by simply using `disabled` property"
            },
            {
              "name": "hasSubmenu",
              "type": "boolean",
              "required": false,
              "description": "If the menu item is a trigger for a submenu",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot rendered before children content"
            },
            {
              "name": "name",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_name.asp"
            },
            {
              "name": "persistOnClick",
              "type": "boolean",
              "required": false,
              "description": "Clicking on the menu item will not dismiss an open menu",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary content rendered opposite the primary content (e.g Shortcut text)"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "submenuIndicator",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that shows the indicator for a submenu"
            },
            {
              "name": "subText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Additional descriptor to main content that creates a multiline layout"
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": "Follows input convention\nhttps://www.w3schools.com/jsref/prop_checkbox_value.asp"
            }
          ]
        },
        {
          "name": "MenuSplitGroup",
          "kind": "component",
          "propsType": "MenuSplitGroupProps",
          "description": "Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-menu-menulist--default",
      "htmlPath": "components/MenuList/",
      "markdownPath": "components/MenuList.md"
    },
    {
      "id": "message-bar",
      "title": "Message bar",
      "summary": "A message bar communicates important information about the state of the entire product or the surface where it appears, such as a page, drawer, dialog, or card.",
      "kind": "components",
      "route": "components/MessageBar",
      "label": "Message bar",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=314567-157305"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/messagebar/usage"
        }
      ],
      "aliases": [
        "/message-bar/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/MessageBar.md",
      "examples": [
        {
          "id": "components-messagebar--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/MessageBar.stories.tsx",
          "description": "Shows an informational message with actions and a dismiss control.",
          "sourcePath": "source/examples/components-messagebar--default.tsx",
          "sha256": "d7083b510ed21b2b8f6bc43df63add47f9570bd8a27794a83a1f8943af6e6a6c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons"
          ]
        },
        {
          "id": "components-messagebar--actions",
          "exportName": "Actions",
          "name": "Actions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Actions.stories.tsx",
          "description": "The `MessageBar` can have different actions.",
          "sourcePath": "source/examples/components-messagebar--actions.tsx",
          "sha256": "3a5b855d768dafd71a85845f0f1bab32fdf45a5eda252c6abbf506f333461f98",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-messagebar--animation",
          "exportName": "Animation",
          "name": "Animation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.stories.tsx",
          "description": "Enter animations are also handled within the `MessageBarGroup`. However avoid entry animations for MessageBar\ncomponents on page load. However, MessageBar components that are mounted during the lifecycle of an\napp can use enter animations.\n\n> ⚠️ Animation will only function if the only children of `MessageBarGroup` are `MessageBar` components.\nDo not wrap `MessageBar` with other components. This is a known limitation we are actively working on.",
          "sourcePath": "source/examples/components-messagebar--animation.tsx",
          "sha256": "9b7e14c7a5c594054dde01d639875d543544df4a30400b4461246406ad7049e6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-messagebar--dismiss",
          "exportName": "Dismiss",
          "name": "Dismiss",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.stories.tsx",
          "description": "MessageBar components should be used in a `MessageBarGroup` when possible to enable exit animations.\nOnce inside a `MessageBarGroup` component, the default exit animation will trigger automatically when the\ncomponent is unmounted from DOM.",
          "sourcePath": "source/examples/components-messagebar--dismiss.tsx",
          "sha256": "7441756edc815b40418600f6d011db9d6d3f1c9125be6262ce989e8e6dc69f36",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-messagebar--intent",
          "exportName": "Intent",
          "name": "Intent",
          "origin": "local",
          "originalSource": "src/stories/components/MessageBar.stories.tsx",
          "description": "In addition to Fluent's four preset intents (`info`, `warning`, `error`,\n`success`), CoreAI adds a `brand` intent styled with the brand token ramp\n(`colorBrandBackground2` surface, `colorBrandStroke2` border,\n`colorBrandForeground1` icon). It maps internally to Fluent's `info`\nintent, so it keeps the same icon and polite `aria-live` announcement.",
          "sourcePath": "source/examples/components-messagebar--intent.tsx",
          "sha256": "9ad702463ed1841c7d8adf915ef1f9eac9bde5279932800b22c33ed3c7efb033",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-messagebar--manual-layout",
          "exportName": "ManualLayout",
          "name": "Manual Layout",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/ManualLayout.stories.tsx",
          "description": "It's possible to opt out of automatic reflow with the `layout` prop. This can be useful if an application\nhas an existing responsive design mechanism.",
          "sourcePath": "source/examples/components-messagebar--manual-layout.tsx",
          "sha256": "377083b55e678d9bab6b01bb01e27af51fffb87e107f2675db31f8b8d97527ee",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-messagebar--reflow",
          "exportName": "Reflow",
          "name": "Reflow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Reflow.stories.tsx",
          "description": "The `MessageBar` will reflow by default once the body content wraps to a second line. This changes the layout\nof the actions in the MessageBar.",
          "sourcePath": "source/examples/components-messagebar--reflow.tsx",
          "sha256": "cd21112fd46116c8ee4c0ccabc4f39c2ee80afb4f3f6ef90cc41ec5c05107cd8",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-messagebar--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-message-bar/stories/src/MessageBar/Shape.stories.tsx",
          "description": "MessageBar can have either rounded or square corners, please follow the usage guidance for these shapes:\n- **_rounded_** used for component level message bars\n- **_square_** used for page/app level message bars",
          "sourcePath": "source/examples/components-messagebar--shape.tsx",
          "sha256": "e04df0b245bc95545b718aa1c08a48d34dfab56074268e0d9cf27f9f8b2bdee7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "MessageBar",
          "kind": "component",
          "propsType": "MessageBarProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "bottomReflowSpacer",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Rendered when the component is in multiline layout to guarantee correct spacing even\nif no actions are rendered. When actions are rendered, the default actions grid area will render\nover this element\n\nNOTE: If you are using this slot, this probably means that you are using the MessageBar without\nactions, this is not recommended from an accesibility point of view"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "intent",
              "type": "\"brand\" | \"success\" | \"warning\" | \"error\" | \"info\"",
              "required": false,
              "description": "The intent of the message. In addition to Fluent's options, CoreAI adds\n`\"brand\"` for a branded informational callout.\n\n- `\"info\"`: Neutral informational surface.\n- `\"warning\"`: Warning status ramp.\n- `\"error\"`: Danger status ramp.\n- `\"success\"`: Success status ramp.\n- `\"brand\"`: Brand primary ramp.",
              "defaultValue": "'info'"
            },
            {
              "name": "layout",
              "type": "\"auto\" | \"multiline\" | \"singleline\"",
              "required": false,
              "description": ""
            },
            {
              "name": "politeness",
              "type": "\"assertive\" | \"polite\"",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"rounded\" | \"square\"",
              "required": false,
              "description": "Use squal for page level messages and rounded for component level messages",
              "defaultValue": "rounded"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MessageBarActions",
          "kind": "component",
          "propsType": "MessageBarActionsProps",
          "description": "MessageBarActions component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "containerAction",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Generally the 'Dismiss' button for the MessageBar"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MessageBarBody",
          "kind": "component",
          "propsType": "MessageBarBodyProps",
          "description": "MessageBarBody component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MessageBarGroup",
          "kind": "component",
          "propsType": "MessageBarGroupProps",
          "description": "MessageBarGroup component",
          "props": [
            {
              "name": "animate",
              "type": "\"both\" | \"exit-only\"",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "MessageBarTitle",
          "kind": "component",
          "propsType": "MessageBarTitleProps",
          "description": "MessageBarTitle component",
          "props": [
            {
              "name": "as",
              "type": "\"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-messagebar--default",
      "htmlPath": "components/MessageBar/",
      "markdownPath": "components/MessageBar.md"
    },
    {
      "id": "overflow",
      "title": "Overflow",
      "summary": "Low-level utility that moves items that don't fit into an overflow menu. Subcomponents: OverflowItem.",
      "kind": "components",
      "route": "components/Overflow",
      "label": "Overflow",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/overflow/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Overflow.md",
      "examples": [
        {
          "id": "components-overflow--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Overflow.stories.tsx",
          "description": "Moves buttons that no longer fit in a resizable row into an overflow menu.",
          "sourcePath": "source/examples/components-overflow--default.tsx",
          "sha256": "6ebfb3e189f66531b640dbc437836a98106e216deeed12a97082e1bc0fc2add8",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-overflow--custom-component",
          "exportName": "CustomComponent",
          "name": "Custom Component",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.stories.tsx",
          "description": "It is possible to wrap the `OverflowItem` children with a custom component instead of rendering them directly.\n\n__In this case it is important to use `React.forwardRef` and to pass the ref to the underlying component__, otherwise React will fail to attach the internal ref, resulting in an error.",
          "sourcePath": "source/examples/components-overflow--custom-component.tsx",
          "sha256": "b8f92bdd1a84be555520158c006e7942b95e3c8bb5fb95017c64be0431ef245a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--dividers",
          "exportName": "Dividers",
          "name": "Dividers",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Dividers.stories.tsx",
          "description": "Dividers can be handled by assigning groups to overflow items. The visibility of the divider\ncan be configured to depend on the overflow item group. This way dividers will also disappear\nonce its group is completely overflowed and avoids trailing or double dividers.",
          "sourcePath": "source/examples/components-overflow--dividers.tsx",
          "sha256": "b2ea8020543c82d67585d7f4e13ad1981616452273598db2d66aca460b8734bf",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--larger-dividers",
          "exportName": "LargerDividers",
          "name": "Larger Dividers",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.stories.tsx",
          "description": "For smaller dividers the `padding` prop can be set to take into account the unmeasured space that the divider takes up.\nWhen a larger divider is used its width is not calculated. This causes items to overflow later than needed.\nThe `OverflowDivider` divider component can be used for larger dividers to include its width to the calculation.",
          "sourcePath": "source/examples/components-overflow--larger-dividers.tsx",
          "sha256": "226cb05edb17a96bd4afb653a15d9bab95053753a8f649597b30f8ec68f78805",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-overflow--listen-to-changes",
          "exportName": "ListenToChanges",
          "name": "Listen To Changes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.stories.tsx",
          "description": "You can listen to changes with the `onOnverflowChange` prop which will return the overflow\nstate. This can be useful when you have other UI features that need to be triggered on changes\nto item visibility.",
          "sourcePath": "source/examples/components-overflow--listen-to-changes.tsx",
          "sha256": "e8aa30f0388aa2d7a08a9f8f55268be7dba5cc2cf019110275f8f55581def2ae",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--minimum-visible",
          "exportName": "MinimumVisible",
          "name": "Minimum Visible",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.stories.tsx",
          "description": "The `Overflow` component will stop overflowing past a certain number of minimum visible overflow items",
          "sourcePath": "source/examples/components-overflow--minimum-visible.tsx",
          "sha256": "6d0c637d7f4049b48f69bd1aebc5d0847f1d51dffc79d8855d4f138967b8e804",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--overflow-by-priority",
          "exportName": "OverflowByPriority",
          "name": "Overflow By Priority",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.stories.tsx",
          "description": "By assigning each `OverflowItem` a numerical priority, the items can overflow in user configured order\nthat does not follow DOM order.",
          "sourcePath": "source/examples/components-overflow--overflow-by-priority.tsx",
          "sha256": "7ccd03f964be1567ac276f78627cec0821629c73bb61b93ccadb08e6758deceb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--pinned",
          "exportName": "Pinned",
          "name": "Pinned",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Pinned.stories.tsx",
          "description": "An item can be pinned (always visible) by setting the `pinned` prop on `OverflowItem`.\nPinned items will never overflow regardless of container size.\nMultiple items can be pinned at the same time.\nThis is useful when implementing selection scenarios where selected items must always be visible.\nTry selecting different items below to observe this effect.",
          "sourcePath": "source/examples/components-overflow--pinned.tsx",
          "sha256": "1e2bc2de0d0465c407624b9ff07a5e276146c335c56ee7d8398a0fed91e62537",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--priority-with-dividers",
          "exportName": "PriorityWithDividers",
          "name": "Priority With Dividers",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/PriorityWithDividers.stories.tsx",
          "description": "Overflow groups will respect the priority of overflow items.\n\n> ⚠️ Consider carefully if you need this behaviour, the code required to manage divider visibility here is\nnon-trivial. This complexity comes from the fact that dividers can be visible both in the overflow container\nand the overflow menu. Please read the code for the reference implementation carefully.",
          "sourcePath": "source/examples/components-overflow--priority-with-dividers.tsx",
          "sha256": "07e25b66704c931519b3b987e8b936cc3ff9a0ba79224a94aba90d3b656187c1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--reorder-observer",
          "exportName": "ReorderObserver",
          "name": "Reorder Observer",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/ReorderObserver.stories.tsx",
          "description": "When items inside `<Overflow>` are reordered, added, or removed via React\nstate without a container resize, the overflow manager does not recompute\non its own — it only listens to `ResizeObserver`. Including the renderless\n`<OverflowReorderObserver />` opts the container into a `MutationObserver`\nthat triggers a recompute on every direct-child mutation.\n\nThis is particularly useful for drag-and-drop scenarios where items are\nreordered in-place: the DOM changes without any size change, so without the\nobserver the manager would not notice that visibility needs to flip.",
          "sourcePath": "source/examples/components-overflow--reorder-observer.tsx",
          "sha256": "a911346751a98102653e2559752d296563bde7dd98f4d40266b8a005b682fbf0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--reverse-dom-order",
          "exportName": "ReverseDomOrder",
          "name": "Reverse Dom Order",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.stories.tsx",
          "description": "Overflow can happen in reverse DOM order.",
          "sourcePath": "source/examples/components-overflow--reverse-dom-order.tsx",
          "sha256": "46aa900236140749e89b67f2c0c51aaf628f6995199a0a3f5726d36504083fb4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--vertical",
          "exportName": "Vertical",
          "name": "Vertical",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Vertical.stories.tsx",
          "description": "Use the `overflowAxis` property to switch different orientations.",
          "sourcePath": "source/examples/components-overflow--vertical.tsx",
          "sha256": "7a8dba2c7b58e8039961de422829701955ddf9013825152360c499eec8d5da4e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-overflow--wrapped",
          "exportName": "Wrapped",
          "name": "Wrapped",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.stories.tsx",
          "description": "Overflow containers can be wrapped by other DOM elements.",
          "sourcePath": "source/examples/components-overflow--wrapped.tsx",
          "sha256": "0168b6cf11ef81cb77d35fa07811f6da9c7fd0ba2485d20831fab1ffcb2d1c06",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Overflow",
          "kind": "component",
          "propsType": "OverflowProps",
          "description": "Provides an OverflowContext for OverflowItem descendants.",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>>",
              "required": true,
              "description": ""
            },
            {
              "name": "hasHiddenItems",
              "type": "boolean",
              "required": false,
              "description": "When true, reserve space as if the overflow menu were visible even with no overflowing items.",
              "defaultValue": "false"
            },
            {
              "name": "minimumVisible",
              "type": "number",
              "required": false,
              "description": "Minimum number of items that must remain visible."
            },
            {
              "name": "onOverflowChange",
              "type": "((ev: null, data: OverflowState) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "overflowAxis",
              "type": "\"horizontal\" | \"vertical\"",
              "required": false,
              "description": "Overflow axis used for size measurement.",
              "defaultValue": "horizontal"
            },
            {
              "name": "overflowDirection",
              "type": "\"start\" | \"end\"",
              "required": false,
              "description": "Direction where items are removed when overflow occurs.",
              "defaultValue": "end"
            },
            {
              "name": "padding",
              "type": "number",
              "required": false,
              "description": "Padding in pixels reserved at the end of the container before overflow occurs.\nUseful for accounting for extra elements (for example an overflow menu button)\nor margins between items that are difficult to measure in JavaScript.",
              "defaultValue": "10"
            },
            {
              "name": "ref",
              "type": "LegacyRef<unknown>",
              "required": false,
              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref)."
            }
          ]
        },
        {
          "name": "OverflowItem",
          "kind": "component",
          "propsType": "OverflowItemProps",
          "description": "Attaches overflow item behavior to its child registered with the OverflowContext.\nIt does not render an element of its own.\n\nBehaves similarly to other `*Trigger` components in Fluent UI React.",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>>",
              "required": true,
              "description": "The single child that has overflow item behavior attached."
            },
            {
              "name": "groupId",
              "type": "string",
              "required": false,
              "description": "Assigns the item to a group, group visibility can be watched."
            },
            {
              "name": "id",
              "type": "string",
              "required": true,
              "description": "The unique identifier for the item used by the overflow manager."
            },
            {
              "name": "pinned",
              "type": "boolean",
              "required": false,
              "description": "If true, the item will never overflow and will always be visible.\nMutually exclusive with `priority`."
            },
            {
              "name": "priority",
              "type": "number",
              "required": false,
              "description": "A higher priority means the item overflows later.\nMutually exclusive with `pinned`."
            },
            {
              "name": "ref",
              "type": "LegacyRef<unknown>",
              "required": false,
              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref)."
            }
          ]
        }
      ],
      "defaultExampleId": "components-overflow--default",
      "htmlPath": "components/Overflow/",
      "markdownPath": "components/Overflow.md"
    },
    {
      "id": "persona",
      "title": "Persona",
      "summary": "A persona is a representation of a person with additional contextual information.",
      "kind": "components",
      "route": "components/Persona",
      "label": "Persona",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=316233-1823"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/persona/usage"
        }
      ],
      "aliases": [
        "/persona/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Persona.md",
      "examples": [
        {
          "id": "components-persona--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Persona.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-persona--default.tsx",
          "sha256": "86e9a61fa34eee76de18cf624ab8b6d750e6c13c0089a64511fba0a6acbd4829",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-persona--avatar-size",
          "exportName": "AvatarSize",
          "name": "Avatar Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaAvatarSize.stories.tsx",
          "description": "A Persona supports different sizes, medium being the default.",
          "sourcePath": "source/examples/components-persona--avatar-size.tsx",
          "sha256": "9c2cd25489c3ffd0e3095eb4e4c1b8c5fea77f46bc1e0350354ece1dc7c2bf22",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-persona--presence-previous-behavior",
          "exportName": "PresencePreviousBehavior",
          "name": "Presence Previous Behavior",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaPresencePreviousBehavior.stories.tsx",
          "description": "PresenceBadge maps its presence to the behavior in v8. If the previous behavior is desired, it is\n       possible to override the icon and className to match it. Note that Persona maps to one size\n        smaller, such as `huge` to `large` and `medium` to `small`. As the size prop shows, Persona does not\n        support tiny.",
          "sourcePath": "source/examples/components-persona--presence-previous-behavior.tsx",
          "sha256": "32cd5e4ca9ea29de71d88767cc689ad23d6a8243dda5f99a7d3d113284c01a8e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-persona--presence-size",
          "exportName": "PresenceSize",
          "name": "Presence Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaPresenceSize.stories.tsx",
          "description": "A Persona supports different sizes, medium being the default.",
          "sourcePath": "source/examples/components-persona--presence-size.tsx",
          "sha256": "064f0a1ce5c63c8c17bef68606f4e285f243339eb3783920bb12570bcaa16318",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-persona--text-alignment",
          "exportName": "TextAlignment",
          "name": "Text Alignment",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaTextAlignment.stories.tsx",
          "description": "A Persona supports two text alignments, `start` being the default position.",
          "sourcePath": "source/examples/components-persona--text-alignment.tsx",
          "sha256": "51ace37b283da39c924724c3fdf750876397629d62b453df906003eb286dafc6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-persona--text-position",
          "exportName": "TextPosition",
          "name": "Text Position",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-persona/stories/src/Persona/PersonaTextPosition.stories.tsx",
          "description": "A Persona supports three text positions, `after` being the default position.",
          "sourcePath": "source/examples/components-persona--text-position.tsx",
          "sha256": "70ef49b314c6c0f441099f2b3bf26d153861df9393792c093e208a72326a09ce",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Persona",
          "kind": "component",
          "propsType": "PersonaProps",
          "description": "A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\nor an Avatar with a PresenceBadge.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "avatar",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<AvatarSlots>, \"color\"> & { active?: \"active\" | \"inactive\" | \"unset\"; activeAppearance?: \"ring\" | \"shadow\" | \"ring-shadow\"; color?: \"brand\" | \"neutral\" | \"colorful\" | AvatarNamedColor | undefined; idForColor?: string | undefined; name?: string | undefined; shape?: AvatarShape | undefined; size?: AvatarSize | undefined; } & RefAttributes<HTMLSpanElement>> | null | undefined",
              "required": false,
              "description": "Avatar to display.\n\nIf a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": "The name of the person or entity represented by the Persona.\n\nWhen `primaryText` is not provided, this will be used as the default value for `primaryText`."
            },
            {
              "name": "presence",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<Pick<BadgeSlots, \"root\" | \"icon\">>, \"color\"> & Pick<BadgeProps, \"size\"> & { status?: PresenceBadgeStatus; outOfOffice?: boolean; } & RefAttributes<HTMLDivElement>> | null | undefined",
              "required": false,
              "description": "PresenceBadge to display.\n\nIf `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar."
            },
            {
              "name": "presenceOnly",
              "type": "boolean",
              "required": false,
              "description": "Whether to display only the presence.",
              "defaultValue": "false"
            },
            {
              "name": "primaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The first line of text in the Persona, larger than the rest of the lines.\n\n`primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n different than the `name` prop."
            },
            {
              "name": "quaternaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The fourth line of text in the Persona."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The second line of text in the Persona."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\" | \"extra-small\" | \"huge\"",
              "required": false,
              "description": "The size of a Persona and its text.",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "tertiaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The third line of text in the Persona."
            },
            {
              "name": "textAlignment",
              "type": "\"center\" | \"start\"",
              "required": false,
              "description": "The vertical alignment of the text relative to the avatar/presence.",
              "defaultValue": "start"
            },
            {
              "name": "textPosition",
              "type": "\"below\" | \"before\" | \"after\"",
              "required": false,
              "description": "The position of the text relative to the avatar/presence.",
              "defaultValue": "after"
            }
          ]
        }
      ],
      "defaultExampleId": "components-persona--default",
      "htmlPath": "components/Persona/",
      "markdownPath": "components/Persona.md"
    },
    {
      "id": "popover",
      "title": "Popover",
      "summary": "A popover is a small surface that appears when someone interacts with a component to give nonessential, contextual information without blocking them.",
      "kind": "components",
      "route": "components/Popover",
      "label": "Popover",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=167560-4316"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/popover/usage"
        }
      ],
      "aliases": [
        "/popover/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Popover.md",
      "examples": [
        {
          "id": "components-popover--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Popover.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-popover--default.tsx",
          "sha256": "44b0d363f3993686e2e10d3335fb7c0ad2a99ef01c7d5b26e352633558c6a51d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--anchor-to-custom-target",
          "exportName": "AnchorToCustomTarget",
          "name": "Anchor To Custom Target",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverAnchorToCustomTarget.stories.tsx",
          "description": "A Popover can be used without a trigger and anchored to any DOM element. This can be useful if\na Popover instance needs to be reused in different places.\n\n_Not using a PopoverTrigger will require more work to make sure your scenario is accessible,_\n_such as, implementing accessible markup and keyboard interactions for your trigger._",
          "sourcePath": "source/examples/components-popover--anchor-to-custom-target.tsx",
          "sha256": "2bdff87973534fff5d4e0393ca0a6e1fa64bac6f1400f14fc1ae5789e5835b1c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-popover--appearance.tsx",
          "sha256": "6e682d8a1eff07208c8b94d5be54a225213dacf1a48af7459608b89d74172e36",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--controlling-open-and-close",
          "exportName": "ControllingOpenAndClose",
          "name": "Controlling Open And Close",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverControllingOpenAndClose.stories.tsx",
          "description": "The opening and close of the `Popover` can be controlled with your own state.\nThe `onOpenChange` callback will provide the hints for the state and triggers based on the appropriate\nevent.\n\n_When controlling the open state of the `Popover`, extra effort is required to ensure that interactions are_\n_still appropriate and that keyboard accessibility does not degrade._",
          "sourcePath": "source/examples/components-popover--controlling-open-and-close.tsx",
          "sha256": "7a7ccdd166a667065e5263af5aa3d839a845fcb564f58dc5c6cd680eb34a96e6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--custom-trigger",
          "exportName": "CustomTrigger",
          "name": "Custom Trigger",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverCustomTrigger.stories.tsx",
          "description": "Native elements and Fluent components have first class support as children of `PopoverTrigger`\nso they will be injected automatically with the correct props for interactions and accessibility attributes.\n\nIt is possible to use your own custom React component as a child of `PopoverTrigger`. These components should\nuse ref forwarding with [React.forwardRef](https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components)",
          "sourcePath": "source/examples/components-popover--custom-trigger.tsx",
          "sha256": "d7c9c673a9b44f383403b4ba3d793d380396da2dff2b62bd6ae09a8433c28a07",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--internal-update-content",
          "exportName": "InternalUpdateContent",
          "name": "Internal Update Content",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverInternalUpdateContent.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-popover--internal-update-content.tsx",
          "sha256": "b32e651503040c21faf54577e0b0bb7678d71c270073671560466457b3d21039",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverMotionCustom.stories.tsx",
          "description": "Popover animations can be customized using the [Motion APIs](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs), together with the `surfaceMotion` slot.\n",
          "sourcePath": "source/examples/components-popover--motion-custom.tsx",
          "sha256": "ad2b9972bcdb9d694352359676b63e8f8aef46e6058ad68236301b6e5f9a481d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-motion-components-preview",
            "react"
          ]
        },
        {
          "id": "components-popover--motion-disabled",
          "exportName": "MotionDisabled",
          "name": "Motion Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverMotionDisabled.stories.tsx",
          "description": "To disable the Popover transition animation, set the `surfaceMotion` prop to `null`.",
          "sourcePath": "source/examples/components-popover--motion-disabled.tsx",
          "sha256": "183b663b7f2dbc6db99d7a5a8b5a46db6eccf90e6fc8dc58bb68d7156e3cdddb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--nested-popovers",
          "exportName": "NestedPopovers",
          "name": "Nested Popovers",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverNestedPopovers.stories.tsx",
          "description": "Popovers can be nested within each other. Too much nesting can result in\nextra accessibility considerations and are generally not a great user experience,\n\nSince nested popovers will generally have an interactive `PopoverTrigger` to control\nthe nested popover, make sure to combine their usage with the `trapFocus` prop for correct\nscreen reader and keyboard accessibility.\n\n- Try and limit nesting to 2 levels.\n- Make sure to use `trapFocus` when nesting.\n- Creating nested popovers as separate components will result in more maintainable code.",
          "sourcePath": "source/examples/components-popover--nested-popovers.tsx",
          "sha256": "70eee20599a2f3febce893b59b8bf4c3071cb40efdb30984e31874da4b00702d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--non-interactive-content",
          "exportName": "NonInteractiveContent",
          "name": "Non Interactive Content",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverNonInteractiveContent.stories.tsx",
          "description": "A `Popover` without interactive content is an edge case. Use a `Tooltip` for simple non-interactive content. If richer content requires a `Popover`, set `tabIndex={-1}` on `PopoverSurface` and give the surface an accessible name so its content is announced when it receives focus.",
          "sourcePath": "source/examples/components-popover--non-interactive-content.tsx",
          "sha256": "848e8d38b21c3b01b1723861aebbd871ec90126a6029086bdb76ad4109c0509f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--trapping-focus",
          "exportName": "TrappingFocus",
          "name": "Trapping Focus",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverTrappingFocus.stories.tsx",
          "description": "When a `Popover` contains focusable elements, the modal dialog pattern will apply. By using the `trapFocus`\nprop, the component sets `aria-hidden`appropriately to parent elements in the document so that elements\nnot contained in the focus trap are hidden to screen reader users. This focus trap is automatically removed\nwhen the `Popover` is closed.",
          "sourcePath": "source/examples/components-popover--trapping-focus.tsx",
          "sha256": "10fe488223448f57617caf62322b5a11e10c40c3c974093b2a144f857bb1a22a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--with-arrow",
          "exportName": "WithArrow",
          "name": "With Arrow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrow.stories.tsx",
          "description": "The `withArrow` prop can be used to display an arrow pointing to the target.",
          "sourcePath": "source/examples/components-popover--with-arrow.tsx",
          "sha256": "e32cff01317eb4542e3f4d0ef099fd4def91f87986b010f21bad80c606899834",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--with-arrow-autosize",
          "exportName": "WithArrowAutosize",
          "name": "With Arrow Autosize",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverWithArrowAutosize.stories.tsx",
          "description": "When using the arrow with the `autoSize` positioning feature, make sure to move the `overflow` from the popover to an inner element to avoid clipping the arrow.",
          "sourcePath": "source/examples/components-popover--with-arrow-autosize.tsx",
          "sha256": "fcf259a8fe32c734e63e12ae1d7ae49b9c19daf930a7a4e789b1a95d6f8702b9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-popover--without-trigger",
          "exportName": "WithoutTrigger",
          "name": "Without Trigger",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-popover/stories/src/Popover/PopoverWithoutTrigger.stories.tsx",
          "description": "When using a `Popover` without a `PopoverTrigger`, it is up to the user to make sure that the focus is restored correctly\nwhen the popover is closed. This can be done quite easily by using the `useRestoreFocusTarget` hook. The `Popover` already\nuses the `useRestoreFocusSource` hook directly, which will restore focus to the most recently focused target on close.",
          "sourcePath": "source/examples/components-popover--without-trigger.tsx",
          "sha256": "b5055dcd356709240ebc6d84e1ef7b4d4832cffeeae6deae7908446ea1569163",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Popover",
          "kind": "component",
          "propsType": "PopoverProps",
          "description": "Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"inverted\"",
              "required": false,
              "description": "A popover can appear styled with brand or inverted.\nWhen not specified, the default style is used."
            },
            {
              "name": "children",
              "type": "JSXElement | [JSXElement, JSXElement]",
              "required": true,
              "description": "Can contain two children including `PopoverTrigger` and `PopoverSurface`.\nAlternatively can only contain `PopoverSurface` if using a custom `target`."
            },
            {
              "name": "closeOnIframeFocus",
              "type": "boolean",
              "required": false,
              "description": "Flag to close the Popover when an iframe outside a PopoverSurface is focused",
              "defaultValue": "true"
            },
            {
              "name": "closeOnScroll",
              "type": "boolean",
              "required": false,
              "description": "Close when scroll outside of it",
              "defaultValue": "false"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "Used to set the initial open state of the Popover in uncontrolled mode",
              "defaultValue": "false"
            },
            {
              "name": "inertTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert,\nmaking navigation leak from the trapped area back to the browser toolbar and vice-versa.",
              "defaultValue": "false"
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order",
              "defaultValue": "false"
            },
            {
              "name": "legacyTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Must be used with the `trapFocus` prop\nEnables older Fluent UI focus trap behavior where the user\ncannot tab into the window outside of the document. This is now\nnon-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert.",
              "deprecated": "this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "mouseLeaveDelay",
              "type": "number",
              "required": false,
              "description": "Sets the delay for closing popover on mouse leave"
            },
            {
              "name": "onOpenChange",
              "type": "((e: OpenPopoverEvents, data: OnOpenChangeData) => void)",
              "required": false,
              "description": "Call back when the component requests to change value\nThe `open` value is used as a hint when directly controlling the component"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the opening of the Popover",
              "defaultValue": "false"
            },
            {
              "name": "openOnContext",
              "type": "boolean",
              "required": false,
              "description": "Flag to open the Popover as a context menu. Disables all other interactions",
              "defaultValue": "false"
            },
            {
              "name": "openOnHover",
              "type": "boolean",
              "required": false,
              "description": "Flag to open the Popover by hovering the trigger",
              "defaultValue": "false"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configures the position of the Popover.\nExplore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Determines popover padding and arrow size",
              "defaultValue": "medium"
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps | null",
              "required": false,
              "description": "Slot for the surface motion animation.\nFor more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "trapFocus",
              "type": "boolean",
              "required": false,
              "description": "Should trap focus",
              "defaultValue": "false"
            },
            {
              "name": "unstable_disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "By default Popover focuses the first focusable element in PopoverSurface on open.\nSpecify `disableAutoFocus` to prevent this behavior.",
              "defaultValue": "false"
            },
            {
              "name": "withArrow",
              "type": "boolean",
              "required": false,
              "description": "Display an arrow pointing to the target.",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "PopoverProvider",
          "kind": "component",
          "description": "",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "PopoverContextValue",
              "required": true,
              "description": ""
            }
          ]
        },
        {
          "name": "PopoverSurface",
          "kind": "component",
          "propsType": "PopoverSurfaceProps",
          "description": "PopoverSurface component renders react children in a positioned box",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "PopoverTrigger",
          "kind": "component",
          "propsType": "PopoverTriggerProps",
          "description": "Wraps a trigger element as an only child and adds the necessary event handling to open a popover.",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>> | ((props: PopoverTriggerChildProps<ARIAButtonType, {}>) => ReactElement<any, string | JSXElementConstructor<any>> | null) | null",
              "required": false,
              "description": ""
            },
            {
              "name": "disableButtonEnhancement",
              "type": "boolean",
              "required": false,
              "description": "Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-popover--default",
      "htmlPath": "components/Popover/",
      "markdownPath": "components/Popover.md"
    },
    {
      "id": "portal",
      "title": "Portal",
      "summary": "Renders content at the end of the document, outside the normal DOM tree.",
      "kind": "components",
      "route": "components/Portal",
      "label": "Portal",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/portal/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Portal.md",
      "examples": [
        {
          "id": "components-portal-portal--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Portal.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-portal-portal--default.tsx",
          "sha256": "96faf30f18d3b78254180d5264c534d49885ca982c05e756de0372ba89b03298",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Portal",
          "kind": "component",
          "propsType": "PortalProps",
          "description": "A portal provides a way to render children into a DOM node\nthat exists outside the DOM hierarchy of the parent component.",
          "props": [
            {
              "name": "children",
              "type": "ReactNode",
              "required": false,
              "description": "React children"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            }
          ]
        }
      ],
      "defaultExampleId": "components-portal-portal--default",
      "htmlPath": "components/Portal/",
      "markdownPath": "components/Portal.md"
    },
    {
      "id": "presence-badge",
      "title": "Presence badge",
      "summary": "Presence indicates the user's current availability and status.",
      "kind": "components",
      "route": "components/PresenceBadge",
      "label": "Presence badge",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=2746-98970"
        }
      ],
      "aliases": [
        "/presence-badge/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/PresenceBadge.md",
      "examples": [
        {
          "id": "components-badge-presencebadge--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/PresenceBadge.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-badge-presencebadge--default.tsx",
          "sha256": "23226e8dd973cf5bc106498e921ca6fa162dc261280d34be07e19065119fc872",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-presencebadge--out-of-office",
          "exportName": "OutOfOffice",
          "name": "Out Of Office",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx",
          "description": "A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, `offline`, `out-of-office`, `blocked` and `unknown` status when `outOfOffice` is set.",
          "sourcePath": "source/examples/components-badge-presencebadge--out-of-office.tsx",
          "sha256": "4b2a00d79d452bd48d0d368b63a912e0cf5f99dccd4420f55d9c350f301e2f35",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-presencebadge--sizes",
          "exportName": "Sizes",
          "name": "Sizes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeSizes.stories.tsx",
          "description": "A presence badge supports `tiny`, `extra-small`, `small`, `medium`, and `extra-large` sizes. The default is `medium`.",
          "sourcePath": "source/examples/components-badge-presencebadge--sizes.tsx",
          "sha256": "6d9a24fd2052190dc5d1441077d10fedc31d1542d5b34f01399c70665fe6391c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-badge-presencebadge--status",
          "exportName": "Status",
          "name": "Status",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-badge/stories/src/PresenceBadge/PresenceBadgeStatus.stories.tsx",
          "description": "A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, `offline`, `out-of-office`, `blocked` and `unknown` status. The default is `available`.",
          "sourcePath": "source/examples/components-badge-presencebadge--status.tsx",
          "sha256": "4d90809e5e6fc66cae3f5e1fae7e5289c23ac8e140a9f7df97cdf317352712ce",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "PresenceBadge",
          "kind": "component",
          "propsType": "PresenceBadgeProps",
          "description": "Define a styled Badge, using the `useBadge_unstable` hook.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "outOfOffice",
              "type": "boolean",
              "required": false,
              "description": "Modifies the display to indicate that the user is out of office.\nThis can be combined with any status to display an out-of-office version of that status",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\" | \"tiny\" | \"extra-small\"",
              "required": false,
              "description": "A Badge can be on of several preset sizes."
            },
            {
              "name": "status",
              "type": "\"busy\" | \"out-of-office\" | \"away\" | \"available\" | \"offline\" | \"do-not-disturb\" | \"unknown\" | \"blocked\"",
              "required": false,
              "description": "Represents several status",
              "defaultValue": "available"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-badge-presencebadge--default",
      "htmlPath": "components/PresenceBadge/",
      "markdownPath": "components/PresenceBadge.md"
    },
    {
      "id": "animated-progress-bar",
      "title": "Progress bar",
      "summary": "Progress bars communicate system information, like how much cloud storage someone is using in OneDrive, or task information, like how long until a download is complete.",
      "kind": "components",
      "route": "components/ProgressBar",
      "label": "Progress bar",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=40327-211385"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/progressbar/usage"
        }
      ],
      "aliases": [
        "/static-progress-bar/",
        "/animated-progress-bar/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/ProgressBar.md",
      "examples": [
        {
          "id": "components-progressbar--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/ProgressBar.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-progressbar--default.tsx",
          "sha256": "05daaf342a1554cc15eb2025d75ac67f42d4021710cef87b7368f76982fe74ef",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-progressbar--color",
          "exportName": "Color",
          "name": "Color",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarColor.stories.tsx",
          "description": "The `color` prop can be used to indicate a `\"brand\"` state (default), `\"error\"` state (red), `\"warning\"` state (orange), or `\"success\"` state (green).",
          "sourcePath": "source/examples/components-progressbar--color.tsx",
          "sha256": "7a9f2b2aebe003900491e7b9ca402a57d426b1ff458fb7d972760d99144933f3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-progressbar--indeterminate",
          "exportName": "Indeterminate",
          "name": "Indeterminate",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarIndeterminate.stories.tsx",
          "description": "ProgressBar is indeterminate when 'value' is undefined.\n      Indeterminate ProgressBar is best used to show that an operation is being executed.",
          "sourcePath": "source/examples/components-progressbar--indeterminate.tsx",
          "sha256": "3c84cc15aa8d7a151915cae2925f6969c9f28620cbd17f4c58a11d17f197d576",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-progressbar--max",
          "exportName": "Max",
          "name": "Max",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarMax.stories.tsx",
          "description": "You can specify the maximum value of the determinate ProgressBar.\n      This is useful for instances where you want to show capacity, or how much of a total has been\n      uploaded/downloaded.",
          "sourcePath": "source/examples/components-progressbar--max.tsx",
          "sha256": "092df25f0bae2a712a6d7629f0bf15f5bc496650e47693bf80ae85186f96a2e9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-progressbar--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarMotionCustom.stories.tsx",
          "description": "The indeterminate animation can be customized using the [Motion APIs](https://react.fluentui.dev/?path=/docs/motion-apis-createmotioncomponent--docs), together with the `indeterminateMotion` slot.\n",
          "sourcePath": "source/examples/components-progressbar--motion-custom.tsx",
          "sha256": "eb396de94d251473c73b351d851ecae29b67cdec5473c9a5982ae5a7e8c041bb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-progressbar--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarShape.stories.tsx",
          "description": "The `shape` prop affects the corners of the bar. It can be `rounded` (default) or `square`.",
          "sourcePath": "source/examples/components-progressbar--shape.tsx",
          "sha256": "3f3ab0871e49aaac26f7704661a738c622852b9c445971a87b81a0632d4ae146",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-progressbar--thickness",
          "exportName": "Thickness",
          "name": "Thickness",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-progress/stories/src/ProgressBar/ProgressBarThickness.stories.tsx",
          "description": "The `thickness` prop affects the size of the bar. It can be `medium` (default) or `large`.",
          "sourcePath": "source/examples/components-progressbar--thickness.tsx",
          "sha256": "d2e2161336f6301358f22d9990519014090fe2fc256bf84d51fbc5517da65be2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "ProgressBar",
          "kind": "component",
          "propsType": "ProgressBarProps",
          "description": "A ProgressBar bar shows the progression of a task.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "bar",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "string",
              "required": false,
              "description": "The status of the ProgressBar bar. Changes the color of the bar.",
              "defaultValue": "brand"
            },
            {
              "name": "indeterminateMotion",
              "type": "MotionSlotProps | null",
              "required": false,
              "description": "Motion slot for the indeterminate animation. Pass `null` to disable the animation."
            },
            {
              "name": "max",
              "type": "number",
              "required": false,
              "description": "The maximum value, which indicates the task is complete.\nThe ProgressBar bar will be full when `value` equals `max`.",
              "defaultValue": "1"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"rounded\" | \"square\"",
              "required": false,
              "description": "The shape of the bar and track.",
              "defaultValue": "rounded"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "thickness",
              "type": "\"medium\" | \"large\"",
              "required": false,
              "description": "The thickness of the ProgressBar bar",
              "defaultValue": "medium"
            },
            {
              "name": "value",
              "type": "number",
              "required": false,
              "description": "A decimal number between `0` and `1` (or between `0` and `max` if given),\nwhich specifies how much of the task has been completed.\n\nIf `undefined` (default), the ProgressBar will display an **indeterminate** state."
            }
          ]
        }
      ],
      "defaultExampleId": "components-progressbar--default",
      "htmlPath": "components/ProgressBar/",
      "markdownPath": "components/ProgressBar.md"
    },
    {
      "id": "radio-group",
      "title": "Radio group",
      "summary": "Radio groups let people select a single item from a short list. Use them in layouts that offer enough space to list up to five options or if it's important to view all options at once.",
      "kind": "components",
      "route": "components/RadioGroup",
      "label": "Radio group",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=219564-4609"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/radiogroup/usage"
        }
      ],
      "aliases": [
        "/radio/",
        "/radio-group/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/RadioGroup.md",
      "examples": [
        {
          "id": "components-radiogroup--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/RadioGroup.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-radiogroup--default.tsx",
          "sha256": "f9467fc75bc916f7c024c6804cab0f503d9642d2e619c0d2bc5d1c4006cf69bd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--controlled-value",
          "exportName": "ControlledValue",
          "name": "Controlled Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupControlledValue.stories.tsx",
          "description": "The selected radio item can be controlled using the `value` and `onChange` props.",
          "sourcePath": "source/examples/components-radiogroup--controlled-value.tsx",
          "sha256": "2b29d022a28b9e3d8344e9e23f50385d41374cfa2f75c803a9944bc719cfedad",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--default-value",
          "exportName": "DefaultValue",
          "name": "Default Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDefaultValue.stories.tsx",
          "description": "The initially selected item can be set by setting the `defaultValue` of RadioGroup. Alternatively, one Radio item can have `defaultChecked` set. Both methods have the same effect, but only one should be used in a given RadioGroup.",
          "sourcePath": "source/examples/components-radiogroup--default-value.tsx",
          "sha256": "842e45196fdff32027fc26ec39b99d0ffc1793f1a02acf78f3df06909296e9e7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDisabled.stories.tsx",
          "description": "RadioGroup can be disabled, which disables all Radio items inside.",
          "sourcePath": "source/examples/components-radiogroup--disabled.tsx",
          "sha256": "20a6b10ba0a0ee42e75eb5254170ce13ac6bec7edd0595c5ebfdd1a8dcbadeb6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--disabled-item",
          "exportName": "DisabledItem",
          "name": "Disabled Item",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupDisabledItem.stories.tsx",
          "description": "Radio items can be disabled individually.",
          "sourcePath": "source/examples/components-radiogroup--disabled-item.tsx",
          "sha256": "2a8813dc3c76d95d4986dc34c6cf574f86ca99b6f56cb51d96169d4be104ed7e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--horizontal",
          "exportName": "Horizontal",
          "name": "Layout: horizontal",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupHorizontal.stories.tsx",
          "description": "The `horizontal` layout places each radio item in a row, with labels after the radio indicator.",
          "sourcePath": "source/examples/components-radiogroup--horizontal.tsx",
          "sha256": "ec6c9bf327a22b310d6fefe43e8c431bf82e81e61c96832504bd776a3b9a06d5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--horizontal-stacked",
          "exportName": "HorizontalStacked",
          "name": "Layout: horizontal-stacked",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupHorizontalStacked.stories.tsx",
          "description": "The `horizontal-stacked` layout places each radio item in a row, with labels below the radio indicator.",
          "sourcePath": "source/examples/components-radiogroup--horizontal-stacked.tsx",
          "sha256": "40bf8cd17dd287b97482fc078949e9fc027c9d04fd75db21e47a0e7a1382cd13",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--label-subtext",
          "exportName": "LabelSubtext",
          "name": "Label Subtext",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupLabelSubtext.stories.tsx",
          "description": "Radio's label supports any formatted text. In this example, smaller text is below the main label text.",
          "sourcePath": "source/examples/components-radiogroup--label-subtext.tsx",
          "sha256": "921cb6661878a51fb02e8cb51f9890ee5603c22654b4c759c5121cf21b1c83eb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-radiogroup--required",
          "exportName": "Required",
          "name": "Required",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-radio/stories/src/RadioGroup/RadioGroupRequired.stories.tsx",
          "description": "Use the `required` prop to indicate that one of the radio items must be selected. Or, if the RadioGroup is inside a Field, it will inherit the `required` prop from the Field.",
          "sourcePath": "source/examples/components-radiogroup--required.tsx",
          "sha256": "4bc70dfd88727b60927bf6ba57b0ad8179c603627fbb7f9ac3d8a3adf01148e3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "RadioGroup",
          "kind": "component",
          "propsType": "RadioGroupProps",
          "description": "A RadioGroup component presents a set of options where only one option can be selected.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultValue",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": "The default selected Radio item in this group.\n\nThis should be the `value` prop of one of the Radio items inside this group."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Disable all Radio items in this group."
            },
            {
              "name": "layout",
              "type": "\"horizontal\" | \"vertical\" | \"horizontal-stacked\"",
              "required": false,
              "description": "How the radio items are laid out in the group.",
              "defaultValue": "vertical"
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": "The name of this radio group. This name is applied to all Radio items inside this group.\n\nIf no name is provided, one will be generated so that all of the Radio items have the same name."
            },
            {
              "name": "onChange",
              "type": "((ev: FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void)",
              "required": false,
              "description": "Callback when the selected Radio item changes."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "required",
              "type": "boolean",
              "required": false,
              "description": "Require a selection in this group. Adds the `required` prop to all child Radio items."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "The selected Radio item in this group.\n\nThis should be the `value` prop of one of the Radio items inside this group."
            }
          ]
        },
        {
          "name": "Radio",
          "kind": "component",
          "propsType": "RadioProps",
          "description": "Radio component is a wrapper for a radio button with a label.",
          "props": [
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Disable this Radio item."
            },
            {
              "name": "indicator",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "A circle outline, with a filled circle icon inside when the Radio is checked."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "Hidden input that handles the radio's functionality.\n\nThis is the PRIMARY slot: all native properties specified directly on `<Radio>` will be applied to this slot,\nexcept `className` and `style`, which remain on the root slot."
            },
            {
              "name": "label",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, \"required\"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined; size?: \"small\" | \"medium\" | \"large\" | undefined; weight?: \"regular\" | \"semibold\" | undefined; } & RefAttributes<HTMLLabelElement>> | null | undefined",
              "required": false,
              "description": "The Radio's label."
            },
            {
              "name": "labelPosition",
              "type": "\"below\" | \"after\"",
              "required": false,
              "description": "The position of the label relative to the radio indicator.\n\nThis defaults to `after` unless the Radio is inside a RadioGroup with `layout=\"horizontalStacked\"`,\nin which case it defaults to `below`."
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void)",
              "required": false,
              "description": "Callback when this Radio is selected in its group.\n\n**Note:** `onChange` is NOT called when this Radio is deselected.\nUse RadioGroup's `onChange` event to determine when the selection in the group changes."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root element of the Radio.\n\nThe root slot receives the `className` and `style` specified directly on the `<Radio>`.\nAll other native props will be applied to the primary slot: `input`"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": "The value of the RadioGroup when this Radio item is selected."
            }
          ]
        }
      ],
      "defaultExampleId": "components-radiogroup--default",
      "htmlPath": "components/RadioGroup/",
      "markdownPath": "components/RadioGroup.md"
    },
    {
      "id": "rating",
      "title": "Rating",
      "summary": "Rating is used to communicate user sentiment. It also allows customers to determine a sense of value of a good or a service.",
      "kind": "components",
      "route": "components/Rating",
      "label": "Rating",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=192287-25319"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/rating/usage"
        }
      ],
      "aliases": [
        "/rating/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Rating.md",
      "examples": [
        {
          "id": "components-rating--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Rating.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-rating--default.tsx",
          "sha256": "a5c1e1d47f6491bcaa299c4ee423e0647fc2e0f487505bea5ae59e8d2cd124ff",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-rating--color",
          "exportName": "Color",
          "name": "Color",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingColor.stories.tsx",
          "description": "A Rating's `color` can be `neutral` (default), `brand`, or `marigold`.",
          "sourcePath": "source/examples/components-rating--color.tsx",
          "sha256": "942ca64f95fa3fc5669a4483656a3fdd0ff36d1dfe56cd5c63e64cf52a7d9f25",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-rating--controlled-value",
          "exportName": "ControlledValue",
          "name": "Controlled Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingControlledValue.stories.tsx",
          "description": "The selected rating value can be controlled using the `value` and `onChange` props.",
          "sourcePath": "source/examples/components-rating--controlled-value.tsx",
          "sha256": "138ca22e8fb326ba12ab49ffc0ef606eec634b04f1a590fced06f8882a95d0b5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-rating--max",
          "exportName": "Max",
          "name": "Max",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingMax.stories.tsx",
          "description": "You can specify the number of elements in the Rating with the `max` prop.",
          "sourcePath": "source/examples/components-rating--max.tsx",
          "sha256": "7aae69ef80cb4e5b1916279490c8731f3421844c870239b410365f607b96601f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-rating--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingShape.stories.tsx",
          "description": "You can pass in custom icons to the Rating component. You can specify the icons with the `iconFilled` and `iconOutline` props.",
          "sourcePath": "source/examples/components-rating--shape.tsx",
          "sha256": "a4784a0b0eab4d1d5b2ba7f14e98c23fe044aab538998328834cbfa81bae3f9b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-rating--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingSize.stories.tsx",
          "description": "A Rating's `size` can be `small`, `medium`, `large`, or `extra-large`.",
          "sourcePath": "source/examples/components-rating--size.tsx",
          "sha256": "ef45ff38f8c185f7d9ca434ff78a08d6fbcb0927aff3d7654faa38079b8bf9ec",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-rating--step",
          "exportName": "Step",
          "name": "Step",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/Rating/RatingStep.stories.tsx",
          "description": "You can specify half values in the Rating with `step={0.5}`.",
          "sourcePath": "source/examples/components-rating--step.tsx",
          "sha256": "07d268819b4ee64a3612fc0b6be93c4b314b1e49a949d5d1511b356dc6211b6f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Rating",
          "kind": "component",
          "propsType": "RatingProps",
          "description": "Rating is a wrapper for one or more rating items that will be used to set a rating value.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "string",
              "required": false,
              "description": "Controls the color of the Rating.",
              "defaultValue": "neutral"
            },
            {
              "name": "defaultValue",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": "Default value of the Rating"
            },
            {
              "name": "iconFilled",
              "type": "ElementType<any, keyof IntrinsicElements>",
              "required": false,
              "description": "The icon to display when the rating value is greater than or equal to the item's value."
            },
            {
              "name": "iconOutline",
              "type": "ElementType<any, keyof IntrinsicElements>",
              "required": false,
              "description": "The icon to display when the rating value is less than the item's value."
            },
            {
              "name": "itemLabel",
              "type": "((rating: number) => string)",
              "required": false,
              "description": "Prop to generate the aria-label for the rating inputs.",
              "defaultValue": "(rating) =\\> `${rating}`"
            },
            {
              "name": "max",
              "type": "number",
              "required": false,
              "description": "The max value of the rating. This controls the number of rating items displayed.\nMust be a whole number greater than 1.",
              "defaultValue": "5"
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": "Name for the Radio inputs. If not provided, one will be automatically generated"
            },
            {
              "name": "onChange",
              "type": "EventHandler<RatingOnChangeEventData>",
              "required": false,
              "description": "Callback when the rating value is changed by the user."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\"",
              "required": false,
              "description": "Sets the size of the Rating items.",
              "defaultValue": "extra-large"
            },
            {
              "name": "step",
              "type": "1 | 0.5",
              "required": false,
              "description": "Sets the precision to allow half-filled shapes in Rating",
              "defaultValue": "1"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "number",
              "required": false,
              "description": "The value of the rating"
            }
          ]
        },
        {
          "name": "RatingItem",
          "kind": "component",
          "propsType": "RatingItemProps",
          "description": "RatingItem is an item that will be used to set or display a rating value.",
          "props": [
            {
              "name": "as",
              "type": "\"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "fullValueInput",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "Radio input slot used for full star precision"
            },
            {
              "name": "halfValueInput",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "Radio input slot used for half star precision"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedIcon",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Icon displayed when the rating value is greater than or equal to the item's value."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "unselectedIcon",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Icon displayed when the rating value is less than the item's value."
            },
            {
              "name": "value",
              "type": "number",
              "required": false,
              "description": "The positive whole number value that is displayed by this RatingItem"
            }
          ]
        }
      ],
      "defaultExampleId": "components-rating--default",
      "htmlPath": "components/Rating/",
      "markdownPath": "components/Rating.md"
    },
    {
      "id": "rating-display",
      "title": "RatingDisplay",
      "summary": "Read-only display of an average rating with stars and count.",
      "kind": "components",
      "route": "components/RatingDisplay",
      "label": "RatingDisplay",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/rating-display/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/RatingDisplay.md",
      "examples": [
        {
          "id": "components-ratingdisplay--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/RatingDisplay.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-ratingdisplay--default.tsx",
          "sha256": "f2344b91723c6d14d6832969d323185a41ff2432e4d38c89512dcceb769121f6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--color",
          "exportName": "Color",
          "name": "Color",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayColor.stories.tsx",
          "description": "A RatingDisplay's `color` can be `neutral` (default), `brand`, or `marigold`.",
          "sourcePath": "source/examples/components-ratingdisplay--color.tsx",
          "sha256": "3c74da674ae5efba0ed91e8e566eb3d9ea2b9cce6a23203d3c9b7a910c45b9f3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--compact",
          "exportName": "Compact",
          "name": "Compact",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayCompact.stories.tsx",
          "description": "You can specify a compact RatingDisplay with `compact`.",
          "sourcePath": "source/examples/components-ratingdisplay--compact.tsx",
          "sha256": "bf171d61af0294c048ebbd924745c6a647d5a32a94410cf4223d743737a9f56d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--count",
          "exportName": "Count",
          "name": "Count",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayCount.stories.tsx",
          "description": "You can specify the total number of ratings being displayed with the `count`. The number will be formatted with a thousands separator according to the user's locale.",
          "sourcePath": "source/examples/components-ratingdisplay--count.tsx",
          "sha256": "be007c91762b55ce5750be8d91c691022ba7376594bf869cdcaafa4b487dd7be",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--max",
          "exportName": "Max",
          "name": "Max",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayMax.stories.tsx",
          "description": "You can specify the number of elements in the RatingDisplay with the `max` prop.",
          "sourcePath": "source/examples/components-ratingdisplay--max.tsx",
          "sha256": "482f61e2fe2e301dea5522df7f0092d5212328502e374eb1ab5dc8f9660161f2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayShape.stories.tsx",
          "description": "You can pass in a custom icon to the RatingDisplay component using the `icon` prop.",
          "sourcePath": "source/examples/components-ratingdisplay--shape.tsx",
          "sha256": "8b8d9099c3cf580c769ebe1ce00b3879d7e23b3580b384b4c24763e49144c04f",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplaySize.stories.tsx",
          "description": "A RatingDisplay's `size` can be `small`, `medium`, `large`, or `extra-large`.",
          "sourcePath": "source/examples/components-ratingdisplay--size.tsx",
          "sha256": "5947b4ed7c66a5f77df2f91800d739da052367f7dbf179e387de1acf79830d85",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-ratingdisplay--value",
          "exportName": "Value",
          "name": "Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-rating/stories/src/RatingDisplay/RatingDisplayValue.stories.tsx",
          "description": "The `value` controls the number of filled stars, and is written out next to the RatingDisplay. The number of filled stars is rounded to the nearest half-star.",
          "sourcePath": "source/examples/components-ratingdisplay--value.tsx",
          "sha256": "5dc71df5ab011b8ac3df174996ff4e4081a222e9f62ad6352e1924611ff1de49",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "RatingDisplay",
          "kind": "component",
          "propsType": "RatingDisplayProps",
          "description": "RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value\nas well as the label for the rating.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "string",
              "required": false,
              "description": "Color of the rating items (stars).",
              "defaultValue": "neutral"
            },
            {
              "name": "compact",
              "type": "boolean",
              "required": false,
              "description": "Renders a single filled star, with the value written next to it.",
              "defaultValue": "false"
            },
            {
              "name": "count",
              "type": "number",
              "required": false,
              "description": "The number of ratings represented by the rating value.\nThis will be formatted with a thousands separator (if applicable) and displayed next to the value."
            },
            {
              "name": "countText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "ElementType<any, keyof IntrinsicElements>",
              "required": false,
              "description": "The icon used for rating items.",
              "defaultValue": "StarFilled"
            },
            {
              "name": "max",
              "type": "number",
              "required": false,
              "description": "The max value of the rating. This controls the number of rating items displayed.\nMust be a whole number greater than 1.",
              "defaultValue": "5"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\"",
              "required": false,
              "description": "Sets the size of the RatingDisplay items.",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "number",
              "required": false,
              "description": "The value of the rating"
            },
            {
              "name": "valueText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-ratingdisplay--default",
      "htmlPath": "components/RatingDisplay/",
      "markdownPath": "components/RatingDisplay.md"
    },
    {
      "id": "search-box",
      "title": "Search box",
      "summary": "Search bars are one of the most used components in the system. It allows the users to access the right component with ease.",
      "kind": "components",
      "route": "components/SearchBox",
      "label": "Search box",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=321831-998"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/searchbox/usage"
        }
      ],
      "aliases": [
        "/search-box/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/SearchBox.md",
      "examples": [
        {
          "id": "components-searchbox--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/SearchBox.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-searchbox--default.tsx",
          "sha256": "f3e6226cfca5039f83e847f3f42f92889e50ccbe37e689106d4c655b13d9cf06",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-searchbox--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.stories.tsx",
          "description": "A SearchBox can have different appearances.\nThe colors adjacent to the SearchBox should have a sufficient contrast. Particularly, the color of SearchBox with\n      filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate\n      surrounding color to pass accessibility requirements.",
          "sourcePath": "source/examples/components-searchbox--appearance.tsx",
          "sha256": "b9fd679964219bb1c145e5012f3ee8a67be57a19e9553887d3754e51869c5d6c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-searchbox--content-before-after",
          "exportName": "ContentBeforeAfter",
          "name": "Content before/after",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.stories.tsx",
          "description": "A SearchBox supports a custom element such as an icon or a button before the input text. Additionally, a SearchBox supports an custom element that appears on focus, following the input text and before the dismiss button. These elements are displayed inside the SearchBox border.",
          "sourcePath": "source/examples/components-searchbox--content-before-after.tsx",
          "sha256": "c088054951911cf68c0783916e702583ed181980c0e9fa8bc744de46f22b5c19",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-searchbox--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxControlled.stories.tsx",
          "description": "A SearchBox can be controlled: the consuming component tracks the SearchBox's value in its state and manually handles all updates.",
          "sourcePath": "source/examples/components-searchbox--controlled.tsx",
          "sha256": "22acf5b831f7f1199d42d9eb34614c84fcbe906fb1ff3593a70e01912ea211c1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-searchbox--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxDisabled.stories.tsx",
          "description": "A SearchBox can be disabled.",
          "sourcePath": "source/examples/components-searchbox--disabled.tsx",
          "sha256": "86b9fd1075714f89ffd24d412cfbdd7c028963e1f83924b1cc3848977943caf8",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-searchbox--placeholder",
          "exportName": "Placeholder",
          "name": "Placeholder",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxPlaceholder.stories.tsx",
          "description": "A SearchBox can have placeholder text. If using the placeholder as a label (which is not recommended for usability), be sure to provide an `aria-label` for screen reader users.",
          "sourcePath": "source/examples/components-searchbox--placeholder.tsx",
          "sha256": "03fa2763f12470f2d3e03655ecbc3d9e005918d6825ddbdafb32f264247eae7e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-searchbox--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxSize.stories.tsx",
          "description": "A SearchBox can have different sizes.",
          "sourcePath": "source/examples/components-searchbox--size.tsx",
          "sha256": "6749030baccf5b9e07e68d48261c9ef3111be52bb7716b38f3cea62a0627bc29",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-searchbox--typeahead",
          "exportName": "Typeahead",
          "name": "Typeahead",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-searchbox--typeahead.tsx",
          "sha256": "a68ed082ae6faaf686526d2fab969283e69913c2dde98da9d0d9c9cbf45ebd1f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "SearchBox",
          "kind": "component",
          "propsType": "SearchBoxProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\" | \"filled-darker-shadow\" | \"filled-lighter-shadow\"",
              "required": false,
              "description": "Controls the colors and borders of the input.",
              "defaultValue": "'filled-darker'"
            },
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": "Input can't have children."
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "contentAfter",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element after the input text, within the input border"
            },
            {
              "name": "contentBefore",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Element before the input text, within the input border"
            },
            {
              "name": "defaultValue",
              "type": "string",
              "required": false,
              "description": "Default value of the input. Provide this if the input should be an uncontrolled component\nwhich tracks its current state internally; otherwise, use `value`.\n\n(This prop is mutually exclusive with `value`.)"
            },
            {
              "name": "dismiss",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Last element in the input, within the input border"
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n\nThis is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n(except `className` and `style`, which go to the `root` slot). The top-level `ref` will\nalso go here."
            },
            {
              "name": "onChange",
              "type": "((event: SearchBoxChangeEvent, data: InputOnChangeData) => void)",
              "required": false,
              "description": "Custom onChange callback.\nWill be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\nWhen the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\nand an empty string as the `value` property of the data parameter"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n(A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n\nThe root slot receives the `className` and `style` specified directly on the `<Input>`.\nAll other top-level native props will be applied to the primary slot, `input`."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Size of the input (changes the font size and spacing).",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "type",
              "type": "\"number\" | \"search\" | \"time\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"date\" | \"datetime-local\" | \"month\" | \"password\" | \"week\"",
              "required": false,
              "description": "An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\nbased on the type of value the user will enter.\n\nNote that no custom styling is currently applied for alternative types, and some types may\nactivate browser-default styling which does not match the Fluent design language.\n\n(For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n`<input>` element instead.)",
              "defaultValue": "'text'"
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "Current value of the input. Provide this if the input is a controlled component where you\nare maintaining its current state; otherwise, use `defaultValue`.\n\n(This prop is mutually exclusive with `defaultValue`.)"
            }
          ]
        }
      ],
      "defaultExampleId": "components-searchbox--default",
      "htmlPath": "components/SearchBox/",
      "markdownPath": "components/SearchBox.md"
    },
    {
      "id": "select",
      "title": "Select",
      "summary": "Wrapper around the native select element for choosing one option.",
      "kind": "components",
      "route": "components/Select",
      "label": "Select",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/select/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Select.md",
      "examples": [
        {
          "id": "components-select--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Select.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-select--default.tsx",
          "sha256": "df84ce4cfa0a76ae813e184bb6d7bca9b2690cebb19280104aac0f526ba282d2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-select--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectAppearance.stories.tsx",
          "description": "Select can have different appearances.\nThe colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with\n    filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate\n    surrounding color to pass accessibility requirements.",
          "sourcePath": "source/examples/components-select--appearance.tsx",
          "sha256": "c748d694edbed09a6b8f9130be5c30a5f85ba19271c5725fe86d15918a42fed9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-select--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectControlled.stories.tsx",
          "description": "The value of a Select can be controlled by updating the `selected` prop on `option` elements.",
          "sourcePath": "source/examples/components-select--controlled.tsx",
          "sha256": "a9052fe3aaec3b565fa557bda29e222b290a435026ccf9733037b0b3ce4b0e6d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-select--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectDisabled.stories.tsx",
          "description": "A Select can be disabled through the native `disabled` prop",
          "sourcePath": "source/examples/components-select--disabled.tsx",
          "sha256": "a15536d378af22120f00efe6860ef69de675a32b57ddf5ee14f2ca5c6fd46a96",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-select--initial-value",
          "exportName": "InitialValue",
          "name": "Initial Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectInitialValue.stories.tsx",
          "description": "A Select can have its initial value defined by using the `defaultValue` prop.",
          "sourcePath": "source/examples/components-select--initial-value.tsx",
          "sha256": "d7cf73614b7c086d3be3f9fbb65b7bf86403b1b666f6c317b261b5b30783b3c5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-select--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-select/stories/src/Select/SelectSize.stories.tsx",
          "description": "A Select's size can be set to `small`, `medium` (default), or `large`.",
          "sourcePath": "source/examples/components-select--size.tsx",
          "sha256": "ab94e1c840d5b7ba10c177b5eb3b741428946e18853308588277eaf5129f7241",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Select",
          "kind": "component",
          "propsType": "SelectProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the Select.",
              "defaultValue": "'filled-darker'"
            },
            {
              "name": "as",
              "type": "\"select\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "the icon, typically a down arrow"
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void)",
              "required": false,
              "description": "Called when the user changes the select element's value by selecting an option."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSelectElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "select",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"select\"; } & Omit<Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, \"ref\"> & { ref?: ((instance: HTMLSelectElement | null) => void) | RefObject<HTMLSelectElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Primary slot: the actual `<select>` element"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Matches the Input sizes",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-select--default",
      "htmlPath": "components/Select/",
      "markdownPath": "components/Select.md"
    },
    {
      "id": "skeleton",
      "title": "Skeleton",
      "summary": "A skeleton lets people know that a section of content is loading without blocking other parts of the page.",
      "kind": "components",
      "route": "components/Skeleton",
      "label": "Skeleton",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=114502-121706"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/skeleton/usage"
        }
      ],
      "aliases": [
        "/skeleton/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Skeleton.md",
      "examples": [
        {
          "id": "components-skeleton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Skeleton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-skeleton--default.tsx",
          "sha256": "a561d89da1a158c6c2c419a64fe7aa3b3d16e72dd111e511facd5d566f631de5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-skeleton--animation",
          "exportName": "Animation",
          "name": "Animation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.stories.tsx",
          "description": "You can specify the animation style of the Skeleton.\n      The default is 'wave' with the alternative being 'pulse'",
          "sourcePath": "source/examples/components-skeleton--animation.tsx",
          "sha256": "f51d41192625416f39fc2f5ca1cc2aa10ea7b19fe63a7908b1073f1d6f4e426b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-skeleton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.stories.tsx",
          "description": "You can specify the appearance of the Skeleton.\n      This is useful for instances where you want to render a Skeleton with a MaterialOS theme",
          "sourcePath": "source/examples/components-skeleton--appearance.tsx",
          "sha256": "42c1c8c2ef883d6cbd0826e71296b12851652bfefa84b6e1602efa56c759b06a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-skeleton--row",
          "exportName": "Row",
          "name": "Row",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx",
          "description": "You can make more complex wireframes using the basic building blocks of the Skeleton.",
          "sourcePath": "source/examples/components-skeleton--row.tsx",
          "sha256": "80f125f9b5418555c15e9fea64446c9acb7cf8d13a1fe31340a2e139df84109c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-skeleton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.stories.tsx",
          "description": "The shape of the `SkeletonItem` can be set to circle, rectangle, or square.",
          "sourcePath": "source/examples/components-skeleton--shape.tsx",
          "sha256": "5d117d619255d3056c4dedd2a9f8d5305c9fd80fb165be0476930a25b7f3fb4d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-skeleton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.stories.tsx",
          "description": "You can specify the size of the `SkeletonItem` by using the `size` prop.\n      The size is a number that represents the height of the `SkeletonItem` in pixels",
          "sourcePath": "source/examples/components-skeleton--size.tsx",
          "sha256": "7ec8d40a77f125cc524a5fb23de223b1ef8d73e37acd27a12e584b093982896a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Skeleton",
          "kind": "component",
          "propsType": "SkeletonProps",
          "description": "Skeleton component - TODO: add more docs",
          "props": [
            {
              "name": "animation",
              "type": "\"wave\" | \"pulse\"",
              "required": false,
              "description": "The animation type for the Skeleton"
            },
            {
              "name": "appearance",
              "type": "\"opaque\" | \"translucent\"",
              "required": false,
              "description": "Sets the appearance of the Skeleton."
            },
            {
              "name": "as",
              "type": "\"div\" | \"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circle\" | \"square\" | \"rectangle\"",
              "required": false,
              "description": "Sets the shape of the SkeletonItems inside the Skeleton.\nThis value can be overridden by the individual SkeletonItem's `shape` prop."
            },
            {
              "name": "size",
              "type": "16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128 | 8 | 12 | 14 | 22 | 52 | 92",
              "required": false,
              "description": "Sets the size of the SkeletonItems inside the Skeleton in pixels.\nSize is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).\nThis value can be overridden by the individual SkeletonItem's `size` prop."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "width",
              "type": "string | number",
              "required": false,
              "description": "Sets the width value of the skeleton wrapper.",
              "deprecated": "Use `className` prop to set width"
            }
          ]
        },
        {
          "name": "SkeletonItem",
          "kind": "component",
          "propsType": "SkeletonItemProps",
          "description": "",
          "props": [
            {
              "name": "animation",
              "type": "\"wave\" | \"pulse\"",
              "required": false,
              "description": "Sets the animation of the SkeletonItem",
              "defaultValue": "wave"
            },
            {
              "name": "appearance",
              "type": "\"opaque\" | \"translucent\"",
              "required": false,
              "description": "Sets the appearance of the SkeletonItem",
              "defaultValue": "opaque"
            },
            {
              "name": "as",
              "type": "\"div\" | \"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circle\" | \"square\" | \"rectangle\"",
              "required": false,
              "description": "Sets the shape of the SkeletonItems inside the Skeleton.\nThis value can be overridden by the individual SkeletonItem's `shape` prop."
            },
            {
              "name": "size",
              "type": "16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128 | 8 | 12 | 14 | 22 | 52 | 92",
              "required": false,
              "description": "Sets the size of the SkeletonItems inside the Skeleton in pixels.\nSize is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).\nThis value can be overridden by the individual SkeletonItem's `size` prop."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-skeleton--default",
      "htmlPath": "components/Skeleton/",
      "markdownPath": "components/Skeleton.md"
    },
    {
      "id": "slider",
      "title": "Slider",
      "summary": "A slider lets someone set a value from a given range. Sliders can take immediate effect, like a volume control, or can require a submission, like in a form.",
      "kind": "components",
      "route": "components/Slider",
      "label": "Slider",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=12126-152884"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/slider/usage"
        }
      ],
      "aliases": [
        "/slider/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Slider.md",
      "examples": [
        {
          "id": "components-slider--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Slider.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-slider--default.tsx",
          "sha256": "67a4b0db4bd8325d9814a839fe581bd551942aa19a82126ea87972878d8b4d6c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-slider--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderControlled.stories.tsx",
          "description": "A slider can be a controlled input where the slider value is stored in state\n      and updated with `onChange`. This is also useful for setting custom aria-valuetext",
          "sourcePath": "source/examples/components-slider--controlled.tsx",
          "sha256": "cc7be70011be470a09107b714c112a87e8730c160750ca7357c79f558713daea",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-slider--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderDisabled.stories.tsx",
          "description": "A disabled slider will not change or fire events on click or keyboard press.",
          "sourcePath": "source/examples/components-slider--disabled.tsx",
          "sha256": "81d4387cf0ebfc07c602ac42cbbb1a52c67b49874c8a014592bb55d584b99188",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-slider--min-max",
          "exportName": "MinMax",
          "name": "Min Max",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderMinMax.stories.tsx",
          "description": "A slider with min and max values displayed",
          "sourcePath": "source/examples/components-slider--min-max.tsx",
          "sha256": "7875e3189f6a3721cef27d363abf9bf3c072474d588d0d2dda57e6116328c12a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-slider--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderSize.stories.tsx",
          "description": "A slider comes in both medium and small size. Medium is the default.",
          "sourcePath": "source/examples/components-slider--size.tsx",
          "sha256": "b92edcd8f39c3f7dc46466795c087f64391fa3980a0f8ae27d0905cf1d5e87bc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-slider--step",
          "exportName": "Step",
          "name": "Step",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderStep.stories.tsx",
          "description": "You can define the step value of a slider so that the value will always be a mutiple of that step",
          "sourcePath": "source/examples/components-slider--step.tsx",
          "sha256": "b4bd043e4fca4a2c343e465fbaee104e10e1adb49a4670a1135990a3507b0707",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-slider--vertical",
          "exportName": "Vertical",
          "name": "Vertical",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-slider/stories/src/Slider/SliderVertical.stories.tsx",
          "description": "A slider can be oriented vertically where the max value is at the top of the slider.",
          "sourcePath": "source/examples/components-slider--vertical.tsx",
          "sha256": "0566febbd2ae4eeeb0f8295c36cdcf78b012b805684112a4c2d261e5fd997e6d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Slider",
          "kind": "component",
          "propsType": "SliderProps",
          "description": "The Slider component allows users to quickly select a value by dragging a thumb across a rail.",
          "props": [
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultValue",
              "type": "number",
              "required": false,
              "description": "The starting value for an uncontrolled Slider.\nMutually exclusive with `value` prop."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Whether to render the Slider as disabled.",
              "defaultValue": "`false` (renders enabled)"
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; } & { orient?: \"horizontal\" | \"vertical\" | undefined; }) | undefined",
              "required": false,
              "description": "The hidden input for the Slider.\nThis is the PRIMARY slot: all native properties specified directly on `<Slider>` will be applied to this slot,\nexcept `className` and `style`, which remain on the root slot."
            },
            {
              "name": "max",
              "type": "string | number",
              "required": false,
              "description": "The max value of the Slider.",
              "defaultValue": "100"
            },
            {
              "name": "min",
              "type": "string | number",
              "required": false,
              "description": "The min value of the Slider.",
              "defaultValue": "0"
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void)",
              "required": false,
              "description": "Triggers a callback when the value has been changed. This will be called on every individual step."
            },
            {
              "name": "orient",
              "type": "\"horizontal\" | \"vertical\"",
              "required": false,
              "description": "Orient is a non standard attribute that allows for vertical orientation in Firefox. It is set internally\nwhen `vertical` is set to true.\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#non_standard_attributes\nWebkit/Chromium support for vertical inputs is provided via -webkit-appearance css property"
            },
            {
              "name": "rail",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The Slider's base. It is used to visibly display the min and max selectable values."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root of the Slider.\nThe root slot receives the `className` and `style` specified directly on the `<Slider>`.\nAll other native props will be applied to the primary slot, `input`."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\"",
              "required": false,
              "description": "The size of the Slider.",
              "defaultValue": "'medium'"
            },
            {
              "name": "step",
              "type": "string | number",
              "required": false,
              "description": "The number of steps that the Slider's `value` will increment upon change. When provided, the Slider\nwill snap to the closest available value. This must be a positive value.",
              "defaultValue": "1"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "thumb",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The draggable icon used to select a given value from the Slider.\nThis is the element containing `role = 'slider'`."
            },
            {
              "name": "value",
              "type": "number",
              "required": false,
              "description": "The current value of the controlled Slider.\nMutually exclusive with `defaultValue` prop."
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "Render the Slider in a vertical orientation, smallest value on the bottom.",
              "defaultValue": "`false`"
            }
          ]
        }
      ],
      "defaultExampleId": "components-slider--default",
      "htmlPath": "components/Slider/",
      "markdownPath": "components/Slider.md"
    },
    {
      "id": "spin-button",
      "title": "Spin button",
      "summary": "A spin button is a specialized input that lets someone easily increase or decrease a value within a set range, like dates in a month. Spin buttons are good for precise increments in small ranges.",
      "kind": "components",
      "route": "components/SpinButton",
      "label": "Spin button",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=324095-17400"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/spin/usage"
        }
      ],
      "aliases": [
        "/spin-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/SpinButton.md",
      "examples": [
        {
          "id": "components-spinbutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/SpinButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-spinbutton--default.tsx",
          "sha256": "014521054fd3aee8173840ca54df02d3aa856894aaf14a1891b6f294d24805e2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.stories.tsx",
          "description": "SpinButton can have different appearances.\nThe colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with\n      filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate\n      surrounding color to pass accessibility requirements.",
          "sourcePath": "source/examples/components-spinbutton--appearance.tsx",
          "sha256": "bcd6feab910018cddbb8b58300818a3cfa6309696c2024410ba897af2b943e24",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--bounds",
          "exportName": "Bounds",
          "name": "Bounds",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBounds.stories.tsx",
          "description": "SpinButton can be bounded with the `min` and `max` props.\n      Using the spin buttons or hotkeys will clamp values in the range of [min, max].\n      Users may type a value outside the range into the text input and it will not be clamped\n      by the control. Pressing the \"home\" key will set the value to `min` and pressing the \"end\"\n      key will set the value to `max` when the props are set.",
          "sourcePath": "source/examples/components-spinbutton--bounds.tsx",
          "sha256": "3d4e7be8b4804999fc1618c871bb28f2346963e12110ee04d07dec043c03531d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonControlled.stories.tsx",
          "description": "SpinButton can be a controlled input where the value and, optionally, the display value\n      are stored in state and updated with `onChange`.",
          "sourcePath": "source/examples/components-spinbutton--controlled.tsx",
          "sha256": "aecd6b3601301e4f5f90a8afe386d924a1d9dd15e4fc04c3ddad38b986c2241d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisabled.stories.tsx",
          "description": "SpinButton can be disabled.",
          "sourcePath": "source/examples/components-spinbutton--disabled.tsx",
          "sha256": "2ac5b0e92caa67d186cffbc44dfdef99ae8a8d3b19505ce4520cdbce828fea74",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--display-value",
          "exportName": "DisplayValue",
          "name": "Display Value",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisplayValue.stories.tsx",
          "description": "SpinButton supports formatted display values.",
          "sourcePath": "source/examples/components-spinbutton--display-value.tsx",
          "sha256": "793c06d4c8a72c3dcbd636a31cde7f0ab4b787a9def341504e3e904e8f620061",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--read-only",
          "exportName": "ReadOnly",
          "name": "Read Only",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonReadOnly.stories.tsx",
          "description": "SpinButton can be read-only which prevents user input but still allows the component to be focused and read by assistive technologies. This is different from disabled, which prevents all interaction with the component.",
          "sourcePath": "source/examples/components-spinbutton--read-only.tsx",
          "sha256": "a2d56fde89af846a895fe480377d3f7c2379cd303f8861bbf2710fc90c23979c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonSize.stories.tsx",
          "description": "SpinButton can have different sizes.",
          "sourcePath": "source/examples/components-spinbutton--size.tsx",
          "sha256": "271a8a90dc28b85cc90b82790a67f2d17e33e0885530814836317a06b2a9cd34",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--step",
          "exportName": "Step",
          "name": "Step",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonStep.stories.tsx",
          "description": "SpinButton step size can be set. Additionally `stepPage` can be\n      set to a large value to allow bulk steps via the `Page Up` and `Page Down` keys.",
          "sourcePath": "source/examples/components-spinbutton--step.tsx",
          "sha256": "ac92f5d61a134d6de36e5cd63152a0998683ae459934b14f2ed15df7edd9f3f2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinbutton--uncontrolled",
          "exportName": "Uncontrolled",
          "name": "Uncontrolled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonUncontrolled.stories.tsx",
          "description": "An uncontrolled SpinButton",
          "sourcePath": "source/examples/components-spinbutton--uncontrolled.tsx",
          "sha256": "eb48ebc901b1c0d9abe8784eb649713587fd92a401be40c3674dd2ec173ed492",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "SpinButton",
          "kind": "component",
          "propsType": "SpinButtonProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the input.",
              "defaultValue": "'filled-darker'"
            },
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "decrementButton",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Renders the decrement control."
            },
            {
              "name": "defaultValue",
              "type": "number | null",
              "required": false,
              "description": "Initial value of the control (assumed to be valid). Updates to this prop will not be respected.\n\nUse this if you intend for the SpinButton to be an uncontrolled component which maintains its\nown value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)\n\nUse `null` to indicate the control has no value."
            },
            {
              "name": "displayValue",
              "type": "string",
              "required": false,
              "description": "String representation of `value`.\n\nUse this when displaying the value to users as something other than a plain number.\nFor example, when displaying currency values this might be \"$1.00\" when value is `1`.\n\nOnly provide this if the SpinButton is a controlled component where you are maintaining its\ncurrent state and passing updates based on change events. When SpinButton is used as an\nuncontrolled component this prop is ignored."
            },
            {
              "name": "incrementButton",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Renders the increment control."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "Input that displays the current value and accepts direct input from the user.\nDisplayed value is formatted.\n\nThis is the primary slot."
            },
            {
              "name": "max",
              "type": "number",
              "required": false,
              "description": "Max value of the control. If not provided, the control has no maximum value."
            },
            {
              "name": "min",
              "type": "number",
              "required": false,
              "description": "Min value of the control. If not provided, the control has no minimum value."
            },
            {
              "name": "onChange",
              "type": "((event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void)",
              "required": false,
              "description": "Callback for when the committed value changes.\n- User presses the up/down buttons (on single press or every spin)\n- User presses the up/down arrow keys (on single press or every spin)\n- User *commits* edits to the input text by focusing away (blurring) or pressing enter.\n  Note that this is NOT called for every key press while the user is editing."
            },
            {
              "name": "precision",
              "type": "number",
              "required": false,
              "description": "How many decimal places the value should be rounded to.\n\nThe default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.\nstep = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root element of SpinButton is a container `<div>`.\nThe root slot receives the `className` and `style` specified on the `<SpinButton>`.\nAll other native props are applied to the primary slot: `input`."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\"",
              "required": false,
              "description": "Size of the input.",
              "defaultValue": "'medium'"
            },
            {
              "name": "step",
              "type": "number",
              "required": false,
              "description": "Difference between two adjacent values of the control.\nThis value is used to calculate the precision of the input if no `precision` is given.\nThe precision calculated this way will always be greater than or equal 0.",
              "defaultValue": "1"
            },
            {
              "name": "stepPage",
              "type": "number",
              "required": false,
              "description": "Large difference between two values. This should be greater than `step` and is used\nwhen users hit the Page Up or Page Down keys.",
              "defaultValue": "1"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "number | null",
              "required": false,
              "description": "Current value of the control (assumed to be valid).\n\nOnly provide this if the SpinButton is a controlled component where you are maintaining its\ncurrent state and passing updates based on change events; otherwise, use the `defaultValue`\nproperty.\n\nUse `null` to indicate the control has no value.\n\nMutually exclusive with `defaultValue`."
            }
          ]
        }
      ],
      "defaultExampleId": "components-spinbutton--default",
      "htmlPath": "components/SpinButton/",
      "markdownPath": "components/SpinButton.md"
    },
    {
      "id": "spinner",
      "title": "Spinner",
      "summary": "Spinners visually communicate that something is processing. They’re used for loading states that take more than a second.",
      "kind": "components",
      "route": "components/Spinner",
      "label": "Spinner",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=7234-133747"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/spinner/usage"
        }
      ],
      "aliases": [
        "/spinner/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Spinner.md",
      "examples": [
        {
          "id": "components-spinner--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Spinner.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-spinner--default.tsx",
          "sha256": "95f733e71d180665d7864d885686e1de09ef0b1063ec419c2319dbc0eed7973c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinner--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerAppearance.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-spinner--appearance.tsx",
          "sha256": "5b67e002012d191ba4d5fe9718af252cceb6e76f47035309bfc4f8ee1bf60dc5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinner--labels",
          "exportName": "Labels",
          "name": "Labels",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerLabel.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-spinner--labels.tsx",
          "sha256": "15716acf873f6cbf732c0746e980cd4a205e03537349d709f56e80ddecc43cde",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-spinner--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-spinner/stories/src/Spinner/SpinnerSize.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-spinner--size.tsx",
          "sha256": "d600a50c2e1351fed99c4589e84998694f9f8bc0bf4388ba42acf512d814d196",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Spinner",
          "kind": "component",
          "propsType": "SpinnerProps",
          "description": "Converged Spinner component for the fluentui repo",
          "props": [
            {
              "name": "appearance",
              "type": "\"inverted\" | \"primary\"",
              "required": false,
              "description": "The appearance of the Spinner.",
              "defaultValue": "'primary'"
            },
            {
              "name": "as",
              "type": "\"div\" | \"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "delay",
              "type": "number",
              "required": false,
              "description": "Time in milliseconds after component mount before spinner is visible.",
              "defaultValue": "0"
            },
            {
              "name": "label",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, \"required\"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined; size?: \"small\" | \"medium\" | \"large\" | undefined; weight?: \"regular\" | \"semibold\" | undefined; } & RefAttributes<HTMLLabelElement>> | null | undefined",
              "required": false,
              "description": "An optional label for the Spinner."
            },
            {
              "name": "labelPosition",
              "type": "\"above\" | \"below\" | \"before\" | \"after\"",
              "required": false,
              "description": "Where the label is positioned relative to the Spinner",
              "defaultValue": "'after'"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-large\" | \"tiny\" | \"extra-small\" | \"huge\" | \"extra-tiny\"",
              "required": false,
              "description": "The size of the spinner.",
              "defaultValue": "'medium'"
            },
            {
              "name": "spinner",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The animated spinning ring."
            },
            {
              "name": "spinnerTail",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The part of the spinner that rotates."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-spinner--default",
      "htmlPath": "components/Spinner/",
      "markdownPath": "components/Spinner.md"
    },
    {
      "id": "split-button",
      "title": "Split button",
      "summary": "A split button lets someone take one of several related actions. The dominant action is the button label and additional actions are tucked away in a menu.",
      "kind": "components",
      "route": "components/SplitButton",
      "label": "Split button",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=160724-5710"
        },
        {
          "label": "Fluent button guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/button/usage"
        }
      ],
      "aliases": [
        "/split-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/SplitButton.md",
      "examples": [
        {
          "id": "components-button-splitbutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/SplitButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-splitbutton--default.tsx",
          "sha256": "8d112f8bbb63f8783755967383c9d945ebbdb151cb88052267b90e9170afa463",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonAppearance.stories.tsx",
          "description": "- `(undefined)`: the split button appears with the default style\n- `primary`: emphasizes the split button as a primary action.\n- `outline`: removes background styling.\n- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n- `transparent`: removes background and border styling.\n",
          "sourcePath": "source/examples/components-button-splitbutton--appearance.tsx",
          "sha256": "5cc7fef4c1e7db8bacc77a299191c3ee878d71ab4530f7f8f9db2bed2a46a805",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonDisabled.stories.tsx",
          "description": "A split button can be `disabled` or `disabledFocusable`.\n              `disabledFocusable` is used in scenarios where it is important to keep a consistent tab order\n              for screen reader and keyboard users. The primary example of this pattern is when\n              the disabled split button is in a menu or a commandbar and is seldom used for standalone buttons.",
          "sourcePath": "source/examples/components-button-splitbutton--disabled.tsx",
          "sha256": "ec40eac87445f3dbbadf1c347cbccd294593bff896b418f268e45d991ab11f9a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonIcon.stories.tsx",
          "description": "SplitButton has an `icon` slot that renders before the text, and `menuIcon` slot that renders after the text.",
          "sourcePath": "source/examples/components-button-splitbutton--icon.tsx",
          "sha256": "bc5b1fbdefb8e8b8081fd5fdee31c0958457528e1dcfa40a31336cf2f4d0bba5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonShape.stories.tsx",
          "description": "A split button can be rounded, circular, or square.",
          "sourcePath": "source/examples/components-button-splitbutton--shape.tsx",
          "sha256": "107bbc1f7773b48a863b9408590a6677b550d30e7035f1640e5f26a9c9907687",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSize.stories.tsx",
          "description": "SplitButton supports `small`, `medium` and `large` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-button-splitbutton--size.tsx",
          "sha256": "ce1e0dd2db80623b50c921aa774d4ec699cfb9219f62cce8a53e3c29b3d02d16",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--size-large",
          "exportName": "SizeLarge",
          "name": "Size: large",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSizeLarge.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-splitbutton--size-large.tsx",
          "sha256": "6401cd7c5b3b322c2acce3c179c40acbf08f69431c12e8a8a758532396221290",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--size-medium",
          "exportName": "SizeMedium",
          "name": "Size: medium",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSizeMedium.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-splitbutton--size-medium.tsx",
          "sha256": "10f35204359c452fa38337f322e6a0fcb7b2fd1e9a8e5255662b9928400fe955",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--size-small",
          "exportName": "SizeSmall",
          "name": "Size: small",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonSizeSmall.stories.tsx",
          "description": "WARNING: the small SplitButton does not meet WCAG target size requirements. Only use this variant if there is an equally accessible alternative way to perform the same action, or if it is part of a user-selected compact theme.",
          "sourcePath": "source/examples/components-button-splitbutton--size-small.tsx",
          "sha256": "a2ea5a9c86adae8a7073ef91cc9855e7d1214cbca93a0c046ed0f76c5977444e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-splitbutton--with-long-text",
          "exportName": "WithLongText",
          "name": "With Long Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/SplitButton/SplitButtonWithLongText.stories.tsx",
          "description": "Text wraps after it hits the max width of the component.",
          "sourcePath": "source/examples/components-button-splitbutton--with-long-text.tsx",
          "sha256": "1ae50099e74b226515f92a6702ca64990a79d2ac0da2b317a015888c29dda065",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "SplitButton",
          "kind": "component",
          "propsType": "SplitButtonProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "menuButton",
              "type": "WithSlotShorthandValue<MenuButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>> | null",
              "required": false,
              "description": "Button that opens menu with secondary actions in SplitButton."
            },
            {
              "name": "menuIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Menu icon that indicates that this button has a menu that can be expanded."
            },
            {
              "name": "primaryActionButton",
              "type": "WithSlotShorthandValue<ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>> | null",
              "required": false,
              "description": "Button to perform primary action in SplitButton."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'circular'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-splitbutton--default",
      "htmlPath": "components/SplitButton/",
      "markdownPath": "components/SplitButton.md"
    },
    {
      "id": "status-indicator",
      "title": "Status indicator",
      "summary": "Status indicators communicate the status of an object, action, or process, including success, failure, error, and other informational states.",
      "kind": "components",
      "route": "components/StatusIndicator",
      "label": "Status indicator",
      "standalone": true,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=326713-271"
        },
        {
          "label": "Fluent badge guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/badge/usage"
        }
      ],
      "aliases": [
        "/status-indicator/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/StatusIndicator.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "components/StatusIndicator/",
      "markdownPath": "components/StatusIndicator.md"
    },
    {
      "id": "swatch-picker",
      "title": "Swatch picker",
      "summary": "A swatch picker lets people choose a color, image, or pattern in graphic and text editors.",
      "kind": "components",
      "route": "components/SwatchPicker",
      "label": "Swatch picker",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=208407-2275"
        },
        {
          "label": "Fluent guidance",
          "url": "https://github.com/microsoft/fluentui/blob/dfab5d732f028b0475663f5a945ede85e6ffc5c3/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerBestPractices.md"
        }
      ],
      "aliases": [
        "/swatch/",
        "/swatch-picker/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/SwatchPicker.md",
      "examples": [
        {
          "id": "components-swatchpicker--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/SwatchPicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-swatchpicker--default.tsx",
          "sha256": "318e77d90a57d84b613ad823817c2477aea74a8599f9e73dedbe113d6ff59685",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--color-swatch-variants",
          "exportName": "ColorSwatchVariants",
          "name": "Color Swatch Variants",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/ColorSwatchVariants.stories.tsx",
          "description": "`ColorSwatch` component can have color, gradient, icon and initials.",
          "sourcePath": "source/examples/components-swatchpicker--color-swatch-variants.tsx",
          "sha256": "531d4546d3f3347d6ab85b40a66894b1c0679112cb37807398b283d5d53092e5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--empty-swatch-example",
          "exportName": "EmptySwatchExample",
          "name": "Empty Swatch Example",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/EmptySwatch.stories.tsx",
          "description": "Empty swatch is used for cases where new swatches can be added.",
          "sourcePath": "source/examples/components-swatchpicker--empty-swatch-example.tsx",
          "sha256": "d8e6c0c4a56c950bcd8a8dd0d8280aeec93865e1651f7a136726e3e7502c85cf",
          "dependencies": [
            "@coreai-ds/react-components",
            "@ctrl/tinycolor",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-focus-mode",
          "exportName": "SwatchPickerFocusMode",
          "name": "Swatch Picker Focus Mode",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerFocusMode.stories.tsx",
          "description": "The `focusMode` prop controls how focus moves between swatches. Use `\"arrow\"` (default) to navigate with arrow keys, or `\"tab\"` to navigate with the Tab key.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-focus-mode.tsx",
          "sha256": "d8e4f05f6bf975c2361c939d0bd65bff55314588d530b1bd81977bc7ce8dec81",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-image",
          "exportName": "SwatchPickerImage",
          "name": "Swatch Picker Image",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerImage.stories.tsx",
          "description": "A swatch can be represented as an image.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-image.tsx",
          "sha256": "2b0b67c3cafc431cd9eedd3084599d0170ccfbcaa511e6def3626a3d65ad300c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-layout",
          "exportName": "SwatchPickerLayout",
          "name": "Swatch Picker Layout",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerLayout.stories.tsx",
          "description": "The `layout` prop places items in a `row` or a `grid`.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-layout.tsx",
          "sha256": "9d42e435f1e5822af0e3bedb3cb46c25eafac27de35c43561c03a0edb2d9ba55",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-mixed-swatches",
          "exportName": "SwatchPickerMixedSwatches",
          "name": "Swatch Picker Mixed Swatches",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx",
          "description": "It's possible to use `ColorSwatch` and `ImageSwatch` in one SwatchPicker.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-mixed-swatches.tsx",
          "sha256": "949b44d88dd5732e262c938a773bf73f5bc0bcb34ec0bdc6de1be8855b9729d5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-popup",
          "exportName": "SwatchPickerPopup",
          "name": "Swatch Picker Popup",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerPopup.stories.tsx",
          "description": "The swatch picker can be integrated within a popover or similar element.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-popup.tsx",
          "sha256": "b15a4c3de0127693ec80e1fbfafeed6a79c2ec3d14eef31a3740a970bfdfa859",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-shape",
          "exportName": "SwatchPickerShape",
          "name": "Swatch Picker Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerShape.stories.tsx",
          "description": "The `shape` prop sets border-radius of the Swatch. The default is `square`.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-shape.tsx",
          "sha256": "af5ab796b664b413ecce881a8c1a4564384cdfe41030b25685e07d34212c2e89",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-size",
          "exportName": "SwatchPickerSize",
          "name": "Swatch Picker Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerSize.stories.tsx",
          "description": "The `size` prop sets width and height of the Swatch. The default is `medium` which is 28x28px. `extra-small` is 20x20px, `small` is 24x24px, `large` is 32x32px.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-size.tsx",
          "sha256": "34f8311c215cdd33a58577fda5c754d494d52f0a37c57cd5101ea1ba76d748d1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-spacing",
          "exportName": "SwatchPickerSpacing",
          "name": "Swatch Picker Spacing",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerSpacing.stories.tsx",
          "description": "The `spacing` prop sets gap between swatches.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-spacing.tsx",
          "sha256": "c41cffd16b6bfcbc537880a37fbd05651f35ac8184a33f2ab88c24f4604ab40d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-swatchpicker--swatch-picker-with-tooltip",
          "exportName": "SwatchPickerWithTooltip",
          "name": "Swatch Picker With Tooltip",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerWithTooltip.stories.tsx",
          "description": "Each swatch should have a descriptive tooltip.",
          "sourcePath": "source/examples/components-swatchpicker--swatch-picker-with-tooltip.tsx",
          "sha256": "8dee60f189de8338a3a02f118044ee8af55e01d1996922a26ce62aa3ec94d114",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "SwatchPicker",
          "kind": "component",
          "propsType": "SwatchPickerProps",
          "description": "",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedValue",
              "type": "string",
              "required": false,
              "description": "Default selected value"
            },
            {
              "name": "focusMode",
              "type": "\"tab\" | \"arrow\"",
              "required": false,
              "description": "Sets the focus behavior for the SwatchPicker.\n\n`arrow`\nThis behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n\n`tab`\nThis behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.",
              "defaultValue": "'arrow'"
            },
            {
              "name": "layout",
              "type": "\"grid\" | \"row\"",
              "required": false,
              "description": "Whether SwatchPicker is row or grid"
            },
            {
              "name": "onSelectionChange",
              "type": "EventHandler<SwatchPickerOnSelectionChangeData>",
              "required": false,
              "description": "Triggers a callback when the value has been changed"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedValue",
              "type": "string",
              "required": false,
              "description": "Controlled selected value"
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "Swatch shape.",
              "defaultValue": "'rounded'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-small\"",
              "required": false,
              "description": "Swatch size"
            },
            {
              "name": "spacing",
              "type": "\"small\" | \"medium\"",
              "required": false,
              "description": "Spacing between swatches"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ColorSwatch",
          "kind": "component",
          "propsType": "ColorSwatchProps",
          "description": "ColorSwatch component is used to render a colors, icons and gradients.",
          "props": [
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "borderColor",
              "type": "string",
              "required": false,
              "description": "Border color when contrast is low"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "color",
              "type": "string",
              "required": false,
              "description": "Swatch color"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "Whether the swatch is disabled"
            },
            {
              "name": "disabledIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "Swatch shape"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-small\"",
              "required": false,
              "description": "Swatch size"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": "Swatch value"
            }
          ]
        },
        {
          "name": "EmptySwatch",
          "kind": "component",
          "propsType": "EmptySwatchProps",
          "description": "EmptySwatch component is used for adding new color swatches.",
          "props": [
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "Swatch shape"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-small\"",
              "required": false,
              "description": "Swatch size"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ImageSwatch",
          "kind": "component",
          "propsType": "ImageSwatchProps",
          "description": "ImageSwatch component is used to render an images, patterns and textures.",
          "props": [
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "Swatch shape"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\" | \"extra-small\"",
              "required": false,
              "description": "Swatch size"
            },
            {
              "name": "src",
              "type": "string",
              "required": true,
              "description": "Swatch color"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": "Swatch value"
            }
          ]
        },
        {
          "name": "SwatchPickerRow",
          "kind": "component",
          "propsType": "SwatchPickerRowProps",
          "description": "SwatchPickerRow component is used to render a row of swatches.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-swatchpicker--default",
      "htmlPath": "components/SwatchPicker/",
      "markdownPath": "components/SwatchPicker.md"
    },
    {
      "id": "switch",
      "title": "Switch",
      "summary": "A switch lets someone choose between two mutually exclusive options, like on or off. Activating a switch triggers an immediate change.",
      "kind": "components",
      "route": "components/Switch",
      "label": "Switch",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=6022-126541"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/switch/usage"
        }
      ],
      "aliases": [
        "/switch/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Switch.md",
      "examples": [
        {
          "id": "components-switch--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Switch.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-switch--default.tsx",
          "sha256": "eb7e59a3a8392f3d9d05a81ccbfec6758aa2c4efb2b0c52a5bc6dae388ab4c44",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-switch--checked",
          "exportName": "Checked",
          "name": "Checked",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchChecked.stories.tsx",
          "description": "A Switch can be initially checked by passing a value to the `defaultChecked` property, or have its checked value controlled via the `checked` property.",
          "sourcePath": "source/examples/components-switch--checked.tsx",
          "sha256": "0fb3aefb750cbae60df1399be6ddcddf11e689c0f6e4cae8d81791503cfeae91",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-switch--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchDisabled.stories.tsx",
          "description": "A Switch can be disabled.",
          "sourcePath": "source/examples/components-switch--disabled.tsx",
          "sha256": "14d54638891f7c8c098ccc3a8622bc81edd62539cd670fa385abec329844a7b9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-switch--label",
          "exportName": "Label",
          "name": "Label",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchLabel.stories.tsx",
          "description": "A label can be provided to the Switch and is positioned above, before or after the component.",
          "sourcePath": "source/examples/components-switch--label.tsx",
          "sha256": "ddff231f23f4d3656040c4464ee5e31d5fb2c16b54e79d6f8abcde5aaf0b3f0c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-switch--label-wrapping",
          "exportName": "LabelWrapping",
          "name": "Label Wrapping",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchLabelWrapping.stories.tsx",
          "description": "The label will wrap if it is wider than the available space. The Switch track will stay aligned to the first line of text.",
          "sourcePath": "source/examples/components-switch--label-wrapping.tsx",
          "sha256": "25e79f4fba5f30820f7b5496f29a6d381c2dffe3a06906a73718c2d9a6398bfc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-switch--required",
          "exportName": "Required",
          "name": "Required",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchRequired.stories.tsx",
          "description": "When a Switch is marked as `required`, its label also gets the required styling.",
          "sourcePath": "source/examples/components-switch--required.tsx",
          "sha256": "a8b24724ae868b76eca743ede8606185f98c67b0aae870d3234729f692ed98fc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-switch--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-switch/stories/src/Switch/SwitchSize.stories.tsx",
          "description": "A Switch can have different sizes.",
          "sourcePath": "source/examples/components-switch--size.tsx",
          "sha256": "203b07b455077ff552f159e2d685c4d77e9dd3d0024806857c64fdcdaa10fda2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Switch",
          "kind": "component",
          "propsType": "SwitchProps",
          "description": "Switches enable users to trigger an option on or off through pressing the component.",
          "props": [
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checked",
              "type": "boolean",
              "required": false,
              "description": "Defines the controlled checked state of the Switch.\nIf passed, Switch ignores the `defaultChecked` property.\nThis should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\ncorrect value based on handling `onChange` events and re-rendering.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultChecked",
              "type": "boolean",
              "required": false,
              "description": "Defines whether the Switch is initially in a checked state or not when rendered.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is\nimportant to keep a consistent tab order for screen reader and keyboard users.",
              "defaultValue": "false"
            },
            {
              "name": "indicator",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The track and the thumb sliding over it indicating the on and off status of the Switch."
            },
            {
              "name": "input",
              "type": "({ as?: \"input\"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, \"ref\"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, \"children\"> & { children?: undefined; }) | undefined",
              "required": false,
              "description": "Hidden input that handles the Switch's functionality.\n\nThis is the PRIMARY slot: all native properties specified directly on the `<Switch>` tag will be applied to this\nslot, except `className` and `style`, which remain on the root slot."
            },
            {
              "name": "label",
              "type": "WithSlotShorthandValue<Omit<ComponentProps<LabelSlots>, \"required\"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, \"children\"> & { children?: any; }> | null | undefined; size?: \"small\" | \"medium\" | \"large\" | undefined; weight?: \"regular\" | \"semibold\" | undefined; } & RefAttributes<HTMLLabelElement>> | null | undefined",
              "required": false,
              "description": "The Switch's label."
            },
            {
              "name": "labelPosition",
              "type": "\"above\" | \"before\" | \"after\"",
              "required": false,
              "description": "The position of the label relative to the Switch.",
              "defaultValue": "after"
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void)",
              "required": false,
              "description": "Callback to be called when the checked state value changes."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The root element of the Switch.\n\nThe root slot receives the `className` and `style` specified directly on the `<Switch>` tag.\nAll other native props will be applied to the primary slot: `input`."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\"",
              "required": false,
              "description": "The size of the Switch.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-switch--default",
      "htmlPath": "components/Switch/",
      "markdownPath": "components/Switch.md"
    },
    {
      "id": "table",
      "title": "Table",
      "summary": "Low-level primitives for building customizable data tables. Subcomponents: TableHeader, TableHeaderCell, TableBody, TableRow, TableCell, TableSelectionCell, TableCellLayout.",
      "kind": "components",
      "route": "components/Table",
      "label": "Table",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/table/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Table.md",
      "examples": [
        {
          "id": "components-table--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Table.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-table--default.tsx",
          "sha256": "e19f421e3dc53beabbe9b6e5b886a51af6b407b55238525f9e37a0777550af83",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--cell-actions",
          "exportName": "CellActions",
          "name": "Cell Actions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/CellActions.stories.tsx",
          "description": "`TableCellActions` is a container that is visible when the `TableRow`is hovered\nor when the current focused element is within the row. It is commonly used to contain interactive actions\nlike buttons, but can be used for any generic content. Please ensure that the contents of cell actions\nare accessible.",
          "sourcePath": "source/examples/components-table--cell-actions.tsx",
          "sha256": "5151211db6500be07244d5fb2c264b2e5bab91c422682c4b7f2d24e8742e05fb",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--cell-navigation",
          "exportName": "CellNavigation",
          "name": "Cell Navigation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/CellNavigation.stories.tsx",
          "description": "The `Table` primitive components do not support keyboard navigation. This should be added by users.\nCell navigation can be achieved simply using the `useArrowNavigationGroup` utility provided by the Library.\n\n>⚠️ Once there is any kind of keyboard navigation on the component it must follow the\n>[aria role=\"grid\" pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/).",
          "sourcePath": "source/examples/components-table--cell-navigation.tsx",
          "sha256": "ea1b57ae0e9878f408222ab8812fa32a784cffdd995fb6cf4c78ac8812c41a8e",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--composite-navigation",
          "exportName": "CompositeNavigation",
          "name": "Composite Navigation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/CompositeNavigation.stories.tsx",
          "description": "Different keyboard navigation strategies are supported through  the `focusMode` prop.\nComposite navigation combines row focus and cell focus. By default the user navigates the table\nby row. When the user presses the right arrow key, focus mode switches to cells of the current row.",
          "sourcePath": "source/examples/components-table--composite-navigation.tsx",
          "sha256": "8445928212d365e63b74767d8c2f0f6ee875e72a0e70393fa1e4f5f6a5327547",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--data-grid",
          "exportName": "DataGrid",
          "name": "Data Grid",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/DataGrid.stories.tsx",
          "description": "The `DataGrid` component is a composition of the `useTableFeatures` hook and primitive `Table` components\nalong with some convenience features such as accessible markup and event handlers.\nAny feature of the `DataGrid` is achievable with the primitive components and hook",
          "sourcePath": "source/examples/components-table--data-grid.tsx",
          "sha256": "5aed593516595f9142312b13d1209d6d5fcebdd41c6135c84137e63af069e250",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--focusable-elements-in-cells",
          "exportName": "FocusableElementsInCells",
          "name": "Focusable Elements In Cells",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/FocusableElements.Cells.stories.tsx",
          "description": "When the keyboard navigation is implemented on a Table, there needs to be special handling for cells\nthat contain multiple focusable elements. In these cases, the `TableCell` should be focusable and the\nfollowing keyboard pattern should apply:\n- Enter keypress should move focus inside the cell\n- Focus should be trapped while it is in a cell\n- Escape keypress hould focus back on the cell\n\nThis can be done using the `useFocusableGroup` hook with the tab behaviour set to `limited-trap-focus`.\nThe props returned from the hook should be spread to the `TableCell`.",
          "sourcePath": "source/examples/components-table--focusable-elements-in-cells.tsx",
          "sha256": "7f97a7663399dbe35f02e2a512afcc8de9eba7ca58ed35ab332138eb5c8e4d10",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--memoization",
          "exportName": "Memoization",
          "name": "Memoization",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/Memoization.stories.tsx",
          "description": "There is no single correct way to memoize components. It is important to note that memoization is not free\nand should only be used to optimize scenarios that can be identified as performance bottlenecks. This\nexample demonstrates a reasonable memoization strategy to memoize entire table. When a row's selection\nchanges, only the affected row is re-rendered.",
          "sourcePath": "source/examples/components-table--memoization.tsx",
          "sha256": "a780436a8826dc21b1a85b3032c708905f367f2cb27638f3d7295b83385b5dbd",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--multiple-select",
          "exportName": "MultipleSelect",
          "name": "Multiple Select",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/MultipleSelect.stories.tsx",
          "description": "Selection can be achieved easily by combining the `TableSelectionCell` component along with\nother primitive components. `useTableFeatures` can handle state management for selection,\nalthough its use is not\nnecessary if users already have their own state management.",
          "sourcePath": "source/examples/components-table--multiple-select.tsx",
          "sha256": "6888298d4cf9f6ba709dd6dbe9e9c3715dd789427fcc03d8d04e37e9db9d1469",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--multiple-select-controlled",
          "exportName": "MultipleSelectControlled",
          "name": "Multiple Select Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/MultipleSelectControlled.stories.tsx",
          "description": "By default our hook is uncontrolled. However, it is possible to control selection features with external\nuser state.",
          "sourcePath": "source/examples/components-table--multiple-select-controlled.tsx",
          "sha256": "ffec8028629e0c5820b985a87947af3c748d8e37d8fbc9b544152a839f15c17a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--non-native-elements",
          "exportName": "NonNativeElements",
          "name": "Non Native Elements",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/NonNativeElements.stories.tsx",
          "description": "By default `Table` components will render native semantic `<table>` HTML elements.\nNative semantic elements provide the best accessibility support and it is recommended to user them.\nHowever, for certain use cases (i.e. Virtualization) the native semantic elements are not advisable\ndue to strict browser layouting. Using the `noNativeElements` prop will ensure that all components are\nrendered as divs while ensuring a layout experience similar to semantic table elements.",
          "sourcePath": "source/examples/components-table--non-native-elements.tsx",
          "sha256": "3f2c89fd64aa15ff28a65c8d1f0c5e703c0bb6e340f9132c515664ba8d82b812",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--primary-cell",
          "exportName": "PrimaryCell",
          "name": "Primary Cell",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/PrimaryCell.stories.tsx",
          "description": "A primary cell creates emphasis by increasing icon size and font weight for the main text.\nGenerally the primary cell should be used in the first column of a table, but there is no obligation\nto do so and can be used in any column by the user.",
          "sourcePath": "source/examples/components-table--primary-cell.tsx",
          "sha256": "fb2230ab19d465574a928ba8a67f8d6163082fb209880ff9dbe43465db84960f",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--resizable-columns-controlled",
          "exportName": "ResizableColumnsControlled",
          "name": "Resizable Columns - controlled (preview)",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/ResizableColumnsControlled.stories.tsx",
          "description": "This example demonstrates how `columnSizingOptions` can be used in combination with \n`onColumnResize` callback to control the width of each column from the parent component.\n\nThe table itself still makes sure the columns are laid out in such a way that they fit in the container.\n\nTo make features like column resizing work with keyboard navigation, the `Menu` component is used to provide\n a context menu for the header cells, which allows the user to access advanced Table features.\n\nThis example also demonstrates how columns can be removed or added.",
          "sourcePath": "source/examples/components-table--resizable-columns-controlled.tsx",
          "sha256": "930c9506313dab8a7d16d128ac10077c00236d6ed504dccfcfc956b91f1602ce",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--resizable-columns-disable-auto-fit",
          "exportName": "ResizableColumnsDisableAutoFit",
          "name": "Resizable Columns - Disabled container auto-fit",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/ResizableColumnsDisableAutoFit.stories.tsx",
          "description": "By default, the column sizing feature will automatically fit the columns to the content.\nThis behavior can be disabled by setting the`autoFitColumns` option to`false`.\n\nMake sure to also enable `noNativeElements` option to prevent displaying the table elements as\nnative elements, as the native elements won't overflow the parent table.",
          "sourcePath": "source/examples/components-table--resizable-columns-disable-auto-fit.tsx",
          "sha256": "c2b225e5a647b27be634709d5892d3e5639e5d1b331297bc3c58164c56a650e5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--resizable-columns-uncontrolled",
          "exportName": "ResizableColumnsUncontrolled",
          "name": "Resizable Columns (preview)",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/ResizableColumnsUncontrolled.stories.tsx",
          "description": "The Table component contains logic to support column resizing. To enable resizing,\nuse the `useTableFeatures` hook in combination with the `useTableColumnSizing_unstable` plugin.\nThe resulting `columnSizing_unstable` object contains methods needed to make resizing work.\n\nIn this example we are choosing an uncontrolled approach, which still allows us to set column \nwidth in an imperative matter (try changing the input value).\n\nOptions can be passed to the plugin to define minimum, default and optimal \n(in a controlled scenario) width of the column.\n\nTo make features like column resizing work with keyboard navigation, the `Menu` component is used to provide\n a context menu for the header cells, which allows the user to access advanced Table features.\n\nTo learn about how to control widths from the parent, please see the example below.",
          "sourcePath": "source/examples/components-table--resizable-columns-uncontrolled.tsx",
          "sha256": "51306b0335928446cc9c025459f408161a55092aea3e7d52e25322345b688d26",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--selection-with-cell-actions",
          "exportName": "SelectionWithCellActions",
          "name": "Selection With Cell Actions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SelectionWithCellActions.stories.tsx",
          "description": "When using cell actions with row selection, some event handling logic is necessary so that\ninvoking the cell actions does not invoke the row (therefore invoking selection).\nHow this is done will depend on each use case, so this event handling is not handled by any of\nthe library components. This examples handles such events by using `preventDefault` and `defaultPrevented`\nproperties.",
          "sourcePath": "source/examples/components-table--selection-with-cell-actions.tsx",
          "sha256": "705771632ca9dc57b47dc3496b435ab671a5f4bb6c352d984329f819438e1c57",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--single-select",
          "exportName": "SingleSelect",
          "name": "Single Select",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SingleSelect.stories.tsx",
          "description": "The single selection scenario is similar to the multiple selection scenario. The `TableSelectionCell`\nCan render both checkbox and radio style components which are Fluent\n[Checkbox](https://react.fluentui.dev/?path=/docs/components-checkbox--default) and [Radio](https://react.fluentui.dev/?path=/docs/components-radio--default)\ncomponents. While the design recommendation is to use checkbox for multiselect and radio for single select.\nThere is no obligation to do so.\n",
          "sourcePath": "source/examples/components-table--single-select.tsx",
          "sha256": "02d32d64ffd61d608c295dec927c8a42352ebd38730361e24000ba766fc871b4",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--single-select-controlled",
          "exportName": "SingleSelectControlled",
          "name": "Single Select Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SingleSelectControlled.stories.tsx",
          "description": "By default the `useTableFeatures` hook is uncontrolled. \nHowever, it is possible to control selection features with external\nuser state.",
          "sourcePath": "source/examples/components-table--single-select-controlled.tsx",
          "sha256": "4200ca47444e8638ae903585262ea8caaa542e95424fc55a7b37a7193e039a48",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--size-extra-small",
          "exportName": "SizeExtraSmall",
          "name": "Size Extra Small",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SizeExtraSmall.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-table--size-extra-small.tsx",
          "sha256": "ea516dcb612527efb9257a62d228288fb199c8521b62a3ba65111dfd5f752566",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--size-small",
          "exportName": "SizeSmall",
          "name": "Size Small",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SizeSmall.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-table--size-small.tsx",
          "sha256": "6614b22b9c109726682a4aec797283e2c0f292db25617dae7ca17f0bc2e5d69d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--sort",
          "exportName": "Sort",
          "name": "Sort",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/Sort.stories.tsx",
          "description": "Using the `sortable` prop will configure all header cells to be buttons and add extra styles.\nThe `TableHeaderCell` component accepts a `sortDirection` prop that will indicate whether the\nheader is sorted. Handling the sort of data and column state is handled by `useTableFeatures`.\n\n> Due to screen reader support, the sort status might not be announced once a sortable column header\nis invoked. [This is a known issue.](https://github.com/nvaccess/nvda/issues/10890)\nHowever the implementation still follows the\n[pattern recommended by the WAI](https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html)",
          "sourcePath": "source/examples/components-table--sort.tsx",
          "sha256": "c968068fafe9723b4333130b2ffe07673fcccfe175218e4bc3a988ea60f70ce2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--sort-controlled",
          "exportName": "SortControlled",
          "name": "Sort Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SortControlled.stories.tsx",
          "description": "By default our hook is uncontrolled. However, it is possible to control sort features\nwith external user state.",
          "sourcePath": "source/examples/components-table--sort-controlled.tsx",
          "sha256": "f4939eddd7b229e7b17237a7d5477f7751110adc990c1b1915d12d73509af85f",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--subtle-selection",
          "exportName": "SubtleSelection",
          "name": "Subtle Selection",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/SubtleSelection.stories.tsx",
          "description": "By setting the `subtle` prop on the `TableSelectionCell` component, the selection indicator will only\nappear when:\n- the `TableRow` component is hovered.\n- The current focused element is within the `TableRow`\n- The `TableSelectionCell` is checked",
          "sourcePath": "source/examples/components-table--subtle-selection.tsx",
          "sha256": "1dc88a2d0dab4a0a56f678714335c4aa2b30175fddf664f9b54bb6c16a40a5c6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-table--virtualization",
          "exportName": "Virtualization",
          "name": "Virtualization",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-table/stories/src/Table/Virtualization.stories.tsx",
          "description": "> Semantic `<table>` elements have are subject to strict layouting by the browser and are not suited\nto virtualization in general. Use the `noNativeElements` prop to use a flexbox based layout that will\nmake virtualization a lot easier.\n\nThe `Table` primitive components are unopinionated with respect to virtualization. They should be compatible\nwith any virtualization library. Hoisting business logic to a state management\nhook like `useTableFeatures`\nmeans that features can persist between the mounting/unmounting that happens during virtualization.\nThe below example uses the [react-window](https://www.npmjs.com/package/react-window) library.",
          "sourcePath": "source/examples/components-table--virtualization.tsx",
          "sha256": "51742547fb1f41b82845e938ac828a391cccccc1cb504464da136e3f0a15e8e7",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react",
            "react-window"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Table",
          "kind": "component",
          "propsType": "TableProps",
          "description": "Table component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"table\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "noNativeElements",
              "type": "boolean",
              "required": false,
              "description": "Render all table elements as divs instead of semantic table elements\nUsing divs no longer uses `display: table` layout but `display: flex`",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"extra-small\"",
              "required": false,
              "description": "Affects the sizes of all table subcomponents",
              "defaultValue": "medium"
            },
            {
              "name": "sortable",
              "type": "boolean",
              "required": false,
              "description": "Whether the table is sortable",
              "defaultValue": "false"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TableBody",
          "kind": "component",
          "propsType": "TableBodyProps",
          "description": "TableBody component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"tbody\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TableCell",
          "kind": "component",
          "propsType": "TableCellProps",
          "description": "TableCell component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"td\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TableCellLayout",
          "kind": "component",
          "propsType": "TableCellLayoutProps",
          "description": "TableCellLayout component",
          "props": [
            {
              "name": "appearance",
              "type": "\"primary\"",
              "required": false,
              "description": "Renders design variants of the table cell",
              "defaultValue": "undefined"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A layout wrapper for the main and description slots"
            },
            {
              "name": "description",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary text that describes or complements the main text"
            },
            {
              "name": "main",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Main text for the table cell. Children of the root slot are automatically rendered here"
            },
            {
              "name": "media",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Slot for an icon or other visual element"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncate",
              "type": "boolean",
              "required": false,
              "description": "Renders content with overflow: hidden and text-overflow: ellipsis"
            }
          ]
        },
        {
          "name": "TableHeader",
          "kind": "component",
          "propsType": "TableHeaderProps",
          "description": "TableHeader component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"thead\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TableHeaderCell",
          "kind": "component",
          "propsType": "TableHeaderCellProps",
          "description": "TableHeaderCell component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"th\"",
              "required": false,
              "description": ""
            },
            {
              "name": "aside",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "aside content for anything that should be after main content of the table header cell"
            },
            {
              "name": "button",
              "type": "NonNullable<WithSlotShorthandValue<ARIAButtonSlotProps> | null>",
              "required": false,
              "description": "Button handles correct narration and interactions for sorting;"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "sortable",
              "type": "boolean",
              "required": false,
              "description": "Whether the column is sortable",
              "defaultValue": "false"
            },
            {
              "name": "sortDirection",
              "type": "\"ascending\" | \"descending\"",
              "required": false,
              "description": "",
              "defaultValue": "undefined"
            },
            {
              "name": "sortIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TableRow",
          "kind": "component",
          "propsType": "TableRowProps",
          "description": "TableRow component",
          "props": [
            {
              "name": "appearance",
              "type": "\"none\" | \"brand\" | \"neutral\"",
              "required": false,
              "description": "A table row can have different variants. These appearances are\nintended to be used with selection.",
              "defaultValue": "none"
            },
            {
              "name": "as",
              "type": "\"div\" | \"tr\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TableSelectionCell",
          "kind": "component",
          "propsType": "TableSelectionCellProps",
          "description": "TableSelectionCell component",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"td\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkboxIndicator",
              "type": "(Omit<ComponentProps<Partial<CheckboxSlots>, \"input\">, \"defaultChecked\" | \"onChange\" | \"size\" | \"checked\"> & { checked?: boolean | \"mixed\"; children?: undefined; defaultChecked?: boolean | \"mixed\"; labelPosition?: \"before\" | \"after\" | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void) | undefined; shape?: \"circular\" | \"square\" | undefined; size?: \"medium\" | \"large\" | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined",
              "required": false,
              "description": "Selection indicator if selection type is checkbox"
            },
            {
              "name": "checked",
              "type": "boolean | \"mixed\"",
              "required": false,
              "description": "",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "hidden",
              "type": "boolean",
              "required": false,
              "description": "Completely hides the selection cell",
              "deprecated": "cells should never use hidden, since doing so breaks table structure and screen reader navigation. Use `invisible` instead."
            },
            {
              "name": "invisible",
              "type": "boolean",
              "required": false,
              "description": "Hides the selection cell visually but takes up the same space",
              "defaultValue": "false"
            },
            {
              "name": "radioIndicator",
              "type": "(Omit<ComponentProps<Partial<RadioSlots>, \"input\">, \"onChange\" | \"size\"> & { value?: string; labelPosition?: \"below\" | \"after\"; disabled?: boolean | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void) | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined",
              "required": false,
              "description": "Selection indicator if selection type is radio"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "subtle",
              "type": "boolean",
              "required": false,
              "description": "Only visible when checked or the parent row is hovered/focused",
              "defaultValue": "false"
            },
            {
              "name": "type",
              "type": "\"checkbox\" | \"radio\"",
              "required": false,
              "description": "A table can have two kinds of selection modes.",
              "defaultValue": "checkbox"
            }
          ]
        }
      ],
      "defaultExampleId": "components-table--default",
      "htmlPath": "components/Table/",
      "markdownPath": "components/Table.md"
    },
    {
      "id": "tab-elevated",
      "title": "TabList Elevated",
      "summary": "A tablist allows people to switch between categories of related information without going to different pages.",
      "kind": "components",
      "route": "components/TabElevated",
      "label": "TabList Elevated",
      "standalone": true,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=432771-25797"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tablist/usage"
        }
      ],
      "aliases": [
        "/tab-elevated/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/TabElevated.md",
      "examples": [
        {
          "id": "components-tablist--elevated-appearance",
          "exportName": "ElevatedAppearance",
          "name": "Elevated Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/TabList.stories.tsx",
          "description": "`TabList`'s `appearance` prop is widened with a CoreAI-only `\"elevated\"`\nvalue. It keeps the stock `subtle` tab styling (active indicator, hover)\nbut wraps the whole strip in a raised, rounded, background-filled\ncontainer — like a `Card` — so it reads as a distinct surface rather than\nsitting flush with the page. Every other appearance (`transparent`,\n`subtle`, `subtle-circular`, `filled-circular`) is passed straight through\nto the stock Fluent `TabList` unchanged.",
          "sourcePath": "source/examples/components-tablist--elevated-appearance.tsx",
          "sha256": "7de5b9b98bb52b6f690ef72959e93ab6abf42bdc182e45dc7dce32ca1ff54e7f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "components/TabElevated/",
      "markdownPath": "components/TabElevated.md"
    },
    {
      "id": "horizontal-tab-list",
      "title": "Tabs",
      "summary": "A tablist allows people to switch between categories of related information without going to different pages.",
      "kind": "components",
      "route": "components/TabList",
      "label": "Tabs",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=23575-138808"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tablist/usage"
        }
      ],
      "aliases": [
        "/horizontal-tab/",
        "/vertical-tab/",
        "/vertical-tab-list/",
        "/horizontal-tab-list/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/TabList.md",
      "examples": [
        {
          "id": "components-tablist--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/TabList.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tablist--default.tsx",
          "sha256": "2497e9c452e11c7cf3457542d7038b8babc34ce2858171cc4fb1da1f97336673",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListAppearance.stories.tsx",
          "description": "A tab list can have a `transparent`, `subtle`, `subtle-circular` and `filled-circular` appearance. The default is `transparent`.",
          "sourcePath": "source/examples/components-tablist--appearance.tsx",
          "sha256": "9eab5695d9a9f392a163b85e84463312dfe699d8d07ee98774dfaaa9cfbe00bd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--custom-appearance-elevated",
          "exportName": "CustomAppearanceElevated",
          "name": "Custom Appearance Elevated",
          "origin": "local",
          "originalSource": "src/stories/components/TabListDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tablist--custom-appearance-elevated.tsx",
          "sha256": "ee280184f0739142a233783fbf2236a9bae515515c8c66580fe83c7ce8eb6858",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListDisabled.stories.tsx",
          "description": "A tab list can disable interaction for all its tabs. The default is `false`. Individual tabs can also be disabled.",
          "sourcePath": "source/examples/components-tablist--disabled.tsx",
          "sha256": "e3dd17438903f3e2e75f0ab453cc8b8325d7a434599248b8c8a2e49e2f7d3a20",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--elevated-appearance",
          "exportName": "ElevatedAppearance",
          "name": "Elevated Appearance",
          "origin": "local",
          "originalSource": "src/stories/components/TabList.stories.tsx",
          "description": "`TabList`'s `appearance` prop is widened with a CoreAI-only `\"elevated\"`\nvalue. It keeps the stock `subtle` tab styling (active indicator, hover)\nbut wraps the whole strip in a raised, rounded, background-filled\ncontainer — like a `Card` — so it reads as a distinct surface rather than\nsitting flush with the page. Every other appearance (`transparent`,\n`subtle`, `subtle-circular`, `filled-circular`) is passed straight through\nto the stock Fluent `TabList` unchanged.",
          "sourcePath": "source/examples/components-tablist--elevated-appearance.tsx",
          "sha256": "7de5b9b98bb52b6f690ef72959e93ab6abf42bdc182e45dc7dce32ca1ff54e7f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--horizontal",
          "exportName": "Horizontal",
          "name": "Horizontal",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListHorizontal.stories.tsx",
          "description": "The tabs within a tab list are arranged horzontally by default.",
          "sourcePath": "source/examples/components-tablist--horizontal.tsx",
          "sha256": "2ca1b8718b7f21bf13bee818ffe3923ae0d4436123f7d589e24abcaec3c2418d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--icon-only",
          "exportName": "IconOnly",
          "name": "Icon Only",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListIconOnly.stories.tsx",
          "description": "Tabs can have an `icon` slot filled and no content..",
          "sourcePath": "source/examples/components-tablist--icon-only.tsx",
          "sha256": "c23ba24fd040ef6af130f6b3acb85f9c8252953e1dc0f35a1de269955cf45f37",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--left-align-tab-text",
          "exportName": "LeftAlignTabText",
          "name": "Left Align Tab Text",
          "origin": "local",
          "originalSource": "src/stories/components/TabList.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tablist--left-align-tab-text.tsx",
          "sha256": "c9528fbdf2e9532dd47becec9e3edc302eae45b5bb858398b6b0451c4f42f8f0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--select-tab-on-focus",
          "exportName": "SelectTabOnFocus",
          "name": "Select Tab On Focus",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSelectTabOnFocus.stories.tsx",
          "description": "A tab list can select tabs whenever a tab is focused.",
          "sourcePath": "source/examples/components-tablist--select-tab-on-focus.tsx",
          "sha256": "41898fed9dc6be31375b1baac64e3271c067182f22e24df7d518338fce12ff41",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--size-large",
          "exportName": "SizeLarge",
          "name": "Size Large",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSizeLarge.stories.tsx",
          "description": "A tab list can have `large` tabs.",
          "sourcePath": "source/examples/components-tablist--size-large.tsx",
          "sha256": "5ae09a84ac714bebe4589e613006869b13b807e4dc8fca3e3ede2b6a33926013",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--size-medium",
          "exportName": "SizeMedium",
          "name": "Size Medium",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSizeMedium.stories.tsx",
          "description": "A tab list can have `medium` tabs (default).",
          "sourcePath": "source/examples/components-tablist--size-medium.tsx",
          "sha256": "62a74160aa792b2d119242f5c960d135e36b0cb98033f3b8ef31824a9289c3ef",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--size-small",
          "exportName": "SizeSmall",
          "name": "Size Small",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListSizeSmall.stories.tsx",
          "description": "A tab list can have `small` tabs.",
          "sourcePath": "source/examples/components-tablist--size-small.tsx",
          "sha256": "cdfae8850d13bec7f21e849e72faf16997913a2172fa0b233a98f361f19ae1eb",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--vertical",
          "exportName": "Vertical",
          "name": "Vertical",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListVertical.stories.tsx",
          "description": "The tabs within a tab list can be arranged vertically. The default is false.",
          "sourcePath": "source/examples/components-tablist--vertical.tsx",
          "sha256": "35b971af8416e99e28c087eb164959e99300286c4dfda9c55aadbe6cef636be2",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tablist--with-icon",
          "exportName": "WithIcon",
          "name": "With Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListWithIcon.stories.tsx",
          "description": "A tab has an `icon` slot to display an icon before the tab content.",
          "sourcePath": "source/examples/components-tablist--with-icon.tsx",
          "sha256": "981d1578e47420272113e0de9d15351bc6acd98291ddac74fe9303f3585c135c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--with-overflow",
          "exportName": "WithOverflow",
          "name": "With Overflow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.stories.tsx",
          "description": "A tab list can support overflow by using Overflow and OverflowItem.\n\n**Note**: when adding custom buttons to a tablist, e.g. the overflow button in this example,`role=\"tab\"` must be manually added for screen reader accessibility.",
          "sourcePath": "source/examples/components-tablist--with-overflow.tsx",
          "sha256": "9dcf92b4347c48fc6a1502e309d8d2bcb3d2d98d92943be217964e62a9be3378",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tablist--with-panels",
          "exportName": "WithPanels",
          "name": "With Panels",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tabs/stories/src/Tabs/TabListWithPanels.stories.tsx",
          "description": "A tab list can be used to show/hide UI when a tab is selected.",
          "sourcePath": "source/examples/components-tablist--with-panels.tsx",
          "sha256": "3a0244f478dc403f8d9af63f54f191eb5a4be3bad5211c5758691ac89a551a81",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "TabList",
          "kind": "component",
          "propsType": "TabListProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"transparent\" | \"elevated\" | \"subtle-circular\" | \"filled-circular\"",
              "required": false,
              "description": "A tab list can supports 'transparent' and 'subtle' appearance.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': No background and border styling\n- 'subtle-circular': Adds background and border styling\n- 'filled-circular': Adds background styling\n- 'elevated': Adds background around all tabs for visual grouping\n\nThe appearance affects each of the contained tabs.",
              "defaultValue": "'transparent'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedValue",
              "type": "unknown",
              "required": false,
              "description": "The value of the tab to be selected by default.\nTypically useful when the selectedValue is uncontrolled."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A tab list can be set to disable interaction.",
              "defaultValue": "false"
            },
            {
              "name": "onTabSelect",
              "type": "SelectTabEventHandler",
              "required": false,
              "description": "Raised when a tab is selected."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "reserveSelectedTabSpace",
              "type": "boolean",
              "required": false,
              "description": "Tab size may change between unselected and selected states.\nThe default scenario is a selected tab has bold text.\n\nWhen true, this property requests tabs be the same size whether unselected or selected.",
              "defaultValue": "true"
            },
            {
              "name": "selectedValue",
              "type": "unknown",
              "required": false,
              "description": "The value of the currently selected tab."
            },
            {
              "name": "selectTabOnFocus",
              "type": "boolean",
              "required": false,
              "description": "When true, focusing a tab will select it.",
              "defaultValue": "false"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A tab list can be either 'small', 'medium', or 'large' size.\nThe size affects each of the contained tabs.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "A tab list can arrange its tabs vertically.",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "Tab",
          "kind": "component",
          "propsType": "TabProps",
          "description": "A tab provides a selectable item in a tab list.",
          "props": [
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Component children are placed in this slot\nAvoid using the `children` property in this slot in favour of Component children whenever possible."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A tab can be set to disable interaction.",
              "defaultValue": "false"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders before the content."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "unknown",
              "required": true,
              "description": "The value that identifies this tab when selected."
            }
          ]
        }
      ],
      "defaultExampleId": "components-tablist--default",
      "htmlPath": "components/TabList/",
      "markdownPath": "components/TabList.md"
    },
    {
      "id": "tag",
      "title": "Tag",
      "summary": "A tag is a representation of a value that someone has picked, like recipients for an email or categories on a planner task.",
      "kind": "components",
      "route": "components/Tag",
      "label": "Tag",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=174111-15541"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tag/usage"
        }
      ],
      "aliases": [
        "/tag/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Tag.md",
      "examples": [
        {
          "id": "components-tag-tag--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Tag.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tag-tag--default.tsx",
          "sha256": "a2b1fa50a847785688f18c11602d5deb838c8bddaf9eb41c0497ded364bce58a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagAppearance.stories.tsx",
          "description": "A tag can have a `filled`, `outline` or `brand` appearance. The default is `filled`.",
          "sourcePath": "source/examples/components-tag-tag--appearance.tsx",
          "sha256": "e71fade941fbd5686d6ecc34d3addd9301f7a3bfd532e4c47e1b42f5f85ea68d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagDisabled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tag-tag--disabled.tsx",
          "sha256": "a60415527f8c5e0661137c65f800a74baf24e29a5391ba5ab56e8296c3b9f6a8",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--dismiss",
          "exportName": "Dismiss",
          "name": "Dismiss",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagDismiss.stories.tsx",
          "description": "A tag can have a dismiss icon and become focusable. TagGroup can handle dismiss for a collection of tags. Ensure that focus is properly managed when all tags have been dismissed.",
          "sourcePath": "source/examples/components-tag-tag--dismiss.tsx",
          "sha256": "88400bac6048f62a85a630486609da95de45d7c75544816a515e4fa8ee4a12a5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagIcon.stories.tsx",
          "description": "A Tag can render a custom icon if provided.",
          "sourcePath": "source/examples/components-tag-tag--icon.tsx",
          "sha256": "8fbcdaf3ab9a1d040a7831035c79db2a6cd9c3b388750b21b605ca2cd777a124",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--media",
          "exportName": "Media",
          "name": "Media",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagMedia.stories.tsx",
          "description": "A tag can render a media, for example an Avatar.",
          "sourcePath": "source/examples/components-tag-tag--media.tsx",
          "sha256": "82f1427506acb6e28c1f3e839638914994d95e82a75c8ac5ef17d94f7b26ae1b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--secondary-text",
          "exportName": "SecondaryText",
          "name": "SecondaryText",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagSecondaryText.stories.tsx",
          "description": "A Tag can have a secondary text.",
          "sourcePath": "source/examples/components-tag-tag--secondary-text.tsx",
          "sha256": "b6407dea54b631b51f2abf23ada1bd84a288f3db103eb9574c002c722ec76c8d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--selected",
          "exportName": "Selected",
          "name": "Selected",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagSelected.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tag-tag--selected.tsx",
          "sha256": "1e8ff77aceb0ad3bcd7ef418ecb7d2b2b7b5cb9802b1559be70027d4c42d936d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagShape.stories.tsx",
          "description": "A tag can be rounded or circular,",
          "sourcePath": "source/examples/components-tag-tag--shape.tsx",
          "sha256": "6335668477f903179b64536ceec57aa9867acbb0122e385a9af2b5411baffbe8",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-tag--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/Tag/TagSize.stories.tsx",
          "description": "A tag supports `medium`, `small` and `extra-small` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-tag-tag--size.tsx",
          "sha256": "9d0e7ef13cd72b96d29233f7fcd5cdc86d3c9f497d9888cfe0ff87871a43d6e2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Tag",
          "kind": "component",
          "propsType": "TagProps",
          "description": "Tag component -  a visual representation of an attribute.\nProvides visual attributes such as media, icon, primary and secondary text, as well as the ability to attach an action (by default it is dismiss)",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"filled\" | \"outline\"",
              "required": false,
              "description": "A Tag can have filled, outlined or brand experience.",
              "defaultValue": "'filled'"
            },
            {
              "name": "as",
              "type": "\"button\" | \"span\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A Tag can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "dismissible",
              "type": "boolean",
              "required": false,
              "description": "A Tag can be dismissible",
              "defaultValue": "false"
            },
            {
              "name": "dismissIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Slot for the dismiss icon"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Slot for an icon"
            },
            {
              "name": "media",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Slot for a visual element, usually an avatar"
            },
            {
              "name": "primaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Main text for the Tag. Children of the root slot are automatically rendered here"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLSpanElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryText",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary text that describes or complements the main text"
            },
            {
              "name": "selected",
              "type": "boolean",
              "required": false,
              "description": "An InteractionTag can be selected.\nNote: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.",
              "defaultValue": "false"
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\"",
              "required": false,
              "description": "A Tag can have rounded or circular shape.",
              "defaultValue": "'round'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"extra-small\"",
              "required": false,
              "description": "A Tag has three sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": "Unique value identifying the tag within a TagGroup"
            }
          ]
        }
      ],
      "defaultExampleId": "components-tag-tag--default",
      "htmlPath": "components/Tag/",
      "markdownPath": "components/Tag.md"
    },
    {
      "id": "tag-picker",
      "title": "Tag picker",
      "summary": "A TagPicker combines a text field and a dropdown giving people a way to select an option from a list or enter their own choice, these selections are represented as Tags.",
      "kind": "components",
      "route": "components/TagPicker",
      "label": "Tag picker",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=304788-13375"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tagpicker/usage"
        }
      ],
      "aliases": [
        "/tag-picker-dropdown/",
        "/tag-picker-item/",
        "/tag-picker-secondary-action/",
        "/tag-picker/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/TagPicker.md",
      "examples": [
        {
          "id": "components-tagpicker--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/TagPicker.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tagpicker--default.tsx",
          "sha256": "bc201c4279d39b0b7bdc0c604c69e5f59566fad71b6e80bc26a87a89a4d48918",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx",
          "description": "\nA `TagPicker` can have the following appearance variants:\n\n* `outline` (default): has a border around all four sides.\n* `underline`: only has a bottom border.\n* `filled-darker`: no border, only a subtle background color difference against a white page. All tags will be by default `outline`.\n* `filled-lighter`: no border, and a white background.\n\nThis is equivalent to the [`Combobox`](https://react.fluentui.dev/?path=/docs/components-combobox--default#appearance) `appearance` property.\n      ",
          "sourcePath": "source/examples/components-tagpicker--appearance.tsx",
          "sha256": "b73ce5db2ade550430ac28105383b17d3aac6ab120e6e2a28edf9f6bb5a5f253",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--button",
          "exportName": "Button",
          "name": "Button",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx",
          "description": "\nThe component `TagPickerButton` renders an \"invisible\" button that can be used instead of `TagPickerInput` to opt-out of a text field and to provide something similar to a [`Dropdown`](https://react.fluentui.dev/?path=/docs/components-dropdown--default) behavior.\n      ",
          "sourcePath": "source/examples/components-tagpicker--button.tsx",
          "sha256": "3ea8da3a5497640f0255621040b557fadef00e088554332b2184816e8cf2591e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx",
          "description": "\nA `TagPicker` can be `disabled`. Disabling `TagPicker` will disable the access to the `TagPickerList`, but it'll still allow modifications to the `selectedOptions`.\n\n> The `Tag` component can also be disabled, in the case where that given tag should not be reachable\n      ",
          "sourcePath": "source/examples/components-tagpicker--disabled.tsx",
          "sha256": "7175e8013e611d1151037c80324ef39f68e5fe8881682c69ffa4c0ad7a20a138",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--expand-icon",
          "exportName": "ExpandIcon",
          "name": "Expand Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx",
          "description": "\n`TagPickerControl` provides an `expandIcon` slot for modifying the default `expandIcon` chevron.\nYou can also remove the slot entirely by providing `null` to it.",
          "sourcePath": "source/examples/components-tagpicker--expand-icon.tsx",
          "sha256": "42f7d775a6cd16e649fa9f55635f32ab6f156d6f60b3d502fa6b179721b4e8d7",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--filtering",
          "exportName": "Filtering",
          "name": "Filtering",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx",
          "description": "\n`TagPicker` can take advantage of the provided `useTagPickerFilter` hook to filter the options based on the user-typed string. It can be configured for a custom filter function, custom message, and custom render function.\n\n`disableAutoFocus` is used here to control whether the first option is automatically focused when the popover opens. When the user opens the popover via keyboard (no query), auto focus is disabled to avoid jumping to the first option. When the user types a query, auto focus is enabled so the first matching option is highlighted.\n",
          "sourcePath": "source/examples/components-tagpicker--filtering.tsx",
          "sha256": "c1c3c2c7f134e76feb0bf3015d27f71a6bfe7a3d358d3777de40c5104c855f13",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--grouped",
          "exportName": "Grouped",
          "name": "Grouped",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tagpicker--grouped.tsx",
          "sha256": "879bb68d144a21a47ea17c1a331097b8898df258a6c176124aa79388a87ff8f5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--no-popover",
          "exportName": "NoPopover",
          "name": "No Popover",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx",
          "description": "\nYou can use the `TagPicker` without the popover with the list of options by providing the `noPopover` property. This is useful when you want to allow users to input their own tags. All you have to do is control the `TagPickerInput` value and handle the `onKeyDown` event to add the tag to the `TagPicker` when the user presses the Enter key.\n      ",
          "sourcePath": "source/examples/components-tagpicker--no-popover.tsx",
          "sha256": "1a2450272e840cd7051e5e1953b6000b7fff7bf5a6ae47a71f0a7807f1007eb9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--secondary-action",
          "exportName": "SecondaryAction",
          "name": "Secondary Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx",
          "description": "\n`TagPickerControl` provides a `secondaryAction` slot for possible extra functionalities that may be desired. `secondaryAction` slot is `absolute` positioned on the top right corner of the control component together with `expandIcon` slot.\n",
          "sourcePath": "source/examples/components-tagpicker--secondary-action.tsx",
          "sha256": "10456bb32f3aa7553c665606553abbe3b1674f69aa3d2dfbf51ebf1f5d4e0258",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--single-line",
          "exportName": "SingleLine",
          "name": "Single Line",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleLine.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tagpicker--single-line.tsx",
          "sha256": "58008165ff8b1add59a12b7ece4a8abbbae1a9e26069a03356e0fcc8dba632fd",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--single-select",
          "exportName": "SingleSelect",
          "name": "Single Select",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx",
          "description": "\nBy default, the `TagPicker` allows you to have multiple tags selected . To enable single selection, you can manage the selected options state yourself and pass only one selected option to the `TagPicker` component.\n      ",
          "sourcePath": "source/examples/components-tagpicker--single-select.tsx",
          "sha256": "a736c3fe58335716aebadac119f379f76b7007989b687f0cc7ddee8e16c0d71f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx",
          "description": "A `TagPicker`'s size can be set to `medium` (default), `large` or `extra-large`.",
          "sourcePath": "source/examples/components-tagpicker--size.tsx",
          "sha256": "22c8e56ce47706b6b6133822d2665217d63d1ec7a6533cff87ea6a00d6367f14",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tagpicker--truncated-text",
          "exportName": "TruncatedText",
          "name": "Truncated Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx",
          "description": "\nText truncation is a common pattern used to handle long text that doesn't fit within the available space. There are all sorts of ways to truncate text, in this example we're show casing two ways to truncate text:\n- Using CSS to truncate text with ellipsis when the element reaches the end of its container.\n- Using fixed width to truncate text with ellipsis when the text is longer than a certain width (50px in this case).\n\nWe do not support text truncation out of the box, as it's a complex and opinionated problem. However, you can easily achieve text truncation by using patterns like the ones shown in this example.\n      ",
          "sourcePath": "source/examples/components-tagpicker--truncated-text.tsx",
          "sha256": "ed3824413a45248059de75b52ad24b2e87dee6f9ba930955599d2171270f514f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "TagPicker",
          "kind": "component",
          "propsType": "TagPickerProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the combobox trigger.",
              "defaultValue": "'filled-darker'"
            },
            {
              "name": "children",
              "type": "JSXElement | [JSXElement, false | JSXElement | undefined]",
              "required": true,
              "description": "Can contain two children including a trigger and a popover"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "The default open state when open is uncontrolled"
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false"
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "TagPickers are rendered out of DOM order on `document.body` by default,\nuse this to render the popover in DOM order",
              "defaultValue": "false"
            },
            {
              "name": "noPopover",
              "type": "boolean",
              "required": false,
              "description": "By default, when a single children is provided, the TagPicker will assume that the children\nis a popover. By setting this prop to true, the children will be treated as a trigger instead.",
              "defaultValue": "false"
            },
            {
              "name": "onOpenChange",
              "type": "EventHandler<TagPickerOnOpenChangeData>",
              "required": false,
              "description": ""
            },
            {
              "name": "onOptionSelect",
              "type": "EventHandler<TagPickerOnOptionSelectData>",
              "required": false,
              "description": ""
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Sets the open/closed state of the dropdown.\nUse together with onOpenChange to fully control the dropdown's visibility"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configure the positioning of the combobox dropdown.\nPlease refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\nfor more details."
            },
            {
              "name": "ref",
              "type": "Ref<never>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "size",
              "type": "\"medium\" | \"large\" | \"extra-large\"",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TagPickerButton",
          "kind": "component",
          "propsType": "TagPickerButtonProps",
          "description": "TagPickerButton component -\nA TagPickerButton is an alternative to TagPickerInput that does not include an input field.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the combobox trigger.",
              "defaultValue": "'outline'"
            },
            {
              "name": "as",
              "type": "\"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Controls the size of the combobox faceplate",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TagPickerControl",
          "kind": "component",
          "propsType": "TagPickerControlProps",
          "description": "TagPickerControl component -\nA TagPickerControl is a composite component that controls actions and state for a TagPicker.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The dropdown arrow icon"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryAction",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "A secondary action should be a button-like element to be rendered right after\nthe trigger responsible for opening/closing the tag picker popover."
            },
            {
              "name": "style",
              "type": "(CSSProperties & { '--fui-TagPickerControl-aside-width'?: string | number; })",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TagPickerGroup",
          "kind": "component",
          "propsType": "TagPickerGroupProps",
          "description": "TagPickerGroup component -\nA TagPickerGroup is a composite component that allows users to group tags together.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TagPickerInput",
          "kind": "component",
          "propsType": "TagPickerInputProps",
          "description": "TagPickerInput component -\nA TagPickerInput is a composite component that allows users to query tags.",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"underline\"",
              "required": false,
              "description": "Controls the colors and borders of the combobox trigger.",
              "defaultValue": "'outline'"
            },
            {
              "name": "as",
              "type": "\"input\"",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "clearable",
              "type": "boolean",
              "required": false,
              "description": "If set, the combobox will show an icon to clear the current value."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLInputElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TagPickerList",
          "kind": "component",
          "propsType": "TagPickerListProps",
          "description": "TagPickerList component -\nA TagPickerList is a composite component that allows users to display a list of tag options to be selected.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedOptions",
              "type": "string[]",
              "required": false,
              "description": "For an uncontrolled component, sets the initial selection.\nIf this is set, the `defaultValue` prop MUST also be set."
            },
            {
              "name": "disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "Disable auto-focusing on the first item when mounting.",
              "defaultValue": "false",
              "deprecated": "TagPickerList is always rendered within a TagPicker which manages active descendant focus.\nThis prop has no effect."
            },
            {
              "name": "multiselect",
              "type": "boolean",
              "required": false,
              "description": "Sets the selection type to multiselect.\nSet this to true for multiselect, even if fully controlling selection state.\nThis enables styles and accessibility properties to be set.",
              "defaultValue": "false"
            },
            {
              "name": "onOptionSelect",
              "type": "((event: SelectionEvents, data: OptionOnSelectData) => void)",
              "required": false,
              "description": "Callback when an option is selected"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedOptions",
              "type": "string[]",
              "required": false,
              "description": "An array of selected option keys.\nUse this with `onOptionSelect` to directly control the selected option(s)\nIf this is set, the `value` prop MUST also be controlled."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TagPickerOption",
          "kind": "component",
          "propsType": "TagPickerOptionProps",
          "description": "TagPickerOption component -\nA TagPickerOption is a composite component that allows users to select tags.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "media",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondaryContent",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "text",
              "type": "string",
              "required": false,
              "description": "An optional override the string value of the Option's display text,\ndefaulting to the Option's child content.\nThis is used as the Dropdown button's or Combobox input's value when the option is selected,\nand as the comparison for type-to-find keyboard functionality.\nThe string value of the Option's display text when the Option's children are not a string.\nThis is used as the Dropdown button's or Combobox input's value when the option is selected,\nand as the comparison for type-to-find keyboard functionality."
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-tagpicker--default",
      "htmlPath": "components/TagPicker/",
      "markdownPath": "components/TagPicker.md"
    },
    {
      "id": "tag-group",
      "title": "TagGroup",
      "summary": "Container for multiple Tag or InteractionTag controls.",
      "kind": "components",
      "route": "components/TagGroup",
      "label": "TagGroup",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/tag-group/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/TagGroup.md",
      "examples": [
        {
          "id": "components-tag-taggroup--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/TagGroup.stories.tsx",
          "description": "Compares a group of static tags with a group of interactive tags.",
          "sourcePath": "source/examples/components-tag-taggroup--default.tsx",
          "sha256": "3ff843415d6ab1da0919f59915165a689ecb5cd9cac347f2223db500a4c2ad28",
          "dependencies": [
            "@coreai-ds/react-components"
          ]
        },
        {
          "id": "components-tag-taggroup--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDisabled.stories.tsx",
          "description": "A TagGroup can be disabled. The collection of Tag/InteractionTag will also be disabled.",
          "sourcePath": "source/examples/components-tag-taggroup--disabled.tsx",
          "sha256": "6ddd0af26f58889941c5d863deda64065bb24ae4bb36d89660ebb2151e096839",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-taggroup--dismiss",
          "exportName": "Dismiss",
          "name": "Dismiss",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupDismiss.stories.tsx",
          "description": "A TagGroup contains a collection of Tag/InteractionTag that can be dismissed. Ensure that focus is properly managed when all tags have been dismissed.",
          "sourcePath": "source/examples/components-tag-taggroup--dismiss.tsx",
          "sha256": "142fb83b111a35f32f2e3ce6a7abf7274d274f338bdc82920ec02f9f04e15668",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-taggroup--select",
          "exportName": "Select",
          "name": "Select",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSelect.stories.tsx",
          "description": "A TagGroup contains a collection of InteractionTag that can be selected. Note: This prop only changes the appearance of the tag at the moment. A future PR will add the integration with TagGroup.",
          "sourcePath": "source/examples/components-tag-taggroup--select.tsx",
          "sha256": "7edaa356ee36c43f90afea69bf4f032ca2a3994234a72eb0e1f87a6770b558c5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tag-taggroup--sizes",
          "exportName": "Sizes",
          "name": "Sizes",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupSizes.stories.tsx",
          "description": "A TagGroup can set default size for all its tags. It supports `medium`, `small` and `extra-small` size. Default value is `medium`.",
          "sourcePath": "source/examples/components-tag-taggroup--sizes.tsx",
          "sha256": "e3b890ab20542801d33ab34fd1d7299d8ab488712b00724d62e6fc9b1a96b2ae",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tag-taggroup--with-overflow",
          "exportName": "WithOverflow",
          "name": "With Overflow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx",
          "description": "A TagGroup can support overflow by using Overflow and OverflowItem.",
          "sourcePath": "source/examples/components-tag-taggroup--with-overflow.tsx",
          "sha256": "f3790321537f5c4cc27b842e287ca7484ed7f08ab04327e7509619af7dc082d3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "TagGroup",
          "kind": "component",
          "propsType": "TagGroupProps",
          "description": "TagGroup component - a container for multiple tags.\nProvides context to size or dismiss children tags.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"filled\" | \"outline\"",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultSelectedValues",
              "type": "string[]",
              "required": false,
              "description": "Sets selected values for an uncontrolled component."
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A TagGroup can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "dismissible",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "onDismiss",
              "type": "TagDismissHandler<string>",
              "required": false,
              "description": "Callback for when a tag is dismissed"
            },
            {
              "name": "onTagSelect",
              "type": "EventHandler<TagSelectData<string>>",
              "required": false,
              "description": "Callback for when a tag is selected"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectedValues",
              "type": "string[]",
              "required": false,
              "description": "Values of the selected tags"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"extra-small\"",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-tag-taggroup--default",
      "htmlPath": "components/TagGroup/",
      "markdownPath": "components/TagGroup.md"
    },
    {
      "id": "teaching-popover",
      "title": "Teaching popover",
      "summary": "The Teaching popover component is a versatile tool to help users learn about a new feature.",
      "kind": "components",
      "route": "components/TeachingPopover",
      "label": "Teaching popover",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=170592-76650"
        }
      ],
      "aliases": [
        "/teaching-popover/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/TeachingPopover.md",
      "examples": [
        {
          "id": "components-teachingpopover--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/TeachingPopover.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-teachingpopover--default.tsx",
          "sha256": "362f1fbe24bb09393c569a5f1046a26c677db56b06c7b70c25202e1393dde0de",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-teachingpopover--appearance-brand",
          "exportName": "AppearanceBrand",
          "name": "Appearance Brand",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverAppearanceBrand.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-teachingpopover--appearance-brand.tsx",
          "sha256": "9995fdd82d815620c496b08e3715386e08e91b90b1ce526145b7b0f30e994a79",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-teachingpopover--carousel",
          "exportName": "Carousel",
          "name": "Carousel",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarousel.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-teachingpopover--carousel.tsx",
          "sha256": "c04bf8a3655aeb651d8081f279019645433dda6fdc48c26b53f4a8fc0116b9e4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-teachingpopover--carousel-brand",
          "exportName": "CarouselBrand",
          "name": "Carousel Brand",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselAppearanceBrand.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-teachingpopover--carousel-brand.tsx",
          "sha256": "f5dfa391176c6c0434eb5c7cda5a4ccda3220f5c91cc230f1b06497f2bc231d9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-teachingpopover--carousel-text",
          "exportName": "CarouselText",
          "name": "Carousel Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-teaching-popover/stories/src/TeachingPopover/TeachingPopoverCarouselText.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-teachingpopover--carousel-text.tsx",
          "sha256": "ac81d96653fbcf80dfc75e6ab458b8832101467986e3e139dcdf603542ad009a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "TeachingPopover",
          "kind": "component",
          "propsType": "TeachingPopoverProps",
          "description": "An extension class of Popover which defaults to withArrow and FocusTrap enabled.",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"inverted\"",
              "required": false,
              "description": "A popover can appear styled with brand or inverted.\nWhen not specified, the default style is used."
            },
            {
              "name": "children",
              "type": "JSXElement | [JSXElement, JSXElement]",
              "required": true,
              "description": "Can contain two children including `PopoverTrigger` and `PopoverSurface`.\nAlternatively can only contain `PopoverSurface` if using a custom `target`."
            },
            {
              "name": "closeOnIframeFocus",
              "type": "boolean",
              "required": false,
              "description": "Flag to close the Popover when an iframe outside a PopoverSurface is focused",
              "defaultValue": "true"
            },
            {
              "name": "closeOnScroll",
              "type": "boolean",
              "required": false,
              "description": "Close when scroll outside of it",
              "defaultValue": "false"
            },
            {
              "name": "defaultOpen",
              "type": "boolean",
              "required": false,
              "description": "Used to set the initial open state of the Popover in uncontrolled mode",
              "defaultValue": "false"
            },
            {
              "name": "inertTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert,\nmaking navigation leak from the trapped area back to the browser toolbar and vice-versa.",
              "defaultValue": "false"
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": "Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order",
              "defaultValue": "false"
            },
            {
              "name": "legacyTrapFocus",
              "type": "boolean",
              "required": false,
              "description": "Must be used with the `trapFocus` prop\nEnables older Fluent UI focus trap behavior where the user\ncannot tab into the window outside of the document. This is now\nnon-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\nwhere the focus trap involves setting outside elements inert.",
              "deprecated": "this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "mouseLeaveDelay",
              "type": "number",
              "required": false,
              "description": "Sets the delay for closing popover on mouse leave"
            },
            {
              "name": "onOpenChange",
              "type": "((e: OpenPopoverEvents, data: OnOpenChangeData) => void)",
              "required": false,
              "description": "Call back when the component requests to change value\nThe `open` value is used as a hint when directly controlling the component"
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Controls the opening of the Popover",
              "defaultValue": "false"
            },
            {
              "name": "openOnContext",
              "type": "boolean",
              "required": false,
              "description": "Flag to open the Popover as a context menu. Disables all other interactions",
              "defaultValue": "false"
            },
            {
              "name": "openOnHover",
              "type": "boolean",
              "required": false,
              "description": "Flag to open the Popover by hovering the trigger",
              "defaultValue": "false"
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configures the position of the Popover.\nExplore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Determines popover padding and arrow size",
              "defaultValue": "medium"
            },
            {
              "name": "surfaceMotion",
              "type": "PresenceMotionSlotProps | null",
              "required": false,
              "description": "Slot for the surface motion animation.\nFor more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs)."
            },
            {
              "name": "trapFocus",
              "type": "boolean",
              "required": false,
              "description": "Should trap focus",
              "defaultValue": "false"
            },
            {
              "name": "unstable_disableAutoFocus",
              "type": "boolean",
              "required": false,
              "description": "By default Popover focuses the first focusable element in PopoverSurface on open.\nSpecify `disableAutoFocus` to prevent this behavior.",
              "defaultValue": "false"
            },
            {
              "name": "withArrow",
              "type": "boolean",
              "required": false,
              "description": "Display an arrow pointing to the target.",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "TeachingPopoverBody",
          "kind": "component",
          "propsType": "TeachingPopoverBodyProps",
          "description": "Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`\nhooks.\n\nTeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "media",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Optional Media Content."
            },
            {
              "name": "mediaLength",
              "type": "\"medium\" | \"short\" | \"tall\"",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverCarousel",
          "kind": "component",
          "propsType": "TeachingPopoverCarouselProps",
          "description": "Define a styled TeachingPopoverCarousel, using the `useTeachingPopoverCarousel_unstable` and `useTeachingPopoverCarouselStyles_unstable`\nhooks.\n\nTeachingPopoverCarousel injects context providers that are required for TeachingPopoverCarouselCard display and navigation functionality",
          "props": [
            {
              "name": "announcement",
              "type": "((newValue: string) => string)",
              "required": false,
              "description": "Localizes the string used to announce carousel page changes to screen reader users\nDefaults to: undefined"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultValue",
              "type": "string | number | readonly string[]",
              "required": false,
              "description": "The initial page to display in uncontrolled mode."
            },
            {
              "name": "onFinish",
              "type": "EventHandler<CarouselValueChangeData>",
              "required": false,
              "description": "Callback to notify when the final button step of a carousel has been activated."
            },
            {
              "name": "onValueChange",
              "type": "EventHandler<CarouselValueChangeData>",
              "required": false,
              "description": "Callback to notify a page change."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "The value of the currently active page."
            }
          ]
        },
        {
          "name": "TeachingPopoverCarouselCard",
          "kind": "component",
          "propsType": "TeachingPopoverCarouselCardProps",
          "description": "Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\nhooks.\n\nTeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string",
              "required": true,
              "description": "The value used to identify a page,\nit should be unique and is necessary for pagination"
            }
          ]
        },
        {
          "name": "TeachingPopoverCarouselFooter",
          "kind": "component",
          "propsType": "TeachingPopoverCarouselFooterProps",
          "description": "Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\nhooks.\n\nTeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "finalStepText",
              "type": "string",
              "required": true,
              "description": "The text to be displayed on the final step of carousel"
            },
            {
              "name": "initialStepText",
              "type": "string",
              "required": true,
              "description": "The text to be displayed on the initial step of carousel"
            },
            {
              "name": "layout",
              "type": "\"offset\" | \"centered\"",
              "required": false,
              "description": "Controls whether buttons will be centered (balanced) or right aligned\nDefaults to 'centered'."
            },
            {
              "name": "next",
              "type": "NonNullable<WithSlotShorthandValue<(Omit<TeachingPopoverCarouselFooterButtonSlots, \"root\"> & Omit<{ as?: \"button\" | undefined; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & Omit<ButtonSlots, \"root\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; } & { navType: \"next\" | \"prev\"; altText: ReactNode; }) | (Omit<TeachingPopoverCarouselFooterButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & Omit<ButtonSlots, \"root\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; } & { navType: \"next\" | \"prev\"; altText: ReactNode; })> | null>",
              "required": true,
              "description": "The next button slot."
            },
            {
              "name": "previous",
              "type": "WithSlotShorthandValue<(Omit<TeachingPopoverCarouselFooterButtonSlots, \"root\"> & Omit<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & Omit<ButtonSlots, \"root\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; } & { navType: \"next\" | \"prev\"; altText: ReactNode; }) | (Omit<TeachingPopoverCarouselFooterButtonSlots, \"root\"> & Omit<{ as: \"a\"; } & Omit<Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, \"ref\"> & { ref?: ((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined; }, \"children\"> & { children?: any; } & Pick<ARIAButtonProps<ARIAButtonType>, \"disabled\" | \"disabledFocusable\">, \"ref\"> & Omit<ButtonSlots, \"root\"> & { appearance?: \"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\" | undefined; disabledFocusable?: boolean | undefined; disabled?: boolean | undefined; iconPosition?: \"before\" | \"after\" | undefined; shape?: \"circular\" | \"rounded\" | \"square\" | undefined; size?: ButtonSize | undefined; } & { navType: \"next\" | \"prev\"; altText: ReactNode; })> | null | undefined",
              "required": false,
              "description": "The previous button slot."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverCarouselNav",
          "kind": "component",
          "propsType": "TeachingPopoverCarouselNavProps",
          "description": "Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`\nhooks.\n\nTeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "NavButtonRenderFunction",
              "required": true,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverCarouselNavButton",
          "kind": "component",
          "propsType": "TeachingPopoverCarouselNavButtonProps",
          "description": "TeachingPopoverCarouselNavButton is a button to jump to a single page within TeachingPopoverCarousel\n\nIt's value is injected via context and must be wrapped with a ValueIdContextProvider (automatically handled via TeachingPopoverCarouselNav)",
          "props": [
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverCarouselPageCount",
          "kind": "component",
          "propsType": "TeachingPopoverCarouselPageCountProps",
          "description": "TeachingPopoverCarouselPageCount is a simple interface for rendering based on current and total page count\n\nThe child render function will provide both current and total page numbers for customization.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "TeachingPopoverCarouselPageCountRenderFunction",
              "required": true,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverFooter",
          "kind": "component",
          "propsType": "TeachingPopoverFooterProps",
          "description": "Define a styled TeachingPopoverFooter, using the `useTeachingPopoverFooter_unstable` and `useTeachingPopoverFooterStyles_unstable`\nhooks.\n\nTeachingPopoverFooter will provide both a secondary and primary button for the TeachingPopover,\nand handle Popover functionality such as closing the popup.\n\nUsers must provide the localized text for each button within the footer via slots.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "footerLayout",
              "type": "\"horizontal\" | \"vertical\"",
              "required": false,
              "description": "Enables stylization to a horizontal or vertical stack of button layouts.\nDefaults to horizontal"
            },
            {
              "name": "primary",
              "type": "NonNullable<WithSlotShorthandValue<ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>> | null>",
              "required": true,
              "description": "The primary button slot."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "secondary",
              "type": "WithSlotShorthandValue<ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>> | null",
              "required": false,
              "description": "The secondary button slot."
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverHeader",
          "kind": "component",
          "propsType": "TeachingPopoverHeaderProps",
          "description": "Define a styled TeachingPopoverHeader, using the `useTeachingPopoverHeader_unstable` and `useTeachingPopoverHeaderStyles_unstable`\nhooks.\n\nTeachingPopoverHeader is an info subtitle located at the top of the popover, it provides a dismiss button by default (can be nulled)\nand an info-tip icon that can be overridden or removed, subtitle displayed will be the children elements of TeachingPopoverHeader.",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "dismissButton",
              "type": "WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "The component to be used as close button in heading"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Initial icon slot rendered before children content in heading."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverSurface",
          "kind": "component",
          "propsType": "TeachingPopoverSurfaceProps",
          "description": "TeachingPopoverSurface component renders react children in a positioned box\n\nTeachingPopoverSurface is a direct extension of PopoverSurface, with it's own styling context hooks available.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverTitle",
          "kind": "component",
          "propsType": "TeachingPopoverTitleProps",
          "description": "Define a styled TeachingPopoverTitle, using the `useTeachingPopoverTitle_unstable` and `useTeachingPopoverTitleStyles_unstable`\nhooks.\n\nTeachingPopoverTitle is similar to TeachingPopoverHeader, but it is intended to be placed within a TeachingPopoverBody\nTeachingPopoverTitle can also optionally render a dismiss button, however this should only be enabled when there is no TeachingPopoverHeader/dismiss.",
          "props": [
            {
              "name": "as",
              "type": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "dismissButton",
              "type": "WithSlotShorthandValue<{ as?: \"button\"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, \"ref\"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "An alternate close button path if not placed in the TeachingPopoverHeader"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TeachingPopoverTrigger",
          "kind": "component",
          "propsType": "TeachingPopoverTriggerProps",
          "description": "Direct extension of PopoverTrigger - Wraps a trigger element as an only child and adds the necessary event handling to open a teaching bubble.",
          "props": [
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>> | ((props: PopoverTriggerChildProps<ARIAButtonType, {}>) => ReactElement<any, string | JSXElementConstructor<any>> | null) | null",
              "required": false,
              "description": ""
            },
            {
              "name": "disableButtonEnhancement",
              "type": "boolean",
              "required": false,
              "description": "Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-teachingpopover--default",
      "htmlPath": "components/TeachingPopover/",
      "markdownPath": "components/TeachingPopover.md"
    },
    {
      "id": "text",
      "title": "Text",
      "summary": "Typography primitive for consistent, standardized text styling.",
      "kind": "components",
      "route": "components/Text",
      "label": "Text",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/text/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Text.md",
      "examples": [
        {
          "id": "components-text--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Text.stories.tsx",
          "description": "A typical mix of `Text` usages in one piece of content: a heading, a body\nparagraph, a bold callout, an inline code reference, and small metadata —\neach combining a `preset` (size/weight) with a `foreground` emphasis level\nappropriate to its role. Explicit props like `weight=\"bold\"` still override\n`preset`'s defaults, as shown on the callout line. Nested text inherits every\nunset typography property: the date changes only foreground, while inline\ncode changes only font family and foreground.",
          "sourcePath": "source/examples/components-text--default.tsx",
          "sha256": "a0e30d5b8b50ccf4d376e3c01f24234baef87c7eef148d68586f512657ba79a7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--alignment",
          "exportName": "Alignment",
          "name": "Alignment",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextAlignment.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--alignment.tsx",
          "sha256": "84f7b81ae0e30bceb101775cabea57055723c6057e08f49da751c1bbad12a78e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--font",
          "exportName": "Font",
          "name": "Font",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextFont.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--font.tsx",
          "sha256": "3e484ef19e81e1aadfc824b32b625d3d906a1d3bfd968e4cdccb0105b39e43a7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--foreground",
          "exportName": "Foreground",
          "name": "Foreground",
          "origin": "local",
          "originalSource": "src/stories/components/TextDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--foreground.tsx",
          "sha256": "6e3a174e1591a0032bea4fd994917ebab579571dabb492ac2edb49632778e86c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--italic",
          "exportName": "Italic",
          "name": "Italic",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextItalic.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--italic.tsx",
          "sha256": "d7b30f18192c89b457671e53216b86222501b877e56ce081759acb12a2016580",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--preset-compatibility",
          "exportName": "PresetCompatibility",
          "name": "Preset Compatibility",
          "origin": "local",
          "originalSource": "src/stories/components/TextDev.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--preset-compatibility.tsx",
          "sha256": "ac7b9900d8ee940f9fb34a1da6d911820c446843acc75a4860c25847c5d6aab4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--presets",
          "exportName": "Presets",
          "name": "Presets",
          "origin": "local",
          "originalSource": "src/stories/components/Text.stories.tsx",
          "description": "`preset` selects one of CoreAI's named `size`/`weight` combinations instead\nof picking `size`/`weight` (or a separate Fluent typography component)\ndirectly — use the name that matches the content's semantic role (a\n`heading*` for titles, `body`/`bodyS`/`bodyXS` for copy at decreasing\nemphasis).",
          "sourcePath": "source/examples/components-text--presets.tsx",
          "sha256": "0e15f2981a4566a0d386c93b4336e2cf6171de33f3f135471a3a2f3088805487",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextSize.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--size.tsx",
          "sha256": "e9e0512d0d8bec550ff2cddde944af3a7bd7d9e9cdee9da8fd24192bbd3c7447",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--strike-through",
          "exportName": "StrikeThrough",
          "name": "Strike Through",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextStrikeThrough.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--strike-through.tsx",
          "sha256": "8e26aa84746c8e247bd05c284677e5562a0e72fb924f83c08df6244b9dac4a61",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--truncate",
          "exportName": "Truncate",
          "name": "Truncate",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextTruncate.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--truncate.tsx",
          "sha256": "dfb490a056310d1f8c5be57e629d4a1eae67df7e8e3078fd07a885fe0d3d1579",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--underline",
          "exportName": "Underline",
          "name": "Underline",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextUnderline.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--underline.tsx",
          "sha256": "e5b1914469bd89822c72ad74567871a0f0da12b44d006350ad3a1c1fe17b6b6b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-text--weight",
          "exportName": "Weight",
          "name": "Weight",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-text/stories/src/Text/TextWeight.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-text--weight.tsx",
          "sha256": "1815d5b163eadfc4927998424eb2c391d386a98c54e02eea52614b403488e493",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Text",
          "kind": "component",
          "propsType": "TextProps",
          "description": "A text component that extends Fluent UI's Text with a `foreground` prop for\nchoosing one of the four neutral foreground emphasis levels, and a\n`preset` prop for choosing one of CoreAI's named `size`/`weight` combos.\nUnset typography properties inherit from the component's CSS parent.",
          "props": [
            {
              "name": "align",
              "type": "\"center\" | \"start\" | \"end\" | \"justify\"",
              "required": false,
              "description": "Aligns text based on the parent container.",
              "defaultValue": "start"
            },
            {
              "name": "as",
              "type": "\"b\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"i\" | \"p\" | \"pre\" | \"span\" | \"strong\"",
              "required": false,
              "description": ""
            },
            {
              "name": "block",
              "type": "boolean",
              "required": false,
              "description": "Applies a block display for the content.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "font",
              "type": "\"base\" | \"numeric\" | \"monospace\"",
              "required": false,
              "description": "Applies the font family to the content.",
              "defaultValue": "base"
            },
            {
              "name": "foreground",
              "type": "1 | \"disabled\" | 2 | 3 | 4",
              "required": false,
              "description": "Selects a neutral foreground emphasis level, mapping to the\n`colorNeutralForeground1`–`colorNeutralForeground4` tokens. `1` is the\nhighest-emphasis (primary) color; `4` is the lowest-emphasis color."
            },
            {
              "name": "italic",
              "type": "boolean",
              "required": false,
              "description": "Applies the italic font style to the content.",
              "defaultValue": "false"
            },
            {
              "name": "preset",
              "type": "\"body\" | \"heading1\" | \"heading2\" | \"heading3\" | \"heading4\" | \"heading5\" | \"bodyStrong\" | \"heading6\" | \"bodySStrong\" | \"bodyS\" | \"bodyXSStrong\" | \"bodyXS\"",
              "required": false,
              "description": "Selects one of CoreAI's named `size`/`weight` combos (`heading1`…`bodyXS`).\nSupplies defaults for `size`/`weight` — pass either prop explicitly to override."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000",
              "required": false,
              "description": "Applies font size and line height based on the theme typography tokens.",
              "defaultValue": "300"
            },
            {
              "name": "strikethrough",
              "type": "boolean",
              "required": false,
              "description": "Applies the strikethrough text decoration to the content.",
              "defaultValue": "false"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncate",
              "type": "boolean",
              "required": false,
              "description": "Truncate overflowing text for block displays.",
              "defaultValue": "false"
            },
            {
              "name": "underline",
              "type": "boolean",
              "required": false,
              "description": "Applies the underline text decoration to the content.",
              "defaultValue": "false"
            },
            {
              "name": "uppercase",
              "type": "boolean",
              "required": false,
              "description": "When `true`, transforms the text to uppercase (`text-transform: uppercase`)."
            },
            {
              "name": "weight",
              "type": "\"bold\" | \"medium\" | \"regular\" | \"semibold\"",
              "required": false,
              "description": "Applies font weight to the content.",
              "defaultValue": "regular"
            },
            {
              "name": "wrap",
              "type": "boolean",
              "required": false,
              "description": "Wraps the text content on white spaces.",
              "defaultValue": "true"
            }
          ]
        },
        {
          "name": "Display",
          "kind": "component",
          "description": "Text preset component for the Display typography variant",
          "props": [
            {
              "name": "align",
              "type": "\"center\" | \"start\" | \"end\" | \"justify\"",
              "required": false,
              "description": "Aligns text based on the parent container.",
              "defaultValue": "start"
            },
            {
              "name": "as",
              "type": "\"b\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"i\" | \"p\" | \"pre\" | \"span\" | \"strong\"",
              "required": false,
              "description": ""
            },
            {
              "name": "block",
              "type": "boolean",
              "required": false,
              "description": "Applies a block display for the content.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "italic",
              "type": "boolean",
              "required": false,
              "description": "Applies the italic font style to the content.",
              "defaultValue": "false"
            },
            {
              "name": "strikethrough",
              "type": "boolean",
              "required": false,
              "description": "Applies the strikethrough text decoration to the content.",
              "defaultValue": "false"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "truncate",
              "type": "boolean",
              "required": false,
              "description": "Truncate overflowing text for block displays.",
              "defaultValue": "false"
            },
            {
              "name": "underline",
              "type": "boolean",
              "required": false,
              "description": "Applies the underline text decoration to the content.",
              "defaultValue": "false"
            },
            {
              "name": "wrap",
              "type": "boolean",
              "required": false,
              "description": "Wraps the text content on white spaces.",
              "defaultValue": "true"
            }
          ]
        }
      ],
      "defaultExampleId": "components-text--default",
      "htmlPath": "components/Text/",
      "markdownPath": "components/Text.md"
    },
    {
      "id": "textarea",
      "title": "Textarea",
      "summary": "A textarea allows people to enter long, free-form text data, like a comment. If you only need someone to enter one line of information, try an input instead.",
      "kind": "components",
      "route": "components/Textarea",
      "label": "Textarea",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=62039-177849"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/textarea/usage"
        }
      ],
      "aliases": [
        "/textarea/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Textarea.md",
      "examples": [
        {
          "id": "components-textarea--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Textarea.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--default.tsx",
          "sha256": "780612f8b1117616cc7248f51041354d53fc5f0f649c0ef12ca4b544bcc034ab",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.stories.tsx",
          "description": "Textarea can have different appearances.\nThe colors adjacent to the Textarea should have a sufficient contrast. Particularly, the color of input with\n      filled darker and lighter styles needs to provide a contrast ratio greater than 3 to 1 against the immediate\n      surrounding color to pass accessibility requirement.",
          "sourcePath": "source/examples/components-textarea--appearance.tsx",
          "sha256": "a648d4ae5b1a1cc29253eaa7893fbfed8af1cb18d3c39a30288cbd09d6151dd4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaControlled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--controlled.tsx",
          "sha256": "1365284f319c916473588d1ecc09c124315702ec629cef1fd84d5a928d6a3fc4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaDisabled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--disabled.tsx",
          "sha256": "f521482158b1d916fdf68a4ef82bc68030c3efbb4afbf5bfbc0cc2b4f39a95a7",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--placeholder",
          "exportName": "Placeholder",
          "name": "Placeholder",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaPlaceholder.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--placeholder.tsx",
          "sha256": "634af6a5ed078fbca1a38607af83f200eadc632490f5a969f668bba4c36a85ba",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--resize",
          "exportName": "Resize",
          "name": "Resize",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaResize.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--resize.tsx",
          "sha256": "73605b617bd6a5958a3fcab50cfc89e750fcea74631722579cb9f5b3e4f43c79",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaSize.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--size.tsx",
          "sha256": "d58514d34f6ed30c639e97955c2abeb31e7aa99183fcac1763791aaa869588bd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-textarea--uncontrolled",
          "exportName": "Uncontrolled",
          "name": "Uncontrolled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-textarea/stories/src/Textarea/TextareaUncontrolled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-textarea--uncontrolled.tsx",
          "sha256": "1cde2705b8ff8f9f4711c0e76f75de1e88b87c16cee7f4f9a74c3b29738dfce0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Textarea",
          "kind": "component",
          "propsType": "TextareaProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"filled-darker\" | \"filled-lighter\" | \"filled-darker-shadow\" | \"filled-lighter-shadow\"",
              "required": false,
              "description": "Styling the Textarea should use.",
              "defaultValue": "'filled-darker'"
            },
            {
              "name": "as",
              "type": "\"textarea\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultValue",
              "type": "string",
              "required": false,
              "description": "The default value of the Textarea."
            },
            {
              "name": "onChange",
              "type": "((ev: ChangeEvent<HTMLTextAreaElement>, data: TextareaOnChangeData) => void)",
              "required": false,
              "description": "Callback for when the user changes the value."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLTextAreaElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "resize",
              "type": "\"none\" | \"both\" | \"horizontal\" | \"vertical\"",
              "required": false,
              "description": "Which direction the Textarea is allowed to be resized.",
              "defaultValue": "none"
            },
            {
              "name": "root",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Wrapper element used for displaying the borders for Textarea. This wrapper is needed due to the focus\nindicator border animation. For more information, see Spec.md\n\nThe root only receives `className` and `style`. All other props are applied to the `textarea` slot."
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Size of the Textarea.",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "textarea",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"textarea\"; } & Omit<Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, \"ref\"> & { ref?: ((instance: HTMLTextAreaElement | null) => void) | RefObject<HTMLTextAreaElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "The `<textarea>` element. This is the primary slot, all native props and ref are applied to this slot."
            },
            {
              "name": "value",
              "type": "string",
              "required": false,
              "description": "The value of the Textarea."
            }
          ]
        }
      ],
      "defaultExampleId": "components-textarea--default",
      "htmlPath": "components/Textarea/",
      "markdownPath": "components/Textarea.md"
    },
    {
      "id": "toast",
      "title": "Toast",
      "summary": "A toast displays temporary content that can be dismissed by user action or an application timeout.",
      "kind": "components",
      "route": "components/Toast",
      "label": "Toast",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=49507-161985"
        }
      ],
      "aliases": [
        "/toast/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Toast.md",
      "examples": [
        {
          "id": "components-toast--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Toast.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toast--default.tsx",
          "sha256": "304195f5398f4da3249823e93db2c75318842691eb44b1586cd258ae742572ba",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--custom-timeout",
          "exportName": "CustomTimeout",
          "name": "Custom Timeout",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/CustomTimeout.stories.tsx",
          "description": "The timeout of toasts can be customized in milliseconds. Using a negative timeout value results in the toast\nnever being auto-dismissed.",
          "sourcePath": "source/examples/components-toast--custom-timeout.tsx",
          "sha256": "8062e8ffff7ddbb32f152d71f0b0a9f5c4e97bfad06b53ecd3e729f36a80fb70",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--default-toast-options",
          "exportName": "DefaultToastOptions",
          "name": "Default Toast Options",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DefaultToastOptions.stories.tsx",
          "description": "Default options for all toasts can be configured on the `Toaster`.\nThese options are only defaults and can be overriden using `dispatchToast",
          "sourcePath": "source/examples/components-toast--default-toast-options.tsx",
          "sha256": "ddd7c9b89da96071ea2338b32c44928b1309ef62b0082f376279e1afc27de9d5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--dismiss-all",
          "exportName": "DismissAll",
          "name": "Dismiss All",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DismissAll.stories.tsx",
          "description": "The `dismissAllToasts imperative API will dismiss all rendered Toasts.",
          "sourcePath": "source/examples/components-toast--dismiss-all.tsx",
          "sha256": "ac9951b8af88c2cbcf58d662278acbc0d38d73c781ab734d6304e758d20c40ed",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--dismiss-toast",
          "exportName": "DismissToast",
          "name": "Dismiss Toast",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DismissToast.stories.tsx",
          "description": "Toasts can be dismissed imperatively using the `dismissToast` API. In order to imperatively dismiss a \nToast, it's necessary to dispatch it with a user provided id. You can use the id to dismiss the toast.\n**Don't** use this API to dismiss toats when clicking on an action inside the toast, use the `ToastTrigger`\ninstead.",
          "sourcePath": "source/examples/components-toast--dismiss-toast.tsx",
          "sha256": "4bac260b859bbd3b4ca7c56423d92ec138138da2cc1b7e595a43b95bed3e4ffd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--dismiss-toast-with-action",
          "exportName": "DismissToastWithAction",
          "name": "Dismiss Toast With Action",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/DismissToastWithAction.stories.tsx",
          "description": "By wrapping a button or link with a  `ToastTrigger`, it's possible to make that actionable\nelement dismiss the toast with a click.",
          "sourcePath": "source/examples/components-toast--dismiss-toast-with-action.tsx",
          "sha256": "669505ada525675a6e63a6c7b06008150853011017e1b2830c96ea1081816f9b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--focus-keyboard-shortcut",
          "exportName": "FocusKeyboardShortcut",
          "name": "Focus Keyboard Shortcut",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/FocusKeyboardShortcut.stories.tsx",
          "description": "Developers can be define a shortcut to focus on the most recent visible toast . This example\nconfigures the shortcut to be `CTRL+M`. Once a toast is focused, all toasts belonging to that toaster\nare paused and will not timeout.",
          "sourcePath": "source/examples/components-toast--focus-keyboard-shortcut.tsx",
          "sha256": "2588f162b8e3aa8cc4045c2c1df484a8c2e19d62c6277c4810331969727463aa",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--inline",
          "exportName": "Inline",
          "name": "Inline",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Inline.stories.tsx",
          "description": "Setting the `inline` prop on a toaster will render toasts in DOM order, positioned relative to the closest\npositioned ancestor. The simplest way to achieve this is to render the toaster inside an element\nwith `position: relative`.",
          "sourcePath": "source/examples/components-toast--inline.tsx",
          "sha256": "28a5b59fa2cc99f7998a767037dcb4e996ccfe46f426a2c236cdc3e03b6d6390",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--intent",
          "exportName": "Intent",
          "name": "Intent",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Intent.stories.tsx",
          "description": "The toast comes by default with 4 different intents:\n- success\n- info\n- warning\n- error\n\nEach intent affects the default icon in the title and its colour. These icon slots can be overriden\nto render other content such as progress spinners or avatars.\n\n>intent determines the urgency of the screen reader aria-live narration.\nTo retain default intent styles, use the`politeness` option to override the urgency or aria-live narration.",
          "sourcePath": "source/examples/components-toast--intent.tsx",
          "sha256": "3c998d287d3177ec05e4be65271403f415d939f14993d0906300fe6d0ed87d14",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--inverted-appearance",
          "exportName": "InvertedAppearance",
          "name": "Inverted Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/InvertedAppearance.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toast--inverted-appearance.tsx",
          "sha256": "57e64d46bdff2a46d977a3ce3346691957b4ed5f973ff1b75ddb940e47064ddb",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--multiple-toasters",
          "exportName": "MultipleToasters",
          "name": "Multiple Toasters",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/MultipleToasters.stories.tsx",
          "description": "> ⚠️ This use case is **not recommended**\n\nToasters support a `toasterId` prop to support multiple Toasters in an app.",
          "sourcePath": "source/examples/components-toast--multiple-toasters.tsx",
          "sha256": "011443adb922ed303a030562c32bd180fefac3780777a6d9f01dddb89919440c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--offset",
          "exportName": "Offset",
          "name": "Offset",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/Offset.stories.tsx",
          "description": "You can declare a static offset for toasts relative to the viewport. This offset can only be set on the\n`Toaster` component, because it wouldn't make sense to have separate toast offsets for a toasts in a\nsingle position.",
          "sourcePath": "source/examples/components-toast--offset.tsx",
          "sha256": "e9336973f234bf118320b0998f6c21beeeb99e107e4ef25aca0925ab068cf9fc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--pause-and-play",
          "exportName": "PauseAndPlay",
          "name": "Pause And Play",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/PauseAndPlay.stories.tsx",
          "description": "Toasts can be paused and played imperatively based on the user provided id.\n\n> ⚠️ Toasts paused this way can only be dismissed once the **app** plays it again. Make sure\nthat your app will will play a toast after it has been paused.",
          "sourcePath": "source/examples/components-toast--pause-and-play.tsx",
          "sha256": "6a8303adfff6e9a94678b63c4959a2e3cd0ba6635b2c18fcfb2c3554cd88664c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toast--pause-on-hover",
          "exportName": "PauseOnHover",
          "name": "Pause On Hover",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/PauseOnHover.stories.tsx",
          "description": "The `pauseOnHover` option will enable users to pause the timeout of a toast while the mouse cursor\nis inside the toast. This option can also be set on the Toaster as a default.",
          "sourcePath": "source/examples/components-toast--pause-on-hover.tsx",
          "sha256": "caf9ac0a5aceb3b60b70e9c8cfab2e369699176469e9cffd933afcc3ec000ee4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--pause-on-window-blur",
          "exportName": "PauseOnWindowBlur",
          "name": "Pause On Window Blur",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/PauseOnWindowBlur.stories.tsx",
          "description": "Use `pauseOnWindowBlur` option to pause the dismiss timeout of a Toast when the user moves focus\nto another window. This option can also be set on the Toaster as a default.",
          "sourcePath": "source/examples/components-toast--pause-on-window-blur.tsx",
          "sha256": "9b8a79229346d7fead0289ee200218e8a9c0ac14bd4eabc2162d0a1f98ff4cb6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--progress-toast",
          "exportName": "ProgressToast",
          "name": "Progress Toast",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ProgressToast.stories.tsx",
          "description": "In order to avoid excessive toast updates and optimize performance, we recommend encapsulating\nprogress bars with any state or remove data sources. That way the progress bar can tick independently\nand trigger the toast dismiss when it finishes. You can pass a callback to your toast content\nto dismiss to the toast based on any side effects.",
          "sourcePath": "source/examples/components-toast--progress-toast.tsx",
          "sha256": "ea5accf49143df04f0f13527ab19fa209534d6738a9057f9c8fcfeb27c7d8f63",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--toast-lifecycle",
          "exportName": "ToastLifecycle",
          "name": "Toast Lifecycle",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.stories.tsx",
          "description": "Since toasts are imperative, the way they are mapped to React is internal, and not reflective of its usage.\nThe Toast API exposes its own lifecycle that users can hook into, and is already used in other\ndocumentation examples. The lifecycle stages are:\n\n- queued - The toast is queued until it can be made visible\n- visible - The toast is mounted and rendered, this is instance if the toast limit is not reached\n- dismissed - The toast is visually invisible but still mounted\n- unounted - The toast has been completely unmounted and no longer exists\n\nUse the `onStatusChange` option when dispatching a toast to listen to lifecycle changes.",
          "sourcePath": "source/examples/components-toast--toast-lifecycle.tsx",
          "sha256": "7339b1289e8ff585d0df90fe9acf23e9b741db9b9d08fd43eeb0697808b80171",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--toast-positions",
          "exportName": "ToastPositions",
          "name": "Toast Positions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ToastPositions.stories.tsx",
          "description": "Toasts can be dispatched to all four corners of a page. We do not recommend to use more than one\nposition for toasts in an application because that could be disorienting for users. Pick\none desired position and configure it in the `Toaster`.",
          "sourcePath": "source/examples/components-toast--toast-positions.tsx",
          "sha256": "6b1840dc1210ace9329e12321ca7980c8e69728ec2d359f8fc5b3e5059d85187",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--toaster-limit",
          "exportName": "ToasterLimit",
          "name": "Toaster Limit",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/ToasterLimit.stories.tsx",
          "description": "Use the `limit` prop on the `Toaster` to define the maximum number of toasts that can be rendered\nat any one time. Any extra toasts will be queued and rendered when a toast has been dismissed.",
          "sourcePath": "source/examples/components-toast--toaster-limit.tsx",
          "sha256": "c6436338f2765b11b721fe80d57d68b8c2c8c6833b77fbc2ec2ce154867ca61d",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-toast--update-toast",
          "exportName": "UpdateToast",
          "name": "Update Toast",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toast/stories/src/Toast/UpdateToast.stories.tsx",
          "description": "Use the `updateToast` imperative API to make changes to a Toast that is already visible. To do this\nyou **must** provide an id when dispatching the toast. Almost all options of a Toast can be updated.",
          "sourcePath": "source/examples/components-toast--update-toast.tsx",
          "sha256": "14b8f7e5e204435d3c525517299fc9ca0c020663b1c8118e5f61fb9ae1f81644",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Toast",
          "kind": "component",
          "propsType": "ToastProps",
          "description": "Toast component",
          "props": [
            {
              "name": "appearance",
              "type": "\"brand\" | \"inverted\"",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToastBody",
          "kind": "component",
          "propsType": "ToastBodyProps",
          "description": "ToastBody component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "subtitle",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToastFooter",
          "kind": "component",
          "propsType": "ToastFooterProps",
          "description": "ToastFooter component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToastTitle",
          "kind": "component",
          "propsType": "ToastTitleProps",
          "description": "ToastTitle component",
          "props": [
            {
              "name": "action",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "media",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "Toaster",
          "kind": "component",
          "propsType": "ToasterProps",
          "description": "Toaster component - renders a collection of toasts dispatched imperatively",
          "props": [
            {
              "name": "announce",
              "type": "ToastAnnounce",
              "required": false,
              "description": "User override API for aria-live narration for toasts"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "inline",
              "type": "boolean",
              "required": false,
              "description": ""
            },
            {
              "name": "limit",
              "type": "number",
              "required": false,
              "description": ""
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "offset",
              "type": "ToastOffset",
              "required": false,
              "description": ""
            },
            {
              "name": "pauseOnHover",
              "type": "boolean",
              "required": false,
              "description": "Toast timeout pauses while user cursor is on the toast",
              "defaultValue": "false"
            },
            {
              "name": "pauseOnWindowBlur",
              "type": "boolean",
              "required": false,
              "description": "Toast timeout pauses while focus is on another window",
              "defaultValue": "false"
            },
            {
              "name": "position",
              "type": "\"top\" | \"bottom\" | \"top-end\" | \"top-start\" | \"bottom-end\" | \"bottom-start\"",
              "required": false,
              "description": "The position the toast should render to"
            },
            {
              "name": "priority",
              "type": "number",
              "required": false,
              "description": "Higher priority toasts will be rendered before lower priority toasts"
            },
            {
              "name": "shortcuts",
              "type": "ToasterShortcuts",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "timeout",
              "type": "number",
              "required": false,
              "description": "Auto dismiss timeout in milliseconds",
              "defaultValue": "3000"
            },
            {
              "name": "toasterId",
              "type": "string",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-toast--default",
      "htmlPath": "components/Toast/",
      "markdownPath": "components/Toast.md"
    },
    {
      "id": "toggle-button",
      "title": "ToggleButton",
      "summary": "Button that can be toggled between checked and unchecked states.",
      "kind": "components",
      "route": "components/ToggleButton",
      "label": "ToggleButton",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/toggle-button/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/ToggleButton.md",
      "examples": [
        {
          "id": "components-button-togglebutton--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/ToggleButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-button-togglebutton--default.tsx",
          "sha256": "ff7eff564655bcf43b9db634d64da2476a7b07132a394298eec4cf4a37de1c06",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--accessible-appearance",
          "exportName": "AccessibleAppearance",
          "name": "Accessible Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonAppearanceAccessible.stories.tsx",
          "description": "Appearance variants with isAccessible set, showing more contrasting colors when checked. The primary variant uses the same colors, but with an inset stroke for the checked state.\n\nThis approach is available for when the icon is not used to differentiate checked vs. unchecked states.",
          "sourcePath": "source/examples/components-button-togglebutton--accessible-appearance.tsx",
          "sha256": "6c0a6f05bec86d1aee54838f40543c5a59776d394986d1b4a35f55a546de1170",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonAppearance.stories.tsx",
          "description": "- `(undefined)`: the toggle button appears with the default style\n- `primary`: emphasizes the toggle button as a primary action.\n- `outline`: removes background styling.\n- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n- `transparent`: removes background and border styling.\n",
          "sourcePath": "source/examples/components-button-togglebutton--appearance.tsx",
          "sha256": "664345f41aa58d7254f37e216758bf47d8a5ebe59cf80d2882898f38f02ac18c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--checked",
          "exportName": "Checked",
          "name": "Checked",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonChecked.stories.tsx",
          "description": "A toggle button can be checked or unchecked. Unchecked is default.\n      If a checked value is given, the button is 'controlled' and will only change state when the\n      props value changes.",
          "sourcePath": "source/examples/components-button-togglebutton--checked.tsx",
          "sha256": "a964f2775399c26d2e6caf0b8af3f1fdb5e3ac23d0c0879c2dbc3726bc0ce97a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--disabled",
          "exportName": "Disabled",
          "name": "Disabled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonDisabled.stories.tsx",
          "description": "A toggle button can be `disabled` or `disabledFocusable`.\n              `disabledFocusable` is used in scenarios where it is important to keep a consistent tab order\n              for screen reader and keyboard users. The primary example of this pattern is when\n              the disabled toggle button is in a menu or a commandbar and is seldom used for standalone buttons.",
          "sourcePath": "source/examples/components-button-togglebutton--disabled.tsx",
          "sha256": "2468894052dc6a740f01871ea71cac81ddc05a97e667e37d53ae6dd28665b97a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonIcon.stories.tsx",
          "description": "The ToggleButton has an `icon` slot that, if specified, renders an icon either `before` or `after` the children, as specified by the `iconPosition` prop.",
          "sourcePath": "source/examples/components-button-togglebutton--icon.tsx",
          "sha256": "235bca250200238186a33f59e7685111c278cc8f3ab01071c4b043813b77cf55",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--shape",
          "exportName": "Shape",
          "name": "Shape",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonShape.stories.tsx",
          "description": "A toggle button can be rounded, circular, or square.",
          "sourcePath": "source/examples/components-button-togglebutton--shape.tsx",
          "sha256": "00d87988bb80cecd263aa7b3e802a3f42837b42886ad386245f61209d2033c33",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonSize.stories.tsx",
          "description": "A toggle button supports `small`, `medium` and `large` size. Default size is `medium`.",
          "sourcePath": "source/examples/components-button-togglebutton--size.tsx",
          "sha256": "087997df45299a34e0b39d864fee662a891c63d0d672a96d8975927fdf41cf3b",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-button-togglebutton--with-long-text",
          "exportName": "WithLongText",
          "name": "With Long Text",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-button/stories/src/ToggleButton/ToggleButtonWithLongText.stories.tsx",
          "description": "Text wraps after it hits the max width of the component.",
          "sourcePath": "source/examples/components-button-togglebutton--with-long-text.tsx",
          "sha256": "3d8ec3dab2497b3d0fba499afc43e26dbaf4b0674485585a7e0492afcdc885af",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "ToggleButton",
          "kind": "component",
          "propsType": "ToggleButtonProps",
          "description": "",
          "props": [
            {
              "name": "appearance",
              "type": "\"outline\" | \"subtle\" | \"secondary\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": "A button can have its content and borders styled for greater emphasis or to be subtle.\n- 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n- 'primary': Emphasizes the button as a primary action.\n- 'outline': Removes background styling.\n- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n- 'transparent': Removes background and border styling.",
              "defaultValue": "'secondary'"
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checked",
              "type": "boolean",
              "required": false,
              "description": "Defines the controlled checked state of the `ToggleButton`.\nIf passed, `ToggleButton` ignores the `defaultChecked` property.\nThis should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\ncorrect value based on handling `onClick` events and re-rendering.",
              "defaultValue": "false"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultChecked",
              "type": "boolean",
              "required": false,
              "description": "Defines whether the `ToggleButton` is initially in a checked state or not when rendered.",
              "defaultValue": "false"
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "iconPosition",
              "type": "\"before\" | \"after\"",
              "required": false,
              "description": "A button can format its icon to appear before or after its content.",
              "defaultValue": "'before'"
            },
            {
              "name": "isAccessible",
              "type": "boolean",
              "required": false,
              "description": "Defines whether the `ToggleButton` should use the alternate selected styles that have adequate contrast with the rest style",
              "defaultValue": "false"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "shape",
              "type": "\"circular\" | \"rounded\" | \"square\"",
              "required": false,
              "description": "A button can be rounded, circular, or square.",
              "defaultValue": "'circular'"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-button-togglebutton--default",
      "htmlPath": "components/ToggleButton/",
      "markdownPath": "components/ToggleButton.md"
    },
    {
      "id": "to-mount-node-props",
      "title": "toMountNodeProps",
      "summary": "Utility function that normalizes Portal mount node properties.",
      "kind": "components",
      "route": "components/ToMountNodeProps",
      "label": "toMountNodeProps",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/to-mount-node-props/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/ToMountNodeProps.md",
      "examples": [
        {
          "id": "components-portal-tomountnodeprops--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-portal-tomountnodeprops--default.tsx",
          "sha256": "0b162deb86f39bad0c39d8ec8b1820171e76e2028c31d82baebe65d2c133480a",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "toMountNodeProps",
          "kind": "function",
          "description": "The function that normalizes the `mountNode` prop into an object with element and className props.",
          "signatures": [
            "(mountNode: PortalProps[\"mountNode\"]): { element?: HTMLElement | null; className?: string; }"
          ]
        }
      ],
      "defaultExampleId": "components-portal-tomountnodeprops--default",
      "htmlPath": "components/ToMountNodeProps/",
      "markdownPath": "components/ToMountNodeProps.md"
    },
    {
      "id": "toolbar",
      "title": "Toolbar",
      "summary": "A toolbar gives access to frequently used actions related to someone’s current view or task, like text formatting in an editor.",
      "kind": "components",
      "route": "components/Toolbar",
      "label": "Toolbar",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=78568-197710"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/toolbar/usage"
        }
      ],
      "aliases": [
        "/toolbar/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Toolbar.md",
      "examples": [
        {
          "id": "components-toolbar--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Toolbar.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--default.tsx",
          "sha256": "e77cdd2a4eb71aa0234d64bf37232a2a27e9f261cdf1753d00d8fc7fa37b7eea",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--controlled-radio",
          "exportName": "ControlledRadio",
          "name": "Controlled Radio",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadioControlled.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--controlled-radio.tsx",
          "sha256": "8a0e212dead2aac6ae16fe002d9d0a00c4360ee14b6cfeec03e36dd912f41c55",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--controlled-toggle-button",
          "exportName": "ControlledToggleButton",
          "name": "Controlled Toggle Button",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarControlledToggleButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--controlled-toggle-button.tsx",
          "sha256": "16f88e91f4dd0da1bca54faae8dec5430cca252d02922d7128dc3c5c15a7a763",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--far-group",
          "exportName": "FarGroup",
          "name": "Far Group",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarFarGroup.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--far-group.tsx",
          "sha256": "17dec3de86174504f4854364179ef7a0da4ea6fcfc5f93c0adc971576b978361",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--large",
          "exportName": "Large",
          "name": "Large",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarLarge.stories.tsx",
          "description": "The size determines the spacing around the toolbar controls.\nA large sized toolbar uses 4px for vertical padding and 20px for horizontal padding.",
          "sourcePath": "source/examples/components-toolbar--large.tsx",
          "sha256": "e28e658dbafd7d7629b22234a998bdab50282779657b3e06d4088de92fcb8b15",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--medium",
          "exportName": "Medium",
          "name": "Medium",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarMedium.stories.tsx",
          "description": "The size determines the spacing around the toolbar controls.\nA medium sized toolbar uses 4px for vertical padding and 8px for horizontal padding.",
          "sourcePath": "source/examples/components-toolbar--medium.tsx",
          "sha256": "70a16470f821e79f1fdc5bd34af9533c6d423b42c90fb35ddf03e60ead6c747a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--overflow-items",
          "exportName": "OverflowItems",
          "name": "Overflow Items",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarOverflow.stories.tsx",
          "description": "This example uses the\n<a href=\"\" data-sb-kind=\"components-overflow\">Overflow component and utilities</a>,\nPlease refer to the documentation to achieve more complex scenarios.",
          "sourcePath": "source/examples/components-toolbar--overflow-items.tsx",
          "sha256": "8631c423fd97d515a8492f5a1384deb122171fb82237751e578988da080ba3ef",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--radio",
          "exportName": "Radio",
          "name": "Radio",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarRadio.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--radio.tsx",
          "sha256": "a45fed86dbe622a6987dc8de22d7cc23334154e4db548cd5ad1ae89679c69534",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--small",
          "exportName": "Small",
          "name": "Small",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSmall.stories.tsx",
          "description": "The size determines the spacing around the toolbar controls.\nA small sized toolbar has no vertical padding and uses 4px for horizontal padding.",
          "sourcePath": "source/examples/components-toolbar--small.tsx",
          "sha256": "7aa0db3e21fc88002ef71104f155bb3faaa7c34c873f109c82f3ba1e96ff635b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--subtle",
          "exportName": "Subtle",
          "name": "Subtle",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarSubtle.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--subtle.tsx",
          "sha256": "6f0b2c293986f2053f83b58300248a3ca6df032be95656f2605e9088f285f11d",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--transparent",
          "exportName": "Transparent",
          "name": "Transparent",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarTransparent.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--transparent.tsx",
          "sha256": "86d841c7b2ada668ee1e0dfca6327963aa8ef7a987f3219756184c0a7bc0cdf0",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--vertical",
          "exportName": "Vertical",
          "name": "Vertical",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVertical.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--vertical.tsx",
          "sha256": "7145a815eaef35e0a4b3f47856b7a65b3e3be52243fe3653b34b5e04c768a081",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--vertical-button",
          "exportName": "VerticalButton",
          "name": "Vertical Button",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarVerticalButton.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--vertical-button.tsx",
          "sha256": "221d1b3f81d1e8277ec0accf90c673ecfa172780ff1e6bbdb67b4a3fc24a07a5",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--with-popover",
          "exportName": "WithPopover",
          "name": "With Popover",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithPopover.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--with-popover.tsx",
          "sha256": "e9459cffb7c15198d1778ce79861e5cf90d1b84cd8d7ed383e7e9539e7a33706",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-toolbar--with-tooltip",
          "exportName": "WithTooltip",
          "name": "With Tooltip",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-toolbar/stories/src/Toolbar/ToolbarWithTooltip.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-toolbar--with-tooltip.tsx",
          "sha256": "3fa54b0d8f21efdfae1aa61aeddd85d19efa360ee38fddae2b722060905cadbe",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Toolbar",
          "kind": "component",
          "propsType": "ToolbarProps",
          "description": "Toolbar component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Map of all checked values"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultCheckedValues",
              "type": "Record<string, string[]>",
              "required": false,
              "description": "Default values to be checked on mount"
            },
            {
              "name": "onCheckedValueChange",
              "type": "((e: ToolbarCheckedValueChangeEvent, data: ToolbarCheckedValueChangeData) => void)",
              "required": false,
              "description": "Callback when checked items change for value with a name"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "Toolbar can have small or medium size",
              "defaultValue": "medium"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "Toolbar can be vertical styled",
              "defaultValue": "false"
            }
          ]
        },
        {
          "name": "ToolbarButton",
          "kind": "component",
          "propsType": "ToolbarButtonProps",
          "description": "ToolbarButton component is a Button to be used inside Toolbar\nwhich will respect toolbar props such as `size`",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToolbarDivider",
          "kind": "component",
          "propsType": "ToolbarDividerProps",
          "description": "ToolbarDivider component",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "vertical",
              "type": "boolean",
              "required": false,
              "description": "A divider can be horizontal or vertical (default).",
              "defaultValue": "true"
            },
            {
              "name": "wrapper",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Wrapper for content when presented."
            }
          ]
        },
        {
          "name": "ToolbarGroup",
          "kind": "component",
          "propsType": "ToolbarGroupProps",
          "description": "ToolbarGroup component is a Button to be used inside Toolbar\nwhich will respect toolbar props such as `size`",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToolbarRadioButton",
          "kind": "component",
          "propsType": "ToolbarRadioButtonProps",
          "description": "ToolbarRadioButton component",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToolbarRadioGroup",
          "kind": "component",
          "propsType": "ToolbarRadioGroupProps",
          "description": "ToolbarRadioGroup component is a Button to be used inside Toolbar\nwhich will respect toolbar props such as `size`",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "ToolbarToggleButton",
          "kind": "component",
          "propsType": "ToolbarToggleButtonProps",
          "description": "ToolbarToggleButton component",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"primary\" | \"transparent\"",
              "required": false,
              "description": ""
            },
            {
              "name": "as",
              "type": "\"a\" | \"button\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "disabled",
              "type": "boolean",
              "required": false,
              "description": "A button can show that it cannot be interacted with.",
              "defaultValue": "false"
            },
            {
              "name": "disabledFocusable",
              "type": "boolean",
              "required": false,
              "description": "When set, allows the button to be focusable even when it has been disabled.\nThis is used in scenarios where it is important to keep a consistent tab order\nfor screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\nWhen set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\nis important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\npattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.",
              "defaultValue": "false\nfalse"
            },
            {
              "name": "icon",
              "type": "WithSlotShorthandValue<{ as?: \"span\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, \"ref\"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon that renders either before or after the `children` as specified by the `iconPosition` prop."
            },
            {
              "name": "name",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "ref",
              "type": "Ref<HTMLAnchorElement | HTMLButtonElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\" | \"large\"",
              "required": false,
              "description": "A button supports different sizes.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | (readonly string[] & string)",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-toolbar--default",
      "htmlPath": "components/Toolbar/",
      "markdownPath": "components/Toolbar.md"
    },
    {
      "id": "tooltip",
      "title": "Tooltip",
      "summary": "A tooltip provides supplemental, contextual information elevated near its target component. Tooltips should be used to provide helpful but non-essential, plaintext information.",
      "kind": "components",
      "route": "components/Tooltip",
      "label": "Tooltip",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=168532-852"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tooltip/usage"
        }
      ],
      "aliases": [
        "/tooltip/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Tooltip.md",
      "examples": [
        {
          "id": "components-tooltip--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Tooltip.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tooltip--default.tsx",
          "sha256": "cdf10e6dafcaca68d6d83e42d8aedd0cc91705a756e83c55a74a93d0392f0720",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--controlled",
          "exportName": "Controlled",
          "name": "Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipControlled.stories.tsx",
          "description": "The visibility of the tooltip can be controlled using the `visible` and `onVisibleChange` props.\n        <br />\n        In this example, the tooltip will show on hover or focus _only if_ the checkbox is checked.",
          "sourcePath": "source/examples/components-tooltip--controlled.tsx",
          "sha256": "ff9649d3d119fdf74142b3696145503b99b7c3c8e523e1d53065ff86ca5f34cd",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tooltip--custom-mount",
          "exportName": "CustomMount",
          "name": "Custom Mount",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipCustomMount.stories.tsx",
          "description": "Tooltips are rendered in a React Portal. By default that Portal is the outermost div.\n      A custom `mountNode` can be provided in the case that the tooltip needs to be rendered elsewhere.",
          "sourcePath": "source/examples/components-tooltip--custom-mount.tsx",
          "sha256": "942c70ee0d95bcdf580f1b8b3aab1be1e0f310c7c4093e7b14d74abd943e82c1",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--icon",
          "exportName": "Icon",
          "name": "Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipIcon.stories.tsx",
          "description": "When tooltips are attached to icons, they should use the InfoLabel control to be accessible. Tooltips should not be attached directly to static elements like icons, and nor should static elements be given a tabindex.",
          "sourcePath": "source/examples/components-tooltip--icon.tsx",
          "sha256": "e66374940e6eb2100adf5441f573cab87b914ca52f645d6b6567b11a3ee28e94",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tooltip--inverted",
          "exportName": "Inverted",
          "name": "Appearance: inverted",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipInverted.stories.tsx",
          "description": "The `appearance` prop can be set to `inverted` to use the theme's inverted colors.",
          "sourcePath": "source/examples/components-tooltip--inverted.tsx",
          "sha256": "1b21eed88479511432171a337dbfe331d281fa4ad285ad0b68e6896d45b1b1a4",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--overflow-hidden",
          "exportName": "OverflowHidden",
          "name": "Overflow Hidden",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipOverflowHidden.stories.tsx",
          "description": "When a tooltip trigger scrolls out of an overflow container, the tooltip should hide instead of rendering outside the clipped boundary.",
          "sourcePath": "source/examples/components-tooltip--overflow-hidden.tsx",
          "sha256": "51a784207b56d86299c0fe2c2562fc882d35a27ba9df4388c767c47a6b6bf3b5",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tooltip--positioning",
          "exportName": "Positioning",
          "name": "Positioning",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipPositioning.stories.tsx",
          "description": "The positioning attribute can be used to change the relative placement of the tooltip to its anchor.\n        <br />\n        Hover or focus the buttons in the example to see the tooltip's placement.",
          "sourcePath": "source/examples/components-tooltip--positioning.tsx",
          "sha256": "84c4f4e582087f82ccdbb384b459c061f85c8e504981c52410a239af39894d48",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--relationship-description",
          "exportName": "RelationshipDescription",
          "name": "Relationship: description",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipRelationshipDescription.stories.tsx",
          "description": "A tooltip can be used as the description of its trigger. For example, this is used for controls that have\n        a visible label, but the tooltip provides additional descriptive information.\n        <br />\n        The tooltip sets itself as the trigger's `aria-describedby`, so the tooltip is accessible to screen readers\n        and other assistive technology.",
          "sourcePath": "source/examples/components-tooltip--relationship-description.tsx",
          "sha256": "b559e8d148e6ff1330f48e124d157efe8e064b9ff289cf735eac2cc8817340da",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tooltip--relationship-label",
          "exportName": "RelationshipLabel",
          "name": "Relationship: label",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipRelationshipLabel.stories.tsx",
          "description": "A tooltip can be used as the label of its trigger. For example, a label tooltip can be used for buttons\n        that have only an icon and no visible label text.\n        <br />\n        The tooltip sets its `content` as the trigger's `aria-label`, so the tooltip is accessible to screen\n        readers and other assistive technology.",
          "sourcePath": "source/examples/components-tooltip--relationship-label.tsx",
          "sha256": "5fae82985b0b89cf8c309a9da2ab2e3079693e805b95b01a55b5897d3a16dfbf",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--styled",
          "exportName": "Styled",
          "name": "Styled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipStyled.stories.tsx",
          "description": "To style a tooltip, classNames must be passed through the content slot.",
          "sourcePath": "source/examples/components-tooltip--styled.tsx",
          "sha256": "986a006e8db067212fd1257d4a1b39998d4482effa8134f81225af3a5f59ebf6",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--target",
          "exportName": "Target",
          "name": "Target",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipTarget.stories.tsx",
          "description": "The tooltip can be placed relative to a custom element using `positioning.target`. In this example, the\n        tooltip points to the icon inside the button, but it could point to any element.",
          "sourcePath": "source/examples/components-tooltip--target.tsx",
          "sha256": "906df6877a44d240b7a42dc98828b922e98e90a81dbc4400479541537cc50594",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tooltip--with-arrow",
          "exportName": "WithArrow",
          "name": "With Arrow",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipWithArrow.stories.tsx",
          "description": "The `withArrow` prop causes the tooltip to have an arrow pointing to its target.",
          "sourcePath": "source/examples/components-tooltip--with-arrow.tsx",
          "sha256": "c8c6d5839e2ace0b5d190d867fb6b1491bed7055efd6863083f6a5cfa9c80313",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [
        "Storybook-only layout decorators are omitted. Examples use the documentation preview spacing instead."
      ],
      "singlePreview": false,
      "api": [
        {
          "name": "Tooltip",
          "kind": "component",
          "propsType": "TooltipProps",
          "description": "A tooltip provides light weight contextual information on top of its target element.",
          "props": [
            {
              "name": "appearance",
              "type": "\"inverted\" | \"normal\"",
              "required": false,
              "description": "The tooltip's visual appearance.\n* `normal` - Uses the theme's background and text colors.\n* `inverted` - Higher contrast variant that uses the theme's inverted colors.",
              "defaultValue": "normal"
            },
            {
              "name": "children",
              "type": "ReactElement<any, string | JSXElementConstructor<any>> | ((props: TooltipTriggerProps) => ReactElement<any, string | JSXElementConstructor<any>> | null) | null",
              "required": false,
              "description": ""
            },
            {
              "name": "content",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\" | undefined; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined; }, \"children\"> & { children?: any; }> | null>",
              "required": true,
              "description": "The text or JSX content of the tooltip."
            },
            {
              "name": "hideDelay",
              "type": "number",
              "required": false,
              "description": "Delay before the tooltip is hidden, in milliseconds.",
              "defaultValue": "250"
            },
            {
              "name": "mountNode",
              "type": "HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined",
              "required": false,
              "description": "Where the portal children are mounted on DOM",
              "defaultValue": "a new element on document.body without any styling"
            },
            {
              "name": "onVisibleChange",
              "type": "((event: PointerEvent<HTMLElement> | FocusEvent<HTMLElement, Element>, data: OnVisibleChangeData) => void)",
              "required": false,
              "description": "Notification when the visibility of the tooltip is changing.\n\n**Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on\nthe document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed."
            },
            {
              "name": "positioning",
              "type": "PositioningShorthand",
              "required": false,
              "description": "Configure the positioning of the tooltip",
              "defaultValue": "above"
            },
            {
              "name": "relationship",
              "type": "\"label\" | \"description\" | \"inaccessible\"",
              "required": true,
              "description": "(Required) Specifies whether this tooltip is acting as the description or label of its trigger element.\n\n* `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons\n   displaying only an icon, for example.\n* `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.\n* `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to\n  screen readers, and should only be used if the tooltip's text is available by some other means."
            },
            {
              "name": "showDelay",
              "type": "number",
              "required": false,
              "description": "Delay before the tooltip is shown, in milliseconds.",
              "defaultValue": "250"
            },
            {
              "name": "visible",
              "type": "boolean",
              "required": false,
              "description": "Control the tooltip's visibility programatically.\n\nThis can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.\n\nIf not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the\ntrigger (child) element.",
              "defaultValue": "false"
            },
            {
              "name": "withArrow",
              "type": "boolean",
              "required": false,
              "description": "Render an arrow pointing to the target element",
              "defaultValue": "false"
            }
          ]
        }
      ],
      "defaultExampleId": "components-tooltip--default",
      "htmlPath": "components/Tooltip/",
      "markdownPath": "components/Tooltip.md"
    },
    {
      "id": "tree-item",
      "title": "Tree",
      "summary": "A tree is used to display a hierarchical view of nested data. It's useful for representing a menu structure, folder hierarchy, or nested categories at a glance.",
      "kind": "components",
      "route": "components/Tree",
      "label": "Tree",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=166093-119814"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/tree/usage"
        }
      ],
      "aliases": [
        "/tree-item/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/Tree.md",
      "examples": [
        {
          "id": "components-tree--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/components/Tree.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-tree--default.tsx",
          "sha256": "4e1c44e7a42a28d4dd815b9771a0f66e940d4d4a47fe0a42f67624ae396f8f1f",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--actions",
          "exportName": "Actions",
          "name": "Actions",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeActions.stories.tsx",
          "description": "\nIn addition to `aside` slot, both tree item layouts support `actions` slot that can be used for tasks such as edit, rename, or triggering a menu.\n`actions` and `aside` slots are positioned on the exact same spot, so they won't be visible at the same time. `aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active (by hovering or by navigating to it). `actions` slot supports a `visible` prop to force visibility of the actions.\n\nThe `actions` slot has a `role=\"toolbar\"` and ensures proper horizontal navigation with the keyboard by using [`useArrowNavigationGroup`](https://react.fluentui.dev/?path=/docs/utilities-focus-management-usearrownavigationgroup--default).\n\n> ⚠️ Although `actions` are easy to navigate, they're not an expected pattern according to [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).providing a context menu with the same functionalities as the actions is recommended to ensure your tree item is accessible.\n\nIn the example below, we compose on top of `TreeItem` component to include both a context menu and actions that provide the same amount of functionalities. We also provide an `aria-description` to the tree item to indicate that it has actions. This is a new behavior that the user might not be aware of, so you might need to explain somewhere else in the UI what does having actions refers to.\n\n> ⚠️ Don't forget to add a proper description to `TreeItem` to ensure screen readers have enough information to understand the context\n\n> ⚠️ Actions are still experimental and user experience might change in the future.\n",
          "sourcePath": "source/examples/components-tree--actions.tsx",
          "sha256": "4ffe47e46d857f1e54f06799817eb8bf818396d7862885cccb9aa16ea1b505fb",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--appearance",
          "exportName": "Appearance",
          "name": "Appearance",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeAppearance.stories.tsx",
          "description": "\nA tree can have the following `appearance` variants:\n- `subtle`: the default appearance.\n- `subtle-alpha`: minimizes emphasis on hovered or focused states.\n- `transparent`: no background color.\n\nBoth `TreeItemLayout` and `TreeItemPersonaLayout` will respond to the appearance variants.\n      ",
          "sourcePath": "source/examples/components-tree--appearance.tsx",
          "sha256": "bbb2dd84fa5e04bf314769cc141f993645bcfcff699ee08d684260fba52c4660",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--aside",
          "exportName": "Aside",
          "name": "Aside",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeAside.stories.tsx",
          "description": "\nBoth tree item layouts supports `aside` content that is displayed on the right side of a tree item. It can be used to display additional information, such as a badge with notification count or an icon indicating importance.\n      ",
          "sourcePath": "source/examples/components-tree--aside.tsx",
          "sha256": "a4771c97c2e0a84b5475993f22b5721a41ebcac2eee8a6a22c9bb3278345ef04",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--customizing-interaction",
          "exportName": "CustomizingInteraction",
          "name": "Customizing Interaction",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeCustomizingInteraction.stories.tsx",
          "description": "\nBy default, every expandable TreeItem responds to clicks on both content and the expand/collapse icon. To handle these separately, listen for the `onOpenChange` event in the `Tree` component. You can check the event type to determine whether the content or the icon was clicked, allowing you to override the default behavior.\n      ",
          "sourcePath": "source/examples/components-tree--customizing-interaction.tsx",
          "sha256": "da51e32c4844b9954130cb8da84418e023c255853347a05d353af970beb88986",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--default-open",
          "exportName": "DefaultOpen",
          "name": "Default Open",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeDefaultOpen.stories.tsx",
          "description": "\nUse the `defaultOpenItems` prop in the `Tree` component to set the default open or closed state for expandable tree item components. It takes an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) (like an array or a set) of open IDs, opening only the `TreeItem` components with those IDs on initial render, while all others are closed.\n      ",
          "sourcePath": "source/examples/components-tree--default-open.tsx",
          "sha256": "cca635b77f0acbdcc58bd3872f4b3ab7bd1507075d5a58bfccb672b8e221e925",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--drag-and-drop",
          "exportName": "DragAndDrop",
          "name": "Drag And Drop",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeDragAndDrop.stories.tsx",
          "description": "The tree component **does not** offer built-in drag-and-drop functionality. Yet, it's been designed with adaptability in mind, allowing for easy integration with third-party libraries to fulfill this need.\n\nIn this example, the tree component is integrated with `@dnd-kit` to enable drag-and-drop behavior within the tree. A few key steps are involved to achieve this:\n\n**DndContext** and **SortableContext** from `@dnd-kit` set up the necessary environment for drag-and-drop throughout the tree. Following that, **SortableTreeItem** is a component that wraps `TreeItem`, leveraging the **useSortable** hook to add drag-and-drop capabilities. Lastly, the **handleDragEnd** function ensures items are rearranged correctly after dragging.\n\nBy adopting this approach, users can easily drag and drop tree items, rearranging them as desired. The `dnd-kit` also supports virtualization. For an in-depth look and further customization options, check the [dnd-kit's documentation](https://dndkit.com/).",
          "sourcePath": "source/examples/components-tree--drag-and-drop.tsx",
          "sha256": "94c6f8ac9cdd711d95ffff13cbe266a576d844b6cfabcd3dce1da86c8a635c6a",
          "dependencies": [
            "@coreai-ds/react-components",
            "@dnd-kit/core",
            "@dnd-kit/sortable",
            "@dnd-kit/utilities",
            "react"
          ]
        },
        {
          "id": "components-tree--expand-icon",
          "exportName": "ExpandIcon",
          "name": "Expand Icon",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeExpandIcon.stories.tsx",
          "description": "Both tree item layouts can have a custom expand/collapse icon.",
          "sourcePath": "source/examples/components-tree--expand-icon.tsx",
          "sha256": "0ff4d07be59f79915b1ded551d3b0d1443e489bf547465034e4c4bea9d9d29be",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--flat-tree",
          "exportName": "FlatTree",
          "name": "Flat Tree",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/FlatTree.stories.tsx",
          "description": "\nThe `FlatTree` component is a simplified version of `Tree`. It enables a more efficient and flexible way to manage tree structures by representing them in a flattened format. Unlike nested trees, flat trees simplify many common tasks such as searching or adding/removing items, and they are essential for supporting features like virtualization.\n\nTo ensure a `FlatTree` works accordingly a few more properties should be provided for each `TreeItem`:\n\n- [`aria-posinset`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset): the position of the treeitem in the current level of the tree.\n- [`aria-setsize`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize): the number of siblings in a level of the tree.\n- [`aria-level`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level): the current level of the treeitem.\n- `parentValue`: the `value` property of the parent item of the current item.\n\n> `FlatTreeItem` component is available to ensure those properties are properly provided (it's equivalent to `TreeItem` but with those properties listed above as required).\n\nAnother limitation of the `FlatTree` is that it becomes the user's responsibility to ensure proper open items are visible,\nSince in a flat structure there's no proper way to assume if an item is visible or not by context.\n\n> Take a look at the [`useHeadlessFlatTree`](#use-headless-flat-tree) hook to delegate the responsibility of filtering visible items and also to ensure proper properties are added to each `TreeItem`.\n\n> If you need to utilize a nested tree with `FlatTree`, simply convert it to the flat format using the `flattenTree` helper.\n      ",
          "sourcePath": "source/examples/components-tree--flat-tree.tsx",
          "sha256": "1d5e69ae968e37ec84d33ef6a46409a50e7f15f7b91ba0e9f66c7a101d987d09",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--icon-before-and-after",
          "exportName": "IconBeforeAndAfter",
          "name": "Icon Before And After",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeIconBeforeAndAfter.stories.tsx",
          "description": "\n`TreeItemLayout` component allows you to add icons before or after the content.",
          "sourcePath": "source/examples/components-tree--icon-before-and-after.tsx",
          "sha256": "8f6c4fe1ac0514f3bcf44ffdd892166fcd3a61c77b1891a2d87d796a21cece80",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--infinite-scrolling",
          "exportName": "InfiniteScrolling",
          "name": "Infinite Scrolling",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeInfiniteScrolling.stories.tsx",
          "description": "\nThis example takes the previous lazy loading concept a step further by adding infinite scrolling. As the user navigates through the tree, additional items are loaded incrementally, enhancing the responsiveness and scalability of the tree.\n      ",
          "sourcePath": "source/examples/components-tree--infinite-scrolling.tsx",
          "sha256": "971b89cbbc6f917c9bb19686ee2200d94cc03a5bb4e54877c82eb55f51d0ceea",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--inline-styling-tree-item-level",
          "exportName": "InlineStylingTreeItemLevel",
          "name": "Inline Styling Tree Item Level",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeInlineStylingTreeItemLevel.stories.tsx",
          "description": "\nThe tree component generates static styles for the first 10 nesting levels (for performance reasons) and automatically falls back to an inline CSS variable for deeper levels, so arbitrarily deep trees indent correctly out of the box. Below is an example of how to apply custom inline styles to create dynamic tree item levels, overriding the default static styles.\n      ",
          "sourcePath": "source/examples/components-tree--inline-styling-tree-item-level.tsx",
          "sha256": "58837277e97f05f66bbd8dd879a4449cd76b1ae89f4a70aad1f340bc71281687",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--layouts",
          "exportName": "Layouts",
          "name": "Layouts",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeLayouts.stories.tsx",
          "description": "\nTree items support two layout components: `TreeItemLayout` and `TreeItemPersonaLayout`. Both of these layouts come with specific sets of properties, making them suitable for different use cases.\n\nPlease refer to the table at the top of this page for a detailed comparison of the properties available for both `TreeItemLayout` and `TreeItemPersonaLayout`. Notably, some properties like `iconBefore`, `iconAfter`, `media`, and `description` are unique to one layout or the other, enabling more specialized customization depending on your needs.\n",
          "sourcePath": "source/examples/components-tree--layouts.tsx",
          "sha256": "6aca71204fc95d5017731f0465f9c86bc5810a056e503684fefcb2f026812956",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--lazy-loading",
          "exportName": "LazyLoading",
          "name": "Lazy Loading",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeLazyLoading.stories.tsx",
          "description": "\nThis example shows lazy loading in a flat tree, where data is loaded on-demand to optimize rendering time and performance. Items are dynamically loaded when necessary.\n      ",
          "sourcePath": "source/examples/components-tree--lazy-loading.tsx",
          "sha256": "ddf014210fa24e9ee106759045352c63d130f732337e42ba188fabc01832b7a4",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--manipulation",
          "exportName": "Manipulation",
          "name": "Manipulation",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeManipulation.stories.tsx",
          "description": "\nWith a flat tree structure, you can easily manipulate the tree and control its state. In the example below, you can add or remove tree items by working with the `parentValue` property, which ensures the correct parent-child relationships within the tree\n\n> ⚠️ When manipulating tree items, ensure that continuity of keyboard navigation is preserved and prevent unexpected focus loss. This example demonstrates a method for maintaining user focus throughout interactions.\n      ",
          "sourcePath": "source/examples/components-tree--manipulation.tsx",
          "sha256": "564cdff356903c404f795552e723c5cff550cab6ac3d7955a43481bb7aac2da2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--motion-custom",
          "exportName": "MotionCustom",
          "name": "Motion Custom",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.stories.tsx",
          "description": "`Tree`'s `collapseMotion` slot can directly take `Collapse` props, such as `duration`, `easing`, `animateOpacity` and others.\n\nThe `collapseMotion` slot also supports the `children` render function, which allows replacing the default `Collapse` with a custom implementation. This story demonstrates the simpler direct prop approach.\n\nNote that `collapseMotion` must be set on each subtree `<Tree>` element — not the root — since the root tree does not animate:\n\n```tsx\n// Don't use collapseMotion on the root tree, which does not animate\n<Tree aria-label=\"...\">\n  <TreeItem itemType=\"branch\">\n    <TreeItemLayout>Branch label</TreeItemLayout>\n    {/* Use collapseMotion on the subtree */}\n    <Tree collapseMotion={{ duration, easing, animateOpacity }}>{/* leaf items */}</Tree>\n  </TreeItem>\n</Tree>\n```\n",
          "sourcePath": "source/examples/components-tree--motion-custom.tsx",
          "sha256": "122454bd3f196469c06c1ed96bf9a98e843463576b4dbc23076592661206b3ae",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--navigation-mode-tree-grid",
          "exportName": "NavigationModeTreeGrid",
          "name": "Navigation Mode Tree Grid",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeNavigationModeTreeGrid.stories.tsx",
          "description": "\nIf `navigationMode` is set to `treegrid`, the navigation pattern changes to allow navigation between tree items and their actions.\n\n1. If the treeitem is a branch and it's not expanded, pressing right arrow key will expand the treeitem.\n2. If the treeitem is a branch and it's expanded, pressing right arrow key will navigate towards the actions of the treeitem.\n3. If focused in the actions, pressing left arrow key will navigate back to the treeitem.\n",
          "sourcePath": "source/examples/components-tree--navigation-mode-tree-grid.tsx",
          "sha256": "7c9ba3d5de3bac3c823cef5d366e63eea1dda6730a4ae55590ac9bce3238566b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--open-item-controlled",
          "exportName": "OpenItemControlled",
          "name": "Open Item Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/OpenItemControlled.stories.tsx",
          "description": "\nYou can also control the open/closed state of a single `TreeItem` component directly. This will override the internal value of `openItems` in favor of the `open` property.\n\n> Note: It's not recommended to use both `openItems` and `open` at the same time, as this can lead to unexpected behavior! Stick to one or the other.\n      ",
          "sourcePath": "source/examples/components-tree--open-item-controlled.tsx",
          "sha256": "8ef988c211b8ae2884d4a8b217ece715ee15fd5b5089b6885bc07d62884adeef",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--open-items-controlled",
          "exportName": "OpenItemsControlled",
          "name": "Open Items Controlled",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/OpenItemsControlled.stories.tsx",
          "description": "\nYou can also control the open/closed state of `TreeItem` components with the Tree component's `openItems` prop and `onOpenChange` callback. `openItems` takes an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) (like an array or a set) of open IDs, and `onOpenChange` updates it as items are opened or closed.\n      ",
          "sourcePath": "source/examples/components-tree--open-items-controlled.tsx",
          "sha256": "d41ba25d0366c329d8fd37a576b368a61c0b1777e7256045348df850795cf145",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--selection",
          "exportName": "Selection",
          "name": "Selection",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeSelection.stories.tsx",
          "description": "\nThe tree component offers selectable functionality in both single and multi-selection modes. You can enable this feature by passing the `selectionMode` prop with either `single` or `multiselect` value.\n\n- `Tree`: In nested tree, you are responsible for controlling the selection state, as it would be difficult to manage the state in an uncontrolled manner without knowing the items upfront.\n- `FlatTree`: In flat tree, you can take advantage of an uncontrolled state for easier management, as the items are known upfront. It is also possible to use a controlled state if you need to manage the selection state externally.\n\nThe selection process works similarly to how open/close state works. Use the `defaultCheckedItems` prop for default selections and the `checkedItems` prop and `onCheckedChange` callback to control the selected items.\n      ",
          "sourcePath": "source/examples/components-tree--selection.tsx",
          "sha256": "768220f82ab8334276b5699969c28330d99f41376c495c51819fd64eba3f4bf0",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--size",
          "exportName": "Size",
          "name": "Size",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/TreeSize.stories.tsx",
          "description": "\nA tree can be displayed in a `small` or `medium` (default) size.\n      ",
          "sourcePath": "source/examples/components-tree--size.tsx",
          "sha256": "078d0ede7de2dda295db8b512c237394e4633737aa42cb5d451cee90afe23cd9",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-tree--use-headless-flat-tree",
          "exportName": "UseHeadlessFlatTree",
          "name": "Use Headless Flat Tree",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/UseHeadlessFlatTree.stories.tsx",
          "description": "\nThe `useHeadlessFlatTree` hook provides all the properties and all the methods required to ensure a proper functioning of a flat tree. It's arguments are:\n\n1. a list of items to be mapped into `TreeItem`\n2. an object with options that allows to control open and checked state\n   * `openItems`, `defaultOpenItems` and `onOpenChange` (controlling open state)\n   * `checkedItems`, `defaultCheckedItems` and `onCheckedChange` (controlling checked state)\n",
          "sourcePath": "source/examples/components-tree--use-headless-flat-tree.tsx",
          "sha256": "85681f53cd50f26adfc870cdff26a7b7afff6336676de3bd8c3698d909a697d1",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "components-tree--virtualization",
          "exportName": "Virtualization",
          "name": "Virtualization",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-tree/stories/src/Tree/Virtualization.stories.tsx",
          "description": "\nA tree **does not** support virtualization by default. To enable it, you'll need to adopt a custom third-party virtualization library.\n\nBy utilizing virtualization, the tree only renders the nodes that are currently visible on the screen. This significantly reduces the number of DOM nodes, leading to quicker interaction times for large trees.\n\nIn this example of a flat tree with `react-window` for virtualization, two main adjustments are necessary:\n\n1. `Tree` component must be recomposed using composition API to use `FixedSizeList` to wrap root content.\n2. Navigation will break as some nodes will not be available on the DOM (since they'll be virtualized), to fix this we'll need to provide a custom navigation handler that will scroll to the correct node before calling the default handler.\n      ",
          "sourcePath": "source/examples/components-tree--virtualization.tsx",
          "sha256": "ec8d5b204a31217c5d77de0103039a694ee03ac216eb87fadac3f68c7362747c",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-jsx-runtime",
            "react",
            "react-window"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [
        {
          "name": "Tree",
          "kind": "component",
          "propsType": "TreeProps",
          "description": "The `Tree` component renders nested items in a hierarchical structure.\nUse it with `TreeItem` component and layouts components `TreeItemLayout` or `TreeItemPersonaLayout`.",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"transparent\" | \"subtle-alpha\"",
              "required": false,
              "description": "A tree item can have various appearances:\n- 'subtle' (default): The default tree item styles.\n- 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n- 'transparent': Removes background color.",
              "defaultValue": "'subtle'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkedItems",
              "type": "Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>",
              "required": false,
              "description": "This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\nControls the state of the checked tree items.\nThese property is ignored for subtrees."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "collapseMotion",
              "type": "PresenceMotionSlotProps<CollapseParams> | null",
              "required": false,
              "description": ""
            },
            {
              "name": "defaultOpenItems",
              "type": "Iterable<TreeItemValue>",
              "required": false,
              "description": "This refers to a list of ids of default opened items.\nThis property is ignored for subtrees."
            },
            {
              "name": "navigationMode",
              "type": "\"tree\" | \"treegrid\"",
              "required": false,
              "description": "Indicates how navigation between a treeitem and its actions work\n- 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n- 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem",
              "defaultValue": "'tree'"
            },
            {
              "name": "onCheckedChange",
              "type": "((event: ChangeEvent<HTMLElement>, data: TreeCheckedChangeData) => void)",
              "required": false,
              "description": "Callback fired when the component changes value from checked state.\nThese property is ignored for subtrees."
            },
            {
              "name": "onNavigation",
              "type": "((event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement, MouseEvent>, data: TreeNavigationDataParam) => void)",
              "required": false,
              "description": "Callback fired when navigation happens inside the component.\nThese property is ignored for subtrees.\n\nFIXME: This method is not ideal, as navigation should be handled internally by tabster."
            },
            {
              "name": "onOpenChange",
              "type": "((event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement, MouseEvent>, data: TreeOpenChangeData) => void)",
              "required": false,
              "description": "Callback fired when the component changes value from open state.\nThese property is ignored for subtrees."
            },
            {
              "name": "openItems",
              "type": "Iterable<TreeItemValue>",
              "required": false,
              "description": "This refers to a list of ids of opened tree items.\nControls the state of the open tree items.\nThese property is ignored for subtrees."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectionMode",
              "type": "\"multiselect\" | \"single\"",
              "required": false,
              "description": "This refers to the selection mode of the tree.\n- undefined: No selection can be done.\n- 'single': Only one tree item can be selected, radio buttons are rendered.\n- 'multiselect': Multiple tree items can be selected, checkboxes are rendered.",
              "defaultValue": "undefined"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\"",
              "required": false,
              "description": "Size of the tree item.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "FlatTree",
          "kind": "component",
          "propsType": "FlatTreeProps",
          "description": "The `FlatTree` component is a variation of the `Tree` component that deals with a flattened data structure.\n\nIt should be used on cases where more complex interactions with a Tree is required.\nOn simple scenarios it is advised to simply use a nested structure instead.",
          "props": [
            {
              "name": "appearance",
              "type": "\"subtle\" | \"transparent\" | \"subtle-alpha\"",
              "required": false,
              "description": "A tree item can have various appearances:\n- 'subtle' (default): The default tree item styles.\n- 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n- 'transparent': Removes background color.",
              "defaultValue": "'subtle'"
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "checkedItems",
              "type": "Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>",
              "required": false,
              "description": "This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\nControls the state of the checked tree items.\nThese property is ignored for subtrees."
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "collapseMotion",
              "type": "PresenceMotionSlotProps<CollapseParams> | null",
              "required": false,
              "description": ""
            },
            {
              "name": "navigationMode",
              "type": "\"tree\" | \"treegrid\"",
              "required": false,
              "description": "Indicates how navigation between a treeitem and its actions work\n- 'tree' (default): The default navigation, pressing right arrow key navigates inward the first inner children of a branch treeitem\n- 'treegrid': Pressing right arrow key navigate towards the actions of a treeitem",
              "defaultValue": "'tree'"
            },
            {
              "name": "onCheckedChange",
              "type": "((event: ChangeEvent<HTMLElement>, data: TreeCheckedChangeData) => void)",
              "required": false,
              "description": "Callback fired when the component changes value from checked state.\nThese property is ignored for subtrees."
            },
            {
              "name": "onNavigation",
              "type": "((event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement, MouseEvent>, data: TreeNavigationData_unstable) => void)",
              "required": false,
              "description": "Callback fired when navigation happens inside the component.\nThese property is ignored for subtrees.\n\nFIXME: This method is not ideal, as navigation should be handled internally by tabster."
            },
            {
              "name": "onOpenChange",
              "type": "((event: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement, MouseEvent>, data: TreeOpenChangeData) => void)",
              "required": false,
              "description": "Callback fired when the component changes value from open state.\nThese property is ignored for subtrees."
            },
            {
              "name": "openItems",
              "type": "Iterable<TreeItemValue>",
              "required": false,
              "description": "This refers to a list of ids of opened tree items.\nControls the state of the open tree items.\nThese property is ignored for subtrees."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selectionMode",
              "type": "\"multiselect\" | \"single\"",
              "required": false,
              "description": "This refers to the selection mode of the tree.\n- undefined: No selection can be done.\n- 'single': Only one tree item can be selected, radio buttons are rendered.\n- 'multiselect': Multiple tree items can be selected, checkboxes are rendered.",
              "defaultValue": "undefined"
            },
            {
              "name": "size",
              "type": "\"small\" | \"medium\"",
              "required": false,
              "description": "Size of the tree item.",
              "defaultValue": "'medium'"
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "FlatTreeItem",
          "kind": "component",
          "propsType": "FlatTreeItemProps",
          "description": "The `FlatTreeItem` component represents a single item in a flat tree.",
          "props": [
            {
              "name": "aria-level",
              "type": "number",
              "required": false,
              "description": "Defines the hierarchical level of an element within a structure."
            },
            {
              "name": "aria-posinset",
              "type": "number",
              "required": false,
              "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
            },
            {
              "name": "aria-setsize",
              "type": "number",
              "required": false,
              "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM."
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "itemType",
              "type": "string",
              "required": false,
              "description": "A tree item can be a leaf or a branch"
            },
            {
              "name": "onOpenChange",
              "type": "((e: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement, MouseEvent>, data: TreeItemOpenChangeData) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Whether the tree item is in an open state\n\nThis overrides the open value provided by the root tree,\nand ensure control of the visibility of the tree item per tree item.\n\nNOTE: controlling the open state of a tree item will not affect the open state of its children"
            },
            {
              "name": "parentValue",
              "type": "TreeItemValue",
              "required": false,
              "description": "This property is inferred through context on a nested tree, and required for a flat tree."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "(CSSProperties & { \"--fluent-TreeItem--level\"?: string | number; })",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "string | number",
              "required": false,
              "description": "A tree item should have a well defined value, in case one is not provided by the user by this prop\none will be inferred internally."
            }
          ]
        },
        {
          "name": "TreeItem",
          "kind": "component",
          "propsType": "TreeItemProps",
          "description": "The `TreeItem` component represents a single item in a tree.\nIt expects a certain order of children to work properly: the first child should be the node itself,\nand the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\nThis order follows the same order as document traversal for the TreeWalker API in JavaScript:\nhttps://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\nThe content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\nwhich should be used as a direct child of TreeItem.\n\nWhen a TreeItem has nested child subtree, an expand/collapse control is displayed,\nallowing the user to show or hide the children.",
          "props": [
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "itemType",
              "type": "string",
              "required": false,
              "description": "A tree item can be a leaf or a branch"
            },
            {
              "name": "onOpenChange",
              "type": "((e: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement, MouseEvent>, data: TreeItemOpenChangeData) => void)",
              "required": false,
              "description": ""
            },
            {
              "name": "open",
              "type": "boolean",
              "required": false,
              "description": "Whether the tree item is in an open state\n\nThis overrides the open value provided by the root tree,\nand ensure control of the visibility of the tree item per tree item.\n\nNOTE: controlling the open state of a tree item will not affect the open state of its children"
            },
            {
              "name": "parentValue",
              "type": "TreeItemValue",
              "required": false,
              "description": "This property is inferred through context on a nested tree, and required for a flat tree."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "(CSSProperties & { \"--fluent-TreeItem--level\"?: string | number; })",
              "required": false,
              "description": ""
            },
            {
              "name": "value",
              "type": "TreeItemValue",
              "required": false,
              "description": "A tree item should have a well defined value, in case one is not provided by the user by this prop\none will be inferred internally."
            }
          ]
        },
        {
          "name": "TreeItemLayout",
          "kind": "component",
          "propsType": "TreeItemLayoutProps",
          "description": "The `TreeItemLayout` component is used as a child of `TreeItem` to define the content and layout of a tree item.\nIt provides a consistent visual structure for tree items in a `Tree` component.\nThis component should only be used as a direct child of `TreeItem`.",
          "props": [
            {
              "name": "actions",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; } & { visible?: boolean | undefined; onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData> | undefined; }> | null | undefined",
              "required": false,
              "description": "Actionable elements are normally buttons, menus, or other focusable elements.\nThose elements are only visibly available if the given tree item is currently active.\n\n`actions` and `aside` slots are positioned on the exact same spot,\nso they won't be visible at the same time.\n`aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n\n`actions` slot supports a `visible` prop to force visibility of the actions."
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "aside",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Aside content is normally used to render a badge or other non-actionable content"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Expand icon slot,\nby default renders a chevron icon to indicate opening and closing"
            },
            {
              "name": "iconAfter",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that renders right after main content"
            },
            {
              "name": "iconBefore",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Icon slot that renders right before main content"
            },
            {
              "name": "main",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Content. Children of the root slot are automatically rendered here"
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selector",
              "type": "(Omit<ComponentProps<Partial<CheckboxSlots>, \"input\">, \"defaultChecked\" | \"onChange\" | \"size\" | \"checked\"> & { checked?: boolean | \"mixed\"; children?: undefined; defaultChecked?: boolean | \"mixed\"; labelPosition?: \"before\" | \"after\" | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void) | undefined; shape?: \"circular\" | \"square\" | undefined; size?: \"medium\" | \"large\" | undefined; } & RefAttributes<HTMLInputElement>) | (Omit<ComponentProps<Partial<RadioSlots>, \"input\">, \"onChange\" | \"size\"> & { value?: string | undefined; labelPosition?: \"below\" | \"after\" | undefined; disabled?: boolean | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void) | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        },
        {
          "name": "TreeItemPersonaLayout",
          "kind": "component",
          "propsType": "TreeItemPersonaLayoutProps",
          "description": "The `TreeItemPersonaLayout` component is used as a child of `TreeItem` to display a `TreeItem` with a media (typically an avatar) and a description.\nIt provides a more visually appealing representation of a `TreeItem` and is typically used to display a list of people or topics.\nThis component should only be used as a direct child of `TreeItem`.",
          "props": [
            {
              "name": "actions",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; } & { visible?: boolean | undefined; onVisibilityChange?: EventHandler<TreeItemLayoutActionVisibilityChangeData> | undefined; }> | null | undefined",
              "required": false,
              "description": "Actionable elements are normally buttons, menus, or other focusable elements.\nThose elements are only visibly available if the given tree item is currently active.\n\n`actions` and `aside` slots are positioned on the exact same spot,\nso they won't be visible at the same time.\n`aside` slot is visible by default meanwhile `actions` slot are only visible when the tree item is active.\n\n`actions` slot supports a `visible` prop to force visibility of the actions."
            },
            {
              "name": "as",
              "type": "\"div\"",
              "required": false,
              "description": ""
            },
            {
              "name": "aside",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Aside content is normally used to render a badge or other non-actionable content"
            },
            {
              "name": "children",
              "type": "any",
              "required": false,
              "description": ""
            },
            {
              "name": "className",
              "type": "string",
              "required": false,
              "description": ""
            },
            {
              "name": "description",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Secondary text that describes or complements the content"
            },
            {
              "name": "expandIcon",
              "type": "WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null | undefined",
              "required": false,
              "description": "Expand icon slot,\nby default renders a chevron icon to indicate opening and closing"
            },
            {
              "name": "main",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Content. Children of the root slot are automatically rendered here"
            },
            {
              "name": "media",
              "type": "NonNullable<WithSlotShorthandValue<{ as?: \"div\"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"ref\"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, \"children\"> & { children?: any; }> | null> | undefined",
              "required": false,
              "description": "Avatar to display."
            },
            {
              "name": "ref",
              "type": "Ref<HTMLDivElement>",
              "required": false,
              "description": ""
            },
            {
              "name": "selector",
              "type": "(Omit<ComponentProps<Partial<CheckboxSlots>, \"input\">, \"defaultChecked\" | \"onChange\" | \"size\" | \"checked\"> & { checked?: boolean | \"mixed\"; children?: undefined; defaultChecked?: boolean | \"mixed\"; labelPosition?: \"before\" | \"after\" | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void) | undefined; shape?: \"circular\" | \"square\" | undefined; size?: \"medium\" | \"large\" | undefined; } & RefAttributes<HTMLInputElement>) | (Omit<ComponentProps<Partial<RadioSlots>, \"input\">, \"onChange\" | \"size\"> & { value?: string | undefined; labelPosition?: \"below\" | \"after\" | undefined; disabled?: boolean | undefined; onChange?: ((ev: ChangeEvent<HTMLInputElement>, data: RadioOnChangeData) => void) | undefined; } & RefAttributes<HTMLInputElement>) | null | undefined",
              "required": false,
              "description": ""
            },
            {
              "name": "style",
              "type": "CSSProperties",
              "required": false,
              "description": ""
            }
          ]
        }
      ],
      "defaultExampleId": "components-tree--default",
      "htmlPath": "components/Tree/",
      "markdownPath": "components/Tree.md"
    },
    {
      "id": "details-list",
      "title": "Details List",
      "summary": "Accessible, responsive, copy-paste starter for details panels with 2 variants.",
      "kind": "templates",
      "route": "templates/DetailsList",
      "label": "Details List",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/details-list/"
      ],
      "legacyIds": [
        "templates-details-list--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/DetailsList.md",
      "examples": [
        {
          "id": "templates-details-list--default",
          "exportName": "Default",
          "name": "Details List",
          "origin": "local",
          "originalSource": "src/stories/templates/DetailsList.stories.tsx",
          "description": "Baseline label/value layout with text values.",
          "sourcePath": "source/examples/templates-details-list--default.tsx",
          "sha256": "192e98b66d36dee4d764083a4b1580419382d8f364c5e180639d42b2a352a899",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "templates-details-list--with-custom-classes",
          "exportName": "WithCustomClasses",
          "name": "With Custom Classes",
          "origin": "local",
          "originalSource": "src/stories/templates/DetailsList.stories.tsx",
          "description": "Uses class name props to arrange details in horizontal rows within grouped card sections.\nThe values can contain interactive content such as links and buttons.",
          "sourcePath": "source/examples/templates-details-list--with-custom-classes.tsx",
          "sha256": "e9ab26746ec8307483bc89b2a6bf267339a4dc18233bc7eca79d34945d0e2675",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "DetailsList.tsx",
          "path": "source/templates/details-list/DetailsList.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-details-list--default",
      "htmlPath": "templates/DetailsList/",
      "markdownPath": "templates/DetailsList.md"
    },
    {
      "id": "empty-state",
      "title": "Empty state",
      "summary": "Empty state templates explain why content is unavailable and guide people toward the next useful action across empty, error, no-permission, and no-result scenarios.",
      "kind": "templates",
      "route": "templates/EmptyState",
      "label": "Empty state",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=435338-91619"
        }
      ],
      "aliases": [
        "/empty-states/",
        "/empty-state/"
      ],
      "legacyIds": [
        "templates-empty-state--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/components/EmptyState.md",
      "examples": [
        {
          "id": "templates-empty-state--default",
          "exportName": "Default",
          "name": "Empty State",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "A compact empty state with a heading, two actions, and a supporting link.",
          "sourcePath": "source/examples/templates-empty-state--default.tsx",
          "sha256": "4470d66bca4be27ccdb99d94591d51f5d9e62dca38efe659fc848c63e38a6b41",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--error-state",
          "exportName": "ErrorState",
          "name": "Error State",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "Error state: data failed to load. Provide a primary retry action so the user\ncan recover in place without reloading the full page.",
          "sourcePath": "source/examples/templates-empty-state--error-state.tsx",
          "sha256": "4c2e27902c7e0b37df2a13e7e982f1650c5d7fc536ad8b3f71e96756337ec961",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--no-permissions",
          "exportName": "NoPermissions",
          "name": "No Permissions",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "No permissions: the signed-in user lacks access to this resource. Offer a\nsecondary request-access action rather than a primary creation action.",
          "sourcePath": "source/examples/templates-empty-state--no-permissions.tsx",
          "sha256": "2c6f5f0c439895bec361b5e2c209f29188c62d906471817ada23d86be4f5b9db",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--no-results",
          "exportName": "NoResults",
          "name": "No Results",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "No results: a search or filter returned zero matches. Inform the user what\nwas searched and suggest how to recover without adding an unnecessary CTA.",
          "sourcePath": "source/examples/templates-empty-state--no-results.tsx",
          "sha256": "9d6ef39b9f983941bf3407512f66e7cf20e61a5e3ad3c6f75672797e8f23a5f3",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--with-action-cards",
          "exportName": "WithActionCards",
          "name": "With Action Cards",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "Uses cards for separate onboarding paths. Each card owns its description and\nactions, while the supporting link remains common to the empty state.",
          "sourcePath": "source/examples/templates-empty-state--with-action-cards.tsx",
          "sha256": "61756049f5811bfa4ba92c128d20a460c53d19f354fe7a61704b7c3ca24142e0",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--with-choice-cards",
          "exportName": "WithChoiceCards",
          "name": "With Choice Cards",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "Uses the cards slot for a responsive group of selectable outcomes. The slot\naccepts complete controls, so product teams own selection state and content.",
          "sourcePath": "source/examples/templates-empty-state--with-choice-cards.tsx",
          "sha256": "b99197fbddc5f850e75f79d0c1342d1addf3be579f7420c343ccf6c54dd7bca1",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--with-detail-cards",
          "exportName": "WithDetailCards",
          "name": "With Detail Cards",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "Uses two equal-width cards with the Details List template for comparing\nBefore and Upsell options, including improvement indicators, before taking action.",
          "sourcePath": "source/examples/templates-empty-state--with-detail-cards.tsx",
          "sha256": "9e87d17862d3820881cf55e4d6b2b12e0a264b3e61013a291a74f71d40a390c2",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--with-illustration",
          "exportName": "WithIllustration",
          "name": "Empty State with Illustration",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "Adds a saved-data Illicon and supporting description to the standard empty-state\nactions and link. The 24-cell grid renders at 120px with the default 5px pitch.",
          "sourcePath": "source/examples/templates-empty-state--with-illustration.tsx",
          "sha256": "e10f7eeb4ac3e9b9a9bead0baefe0627ef75aeadf316a02d7f5039180a88c66b",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        },
        {
          "id": "templates-empty-state--with-metrics",
          "exportName": "WithMetrics",
          "name": "With Metrics",
          "origin": "local",
          "originalSource": "src/stories/templates/EmptyState.stories.tsx",
          "description": "Adds a row of value propositions or metrics while retaining the standard\nmessage, actions, and supporting link.",
          "sourcePath": "source/examples/templates-empty-state--with-metrics.tsx",
          "sha256": "7359312dea4804c3de66c4e0e8d5904960c1e6deae2eff3f7d85eb2f5611f804",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "EmptyState.tsx",
          "path": "source/templates/empty-state/EmptyState.tsx"
        },
        {
          "name": "DetailsList.tsx",
          "path": "source/templates/empty-state/DetailsList.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-empty-state--default",
      "htmlPath": "templates/EmptyState/",
      "markdownPath": "templates/EmptyState.md"
    },
    {
      "id": "filter-bar",
      "title": "Filter bar",
      "summary": "A filter bar combines search and filter controls to help people narrow a data set while keeping active criteria visible and easy to revise.",
      "kind": "templates",
      "route": "templates/FilterableList",
      "label": "Filter bar",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=432751-1312"
        }
      ],
      "aliases": [
        "/filter-bar/"
      ],
      "legacyIds": [
        "templates-filterable-list--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/components/FilterableList.md",
      "examples": [
        {
          "id": "templates-filterable-list--default",
          "exportName": "Default",
          "name": "Filterable List",
          "origin": "local",
          "originalSource": "src/stories/templates/FilterableList.stories.tsx",
          "description": "A browse page with a sticky toolbar (search + multi-select filter dropdowns)\nabove a sortable, single-select DataGrid.",
          "sourcePath": "source/examples/templates-filterable-list--default.tsx",
          "sha256": "b82676ea7ee8deb03eca3f2517e45ea88f9304f34860a1a1a35eb48f1486ca80",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "FilterableList.tsx",
          "path": "source/templates/filter-bar/FilterableList.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-filterable-list--default",
      "htmlPath": "templates/FilterableList/",
      "markdownPath": "templates/FilterableList.md"
    },
    {
      "id": "page-header",
      "title": "Page header",
      "summary": "Figma design reference for a page header with a title, optional description, item counts, and primary or secondary actions.",
      "kind": "templates",
      "route": "templates/PageHeader",
      "label": "Page header",
      "standalone": true,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=433307-80738"
        }
      ],
      "aliases": [
        "/components/page-header/",
        "/page-header/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/PageHeader.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "templates/PageHeader/",
      "markdownPath": "templates/PageHeader.md"
    },
    {
      "id": "react-router-breadcrumb-link",
      "title": "Breadcrumb Link",
      "summary": "CoreAI BreadcrumbButton adapter for React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterBreadcrumbLink",
      "label": "Breadcrumb Link",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-breadcrumb-link/"
      ],
      "legacyIds": [
        "templates-react-router-breadcrumb-link--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterBreadcrumbLink.md",
      "examples": [
        {
          "id": "templates-react-router-breadcrumb-link--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/BreadcrumbLink.stories.tsx",
          "description": "CoreAI BreadcrumbButtons that navigate with React Router.",
          "sourcePath": "source/examples/templates-react-router-breadcrumb-link--default.tsx",
          "sha256": "2e80cef686670c58dc81f5ae31f5d87c3a907133f5bd813ca826bf2cdac6169c",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "BreadcrumbLink.tsx",
          "path": "source/templates/react-router-breadcrumb-link/BreadcrumbLink.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-breadcrumb-link/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-breadcrumb-link--default",
      "htmlPath": "templates/ReactRouterBreadcrumbLink/",
      "markdownPath": "templates/ReactRouterBreadcrumbLink.md"
    },
    {
      "id": "react-router-card-link",
      "title": "Card Link",
      "summary": "CardLink adapter for accessible React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterCardLink",
      "label": "Card Link",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-card-link/"
      ],
      "legacyIds": [
        "templates-react-router-card-link--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterCardLink.md",
      "examples": [
        {
          "id": "templates-react-router-card-link--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/CardLink.stories.tsx",
          "description": "A CardLink that navigates with React Router and exposes link semantics.",
          "sourcePath": "source/examples/templates-react-router-card-link--default.tsx",
          "sha256": "5db39eee33b2d21b31d6918dda9e66ed620a3decf5633c8531e4ff17e0be8b56",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "CardLink.tsx",
          "path": "source/templates/react-router-card-link/CardLink.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-card-link/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-card-link--default",
      "htmlPath": "templates/ReactRouterCardLink/",
      "markdownPath": "templates/ReactRouterCardLink.md"
    },
    {
      "id": "react-router-link",
      "title": "Link",
      "summary": "CoreAI Link adapter for React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterLink",
      "label": "Link",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-link/"
      ],
      "legacyIds": [
        "templates-react-router-link--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterLink.md",
      "examples": [
        {
          "id": "templates-react-router-link--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/Link.stories.tsx",
          "description": "A CoreAI Link that navigates with React Router.",
          "sourcePath": "source/examples/templates-react-router-link--default.tsx",
          "sha256": "625beda6e60ea0ae2677ac20b3193f86e5d1da256dbb597ccbafb4c5f084d601",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "Link.tsx",
          "path": "source/templates/react-router-link/Link.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-link/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-link--default",
      "htmlPath": "templates/ReactRouterLink/",
      "markdownPath": "templates/ReactRouterLink.md"
    },
    {
      "id": "react-router-link-button",
      "title": "Link Button",
      "summary": "Button-styled adapter for React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterLinkButton",
      "label": "Link Button",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-link-button/"
      ],
      "legacyIds": [
        "templates-react-router-link-button--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterLinkButton.md",
      "examples": [
        {
          "id": "templates-react-router-link-button--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/LinkButton.stories.tsx",
          "description": "A CoreAI LinkButton that navigates with React Router.",
          "sourcePath": "source/examples/templates-react-router-link-button--default.tsx",
          "sha256": "1bbfada5eaa1eb8e7828ec953fc3bc72434a924648ee2c0ea3dc2647d0904bf1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "LinkButton.tsx",
          "path": "source/templates/react-router-link-button/LinkButton.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-link-button/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-link-button--default",
      "htmlPath": "templates/ReactRouterLinkButton/",
      "markdownPath": "templates/ReactRouterLinkButton.md"
    },
    {
      "id": "react-router-menu-item-link",
      "title": "Menu Item Link",
      "summary": "CoreAI MenuItemLink adapter for React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterMenuItemLink",
      "label": "Menu Item Link",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-menu-item-link/"
      ],
      "legacyIds": [
        "templates-react-router-menu-item-link--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterMenuItemLink.md",
      "examples": [
        {
          "id": "templates-react-router-menu-item-link--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/MenuItemLink.stories.tsx",
          "description": "CoreAI MenuItemLinks that navigate with React Router.",
          "sourcePath": "source/examples/templates-react-router-menu-item-link--default.tsx",
          "sha256": "4ee9e9b10b66411b1c44af00970be555cbf9c9612992f8536e0d9172968cd184",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "MenuItemLink.tsx",
          "path": "source/templates/react-router-menu-item-link/MenuItemLink.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-menu-item-link/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-menu-item-link--default",
      "htmlPath": "templates/ReactRouterMenuItemLink/",
      "markdownPath": "templates/ReactRouterMenuItemLink.md"
    },
    {
      "id": "react-router-tab-link",
      "title": "Tab Link",
      "summary": "CoreAI Tab adapter for React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterTabLink",
      "label": "Tab Link",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-tab-link/"
      ],
      "legacyIds": [
        "templates-react-router-tab-link--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterTabLink.md",
      "examples": [
        {
          "id": "templates-react-router-tab-link--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/TabLink.stories.tsx",
          "description": "A CoreAI Tab that navigates with React Router.",
          "sourcePath": "source/examples/templates-react-router-tab-link--default.tsx",
          "sha256": "994a9c5b4dc28e9b55405ce278534c456794c3aa2fb36b849bdf8ae62e5941dc",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "TabLink.tsx",
          "path": "source/templates/react-router-tab-link/TabLink.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-tab-link/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-tab-link--default",
      "htmlPath": "templates/ReactRouterTabLink/",
      "markdownPath": "templates/ReactRouterTabLink.md"
    },
    {
      "id": "react-router-tab-link-list",
      "title": "Tab Link List",
      "summary": "Route-aware CoreAI TabList for React Router navigation.",
      "kind": "templates",
      "route": "templates/ReactRouterTabLinkList",
      "label": "Tab Link List",
      "standalone": false,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/react-router-tab-link-list/"
      ],
      "legacyIds": [
        "templates-react-router-tab-link-list--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/templates/ReactRouterTabLinkList.md",
      "examples": [
        {
          "id": "templates-react-router-tab-link-list--default",
          "exportName": "Default",
          "name": "Default",
          "origin": "local",
          "originalSource": "src/stories/templates/react-router/TabLinkList.stories.tsx",
          "description": "Route-relative tabs stay selected as navigation changes, including destinations\nwith a query string. Matching follows the pathname, as React Router's NavLink does.",
          "sourcePath": "source/examples/templates-react-router-tab-link-list--default.tsx",
          "sha256": "cdebc061ddc2ba69eed089290b6317bfafd869645a0df73a0681c94712e0ccb1",
          "dependencies": [
            "@coreai-ds/react-components",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "TabLinkList.tsx",
          "path": "source/templates/react-router-tab-link-list/TabLinkList.tsx"
        },
        {
          "name": "TabLink.tsx",
          "path": "source/templates/react-router-tab-link-list/TabLink.tsx"
        },
        {
          "name": "RouterLinkSlots.tsx",
          "path": "source/templates/react-router-tab-link-list/RouterLinkSlots.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-react-router-tab-link-list--default",
      "htmlPath": "templates/ReactRouterTabLinkList/",
      "markdownPath": "templates/ReactRouterTabLinkList.md"
    },
    {
      "id": "vertical-nav-tabs",
      "title": "Shell and navigation",
      "summary": "Nav provides access to an application’s primary destinations through hierarchical links and categories.",
      "kind": "templates",
      "route": "templates/ShellAndNavigation",
      "label": "Shell and navigation",
      "standalone": false,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=433143-30585"
        },
        {
          "label": "Fluent guidance",
          "url": "https://fluent2.microsoft.design/components/web/react/core/nav/usage"
        }
      ],
      "aliases": [
        "/left-nav/",
        "/vertical-nav-tabs/"
      ],
      "legacyIds": [
        "templates-shell-and-navigation--source-code"
      ],
      "migratedFrom": [],
      "guidanceSource": "content/components/ShellAndNavigation.md",
      "examples": [
        {
          "id": "templates-shell-and-navigation--default",
          "exportName": "Default",
          "name": "Shell and Navigation",
          "origin": "local",
          "originalSource": "src/stories/templates/ShellAndNavigation.stories.tsx",
          "description": "Full-page app shell: transparent header, collapsible sidebar nav, and a\nmain content area.",
          "sourcePath": "source/examples/templates-shell-and-navigation--default.tsx",
          "sha256": "52c022f333976d1a6e98c18a1c7959635b11f8c0f171fc7285adc856a04a2263",
          "dependencies": [
            "@coreai-ds/react-components",
            "@fluentui/react-icons",
            "react",
            "react-router-dom"
          ]
        }
      ],
      "templateSources": [
        {
          "name": "ShellAndNavigation.tsx",
          "path": "source/templates/vertical-nav-tabs/ShellAndNavigation.tsx"
        }
      ],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "defaultExampleId": "templates-shell-and-navigation--default",
      "htmlPath": "templates/ShellAndNavigation/",
      "markdownPath": "templates/ShellAndNavigation.md"
    },
    {
      "id": "top-nav",
      "title": "Top nav",
      "summary": "Top nav anchors the application shell with global navigation and optional breadcrumb, link, and search regions.",
      "kind": "templates",
      "route": "templates/TopNav",
      "label": "Top nav",
      "standalone": true,
      "showInSidebar": true,
      "resources": [
        {
          "label": "Figma component",
          "url": "https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=433307-79538"
        }
      ],
      "aliases": [
        "/components/top-nav/",
        "/top-nav/"
      ],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/components/TopNav.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "templates/TopNav/",
      "markdownPath": "templates/TopNav.md"
    },
    {
      "id": "agent-workflow",
      "title": "Agent workflow",
      "summary": "Find the right CoreAI Markdown page, retrieve only what you need, and verify the result.",
      "kind": "guides",
      "route": "guides/AgentWorkflow",
      "label": "Agent workflow",
      "standalone": true,
      "renderer": "agent-workflow",
      "showInSidebar": false,
      "resources": [],
      "aliases": [],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/guides/AgentWorkflow.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/AgentWorkflow/",
      "markdownPath": "guides/AgentWorkflow.md"
    },
    {
      "id": "use-with-agents",
      "title": "Build with your agent",
      "summary": "Give your coding agent CoreAI guidance, working examples, and accurate APIs with one prompt.",
      "kind": "guides",
      "route": "guides/UseWithAgents",
      "label": "Build with your agent",
      "standalone": true,
      "showInSidebar": false,
      "resources": [
        {
          "label": "Agent documentation index",
          "url": "/llms.txt"
        },
        {
          "label": "Download reusable skill",
          "url": "/source/package/SKILL.md"
        }
      ],
      "aliases": [
        "/mcp-server/",
        "/guides/mcp-setup/"
      ],
      "legacyIds": [
        "docs-mcp-setup--docs"
      ],
      "migratedFrom": [
        "apps/docsite/src/pages/MCPServer.tsx",
        "apps/storybook/src/stories/docs/MCPSetup.mdx"
      ],
      "guidanceSource": "content/guides/UseWithAgents.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/UseWithAgents/",
      "markdownPath": "guides/UseWithAgents.md"
    },
    {
      "id": "forms",
      "title": "Forms",
      "summary": "Find existing field guidance and a complete dialog-with-form example.",
      "kind": "patterns",
      "route": "patterns/Forms",
      "label": "Forms",
      "standalone": true,
      "showInSidebar": false,
      "resources": [],
      "aliases": [],
      "legacyIds": [],
      "migratedFrom": [],
      "guidanceSource": "content/patterns/Forms.md",
      "examples": [
        {
          "id": "components-dialog--with-form",
          "exportName": "WithForm",
          "name": "With Form",
          "origin": "fluent",
          "originalSource": "fluent-stories/packages/react-components/react-dialog/stories/src/Dialog/DialogWithForm.stories.tsx",
          "description": "",
          "sourcePath": "source/examples/components-dialog--with-form.tsx",
          "sha256": "0dab761db51b0c62b4a20d44e0f91bbe56f3af617e53b676b85d35435475824e",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "patterns/Forms/",
      "markdownPath": "patterns/Forms.md"
    },
    {
      "id": "router-link-slots",
      "title": "React Router link slots",
      "summary": "Shared source used by the copy-and-adapt React Router templates.",
      "kind": "guides",
      "route": "guides/RouterLinkSlots",
      "label": "React Router link slots",
      "standalone": true,
      "showInSidebar": false,
      "resources": [],
      "aliases": [],
      "legacyIds": [
        "templates-react-router-router-link-slots--source-code"
      ],
      "migratedFrom": [
        "apps/storybook/src/stories/templates/react-router/RouterLinkSlots.mdx"
      ],
      "guidanceSource": "content/guides/RouterLinkSlots.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/RouterLinkSlots/",
      "markdownPath": "guides/RouterLinkSlots.md"
    },
    {
      "id": "package-skill",
      "title": "Reusable agent skill",
      "summary": "Teach your agent to find CoreAI Markdown guidance quickly in any consuming repository.",
      "kind": "guides",
      "route": "guides/PackageSkill",
      "label": "Reusable agent skill",
      "standalone": true,
      "renderer": "package-skill",
      "showInSidebar": false,
      "resources": [],
      "aliases": [
        "/coreai-skill/",
        "/agent-skill/",
        "/foundational-skill/",
        "/design-md/"
      ],
      "legacyIds": [
        "docs-agent-skill--docs"
      ],
      "migratedFrom": [
        "apps/docsite/src/pages/CoreAISkill.tsx",
        "apps/storybook/src/stories/docs/AgentSkill.mdx",
        "packages/react-components/agent/SKILL.md"
      ],
      "guidanceSource": "content/guides/PackageSkill.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/PackageSkill/",
      "markdownPath": "guides/PackageSkill.md"
    },
    {
      "id": "styling-with-css-modules",
      "title": "Styling with CSS Modules",
      "summary": "Use RendererProvider to scope Griffel/Fluent styles into a CSS cascade `@layer`s so plain CSS/CSS Modules can override CoreAI component styles.",
      "kind": "guides",
      "route": "guides/StylingWithCssModules",
      "label": "Styling with CSS Modules",
      "standalone": true,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/styling-with-css-modules/"
      ],
      "legacyIds": [
        "docs-styling-with-css-modules--docs"
      ],
      "migratedFrom": [
        "apps/storybook/src/stories/docs/StylingWithCssModules.mdx"
      ],
      "guidanceSource": "content/guides/StylingWithCssModules.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/StylingWithCssModules/",
      "markdownPath": "guides/StylingWithCssModules.md"
    },
    {
      "id": "theming",
      "title": "Theming",
      "summary": "Apply CoreAI themes, fonts, defaults, and custom brand colors.",
      "kind": "foundations",
      "route": "foundations/Theming",
      "label": "Theming",
      "standalone": true,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/theming/"
      ],
      "legacyIds": [
        "docs-theming--docs"
      ],
      "migratedFrom": [
        "apps/storybook/src/stories/docs/Theming.mdx"
      ],
      "guidanceSource": "content/foundations/Theming.md",
      "examples": [
        {
          "id": "components-coreaifluentprovider--default-theme",
          "exportName": "DefaultTheme",
          "name": "Default Theme",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "The default CoreAI theme in light and dark modes side by side.",
          "sourcePath": "source/examples/components-coreaifluentprovider--default-theme.tsx",
          "sha256": "863973b267ab8559e9b3434864bf5aeed6f5970d0e5a123fdb0067e0c15fd7f6",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-coreaifluentprovider--azure-brand-theme",
          "exportName": "AzureBrandTheme",
          "name": "Azure Brand Theme",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "Pre-built Azure / Coherence brand themes. These apply the Azure blue brand\nramp while sharing CoreAI's neutral palette, Aptos fonts, and interactive\nbackground tokens.",
          "sourcePath": "source/examples/components-coreaifluentprovider--azure-brand-theme.tsx",
          "sha256": "b30499058d42629f5e5cf1633573f818b793935ba6c0129bfe58238051f92374",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        },
        {
          "id": "components-coreaifluentprovider--custom-brand-theme",
          "exportName": "CustomBrandTheme",
          "name": "Custom Brand Theme",
          "origin": "local",
          "originalSource": "src/stories/components/CoreAIFluentProvider.stories.tsx",
          "description": "Customize the brand colors and feed the resulting theme to a nested\n`CoreAIFluentProvider`. Each provider re-themes only its own subtree, so the\nsurrounding Storybook canvas keeps the toolbar-selected CoreAI theme.",
          "sourcePath": "source/examples/components-coreaifluentprovider--custom-brand-theme.tsx",
          "sha256": "d93047cff7aa7680d2e4cbd679543aab805f50302e55585ebccc2f654c952383",
          "dependencies": [
            "@coreai-ds/react-components",
            "react"
          ]
        }
      ],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "foundations/Theming/",
      "markdownPath": "foundations/Theming.md"
    },
    {
      "id": "variations-from-fluent",
      "title": "Variations from Fluent",
      "summary": "Full inventory of how @coreai-ds/react-components differs from stock Fluent UI v9, by component.",
      "kind": "guides",
      "route": "guides/VariationsFromFluent",
      "label": "Variations from Fluent",
      "standalone": true,
      "showInSidebar": true,
      "resources": [],
      "aliases": [
        "/variations-from-fluent/"
      ],
      "legacyIds": [
        "docs-variations-from-fluent--docs"
      ],
      "migratedFrom": [
        "apps/storybook/src/stories/docs/VariationsFromFluent.mdx"
      ],
      "guidanceSource": "content/guides/VariationsFromFluent.md",
      "examples": [],
      "templateSources": [],
      "notes": [],
      "singlePreview": false,
      "api": [],
      "htmlPath": "guides/VariationsFromFluent/",
      "markdownPath": "guides/VariationsFromFluent.md"
    }
  ]
}